[WebSquare5] 시작하기

1. Page 생성

- Project Explorer에서 프로젝트 혹은 프로젝트에 속한 폴더를 우클릭

- [New] - [WebSquare Page] 선택

- 페이지명 입력( 템플릿이 있다면 Next가 활성화됨)

- Finish 버튼 클릭

- Design 탭에 새로 생성한 파일이 열리는지 확인

2. Page 템플릿

- 템플릿으로 사용할 Page를 미리 작성하여 동일한 폴더에 저장

- Project Explorer에서 프로젝트를 우클릭 후 [Properties] 선택

- [WebSquare] - [Context Root] 선택

- [Template Folder]의 Browse 버튼을 클릭하여 위의 제 1단계의 (Page 템플릿 파일이 저장된) 폴더 지정

3. 컴포넌트 그리기

1) 그리기 모드

2) Float : floating위치 결정

3) Clear : Both 컴포넌트의 Floating위치 초기화

4) 채우기 : 상위 컴포넌트 혹은 HTML 요소 전체 채움

5) 속성설정, 텍스트편집, 표편집등이 있음

6) 스타일 설정

- 스타일 클래스 생성

1. Style 뷰 선택

2. 우측 상단의 Add Internal Style 아이콘 클릭

3. Source 탭이 열리고 아래의 코드가 생성되는지 확인

<styple type="text/css"><![CDATA[ ]]></style>

4. CDATA[ ] 대괄호 내에 스타일 정의

5. Class 탭 클릭

6. 정의한 스타일 Class 탭에 목록으로 표시되는지 확인 

- 외부 스타일 적용

1. Style 뷰 선택

2. 우측 상단의 Import External Style 아이콘 클릭

3. CSS 파일 선택

4. Class 탭 클릭

(혹은 위의 2 ~ 4 단계 대신, Project Explorer에 표시되는 CSS파일을 Design 탭으로 드래그-앤-드롭 가능)

5. Class 탭에서 CSS가 추가되었는지 확인

6. 외부 CSS를 적용할 컴포넌트를 Design 탭에서 클릭

7. Style 뷰의 Class 탭을 연 뒤, 위에서 추가한 외부 CSS를 클릭 (이미 적용된 CSS 더블-클릭하면 해제)

8. CSS 파일에 정의된 스타일 클래스가 표시되는지 확인

9. 적용하려는 스타일 클래스 더블-클릭

10. 해당 클래스가 반영되는지 Design 탭에서 확인 (반영된 CSS는 Class 탭에서 굵게 표시 됨)

- 내부 스타일 적용

1. 위에 설명한 방법으로 스타일 클래스 정의

2. 스타일 클래스를 적용할 컴포넌트를 Design 탭에서 클릭

3. 클래스 탭에서 클래스 더블-클릭

4. 해당 클래스가 반영되는지 Design 탭에서 확인 (반영된 CSS는 Class 탭에서 굵게 표시 됨) Property 뷰의 class 속성에 적용하려는 클래스 이름을 입력하는 것도 가능 (해제 시 class 속성 값을 삭제) 

7) 테마 적용

- config.xml 수정

엔진에 내장되어 있는 테마를 사용하기 위해선 config.xml 파일의 내용 일부를 수정해야 합니다. [Window] - [Preferences] - [WebSquare] - [Engin Modification]를 선택 후, 아래와 같이 수정

<theme default="">

  <name value="blue" path="/websquare/theme/blue/"/>

  <name value="emerald" path="/websquare/theme/emerald/"/>

  <name value="brown" path="/websquare/theme/brown/"/>

  <name value="green" path="/websquare/theme/green/"/>

  <name value="stealblue" path="/websquare/theme/stealblue/"/>

  <name value="orange" path="/websquare/theme/orange/"/>

  <name value="pink" path="/websquare/theme/pink/"/>

  <name value="magenta" path="/websquare/theme/magenta/"/>

  <name value="red" path="/websquare/theme/red/"/>

  <name value="skyblue" path="/websquare/theme/skyblue/"/>

  <name value="purple" path="/websquare/theme/purple/"/>

</theme>

- 테마 적용

URL 의 parameter로 "w2xTheme" 를 지정하고 원하는 테마 설정

cookie API 의 setCookie( sName, sValue )를 사용하여 원하는 테마 명칭 지정

WebSquare.cookie.setCookie("w2xTheme", "[테마 명칭]");