XPLATFORM은 만들어져 있는 Theme나 CSS를 적용하여 동일한 Project라도 전혀 다른 스타일의 UI로 쉽게 변경 가능합니다.

Theme와 CSS

Theme와 CSS는 XPLATFORM의 스타일을 변경할 수 있다는 점에서는 동일하지만 Theme에는 CSS파일과 CSS에서 사용되는 Image파일도 같이 포함되어 있다는 차이가 있습니다.

CSS 파일의 생성

[그림]의 Standard Toolbar 아이콘을 클릭하거나 메뉴[File – New – File – Style Sheet]을 선택하여 CSS 파일을 생성할 수 있습니다.

	속성	설명
1	File name	생성될 Style Sheet의 파일명
2	Location	생성될 Style Sheet의 위치
3	Insert to ADL	ADL 추가 유무 및 추가될 ADL 선택
4	Insert to Form	Form 추가 유무 및 추가될 Form 선택

CSS 파일 편집기

CSS를 편집할 수 있는 CSS Editor는 Selector, Preview Source Code, Properties로 구성됩니다.

‘Selector’는 현재 CSS문서의 모든 Selector들을 Tree의 구조로 보여주며, 각 Selector의 추가/삭제 등의 기능을 지원합니다.

	메뉴	기능
1	Go to Source	선택된 Selector의 Source Code 위치로 이동. Selector을 Double Click하여 동일한 기능을 수행 가능
2	New Selector	신규 Selector 입력
3	Add Selector	선택된 Selector에 Child Selector를 추가. 추가할 수 있는 Selector의 종류를 Popupmenu에서 표시
4	Delete	선택된 Selector를 삭제
5	Rename	선택된 Selector의 이름 바꾸기
6	Compress All	사용되지 않는 Property를 전부 제거합니다.
7	Uncompress	선택된 Selector가 제공하는 Property를 css에 표시합니다.
8	Expand	선택된 Selector의 하위 Tree Item을 펼침
9	Collapse	선택된 Selector의 하위 Tree Item을 감춤

아래그림은 New Selector의 입력 창입니다.

New Selector 입력 창은 Selector List와 Selector Syntax부분, Pseudo List로 구성되며, Selector Syntax는 입력 값에 따라 아래와 같이 동작합니다.

	Syntax	설명
1	Class Selector	Div 태그의 Class 속성값이 입력 값과 동일한 경우 Style이 적용
2	ID Selector	입력한 값과 동일 id를 가진 Component에만 Style이 적용
3	Attribute Selector	입력된 속성명과 비교기호, 속성값을 판단하여 해당되는 Component에만 Style이 적용 Ex1) Text ‘Text’ 속성을 가지고 있는 경우에만 Style 적용 Ex2) Text = Warning ‘Text’ 속성값이 Warning인 경우에만 Style 적용 Ex3) Text ~= Warning ‘Text’ 속성값이 공백으로 구분된 분리된 목록으로 그 중 하나가 Warning인 경우에만 Style 적용 Ex4) Text \|= Wa ‘Text’ 속성값이 하이픈으로 분리된 목록으로 그 중 하나가 왼쪽에서 Wa로 시작하는 경우에만 Style 적용

Syntax

설명

Class Selector

Div 태그의 Class 속성값이 입력 값과 동일한 경우 Style이 적용

ID Selector

입력한 값과 동일 id를 가진 Component에만 Style이 적용

Attribute Selector

입력된 속성명과 비교기호, 속성값을 판단하여 해당되는 Component에만 Style이 적용

Ex1) Text

‘Text’ 속성을 가지고 있는 경우에만 Style 적용

Ex2) Text = Warning

‘Text’ 속성값이 Warning인 경우에만 Style 적용

Ex3) Text ~= Warning

‘Text’ 속성값이 공백으로 구분된 분리된 목록으로

그 중 하나가 Warning인 경우에만 Style 적용

Ex4) Text |= Wa

‘Text’ 속성값이 하이픈으로 분리된 목록으로

그 중 하나가 왼쪽에서 Wa로 시작하는 경우에만 Style 적용

‘Preview’은 Style이 적용된 결과를 미리 볼 수 있으며, Mouse조작을 통해 Pushed, Mouse Over, Focused, Disabled등의 상태를 확인할 수 있습니다.

‘SourceCode’ 창에서는 현재 편집하고 있는 CSS문서를 보여주며, 개발자가 Style을 직접 수정하여 적용할 수 있습니다.

기본적으로 CSS Syntax는 선택자와 선언문으로 구성됩니다. 선택자(Selector)는 선언된 속성을 어디에 적용할지 지정하며, 선언문(Declaration)에서는 속성을 정의하게 됩니다. 속성은 속성명과 속성값으로 구분되며, 속성명은 어떤 종류의 Style을 적용할지 지정하고, 속성값에서 상세 Style을 정의합니다.

Properties창에서는 Style을 입력, 수정할 수 있는 속성 값들이 표기되며, Properties창에서 입력된 내용은 SourceCode에 자동 update되어 Preview에서 바로 확인할 수 있습니다.

Theme 생성

Standard Toolbar 아이콘을 클릭하거나 메뉴[File – New – File – XTheme] 선택하여 CSS 파일을 생성할 수 있습니다.

파일명과 생성 위치를 입력하여 Theme 파일을 생성할 수 있습니다.

	속성	설명
1	File name	생성될 Theme 파일명
2	Location	생성될 Theme 파일 위치

Theme 편집기

새로운 Theme를 만들거나 기존 Theme를 수정할 수 있는 Theme 편집기는 아래와 같이 구성됩니다.

	속성	설명
1	Folder Tree	Theme에 포함될 Image파일 및 CSS 파일 목록
2	Image Preview	Image 파일 Preview
3	New Folder	선택된 위치에 새 Folder를 추가
4	New CSS	새 CSS를 생성
5	Insert	선택된 위치에 새 파일을 목록에 추가
6	Delete	선택된 파일을 목록에서 제거

Style Property Editor

Style을 직관적으로 입력, 수정할 수 있는 Style Property Editor를 사용하여 Form에 사용된 개별 컴포넌트의 CSS Style을 편집할 수 있습니다. Style Property Editor에서 수정된 내용은 Properties Window에도 바로 적용되어 확인 할 수 있습니다.

CSS 파일을 수정하는 경우에는 Style Property Editor가 지원되지 않습니다. 소스 코드를 직접 수정하거나 Properties 창에서 수정해야 합니다.

Text

컴포넌트의 Text 관련 Property를 수정할 수 있습니다.

	속성	설명
1	Font	Component의 Text font를 수정. (Properties 창의 font 속성)
2	Color	Component의 Text Color Style을 수정. (Properties 창의 color 속성)
3	Alignment	Component의 Text Align Style을 수정. (Properties 창의 align 속성)

Border

컴포넌트의 Border관련 Property를 수정할 수 있습니다.

	속성	설명
1	Border	Component의 Border Style을 수정. (Properties 창의 border 속성)
2	Border Type	Component의 Border Type을 수정. (Properties 창의 bordertype 속성)
3	Focus Border	Component의 Focus Border Style을 수정. (Properties 창의 focusborder 속성)

속성

설명

Border

Component의 Border Style을 수정. (Properties 창의 border 속성)

Border Type

Component의 Border Type을 수정. (Properties 창의 bordertype 속성)

Focus Border

Component의 Focus Border Style을 수정.

(Properties 창의 focusborder 속성)

Background

컴포넌트의 Background 관련 Property를 수정할 수 있습니다.

	속성	설명
1	Color	Component의 Background Color를 수정. (Properties 창의 background 속성)
2	Image	Component의 Background Image를 수정. (Properties 창의 background 속성)
3	Gradation	Component의 Background Gradation을 수정. (Properties 창의 gradation 속성)

속성

설명

Color

Component의 Background Color를 수정.

(Properties 창의 background 속성)

Image

Component의 Background Image를 수정.

(Properties 창의 background 속성)

Gradation

Component의 Background Gradation을 수정.

(Properties 창의 gradation 속성)

Gradation의 Style은 정의된 start, end의 position값을 사용하여 Gradation을 만들어주는 Template으로 컴포넌트의 background 속성을 ‘@gradation’으로 변경합니다. Style에서 Gradation을 해제 하였을 경우에는 background의 이전 값을 복구해 줍니다.

Appearance

컴포넌트의 Appearance관련 Property를 수정할 수 있습니다.

	속성	설명
1	Opacity	Component의 Opacity Style를 수정. (Properties 창의 opacity 속성)

Effect

컴포넌트의 Effect 관련 Property를 수정할 수 있습니다.

	속성	설명
1	Blur	Component의 Blur Style를 수정. (Properties 창의 blur 속성)
2	Outerglow	Component의 Glow Style를 수정. (Properties 창의 glow 속성)
3	Shadow	Component의 Shadow Style를 수정. (Properties 창의 shadow 속성)

Transformation

	속성	설명
1	Origin	Component 기준 좌표 (Properties 창의 Transformation[Origin] 속성)
2	Transformation	Rotate: Component를 시계방향으로 회전 (Properties 창의 Transformation[Rotate] 속성) Flip: Component를 상하, 좌우로 대칭되도록 변경 (Properties 창의 Transformation[Flip] 속성) Skew:Component를 비스듬하게 기울임 (Properties 창의 Transformation[Skew] 속성) Scale: Component를 원래 크기에 비례하여 변경 (Properties 창의 Transformation[Scale] 속성) Translate: Component를 이동 (Properties 창의 Transformation[Translate] 속성)

속성

설명

Origin

Component 기준 좌표 (Properties 창의 Transformation[Origin] 속성)

Transformation

Rotate: Component를 시계방향으로 회전

(Properties 창의 Transformation[Rotate] 속성)

Flip: Component를 상하, 좌우로 대칭되도록 변경

(Properties 창의 Transformation[Flip] 속성)

Skew:Component를 비스듬하게 기울임

(Properties 창의 Transformation[Skew] 속성)

Scale: Component를 원래 크기에 비례하여 변경

(Properties 창의 Transformation[Scale] 속성)

Translate: Component를 이동

(Properties 창의 Transformation[Translate] 속성)