이클립스 SVN 연결 오늘은 이클립스에 설치한 svn을 이용해 코드를 가져와보자! ▼ 이클립스 SVN 설치https://cottoncandysom.tistory.com/196 1) 먼저 이클립스 상단의 Window 메뉴 클릭 -> Show View -> Other 선택 2) SVN Repositories - Open 3) 방식은 2가지인데, - 1 : 빈 공간 우클릭 -> Repository Location 클릭 - 2 : 상단 아이콘 클릭 4) URL에 프로젝트 URL을 입력하고, Browse 버튼을 눌러서 유효한 URL인지 확인한다.그리고 User ID와 PW를 입력하고 Finish 5) 그럼 SVN Repositories 탭에서 프로젝트를 확인해 볼 수 있다! SVN 소스 로컬로 다운..
데이터 객체를 이용한 통신 실제 데이터를 가져와서 가져온 데이터를 화면에 적용하는 통신 방법에 대해 알아보자! 먼저 Outline 탭 하위의 Head 탭을 클릭하면 Submission이 보인다.Submission을 우클릭 -> Submission 추가를 선택! 그럼 아래와 같은 창이 뜨는데,ID : 고유 ID를 의미한다.그리고 submission에서 제일 중요한 부분은그 아래에 있는 Reference / Target / URL Action 이다! Reference : Request 정보. 이미 만들어진 데이터 객체 중 하나를 선택해서 지정!Target : Response에 해당. 직접 입력하는 것이 아니라 실제로 내가 사용할 데이터 객체를만들어서 지정해 주는 것!URL Action : 내가 직접 데..
1) 이클립스 상단 메뉴 Help -> Eclipse Marketplace... 선택 2) svn 검색해서 나오는 Subversive - SVN Team Provider >> Install 3) 전체 선택 4) Confirm 5) Finish 6) 설치가 완료되면 Restart Now를 눌러 재실행한다. 그리고 여기서 또!SVN Connector를 깔아줘야 한다고 함 1) 이클립스 상단 메뉴 Window -> Preferences 선택 2) SVN에서 -> SVN Connector 탭 선택 -> Get Connectors... 선택 근데?오류가 나버림(っ °Д °;)っ Connector discovery completed without finding any connectors. Pl..
회사에서 프로젝트를 위해 환경세팅이 필요한데,또 까먹을 것 같아서 정리ㅎ 아래의 링크 접속 (오라클 홈페이지)https://www.oracle.com/java/technologies/downloads/#java8 원하는 운영체제에 맞게 파일 다운로드!🎈 (오라클 회원가입 되어있어야 설치 가능) 파일을 받아 설치까지 완료되었으면 환경 변수 설정을 해줘야 한다. 내 PC 우클릭 -> 속성 좌측의 정보 -> 고급 시스템 설정 클릭 고급 탭 -> 환경변수 클릭 시스템 변수 쪽에 새로 만들기 버튼 클릭 이름은 JAVA_HOME 으로 작성하고,변수 값에는 jdk 파일 설치한 경로 설정해 준다. 그리고 시스템변수 목록을 보면 Path가 있는데이를 선택하고 편집 버튼 클릭! 환경 변수 편집이 나오면 새로 만..
컴포넌트 제어 컴포넌트는 속성 / 이벤트 / API를 통해 제어가 되고 있다.제어를 하기 위해 가장 먼저 할 일은? 내가 제어할 컴포넌트의 id를 적용하는 것!id 만들 땐 공백 사용 x, 특수문자는 언더바 외에 다른 것은 쓰지 말자! 이렇게 id를 지정해 줘야 해당하는 아이디가 이 페이지에서 전역변수처럼 사용이 된다. $p 객체 사용 id 지정을 했다면API를 사용해 컴포넌트의 설정을 해보자! Script 탭으로 이동한다. 현재 설정하고자 하는 컴포넌트는 날짜를 나타내는 input 창이다.기본으로 오늘 날짜를 띄우고 싶은 상태.이때 웹스퀘어의 유틸성 자원을 이용해 설정해 줄 수 있다. // 오늘날짜 가져오는 함수 // yyyyMMddHHmmss, 패턴 안넣으면 yyyyMMdd임! var cu..
테이블 그리기 테이블(표) 형태를 그리고 싶다면?tableLayout을 사용한다! Palette 뷰어에서 TableLayout을 찾아 클릭해 준다. 그럼 위와 같은 창이 뜨는데,열과 행, 테이블 모양 등을 지정할 수 있다. 테이블을 만들고 난 뒤 상단 메뉴에서 행/열 추가, 삭제 등 기능을 사용할 수 있다. 그리고 각 칸마다 안쪽에 자식노드로 컴포넌트를 넣어줄 수 있다.이때 퀵 툴바를 사용할 수 있는데, 원하는 컴포넌트를 클릭하고 스페이스 바 누르기!(모든 컴포넌트가 다 나오진 않음) 현재 상태에서 웹 브라우저를 실행시키고,웹 페이지 크기를 줄여보면 자식 노드로 들어있는 컴포넌트들이 크기가 변하지 않아이상한 형태로 보이게 된다. 사이즈에 따라 테이블 모양이 바뀌는 형태 > 적응형 UI를 사용해 위 ..
웹스퀘어에서 컴포넌트를 생성하게 되면 크기 조절은 가능하지만 위치 변경은 불가능하다.이 컴포넌트 위치 변경하는 방법을 알아보자! 컴포넌트 사용법 먼저, 웹에서의 CSS 방법은- Static / Relative / Absolute / Fixed / Sticky Position 이 있다.이 중 Static과 Absolute가 가장 많이 쓰인다. Static : 지정된 포지션 없음, 크기만 지정되어서 사용됨, 화면에 그려준 컴포넌트의 순서대로배치하는 방식. 절대적인 좌표값을 가지지 않고 그려진 순서대로(순차적으로) 그려나가는 방법이다.Absolute : 정해진 포지션이 있음. top/left 등과 같이 정해진 포지션이 따라 화면을 배치한다.흔히 말해 절대 좌표값 상단 툴메뉴에서 아래의 드롭다운 버튼을 클릭한..
WebSquare의 컴포넌트 활용법 WebSquare에서는 다양한 컴포넌트를 손쉽게 만들 수 있다.컴포넌트들의 종류와 특징에 대해 간략하게 알아보쟈! 입력 컴포넌트 SearchBox : 창 안에 x 버튼이 있는 input ( x 버튼을 누르면 입력한 내용 사라짐)Secret : 비밀번호 입력과 같은 경우 사용함입력값 자체를 보이지 않게 하기 때문에 input 컴포넌트에 비해 속성 등이 더 적음!InputCalendar : 달력을 통해 날짜 선택 가능속성에서 calendarValueType이 default로 yearMonthDate로 되어있지만, 연월/연단위 등으로 변경 가능하다.Spinner : 숫자의 증감 표시할때 사용Textarea : 여러 줄의 텍스트 입력 시 사용Editor (CKEditor..
컴포넌트 사용법 웹스퀘어에서 컴포넌트를 사용하려면 3가지 방법을 이용하면 된다. 1. 컴포넌트가 지니고 있는 속성2. 이벤트3. API 1. 속성 1) 원하는 컴포넌트 선택 2) 우측을 보면 Property 탭이 있음.Property - 속성탭 선택! 3) 해당하는 컴포넌트의 속성과 적용방법을 볼 수 있다.내용은 마우스오버 (마우스 가져다 대기), 더 자세히 보고 싶다면 F1 웹스퀘어의 컴포넌트는 id 중심이다.그래서 이곳에서 id를 반드시 입력해줘야 사용할 수 있다.설정 후 디자인 탭에서 컴포넌트에 마우스를 가져다 대면 툴팁이 나오는데,▼ 이 툴팁은 상단 버튼을 선택해 표시하거나 숨길 수 있다. property 설정 내용 (간략)initValue : 초기값 설정dataType : 데이터 타입 ..
WebSquare WebSquare란?웹 표준을 준수한 UI 프레임워크.ActiveX를 사용하지 않도고 웹 표준에서 동작할 수 있는 기반의 UI 개발 도구이다. 화면 소스는 xml로 되어있고, 해당하는 xml 파일이 웹 브라우저에서 로딩될 때 웹스퀘어의 엔진을 통해 html 형태로 변경되어브라우저로 표현되는 방식으로 구현된다. 그러나 sp5 버전부터는 xml을 바로 html로 바꾸지 않고,wpack이라는 변환 기술을 거쳐 한 번 더 xml을 경량화해주는 구조를 가지고 있다. 웹 표준이기 때문에 JavaScript나 CSS 등의 기법들을 사용할 수 있다. 웹스퀘어 화면파일 만들기 1) WRE (프로젝트) 하위 > Web 루트 이하에서 생성 및 관리가 필요함.따라서 현재 프로젝트 하위의 WebCont..
오류 내용 A Java Runtime Environment (JRE) or Java Development Kit (JDK) must be available in order to run Websquare.No Java virtual machine was found after searching the following locations 회사에서 나가게 될 프로젝트에서 웹스퀘어를 사용한다고 하여 미리 공부하는 차원에서 파일을 다운받아exe 파일을 실행했더니 발생했다.오류 내용은 jdk를 찾을 수 없다는 내용이었다. 해결 방안 jdk 경로가 잘못 지정되어 발생된 문제였다. 1) 웹스퀘어 다운로드 한 폴더에서 websquare.ini 파일을 찾아 더블클릭 (실행)2) 실행하면 텍스트 파일이 열리는데, 맨 윗..
Axios란?node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트.서버와 통신하기 위해 사용된다. ✅ Axios의 특징HTTP 요청 처리를 한다.Promise 기반이라 비동기 요청에 용이하다.운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 Http Api를 사용한다.HTTP 요청과 응답을 JSON 형태로 자동으로 변환해 준다. Axios 사용 방법먼저 axios를 사용하기 위해 아래의 명령어를 사용해 axios를 설치한다.npm install axios axios(config)기본 문법은 위의 형태이고, HTTP 요청을 보낼 때 보내는 요청에 대한 설정을 config 객체에 담아야 한다. config 옵션config내용url요청을 보낼 URL 주..
// 오늘날짜 가져오는 함수
// yyyyMMddHHmmss, 패턴 안넣으면 yyyyMMdd임!
var curDate = $p.getCurrentServerDate(); //yyyyMMdd
ipcDate.setValue(curDate);
웹스퀘어에서는 각각의 유틸성 자원에 대해 $p라는 객체를 제공한다.
$p. 입력하면 웹스퀘어에서 활용 가능한 api 목록 확인이 가능하다.
현재 날짜를 가져올 땐 getCurrentServerDate() api를 사용한다.
처음 입력할때 인자로 (pattern)으로 뜨는데, ("yyyyMMddHHmmss") 으로 설정하면 날짜와 시간이 나오는 형식으로
설정이 가능하다. ( * 대소문자 가려서 잘 구분해서 써줘야 함!)
만약 패턴을 넣지 않으면 기본 yyyyMMdd 형식이다 (연/월/일)
그리고 컴포넌트id.setValue의 인자로 만들어 준 변수를 넣어준다.
선택지 만들기
콤보박스, 라디오, 체크박스와 같은 것들은 값을 하나만 표시하지 않는다.
여러 목록 중 하나 혹은 여러개를 선택해야 하기 때문이다.
이런 컴포넌트들을 이용할 땐 목록을 세팅해줘야 하는데,
리스트를 직접 넣어주는 하드코딩 방식이 있다.
1. 직접 넣어주기
1) 먼저 라디오 버튼이나 체크박스 등과 같은 컴포넌트를 더블클릭 한다.
2) 추가버튼을 눌러 원하는 만큼 항목을 추가하고,
Label과 Value 값을 넣어준다.
이렇게 넣어주고 저장, 웹 브라우저 실행하면
위 사진 처럼 내가 넣어준 항목들을 확인해 볼 수 있다.
또 SelectBox 설정에서 보면
All Option과 Choose Option 두 가지가 있다.
All Option : -전체- 가 뜬다. 내부 값이 All이 뜨고, Null이 입력되지 않는다.
Choose Option : -선택- 이 뜬다. -선택-을 선택하면 빈값이 선택된다.
Choose Option에서 내용을 우리가 직접 입력하여 바꿔줄 수 있다.
여기서 "전체"라고 이름 붙여줄 수 있고, 아예 아무것도 없는 공란으로 설정하고 싶다면 $blank를 입력한다.
All Option과 Choose Option을 둘 다 적용한 결과
2. API 방식 사용
이번엔 하드코딩이 아닌 API 방식을 사용해보자.
컴포넌트id.addItem(value, label, index) 형식이다.
// API를 통해 항목을 추가
// 마지막 index는 생략 가능 (0,1...)
ui_gender.addItem("F", "여성", 0);
ui_gender.addItem("M", "남성", 1);
이렇게 설정하면 라디오 버튼에 여성, 남성이 나온다.
만약 index를 바꾸게 되면 index 순서대로 버튼이 변경되어 나오게 되고,
addItem을 쓸 때 index 생략도 가능하다.
생략한다면 선언한 순서대로 나온다.
라디오나 체크박스는 전체나 선택 같은 옵션은 존재하지 않는다.
다만 Direction을 통해 가로/세로 보이는 방향을 선택할 수 있다.
Span Count : Span Direction이 rows일 때 Span Count가 1이 기본으로 들어감.
1이면 한 줄, 2면 두 줄, 3이면 세 줄
3. 데이터 List와 연결
실제 값을 가지고 있는 데이터 List와 연결하는 방식을 이용하자!
데이터 객체를 만들어 연결시키는 방식이다.
🗒️ 데이터 객체 만들기
Outline에서 Head 탭을 이용해 만들어준다.
1) Head에 들어가면 보이는 DataCollection 우클릭 - 선택창이 나오는데, 나는 DataList 추가 선택!
2) Apply and Close
3) 만든 뒤 DataCollection 하위에 생성이 되는데, F2를 통해 이름을 변경할 수 있다.
4) 만들어진 DataList를 더블클릭하면 편집창이 뜨는데,
row를 추가해서 내용 입력 후 완료하면 이 데이터 객체와 연결을 시킬 수 있다.
5) 디자인탭에서 원하는 컴포넌트를 더블클릭,
NodeSet에 원하는 데이터 객체를 선택해 준다.
(NodeSet : 데이터 객체, Label : name, Value : code 선택)
이때 BindItemSet을 반드시 체크해줘야 한다!
그리고 웹브라우저를 실행해 보면 아무것도 안 나온다.
선언만 하고 데이터를 주지 않았기 때문이다.
데이터를 볼 땐 실행된 화면에서 ctrl+마우스 우클릭
(웹스퀘어에서 제공 가능한 여러 디버그 메뉴들을 볼 수 있다.)
데이터 관리를 위함이니까 dataCollection 보기를 선택한다.
그럼 아래와 같은 창이 하나 나온다.
dataCollection 드롭다운하면 내가 만들어 둔 데이터 객체 이름이 나온다.
이걸 선택하고,
DataType은 JSOIN/XML/XML(Highlight)/ARRAY 등의 형태로 파악할 수 있다.
여기서 search 버튼을 누르면?
아무것도 안 나온다.
당연함
데이터를 안 넣었음
데이터 만드는 법
1) outline에서 데이터 객체 더블클릭한다.
2) Data 탭 클릭!
3) 데이터 추가 버튼을 눌러서 데이터 입력 후 이걸 사용한다는 의미에서 반드시 use data 체크한다!
(체크 안 하면 데이터 안 나옴..)
그리고 다시 브라우저 실행시키면
원하는 대로 항목들이 나오고,
dataCollection 보기를 하면
데이터가 잘 뜬다!
Script로 데이터 넣는 법
use data를 쓰지 않고 (위 방식)
script로 넣는 방법도 있다.
웹스퀘어의 컴포넌트들은 id를 주면 전역변수로 올라가는데,
데이터 객체 역시 적용된 id를 입력 후 점(.)을 찍으면 사용 가능한 api들이 보인다.
(==전역변수처럼 사용이 가능하다!)
데이터를 넣을 때 1차원 array 형태는 setData, xml 형태는 setXML이고,
json 형태는 setJSON이다.
현재 json 타입으로 데이터를 받고자 하기 때문에
데이터 객체 id.setJSON(jsonData, append) 형식을 사용한다.
append는 true라면 기존 데이터를 지우지 않고 뒤에 붙이고,
false라면 기존 데이터를 지우고 이것만 넣겠다는 의미이다.
입력하지 않으면 default값은 false다.
// json 형태의 데이터로 만들어서 입력
var jsonData = [{"code":"01","name":"PM"}
,{"code":"02","name":"PL"}
,{"code":"03","name":"DEV"}
,{"code":"04","name":"DES"}
];
dc_code.setJSON(jsonData);
실행 결과
Q. 혹시 동적으로 API를 통한 바인딩이 불가능한가요?
A. 가능합니다!
BindItemSet에 체크 해제하고,
아래의 코드를 입력한다.
// API를 통한 bind
chkRole.setNodeSet("data:dc_code", "name", "code");
(여기서 chkRole는 role 나타내는 컴포넌트 id!)
형식은 컴포넌트id.setNodeSet(nodeset, label, value)
- nodeset : 적용할 데이터 리스트. 반드시 앞에 data: 를 붙여 사용해야 한다.
SearchBox : 창 안에 x 버튼이 있는 input ( x 버튼을 누르면 입력한 내용 사라짐)
Secret : 비밀번호 입력과 같은 경우 사용함 입력값 자체를 보이지 않게 하기 때문에 input 컴포넌트에 비해 속성 등이 더 적음!
InputCalendar : 달력을 통해 날짜 선택 가능 속성에서 calendarValueType이 default로 yearMonthDate로 되어있지만, 연월/연단위 등으로 변경 가능하다.
Spinner : 숫자의 증감 표시할때 사용
Textarea : 여러 줄의 텍스트 입력 시 사용
Editor (CKEditor) : 인스웨이브에서 만든 것은 아니고, CKEditor를 사서 내장한 형태.
출력 컴포넌트
Textbox : 입력하는 내용이 길 때 사용하고, 기능이 좀 더 많은 편 제목이나 조건에 활용 가능하고 tagname 등 속성을 지정할 수 있다. ++ 텍스트박스에서 alt+엔터로 줄 넘김 가능한데, 이런 경우 br 태그가 그대로 보이게 된다. 이는 escape 설정을 false로 설정해주면 된다! (escape 설정은 입력된 문자열을 태그로 치환해서 보여주는 것)
Span : 간단한 라벨 나타낼 때 사용
Image : 이미지
Progressbar : 진행률!
항목/값 선택 컴포넌트
Checkbox : 여러개 선택
MultiSelect : 컨트롤 키 누른 상태에서 선택해야 다중 선택 가능함. 따라서 모바일과 태블릿에서는 사용 불가해 활용도가 떨어진다!
Radio : 하나만 선택
SelectBox : 드롭다운 선택
CheckCombobox : MultiSelect의 단점을 보완한 컴포넌트 드롭다운 박스에서 항목들을 체크하여 다중 선택 할 수 있다.
AutoComplete : 검색이 가능함. 옵션에 따라 다름 (ex. 초성검색 등)
PageList : 페이징처리
Calendar : 단순 달력 표현, 다른 기능이 없어서 활용도는 떨어짐
ScheduleCalendar : 구글 캘린더와 비슷
전송/이동 컴포넌트
Trigger : 버튼
Upload : 단건 업로드
MultiUpload : 다중 업로드, 옵션에서 mode가 flash로 되어있는데 이를 html5_transparent로 변경해줘야 함
그룹/탭 컨트롤 등 컴포넌트
Group : 하위 자식 노드를 갖는 컴포넌트. html에서 그룹으로 묶을 때 div로 많이 묶는데, 여기에서는 div 대신 group를 사용한다. 속성에 보면 tagname 속성이 있는데 아무것도 설정하지 않으면 기본 div, 그 외에 html에서 사용하는 모든 태그들이 있음 + 입력값을 초기화해주는 .init() 이라는 API가 있고 하위 컴포넌트 값을 초기화해줄 수 있다.
TableLayout : 테이블 형태!
SlideHide : 좌측에 접었다 폈다 할 수 있는 메뉴 (보통 메인에서 사용)
Switch : 화면을 넘기는 용 - 단점 : 한 화면에 화면 1,2,3을 다 넣어놓고 해당하는 부분만 구분해서 지정하기 때문에 내용이 많아질 수 있음
Accordion : 내용을 접었다 폈다 할 수 있다.
IFrame : 부모와 독립된 영역의 화면을 그릴 수 있다. 부모 컴포넌트와 id 중복이 되지 않는다는 장점이 있고 화면에 대한 코딩 접근이 쉽다. 하지만 웹 브라우저가 하나 더 뜨는 형태이기 때문에 무거워져서 많이 쓰는 경우 브라우저가 강제로 종료되는 현상이 발생할 수 있다.
WFrame : IFrame 대신 사용할 수 있는 것. IFrame과 구성이 거의 동일하지만, - IFrame -> 웹 브라우저가 하나 더 뜨는 형태 - WFrame -> 페이지 자체를 인클루드 하는 형태 하나의 페이지 안에 모든 영역이 다 뜨게끔 표시함 그렇기 때문에 공통된 자원을 활용하고, 여러 웹 브라우저를 띄우는 효과가 나지 않아서 메모리를 훨씬 적게 사용함
TabControl : 탭을 추가하게 되면 WFrame 유형으로 기본 작성됨. => frameMode를 선택할 수 있고, 아무것도 선택하지 않으면 default WFrame
A Java Runtime Environment (JRE) or Java Development Kit (JDK) must be available in order to run Websquare. No Java virtual machine was found after searching the following locations
회사에서 나가게 될 프로젝트에서 웹스퀘어를 사용한다고 하여 미리 공부하는 차원에서 파일을 다운받아
exe 파일을 실행했더니 발생했다.
오류 내용은 jdk를 찾을 수 없다는 내용이었다.
해결 방안
jdk 경로가 잘못 지정되어 발생된 문제였다.
1) 웹스퀘어 다운로드 한 폴더에서 websquare.ini 파일을 찾아 더블클릭 (실행)
2) 실행하면 텍스트 파일이 열리는데, 맨 윗줄에 보이는 javaw.exe 파일 경로가 잘못되었으므로,
javaw.exe 파일을 찾아 우클릭 → 속성 클릭!
3) 위치에 있는 경로를 싹 긁어서 복사한다.
4) 처음에 찾은 websquare.ini 파일에서 javaw.exe 앞부분을 변경 후 저장!
운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 Http Api를 사용한다.
HTTP 요청과 응답을 JSON 형태로 자동으로 변환해 준다.
Axios 사용 방법
먼저 axios를 사용하기 위해 아래의 명령어를 사용해 axios를 설치한다.
npm install axios
axios(config)
기본 문법은 위의 형태이고,
HTTP 요청을 보낼 때 보내는 요청에 대한 설정을 config 객체에 담아야 한다.
config 옵션
config
내용
url
요청을 보낼 URL 주소, 엔드포인트
method
HTTP 요청 메서드 (GET, POST, PUT, DELETE 등)
params
URL의 쿼리 파라미터 설정
baseURL
공통적으로 사용하는 기본 URL 설정
headers
요청 헤더 설정
data
요청 본분 데이터 (POST, PUT, PATCH 등)
timeout
요청 제한 시간 (밀리초)
responseType
서버에서 받을 응답 데이터 형식 설정 (ex. json)
사용 예시
// GET
axios({
method : 'get',
url : url
})
.then((response) => {
console.log(response.data); // 정상 통신 후 응답 메세지 출력
})
.catch((error) => {
console.log(error); // 오류 발생 시
})
//POST
axios({
method : 'post',
url : url,
data : {
name : value
},
})
.then((response) => {
console.log(response.data); // 정상 통신 후 응답 메세지 출력
})
.catch((error) => {
console.log(error); // 오류 발생 시
})
이를 더 간결하게 사용할 수 있다!
// GET
axios.get('url')
.then((response) => {
console.log(response.data); // 정상 통신 후 응답 메세지 출력
})
.catch((error) => {
console.log(error); // 오류 발생 시
})
//POST
axios.post('url',
{
name : value
})
.then((response) => {
console.log(response.data); // 정상 통신 후 응답 메세지 출력
})
.catch((error) => {
console.log(error); // 오류 발생 시
})
HTTP Method
GET
입력한 url에 존재하는 자원에 요청을 한다.
웹 사이트 뒤에 쿼리스트링이 붙는다.
서버에서 어떤 데이터를 가져와 보여주는 용도로 주로 쓰인다. 주소의 쿼리스트링을 활용해 정보 전달!
