오류 내용

노트북을 바꾸게 되어서 새로 환경세팅 하면서 프로젝트 받아왔더니 오류가 한 바가지 나왔다 😢

해당 오류는 org.w3c.dom.Node 버전 충돌로 인해 발생한 오류이다.

클래스 로딩 시 다른 버전의 Node가 우선 로드되면서 getTextContent() 메서드를 찾을 수 없어 발생되는 오류인 것이다.

해결 방법

Java Build Path 에서 JRE System Library의 우선순위를 최상단으로 옮겨주면 된다.

1) 프로젝트 우클릭 -> Properties

2) Java Build Path 메뉴에서 Order and Export 탭 선택

3) JRE System Libray 선택하여 우측의 Top을 눌러 맨 위로 옮겨준 뒤 Apply 한다.

해결~~~ !

까먹을까봐 쓰는 넥사크로 기본 설정

상단 메뉴 Tool - Options... 클릭

1. Project - General - Base Library Path 

이클립스 worksapce 경로의 src - main - 프로젝트 경로 - nexacro17lib

2. Project - Generate - Generate Path

이클립스 webapp 하위의 프로젝트 경로

넥사크로에서 작성한 xml 파일이 js로 변환되어 저장되는 경로

3. Environment - General - Working Folder

이클립스 workspace 경로의 src - main - wabapp 하위의 프로젝트 경로

WITH절

WITH절이란?

서브쿼리에 이름을 붙여 만든 임시 테이블이다.

SQL문을 작성하다 보면 서브쿼리가 반복적으로 사용되는 경우가 있는데 이러한 경우는 쿼리가 복잡해지고 유지보수도 어려워지게 된다.

이러한 단점을 해결하기 위해 WITH절을 사용해 서브쿼리에 이름을 붙여 사용할 수 있다.

VIEW와 비슷해 보이지만 VIEW의 경우는 DROP 전까지 사라지지 않고 다른 쿼리에서도 재사용이 가능하지만

WITH의 경우에는 실행되는 쿼리문 안에 작성되어 있어서 해당 쿼리에서만 사용이 가능하다는 특징이 있다!

기본 문법

WITH 임시테이블명 AS (
	사용할 서브쿼리
)
SELECT 컬럼1, 컬럼2, ...
  FROM 임시테이블명

WITH절에 '임시테이블명' 으로 이름을 붙여 SELECT 절에서 해당 테이블을 참조해 쿼리를 작성한다.

예시

- 부서별 평균 급여보다 급여를 많이 받는 직원을 조회한다.

WITH DEPT_AVG AS (
  SELECT DEPT_ID
       , AVG(SALARY) AS AVG_SALARY
    FROM EMPLOYEES
   GROUP BY DEPT_ID
)
SELECT T1.NAME
     , T1.SALARY
     , T1.DEPT_ID
  FROM EMPLOYEES T1 
 INNER JOIN DEPT_AVG T2
    ON T1.DEPT_ID = T2.DEPT_ID
 WHERE T1.SALARY > T2.AVG_SALARY
;

위 예시는 간단한 예시이지만 실무에서는 중복된 서브쿼리를 사용하는 경우가 많다.

많이 중복되는 서브쿼리일수록 WITH절을 활용해 쿼리를 분리하면 가독성과 성능 측면에서도 좋은 결과가 나올 거라 생각된다!

이클립스 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 소스 로컬로 다운로드

SVN Repositories 탭에서 원하는 프로젝트 우클릭 -> Check Out 진행!

데이터 객체를 이용한 통신

실제 데이터를 가져와서 가져온 데이터를 화면에 적용하는 통신 방법에 대해 알아보자!

먼저 Outline 탭 하위의 Head 탭을 클릭하면 Submission이 보인다.

Submission을 우클릭 -> Submission 추가를 선택!

그럼 아래와 같은 창이 뜨는데,

ID : 고유 ID를 의미한다.

그리고 submission에서 제일 중요한 부분은

그 아래에 있는 Reference / Target / URL Action 이다!

• Reference : Request 정보. 이미 만들어진 데이터 객체 중 하나를 선택해서 지정!
• Target : Response에 해당. 직접 입력하는 것이 아니라 실제로 내가 사용할 데이터 객체를
  만들어서 지정해 주는 것!
• URL Action : 내가 직접 데이터를 얻어올 서블릿 주소라고 생각하면 됨

아래는 현재 데이터를 가져올 파일이 있는 위치이다.

1) 해당하는 파일 우클릭 - Properties 클릭!

2) 맨 위 Path에 보이는 WebContent 뒤쪽부터 경로 싹 긁어서 복사하기!

다시 Add submission 창으로 돌아와서 URL Action에 경로를 붙여 넣어준다.

그리고 이 파일에서 데이터를 정상적으로 읽어오는지 간단하게 확인하기 위해서

상단에 있는 Submission Test 버튼을 누른다.

그럼 아래처럼 창이 하나 뜨는데, Send 버튼을 누른다 -> 그럼 아래 Response Data 칸에 데이터가 나옴!

이렇게 통신이 잘 되는 것을 확인했다면,

이 데이터 구조에 맞는 데이터 컬렉션을 직접 생성해 줄 수 있다.

Create DataCollection 버튼 클릭!

아래와 같은 창이 뜨는데, 이 구조로 dataCollection을 만들겠냐는 의미이다.

OK 버튼을 누르면 DataCollection이 추가되었다는 안내창이 뜬다.

다시 Response Data를 확인해 보면 "dc_userInfo" 로 데이터가 추가되었음을 확인할 수 있다.

그리고 Head 탭을 확인해보면 만들어준 dc_userInfo 데이터 컬렉션이 추가돼 있다!

그리고 Target을 통해 생성된 데이터 객체를 직접 추가해 json 구조로 받게 설정할 수 있다.

1) Target 옆의 DataCollection 버튼을 누른다.

2) ID 드롭다운으로 데이터 객체를 선택해 주고

3) 추가버튼을 누르고 OK

Process Message에 입력한 내용은 해당 Submission이 통신하는 동안 해당 메세지 창을 보여준다.

(disabled 시켜버림 == 조회 중 다른 작업을 못하게 방지함)

Add Submission 창 아래쪽의 Submit / Submit-done / Submit-error은

전처리 / 후처리 (통신 후 callback) / 에러처리

작성하는 방법은 우측에 있는 script 버튼을 누르면 Submission으로 생성이 된다.

이제 이렇게 만들어 준  통신 객체를 실행시켜 보자!

이 통신 객체는 조회버튼을 눌렀을 때 실행될 예정!

> 이벤트를 달아준다.

조회 버튼 컴포넌트를 선택 후 Property에서 이벤트 탭에 들어간다.

그중 onclick을 누르면 우측에 script와 Meta 두 개의 버튼이 뜨는데, script 버튼을 눌러준다.

그럼 script 창에 컴포넌트 id로 코드가 작성이 된다.

그런데 submission의 id는 전역으로 올라가지 않는다.

그렇다면 사용법은?

$p 객체를 이용한다.

$p 객체에는 submission을 실행시켜 주는 executeSubmission이 있다.

// 조회 하기 
scwin.btn_select_onclick = function(e) {
    $p.executeSubmission("sbm_search");
};

인자값으로 submission의 id를 문자열로 넣어주면 submission이 실행된다.

-> 브라우저 실행 후 조회 버튼을 누르면 조회중.. 창이 뜬다!

(빨라서 캡처는 불가..)

결과를 제대로 확인하기 어려우니 F12 개발자 모드로 진입해 Newwork 탭을 통해 데이터를 파악할 수 있지만,

웹스퀘어에서는 꼭 이 방법을 사용하지 않아도 된다!

웹 페이지에서 ctrl + 마우스 우클릭하면

아래와 같은 창이 뜬다.

그중 현재 화면 디버그 실행 클릭!

다시 ctrl+마우스 우클릭하면 현재 화면 디버그 중단으로 변경돼 있다!

조회버튼을 누르면 디버그 창이 떠서 input과 output을 확인할 수 있다!

그리고 또

ctrl+마우스 우클릭으로 dataCollection 보기를 선택하면?

내가 타겟으로 지정한 dc_userInfo를 조회했을 때

적용된 데이터 객체들이 들어와 있음을 확인할 수 있다!

아래는 웹 브라우저 화면이다.

DataCollection에서의 컬럼을 컴포넌트에 바인딩시켜준다.

(해당 컬럼을 끌어다가 원하는 컴포넌트 위에 얹어주면 됨)

바인딩이 된다면 위에 datat:DataCollection이름.컬럼명이 뜨고,

컴포넌트 좌측 상단에 초록색 점이 보이게 된다.

모두 바인딩된 상태!!

조회를 누르면?

각 컬럼의 자리를 찾아 데이터를 보여준다.

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. Please check your Internet connection and try again.

이럴 땐 수동 설치 해주면 된다고 한다.. (T_T)

Help -> Install New Software 선택

아래의 링크 넣고 나오는 내용 체크 후 Next 눌러서 Finish 나올 때까지 진행하면 된다

(다른 링크들도 있었는데 오류 나서 잘 됐던 링크로,,,)

https://osspit.org/eclipse/subversive-connectors/

설치 후 다시 Prererences의 SVN - SVN Connector 에 들어가 보면

아래 이미지와 같이 SVN Connector에 항목이 들어가 있는 것을 볼 수 있다!

회사에서 프로젝트를 위해 환경세팅이 필요한데,

또 까먹을 것 같아서 정리ㅎ

아래의 링크 접속 (오라클 홈페이지)

https://www.oracle.com/java/technologies/downloads/#java8

원하는 운영체제에 맞게 파일 다운로드!

🎈 (오라클 회원가입 되어있어야 설치 가능)

파일을 받아 설치까지 완료되었으면 환경 변수 설정을 해줘야 한다.

내 PC 우클릭 -> 속성

좌측의 정보 -> 고급 시스템 설정 클릭

고급 탭 -> 환경변수 클릭

시스템 변수 쪽에 새로 만들기 버튼 클릭

이름은 JAVA_HOME 으로 작성하고,

변수 값에는 jdk 파일 설치한 경로 설정해 준다.

그리고 시스템변수 목록을 보면 Path가 있는데

이를 선택하고 편집 버튼 클릭!

환경 변수 편집이 나오면 새로 만들기 버튼을 클릭한다.

그럼 목록 아래쪽에 입력을 할 수 있게 나오는데,

%JAVA_HOME%\bin

이라고 입력하면 됨.

cmd 창에서 

java -version

javac -version

확인했을 때 만약 javac가 안 나온다면 

Path에 jdk 절대경로를 추가해 준다.

그래도 안 나온다면 설치 다시!!

(jar 파일만 받은 걸 수 있음)

컴포넌트 제어

컴포넌트는 속성 / 이벤트 / API를 통해 제어가 되고 있다.

제어를 하기 위해 가장 먼저 할 일은? 내가 제어할 컴포넌트의 id를 적용하는 것!

id 만들 땐 공백 사용 x, 특수문자는 언더바 외에 다른 것은 쓰지 말자!

이렇게 id를 지정해 줘야 해당하는 아이디가 이 페이지에서 전역변수처럼 사용이 된다.

$p 객체 사용

id 지정을 했다면

API를 사용해 컴포넌트의 설정을 해보자!

Script 탭으로 이동한다.

현재 설정하고자 하는 컴포넌트는 날짜를 나타내는 input 창이다.

기본으로 오늘 날짜를 띄우고 싶은 상태.

이때 웹스퀘어의 유틸성 자원을 이용해 설정해 줄 수 있다.

	// 오늘날짜 가져오는 함수
	// 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를 입력한다.

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: 를 붙여 사용해야 한다.

(data:데이터리스트id 형식이다!)

- label : 라벨을 나타내는 항목의 id

- value : 값을 나타내는 항목의 id

테이블 그리기

테이블(표) 형태를 그리고 싶다면?

tableLayout을 사용한다!

Palette 뷰어에서 TableLayout을 찾아 클릭해 준다.

그럼 위와 같은 창이 뜨는데,

열과 행, 테이블 모양 등을 지정할 수 있다.

테이블을 만들고 난 뒤 상단 메뉴에서 행/열 추가, 삭제 등 기능을 사용할 수 있다.

그리고 각 칸마다 안쪽에 자식노드로 컴포넌트를 넣어줄 수 있다.

이때 퀵 툴바를 사용할 수 있는데, 원하는 컴포넌트를 클릭하고 스페이스 바 누르기!

(모든 컴포넌트가 다 나오진 않음)

현재 상태에서 웹 브라우저를 실행시키고,

웹 페이지 크기를 줄여보면 자식 노드로 들어있는 컴포넌트들이 크기가 변하지 않아

이상한 형태로 보이게 된다.

사이즈에 따라 테이블 모양이 바뀌는 형태 > 적응형 UI를 사용해 위 같은 현상을 막을 수 있다!

웹스퀘어 레이아웃은  적응형 UI를 쉽게 적용 가능하다.

전체 선택 (outline에서 테이블 전체 선택 or 컴포넌트 선택 후 F2 누르면 상위로 올라감 -> 한번 더 누르면 tr 상위인 테이블로 올라감) 후 속성을 보면 adaptive라는 속성이 있음

이걸 layout으로 설정하고, adaptiveThreshold에 사이즈를 넣어주면 된다.

웹스퀘어에서 컴포넌트를 생성하게 되면 크기 조절은 가능하지만 위치 변경은 불가능하다.

이 컴포넌트 위치 변경하는 방법을 알아보자!

컴포넌트 사용법

먼저, 웹에서의 CSS 방법은

- Static / Relative / Absolute / Fixed / Sticky Position 이 있다.

이 중 Static과 Absolute가 가장 많이 쓰인다.

• Static : 지정된 포지션 없음, 크기만 지정되어서 사용됨, 화면에 그려준 컴포넌트의 순서대로
  배치하는 방식. 절대적인 좌표값을 가지지 않고 그려진 순서대로(순차적으로) 그려나가는 방법이다.
• Absolute : 정해진 포지션이 있음. top/left 등과 같이 정해진 포지션이 따라 화면을 배치한다.
  흔히 말해 절대 좌표값

상단 툴메뉴에서 아래의 드롭다운 버튼을 클릭한다.

그럼 4가지 선택지가 나오고, 기본은 static으로 설정되어 있다.

컴포넌트 선택 후 property에서 style을 보면

width,height의 크기만 나타내고 있는데,

이는 좌표값이 없음을 의미하고 그렇기 때문에 컴포넌트가 이동되지 않는 것이다!

왜냐하면 static은 정해진 순서대로 이동하기 때문에!

이를 만약 absolute로 변경한다면?

상단에 보면 그리기 모드 변경 버튼이 있다.

이 버튼을 누르면

위와 같은 안내창이 뜸.

확인 버튼을 누르고 다시 컴포넌트를 만들어주면 기존과는 다르게 컴포넌트가 바로 생성되는 것이 아니라,

내가 화면에서 원하는 위치에 클릭을 하면 생성이 된다.

이렇게 만들어진 컴포넌트는 드래그로 위치 이동도 가능하다!

다시 style을 확인해보면 top과 left가 있어서 내가 위치를 옮길 때마다 값이 변경되는 것을 볼 수 있다.

이렇게 개발자 입장에서는 이동이 쉽고 편하지만 default가 static인 이유는??

absolute는 활용도가 떨어짐.

여러 개의 컴포넌트들을 그려놓고 실행 후 F12 버튼을 눌러 요소들을 확인해 보자.

우선 html은 선언된 순서대로 렌더링을 함.

컴포넌트들을 무작위로 만들고 확인을 했을 때 렌더링이 뒤죽박죽 되어있는 것을 확인할 수 있다.

만약 실제 업무 화면이라면 꽤 복잡한 구성 요소를 가질 수 있는데,

이럴 경우 사용자가 보기에 불편하며 디스플레이 관점에서 위배된 관점이다.

따라서 absolute를 활용하려면 디스플레이 관점에 맞춰서 배치를 해줘야 하는데,

컴포넌트 하나하나 포지션 값을 조정해줘야 한다.

그렇게 사용하기엔 너무 오랜 시간이 걸리고 복잡해지기 때문에 

실질적으로는 static 그리기로 기본 형태를 잡고, 일부 특수한 경우에만 absolute를 사용한다.

웹스퀘어에서는 CSS 도움을 주는 게 있다!

이를 활용해 화면 구성을 해보자!

1) window - preferences 를 선택!

2) 좌측 메뉴 중 WebSquare를 선택하고, 중간에 보이는

Show style toolbar menu를 체크 후 Apply and Close

그러면 재실행 팝업이 나오고, 확인을 누르면 프로그램이 다시 실행된다!

3) 다시 실행되고 확인해 보면 상단에 뭔가 많은 아이콘이 생김

4) 이를 활용해 글씨 크기나 다양한 스타일을 지정할 수 있다.

이렇게 글씨 크기를 선택하면

자동으로 Style에 font-size가 입력됨.

컴포넌트 크기를 화면에 가득 차게 하고 싶다면

width를 100%로 변경하는 게 아니라 걍 width를 지운다.

static은 요소가 Block과 Inline으로 나눠져 있음

- Block : 덩어리 개념 (자식 요소를 갖는 것들, width를 주지 않으면 화면에 100%를 나타냄, 
   height 값을 주지 않으면 텍스트의 크기 값으로 높이가 따라감)

- Inline : 덩어리 안 포함되는 개념 (width를 주지 않으면 화면에 제대로 표시되지 않음)

이를 버튼으로 확인해 보자!

웹스퀘어에서 버튼은 보통 Trigger 사용

버튼을 만들면 기존 요소의 위 or 아래에 생성이 되는데, 이걸 왼쪽이나 오른쪽에 붙이고 싶다면?

여러 방법이 있지만 이 버튼을 감싸주는 div가 있으면 좋다.

웹스퀘어에서는 이를 Group이라 부른다.

Group 컴포넌트를 적용할 때에는 Paletter에서 선택해서 적용할 수 있지만,

컴포넌트를 감싸고 싶을 땐 컴포넌트 선택 후 마우스 우클릭 → 그룹으로 감싸기 기능이 있다.

그룹으로 감싸기를 선택하면 이 컴포넌트를 감싸는 그룹이 생겨나게 된다.

그래서 이 그룹 내에서 botton을 원하는 위치로 옮겨줄 수 있지만,

여전히 드래그 이동은 안된다.

따라서 CSS를 입력한다! (툴의 도움을 받을 수 있음)

상단의 float 버튼을 클릭한다.

원하는 정렬 방식을 선택하면 원하는 위치로 정렬이 된다.

그런데 이렇게 설정해 준 경우는 group 밖으로 빠져나오게 된다.

css의 float의 성질 자체가 나를 감싸고 있는 객체의 위쪽에 발생된다고 이해하면 되는데,

그렇기 때문에 포괄적으로 감싸주고 있던 부분을 float 설정하게 되면서 위쪽으로 나가버린 것이다.

자식 객체에 이처럼 float를 적용하게 되면 얘를 감싸는 부모 객체는 반드시 overflow를 적용해야 한다.

▼

적용하면 다시 button을 감싸주게 됨

그리고 다른 group과 딱 붙어 있으면

padding(나를 기준으로 내 안쪽으로 들여 쓰기) 혹은 margin (나를 기준으로 내 안쪽으로 들여쓰기)

WebSquare의 컴포넌트 활용법

WebSquare에서는 다양한 컴포넌트를 손쉽게 만들 수 있다.

컴포넌트들의 종류와 특징에 대해 간략하게 알아보쟈!

입력 컴포넌트

• 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

그 외에도 여러 다양한 컴포넌트들이 있다!

만약 내가 사용한 전체를 다 보고 싶다면?

Outline 탭 하위 Design 탭 선택

여기서 컴포넌트들을 한 눈에 파악 가능하다!

그리고 Design 옆옆에 있는 Head탭은 중요 ★

▼ Head 탭 메뉴들

데이터 객체와 통신 객체를 한 번에 관리할 수 있다.

전체 페이지의 DataCollection 탭이나 Submission 탭에서 작성하면

디자인과 한번에 보며 관리가 어려운데, 이곳에서는 디자인 탭을 보며 작성이 가능하다.

만약 이런 메뉴 탭들을 모르고 닫거나, 실행 시 보이지 않는다면?

여는 법 이클립스랑 동일 (Window - Show View)

그리고 화면 구성 저장 시에는

Window - Perspective - Save Perspective As.. 선택

컴포넌트 사용법

웹스퀘어에서 컴포넌트를 사용하려면 3가지 방법을 이용하면 된다.

1. 컴포넌트가 지니고 있는 속성

2. 이벤트

3. API

1. 속성

1) 원하는 컴포넌트 선택

2) 우측을 보면 Property 탭이 있음.

Property - 속성탭 선택!

3) 해당하는 컴포넌트의 속성과 적용방법을 볼 수 있다.

내용은 마우스오버 (마우스 가져다 대기), 더 자세히 보고 싶다면 F1

웹스퀘어의 컴포넌트는 id 중심이다.

그래서 이곳에서 id를 반드시 입력해줘야 사용할 수 있다.

설정 후 디자인 탭에서 컴포넌트에 마우스를 가져다 대면 툴팁이 나오는데,

▼ 이 툴팁은 상단 버튼을 선택해 표시하거나 숨길 수 있다.

property 설정 내용 (간략)

• initValue : 초기값 설정
• dataType : 데이터 타입 설정
• displayFormat : 데이터 형식 ex) 숫자 세 자리마다 콤마(1,000,000 형식) -> 설정은 #,###
• applyFormat : 입력하는 순간에도 포맷을 유지하고 싶다면 사용! -> all 입력하면 입력하는 순간에도
  포맷이 적용이 된다.

2. 이벤트

컴포넌트가 지니고 있는 이벤트가 있다.

원하는 이벤트를 클릭하면 오른쪽에 script와 Meta 두가지 버튼이 나온다.

여기서 script를 누르면?

자동으로 이벤트가 생성된다.

(해당 컴포넌트의 id 기준으로 이벤트 생성)

만약 id가 없는 컴포넌트는 id를 먼저 물어본다.

Meta의 경우 설명에 대한 내용이라 개발과는 직접적인 연관이 없음.

만약 이벤트가 적용이 된다면..

위처럼 디자인 탭에서 컴포넌트 선택시 툴팁에 Event가 나오고,

컴포넌트 상단 모서리에 붉은 점이 생긴다! (화면엔 안 나옴!)

이벤트를 이용할 수 있는 또 다른 방법은

컴포넌트 선택 후 우클릭 -> 이벤트

3. API

해당 컴포넌트에 대해 동적인 부분을 작성하려면

var ipt1obj = document.getElementById("ipt1");

기본적인 script는 위와 같이 코드를 작성해야 한다.

하지만 웹스퀘어에서는 이렇게 사용하지 않아도 된다!

웹스퀘어 컴포넌트에 id를 적용하면 그 id가 전역변수로 그대로 올라간다.

컴포넌트id. 입력하면 사용할 수 있는 api가 나오고, 아래처럼 사용한다.

ipt1.setValue("987654321");

그럼 setValue로 입력한 데이터가 표시된다!

만약 property에서 initValue도 설정하고, API로 .setValue로 설정했는데 둘의 데이터가 다르다면?

setValue로 설정한 값이 들어간다.

이유는?

웹스퀘어를 수행하면 script에 정의된 함수를 먼저 읽는다.

-> 함수를 먼저 생성하고 -> 화면을 그리며 속성을 적용한다 (initValue)

-> 그다음 제일 마지막으로 onpageload가 적용된다.

따라서 onpageload에 적용한 ,setValue가 마지막으로 적용되어 setValue 값이 보이게 되는 것이다.