Style(CSS: Cascading Style Sheets)과 Theme는 XLATFORM 화면을 구성하는 화면요소들을 디자인하는 기능을 의미합니다.
Style과 Theme를 적용할 수 있는 화면 요소들로는 컴포넌트들, 화면 Form, Frame, Widget Form, Alert, Confirm, TitleBar, StatusBar, ScrollBar등이 있습니다.
Style / Theme 개요
XPLATFORM에서 Style과Theme란 화면상에 보이는 UI요소들의 디자인을 정의하는 것을 의미합니다. 버튼을 예로 들면, 투명도, 폰트, 칼라, 그림자, 번짐과 기울임 등의 효과를 버튼 컴포넌트에게 주는 것을 의미합니다.
Style의 정의 및 적용
Style은 컴포넌트별로 정의합니다. 각각의 컴포넌트는 Style적용이 가능한 Property가 있고, 해당 Property의 Style값을 설정함으로써 Style을 정의합니다.
Style의 정의는 Selector를 이용합니다. 여기서는 CSS에 대한 사전지식이 있다는 가정하에 설명합니다.
XPLATFORM이 지원하는 Selector는 다음과 같습니다.
Type Selector : “Button”과 같이 컴포넌트명을 지정합니다.
Syntax | Name (Element) |
|---|---|
예 | Button { color : green; } |
의미 | 모든 Button의 color는 green으로 정의합니다. |
Class Selector : 컴포넌트별로 특정 Style을 지정합니다.
Syntax | .(Period) |
|---|---|
예 | Button.BlueButton { color : blue; } |
의미 | 특정 Button에 class를 지정하여 해당 Button의 color는 blue로 정의합니다. |
ID Selector : “Button00”과 같이 컴포넌트의 ID를 지정합니다.
Syntax | # |
|---|---|
예 | Button#Button00 { color : yellow; } |
의미 | 모든 Button중에 Button00이라는 ID를 가진 Button의 color는 yellow로 정의합니다. |
Universal Selector : 모든 컴포넌트를 지정합니다.
Syntax | *(Asterisk) |
|---|---|
예 | *>#contextmenu { background : gray; } |
의미 | Edit가 가능한 컴포넌트(Edit, MaskEdit, TextArea 등)들의 PopupMenu의 background는 gray로 정의합니다. |
Descendant Selector : 특정 컴포넌트의 하위 속성을 지정합니다.
Syntax | Name SubName |
|---|---|
예 | Combo background { color : red; } |
의미 | 모든 Combo의 background의 color는 red로 정의합니다. |
Child Selector : 모든 컴포넌트의 하위를 지정합니다.
Syntax | > |
|---|---|
예 | Div>Button { color : blue; } |
의미 | 모든 Div안의 Button의 color는 blue로 정의합니다. |
Attribute Selector중 일부 : 모든 컴포넌트의 하위 속성값의 비교로 지정합니다. 추가적으로 해당 속성값의 비교는 “[property=value]” 형태의 적용을 지원합니다.
Ex. Combo[text] { color : black; }
Combo[text=”CmbSearch”] { color : red; }
Syntax | [] |
|---|---|
예 | Button[text=”Search”] { color : red; } |
의미 | 특정 Button의 text값이 “Search”이면 해당 Button의 color는 red로 정의합니다. |
Pseudo-classes중 일부 : Selector들을 사용하여 표현될 수 없는 정보(focused, disabled, mouseover, pushed 등)들의 Selection 처리를 지정합니다.
Syntax | : |
|---|---|
예 | Button:focused { color : black; } |
의미 | 모든 Button에 focus가 되면 해당 Button의 color는 black으로 정의합니다. |
UI element states pseudo-classes: enabled(default), disabled, focused, mouseover, pushed, selected
Structural pseudo-classes: root, nth-child(), nth-last-child(), first-child, last-child, only-child, empty
Grouping : 같은 값(declarations)을 갖는 여러 개의 Selector들을 컴포넌트명으로 지정합니다.
Ex. Button, Combo, Calendar { font : Arial,9; }
Syntax | ,(Comma) |
|---|---|
예 | Button, Combo, Calendar { font : Arial,9; } |
의미 | 모든 Button에 Button, Combo, Calendar의 font는 “Arial 9”으로 정의합니다. |
Theme의 정의
Theme는 Style과 Image를 조합한 형태입니다.
응용프로그램은 하나의 Theme만을 사용할 수 있습니다.
XPLATFORM은 default, black, gray, blue의 4가지 Theme파일을 제공합니다. 해당 Theme는 UX-Studio의 Theme, Style Editor창을 통해 필요한 부분을 수정할 수 있습니다. Theme는 XPLATFORM에서 꼭 필요한 기본정보를 가지고 있으므로 사용자는 필요한 부분만을 선정해서 추가, 수정작업을 하여야 합니다.
기본정보가 삭제되거나 변경할 경우, 그로 인해 화면 출력에 문제가 생길 수 있습니다. 예를 들면 “#contextmenu” 와 같이 Edit형식의 컴포넌트(Edit, MaskEdit, TextArea등)들에서 발생하는 PopupMenu의 설정이 없을 경우 PopupMenu가 나타나지 않는 경우가 발생합니다.
따라서 가능한 Theme는 새로 생성하는 것보다는 기본으로 제공되는 Theme를 수정해서 다른 이름으로 저장하거나 복사해서 사용하도록 합니다.
Style/Theme의 등록 및 적용
UI요소들에 디자인 적용의 순서
설명 | |
|---|---|
1 | ADL에 속한 Theme내의 Style |
2 | ADL에 속한 Style |
3 | FDL에 속한 Style |
4 | FDL내의 Commponent의 Style |
컴포넌트에 Style이 적용되는 순서는 ①>②>③>④ 입니다. 그러므로 중복된 style값 정의한 경우, 마지막 Style인 ④번 Style이 화면에 적용되어 보여집니다.
Style과 Theme의 적용 대상
Style은 하나의 Form에 선언해서 사용할 수 있으며, Global하게 사용하기 위해 Project(ADL)에 등록하거나 Theme에 포함해 사용할 수도 있습니다.
Style의 적용대상은 단순한 컴포넌트뿐만 아니라, 다양한 화면요소에 적용됩니다. 다음은 그 적용 대상들을 표로 나타낸 것입니다.
다음은 Style적용이 가능한 대상들입니다.
종류 | 적용 대상 |
|---|---|
컴포넌트 (Visible Object) | Button, Calendar, CheckBox, Combo, Div, Edit, GraphicPath, Grid GroupBox, ImageViewer, ListBox, MaskEdit, Menu, Progressbar Radio, Shape, Spin, Splitter, Static, Tab, TextArea |
화면 Frame | Form, WidgetForm, ChildFrame, FrameSet, HFrameSet TabFrame, TileFrameSet, VFrameSet |
기타 | Alert, ApplicationMenu, Confirm , ScrollBar, StatusBarForm TitleBarForm, ToolTip |
Style의 적용
Style의 개요에 대해 앞에서 간단하게 언급했습니다. 이제부터 Style의 작성방법 및 적용, 활용하는 방법에 대하여 설명합니다.
Style의 생성
ADL에서 Theme를 활용하지 않을 경우나 Form에 Style을 주고 싶을 때 새로 생성하거나 기존에 작성된 Style파일을 등록합니다.
1단계: 새로운 Form을 만듭니다. New Form으로 Form을 만들어 Form명을 StyleForm으로 합니다.
2단계: 만들어진 Form에 새로운 Style 파일을 생성합니다. 만들어진 StyleForm에 Insert Style로 하나의 Style을 생성해 Style명을 FormStyle.css로 추가합니다. Form이 열려있으면 Style을 생성할 수 없습니다.
MainMenu를 통해서 생성하는 방법입니다.
3단계: ADL에 Style 파일을 생성합니다. ADL에 Insert ADL Item으로 하나의 Style을 생성해 Style명을 ADLStyle.css로 추가합니다.
Style의 편집
Style의 편집방법은 Theme내의 Style, ADL의 Style, Form의 Style이 모두 동일합니다.
Style의 편집은 Style편집기를 통해서 할 수 있습니다.
Style편집기는 Selector List를 Tree형태로 제공해 추가/삭제가 가능하게 하였으며, SourceCode창에서 내용편집이 가능하도록 해주고 있습니다.
Style편집기에서는 Properties창을 제공해 편리하게 입력/수정을 할 수 있도록 해주고 있습니다.
이때 Properties창에 입력된 내용은 SourceCode창에 바로 반영되어 확인할 수 있습니다.
1단계: Style Editor를 통해 Selector를 등록합니다. 생성한 ADLStyle.css를 편집창을 통해 Button Selector들(Type Selector, Pseudo Selector, Class Selector)을 등록합니다.
먼저 Type Selector를 등록합니다
Pseudo Selector를 등록합니다. (mouseover, focused)
Class Selector를 등록합니다.
2단계: Style Editor를 통해 등록한 Selector의 내용을 작성합니다. 생성한 Button Selector들(Type Selector, Pseudo Selector, Class Selector)의 정보를 작성합니다.
Button
{
background : @gradation;
border : 1px solid red;
color : yellow;
font : Arial,9,bold ;
gradation : linear 50%,0% #900000 50%,100% #006000;
}
…
Button.BlueButton
{
background : @gradation;
border : 1px solid blue;
color : blue;
font : Arial,10,bold;
gradation : linear 50%,0% #000040 50%,100% #ffff90;
}Style의 적용
Form에 Button을 생성해 ADL에 있는 Style과 Form에 있는 Style에 따라 Design에 반영되도록 합니다.
1단계: 새로운 Form을 만듭니다. New Form으로 Form을 만들어 Form명을 StyleForm으로 합니다. (“Style의 생성” 단계에서 만든 Form을 활용합니다.)
2단계: Button을 생성해 Style의 적용을 확인합니다. StyleForm에 Button을 생성해 ADL에 작성된 Style에 맞추어 Style이 적용되는지 확인합니다.
3단계: Form을 실행해 Button의 Pseudo Selector의 적용을 확인합니다. ADLStyle에 설정한 Pseudo Selector(mouseover, focused)의 Form에 적용되는 것을 QuickView로 실행해서 확인합니다.
4단계: 앞서 Form에 생성한 FormStyle을 편집하고, 적용을 확인합니다. FormStyle에 작성된 Pseudo Selector 중 focused 정보를 ADLStyle과 다르게 설정해 다르게 적용되는 것을 QuickView로 실행해서 확인합니다.
Style Class의 적용
동일한 Form에서 동일한 컴포넌트에 서로 다른 Style을 적용하기 위해 등록된 Class Selector를 사용하여 표현을 다르게 할 수 있습니다.
1단계: ADLStyle에 생성한 Class Selector를 편집하고, 적용을 확인합니다. ADLStyle에 Class Selector(BlueButton)를 편집합니다.
Button.BlueButton
{
background : @gradation;
border : 1px solid blue;
color : blue;
font : Arial,10,bold;
gradation : linear 50%,0% #000040 50%,100% #ffff90;
}2단계: Form의 Button에 class Property를 활용해 Style의 적용을 확인합니다. Form의 class Property에 ADLStyle에 작성된 Class Selector인 BlueButton을 설정하고, Style의 적용을 확인합니다.
Theme의 적용
Theme의 개요에 대해 앞에서 간단하게 언급했습니다. 이제부터 Theme의 작성방법 및 적용, 활용하는 방법에 대하여 설명합니다.
Theme의 생성
Theme의 생성방법은 Insert Theme(Insert ADL Item)을 통해서 미리 작성된 Theme를 선택해 등록할 수 있습니다.
Theme편집기는 Image, Style파일들을 추가, 삭제할 수 있으며 Style의 경우는 Style편집기를 통한 관리가 가능합니다.
Style이 변경되는 경우에는 반드시 Theme도 저장해 주어야 합니다.
1단계: 새로운 Theme를 만듭니다. ADL에 Item추가로 Theme를 추가로 생성합니다. (권장하지 않습니다.)
2단계: 기본으로 Theme를 편집해 새로운 이름으로 저장합니다. black.xtheme 파일을 Open해 Theme편집기를 통해 example.xtheme로 저장합니다.
Theme의 편집
Theme파일은 Image와 Style은 서로 분리되어있어 별도로 편집합니다.
폴더의 생성, Style의 생성, Image와 Style의 추가/삭제는 Theme편집기의 Theme Treeview 하단의 버튼을 활용합니다.
1단계: Theme Treeview의 내용을 확인하고 Style파일을 편집합니다. Theme파일인 example.xtheme를 열어 Theme Treeview를 통해 Image List와 Style파일(theme.css)을 확인하고, Style편집기를 통해 Style파일을 편집합니다.
2단계: Theme편집기를 통해 Image, Folder, Style의 생성/추가/삭제 작업을 합니다. Theme Treeview 하단의 버튼들을 통해 Theme 내용을 편집합니다.
메뉴 | 기능 |
|---|---|
New Folder | Theme 내에 새로운 폴더를 생성 |
New CSS | Theme 내에 새로운 Style 파일을 생성 |
Insert | Image 또는 Style파일 추가 |
Delete | Treeview에서 선택된 파일 삭제 |
Theme의 적용
기본으로 제공되는 default Theme의 Image와 Style이 반영되는 모습과 Set Active로 바꾸면서 컴포넌트에 반영되는 것을 확인할 수 있습니다.
작성은 Combo 컴포넌트를 기준으로 작성하도록 하겠습니다.
1단계: default Theme의 Combo Style을 확인합니다. StyleForm을 열어 변경되기 전의 Combo를 생성해 Style을 확인합니다.
2단계: default Theme의 Style정보를 수정합니다. Active 되어 있는 default.xtheme를 Theme Editor를 통해 수정해 줍니다. theme.css를 열어 Combo 컴포넌트의 정보를 수정합니다.
3단계: default Theme의 Style정보를 수정을 Form에서 확인합니다. StyleForm의 Combo 컴포넌트의 Style 변화를 확인합니다.
4단계: Active Theme를 example Theme로 변경해 변화를 확인합니다. 새로 생성한 example Theme를 Set Active Theme로 Active하고, StyleForm의 Style의 변화를 확인합니다.
Deploy Theme
기존의 Theme는 Image와 Style이 결합되어 있어 그 크기가 크다는 단점이 있었습니다. Deploy Theme란 기존의 xtheme에서 Image를 분리하여 Theme의 크기를 줄이기 위해 만든 기능입니다. Image는 선택하여 분리할 수 있으며 이렇게 분리된 xtheme 파일을 “Deploy Theme”라 하고 분리된 Image를 “Extern File”이라 합니다. 또한, 이 기능은 XPLATFORM Runtime, HTML5, Hybrid모두에서 지원됩니다.
Extern File로 분리할 Image선택
CheckBox를 이용하여 Extern File로 분리할 Image를 선택할 수 있습니다.
CheckBox에서 UnCheck상태에 있는 Image만 extern file로 분리되며 Check상태에 있는 Image는 기존방식처럼 Theme에 포함됩니다. 또한, UnCheck상태에 있는 Image 각각을 Extern Item이라 합니다.
default.xtheme와 같이 기본적으로 제공되는 Theme는 CheckBox가 나타나지 않습니다. 즉, 기본제공 Theme는 Image를 분리할 수 없습니다.
Space Bar를 이용해서 CheckBox를 선택할 수도 있습니다. Multi Select도 가능하며 선택한 첫 번째 아이템의 상태를 기준으로 변경됩니다.
마우스 우측 버튼을 클릭 후 Popup Menu를 이용해서 CheckBox를 선택할 수도 있습니다. Multi Select도 가능합니다. Set Extern메뉴가 UnCheck상태이고 Unset Extern메뉴가 Check상태입니다.
저장
Deploy Theme의 저장은 기존 저장법과 동일하게 Save버튼을 누르면 됩니다. 저장 시 Deploy Theme와 Extern File의 저장내용 및 경로는 다음과 같습니다.
구분 | 저장내용 | 저장경로 |
|---|---|---|
Deploy Theme | Extern File을 제외한 Theme | 기존 theme경로 및 파일명과 동일 예) 기존 theme를 C:\a.xtheme라 하면 C:\a.xtheme로 저장됨 |
Extern File | 분리된 Image | 기존 theme경로/images/분리한 Image들(파일명동일) 예) 기존 theme를 C:\theme\a.xtheme라 하고 분 리할 Image가 b.png라 하면 C:\a\images\b.png로 저장됨 |
Deploy Theme표시
Extern Item이 있는 상태로 저장을 하면 Project Explorer에 Deploy Theme표시가 생기며 Extern Item을 제거하고 저장을 하면 Deploy Theme표시도 사라집니다.