스타일(CSS)과 테마는 넥사크로플랫폼 화면을 구성하는 화면요소들을 디자인하는 기능을 의미합니다.

스타일과 테마를 적용할 수 있는 화면 요소들은 컴포넌트, 화면 Form, Frame, TitleBar, StatusBar, ScrollBar등이 있습니다.

스타일 / 테마 개요

넥사크로플랫폼에서 스타일과 테마는 화면 상에 보이는 UI 요소들의 디자인을 정의하는 것을 의미합니다. 버튼을 예로 들면, 투명도, 글꼴, 색상, 그림자, 번짐, 기울임 등의 효과를 버튼 컴포넌트에 지정하는 것을 의미합니다.

스타일의 정의 및 적용

스타일은 컴포넌트별로 정의합니다.

각각의 컴포넌트는 스타일 적용이 가능한 속성이 있으며, 해당 속성값을 설정해 스타일을 정의합니다.

Button
{
     color : "red";
}
Static
{
     color : "blue";
}

적용된 스타일

스타일을 정의할 때는 선택자(Selector)를 사용합니다. 기본적인 CSS에 대한 사전지식이 있다는 가정하에 설명합니다.

넥사크로플랫폼이 지원하는 선택자는 다음과 같습니다.

기본 선택자: Type Selector, Class Selector, ID Selector, Child Selector
기타: Grouping, Pseudo-Classes

타입선택자(Type Selector) : “Button”과 같이 컴포넌트명을 지정합니다.

Syntax	Name (Element)
예	`Button {color : green;}`
의미	모든 Button의 color는 green으로 정의합니다.

클래스선택자(Class Selector) : 특정 클래스로 지정된 항목의 스타일을 적용합니다.

<Button id="Button00" text="Button00" left="50" top="20" width="100" height="40"   cssclass="BlueButton"/>

Syntax	.(Period)
예	`.BlueButton {color : blue;}`
의미	BlueButton으로 지정된 클래스에 대해 blue 색상을 적용합니다.

아래와 같이 컴포넌트별로 클래스 선택자를 지정할 수도 있습니다.

Button.BlueButton {color : blue;}

ID 선택자(ID Selector) : “Button00”과 같이 컴포넌트의 ID를 지정합니다.

<Button id="Button01" text="Button00" left="50" top="20" width="100" height="40"/>

Syntax	#
예	`Button#Button00 {color : yellow;}`
의미	모든 Button중에 Button00이라는 ID를 가진 Button의 color는 yellow로 정의합니다.

자식선택자(Child Selector) : 모든 컴포넌트의 하위를 지정합니다.

Syntax	>
예	Div>Button { color : blue; }
의미	모든 Div 안의 Button의 color는 blue로 정의합니다.

자식선택자는 최상위 레이아웃에 속한 컴포넌트만 사용할 수 있습니다. 예를 들어 Div 내에 포함된 Button의 스타일을 컴포넌트 수준의 child 선택자로 지정할 수는 없습니다. 필요한 경우에는 ID 선택자를 사용해야 합니다.

Form>Button (O)

Form>Div>Button (X)

Form>#div00>#button00 (O)

유사클래스(Pseudo-classes) : 선택자로 지정할 수 없는 상태 정보를 지정합니다.
컴포넌트에 따라 선택할 수 있는 상태 정보는 달라집니다.
- UI 요소 유사클래스
  enabled(default), disabled, focused, mouseover, pushed, selected, readonly
- 구조적 유사클래스
  root, nth-child(), nth-last-child(), first-child, last-child, only-child, empty

Syntax	:
예	`Button:focused {color : black;}`
의미	모든 Button에 focus가 되면 해당 Button의 color는 black으로 정의합니다.

그룹핑(Grouping) : 같은 값(declarations)을 갖는 여러 개의 선택자를 컴포넌트명으로 지정합니다.

Syntax	,(Comma)
예	`Button, Combo, Calendar {font : Dotum,9;}`
의미	모든 Button, Combo, Calendar의 font는 “Dotum 9”으로 정의합니다.

테마의 정의

테마는 스타일과 이미지 파일이 조합된 형태입니다.

테마

테마에서 사용하는 스타일을 정의합니다.
스타일에서 사용하는 이미지를 포함합니다.

애플리케이션은 하나의 테마만을 사용할 수 있습니다.

넥사크로플랫폼은 default, black, gray, blue의 4가지 Theme파일을 제공합니다.

제공되는 테마는 넥사크로 스튜디오의 Theme, Style Editor창을 통해 필요한 부분을 수정하고 다른 이름으로 저장해 사용할 수 있습니다.

테마는 넥사크로플랫폼에서 꼭 필요한 기본정보를 가지고 있으므로 필요한 부분만 추가, 수정해야 합니다.

기본정보가 삭제되거나 변경할 경우, 화면 출력에 문제가 생길 수 있습니다. 예를 들면 “#combolist” 와 같이 목록 표시를 처리하는 설정이 없으면 Combo 컴포넌트를 펼쳤을 때 목록이 정상적으로 나타나지 않는 경우가 발생합니다.

따라서 가능한 테마는 새로 생성하는 것보다는 기본으로 제공되는 테마를 수정해서 다른 이름으로 저장하거나 복사해서 사용하도록 합니다.

스타일/테마의 등록 및 적용

UI 요소 디자인 적용 순서

ADL에 속한 테마 내의 스타일
ADL에 속한 스타일
FDL에 속한 스타일
FDL내의 컴포넌트 스타일

컴포넌트에 스타일이 적용되는 순서는 1 > 2 > 3 > 4 입니다. 그러므로 중복된 스타일 값을 정의한 경우, 마지막 스타일인 4번 스타일이 적용되어 화면에 보입니다.

스타일과 테마의 적용 대상

Style은 하나의 Form에 선언해서 사용할 수 있으며, Global하게 사용하기 위해 Project(ADL)에 등록하거나 Theme에 포함해 사용할 수도 있습니다.

Style의 적용대상은 단순한 컴포넌트뿐만 아니라, 다양한 화면요소에 적용됩니다. 다음은 그 적용 대상들을 표로 나타낸 것입니다.

다음은 Style 적용이 가능한 대상들입니다.

종류	적용 대상
컴포넌트 (Visible Object)	Button, Calendar, CheckBox, Combo, Div, Edit, Grid, GroupBox, ImageViewer ListBox, MaskEdit, Menu, Progressbar, Radio, Spin, Static, Tab, TextArea
화면 Frame	Form, MainFrame, ChildFrame, FrameSet, HFrameSet, VFrameSet, TileFrameSet TitleBarControl, StatusBarControl
기타	ScrollBar

종류

적용 대상

컴포넌트

(Visible Object)

Button, Calendar, CheckBox, Combo, Div, Edit, Grid, GroupBox, ImageViewer

ListBox, MaskEdit, Menu, Progressbar, Radio, Spin, Static, Tab, TextArea

화면 Frame

Form, MainFrame, ChildFrame, FrameSet, HFrameSet, VFrameSet, TileFrameSet

TitleBarControl, StatusBarControl

기타

ScrollBar

스타일 제약사항

아래 제약사항을 무시하고 사용자가 임의로 CSS 코드를 직접 수정하는 경우에는 정확한 동작을 보장하지 않습니다.

일부 스타일 속성을 적용했을 때 넥사크로 스튜디오 디자인 모드에서 보이는 것과 실제 애플리케이션을 실행했을때 다르게 보이는 경우가 있을 수 있습니다.

CSS 선택자(Selector) Depth는 최대 4개까지 지원합니다

CSS 선택자 Depth는 4개 이하로 지정해야 합니다.

Form>#id>#id>#id>#id ------ (O)
Form>#id>#id>#id>#id>#id -- (X)

타입선택자(Type Selector)는 첫 번째 Depth만 지정할 수 있습니다

타입선택자는 첫 번째 Depth만 지정해야 합니다. 두 번째 이후 CSS 선택자는 타입선택자 이외 다른 선택자를 사용해야 합니다.

Form>Div>Button -------- (X)
Form>#div00>#button00 -- (O)
Div>#button00 ---------- (O)
EditControl ------------ (O)

넥사크로 스튜디오 CSS 편집기에서는 두 번째 Depth에 자식 선택자를 추가하는 기능을 제한하고 있습니다. 편집기 기능을 사용하지 않고 직접 CSS 코드를 수정할 경우에는 이를 제한하지 않기 때문에 개발자가 제약사항을 참고해야 합니다.

클래스선택자(Class Selector)는 하나의 클래스만 지정할 수 있습니다

클래스선택자는 하나의 클래스만 지정할 수 있습니다.

Button.set_cssclass("TestClass"); ------------- (O)
Button.set_cssclass("TestClass,TestClass2"); -- (X)

둘 이상의 클래스선택자 지정 시 오류는 발생하지 않습니다.

위의 소스의 경우 "TestClass,TestClass2"를 하나의 클래스명으로 인식해 클래스선택자가 정상적으로 처리되지 않습니다.

스타일의 적용

스타일의 개요에 대해 앞에서 간단하게 언급했습니다.

이제부터 스타일의 작성방법 및 적용, 활용하는 방법에 대하여 설명합니다.

스타일의 생성

ADL에서 테마를 활용하지 않을 경우나 Form에 직접 스타일을 지정하고 싶을 때 새로 생성하거나 기존에 작성된 스타일 파일을 등록합니다.

1단계: 새로운 Form을 만듭니다.: New Form 메뉴에서 Form을 만들고 Form명을 StyleForm으로 지정합니다.

2단계: 만들어진 Form에 새로운 스타일 파일을 생성합니다.: 만들어진 StyleForm 컨텍스트 메뉴에서 Insert Style 항목을 선택하고 새로운 스타일 파일을 FormStyle.css라는 이름으로 추가합니다. Form이 열려있으면 스타일 파일을 추가할 수 없습니다.

메인 메뉴(File > New > File > Style Sheet)에서 새로운 CSS를 만들어 Form에 포함하고자 한다면 'Insert to Form' 항목을 체크하고 추가하기 원하는 Form 이름을 지정해주어야 합니다.

3단계: ADL에 스타일 파일을 생성합니다.: ADL에 Insert ADL Item으로 하나의 스타일을 생성하고 이름은 ADLStyle.css로 지정해 추가합니다.

ADL에 추가된 스타일은 프로젝트를 Refresh 해주어야 적용이 됩니다. 스타일을 추가하고 프로젝트 컨텍스트 메뉴에서 Refresh를 선택해주세요.

스타일의 편집

스타일의 편집방법은 Theme, ADL, Form이 모두 같습니다.

스타일의 편집은 별도로 제공되는 스타일 편집 창에서 할 수 있습니다. 스타일 편집 창은 선택자 목록을 트리 형태로 제공해 추가/삭제가 가능하며, 소스코드 창에서 직접 내용을 수정할 수 있습니다. 또한 속성 창에서 쉽게 값을 입력하거나 수정할 수 있습니다.

속성 창에 입력된 내용은 소스코드 창에 바로 반영되어 확인할 수 있습니다.

1단계: 스타일 편집 창을 통해 새로운 선택자를 등록합니다.: 생성한 ADLStyle.css 파일에 Button 컴포넌트 선택자(Type Selector, Pseudo Selector, Class Selector)를 등록합니다. 먼저 Type Selector와 Pseudo Selector(mouseover, focused)를 등록합니다.

Class Selector를 등록합니다.

생성된 소스 코드 형식은 아래와 같습니다.

Button
{
...
}

Button:focused
{
...
}

Button:mouseover
{
...
}

.Blue
{
	
}

2단계: 스타일 편집창에 등록한 선택자의 내용을 작성합니다.: 생성한 Button 선택자(Type Selector, Pseudo Selector, Class Selector)의 정보를 작성합니다.

편집할 선택자를 선택하고 소스 코드를 직접 편집하거나 속성 창에서 해당하는 항목을 수정할 수 있습니다. 소스 코드는 아래와 같이 수정합니다.

Button
{
     background: lightskyblue;
     border: 1px solid red;
     color: yellow;
     font: Dotum,9,bold ;
}

Button:focused
{
     background: lightskyblue;
     border: 1px solid yellow;
     color: black;
     font: Dotum,9,underline;
}

Button:mouseover
{
     background: lightskyblue;
     border: 1px solid black;
     color: red;
     font: Dotum,9;
}

.Blue
{
     background: lime;
     border: 1px solid blue;
     color: blue;
     font:Dotum,10,bold;
}

스타일의 적용

Form에 Button을 생성해 ADL에 있는 스타일과 Form에 있는 스타일에 따라 화면 디자인에 반영되도록 합니다.

1단계: 새로운 Form을 만듭니다.: New Form으로 Form을 만들고 이름은 StyleForm으로 지정합니다 ("스타일의 생성" 단계에서 만든 Form을 활용합니다.)

2단계: Button을 생성해 스타일의 적용을 확인합니다.: StyleForm에 Button을 생성해 ADL에 작성된 스타일에 맞추어 디자인이 적용되는지 확인합니다.

3단계: Form을 실행해 Button의 Pseudo Selector의 적용을 확인합니다.: ADL 스타일에 설정한 Pseudo Selector(mouseover, focused)가 Form에 적용되는 것을 QuickView를 실행해서 확인합니다.

4단계: 앞서 Form에 생성한 Form 스타일을 편집하고, 적용을 확인합니다..: Form 스타일에 작성된 Pseudo Selector 중 focused 정보를 ADL 스타일과 다르게 설정해 다르게 적용되는 것을 QuickView로 실행해서 확인합니다.

Button:focused
{
     background: lightskyblue;
     border: 4px solid green;
     color: black;
     font: Dotum,9,underline;
}

cssclass의 적용

같은 Form에서 같은 컴포넌트에 서로 다른 Style을 적용하기 위해 등록된 Class 선택자를 사용해 표현을 다르게 할 수 있습니다.

1단계: ADLStyle에 생성한 Class 선택자를 편집하고, 적용을 확인합니다..: ADLStyle에 Class Selector(Blue)를 편집합니다.

.Blue
{
     background: lime;
     border: 1px solid blue;
     color: blue;
     font:Dotum,10,bold;
}

2단계: Form의 Button에 cssclass 속성을 활용해 Style의 적용을 확인합니다.

Form의 cssclass 속성에 ADLStyle에 작성된 Class 선택자인 Blue를 설정하고, 스타일의 적용을 확인합니다.

테마의 적용

테마의 개요에 대해 앞에서 간단하게 언급했습니다.

이제부터 테마의 작성방법 및 적용, 활용하는 방법에 대하여 설명합니다.

테마의 생성

테마의 생성방법은 Insert Theme(Insert ADL Item)을 통해서 미리 작성된 테마를 선택해 등록할 수 있습니다.

테마 편집 창에서는 이미지나 스타일 파일을 추가, 삭제할 수 있으며 스타일 파일은 스타일 편집 창에서 관리할 수 있습니다.

스타일 파일이 변경되는 경우에는 반드시 테마도 저장해 주어야 합니다.

1단계: 새로운 테마를 만듭니다.: 메뉴(File > New > File > XTheme)에서 example이라는 이름으로 새로운 테마를 만듭니다. 새로 만들어진 테마는 default 테마를 기본으로 복사됩니다.

2단계: 미리 작성된 테마를 지정합니다.: ADL에 Insert ADL Item 메뉴에서 테마를 지정해 추가해줍니다.

테마의 편집

테마 파일은 이미지와 스타일 파일이 서로 분리되어 있어 별도로 편집합니다.

폴더의 생성, 스타일의 생성, 이미지, 스타일 파일 추가/삭제는 테마 편집 창 하단의 버튼을 활용합니다.

1단계: Theme Treeview의 내용을 확인하고 스타일 파일을 편집합니다.: 테마 파일인 example.xtheme를 열어 Theme Treeview를 통해 이미지 목록과 스타일 파일(theme.css)을 확인하고, Style 편집 창에서 Style 파일을 편집합니다.

2단계: 테마 편집 창에서 이미지, 폴더, 스타일 파일의 생성/추가/삭제 작업을 합니다.: Theme Treeview 하단의 버튼들을 통해 테마를 편집합니다.

메뉴	기능
New Folder	테마 내에 새로운 폴더를 생성
New CSS	테마 내에 새로운 스타일 파일을 생성
Insert	이미지나 스타일 파일 추가
Delete	Treeview에서 선택된 파일 삭제

테마의 적용

기본으로 제공되는 default Theme의 이미지와 스타일이 반영된 디자인이 활성화된 테마를 변경할 때 컴포넌트에 반영되는 것을 확인할 수 있습니다.

작성은 Combo 컴포넌트를 기준으로 작성하도록 하겠습니다.

1단계: default Theme의 Combo 컴포넌트의 스타일을 확인합니다.: StyleForm을 열어 변경되기 전의 Combo를 생성해 스타일을 확인합니다.

2단계: 활성화된 테마를 example Theme로 변경해 변화를 확인합니다.: 새로 생성한 example Theme의 컨텍스트 메뉴에서 Set Active Theme를 선택해 해당 테마를 활성화하고 , StyleForm의 스타일의 변화를 확인합니다.

Deploy Theme

테마는 이미지와 스타일이 결합되어 있어 그 크기가 크다는 단점이 있습니다. Deploy Theme 기능은 xtheme 파일에서 이미지를 분리해 테마의 크기를 줄이기 위해 만든 기능입니다. 이미지는 선택적으로 분리할 수 있습니다. 이렇게 분리된 xtheme 파일을 “Deploy Theme”라 하고 분리된 이미지는 “Extern File”이라 합니다.

Extern File로 분리할 이미지 선택
체크박스를 이용해 Extern File로 분리할 이미지를 선택할 수 있습니다.
- 체크박스를 선택하지 않은 이미지만 extern file로 분리되며 체크된 이미지는 테마에 포함됩니다.
  선택하지 않은 이미지 각각을 Extern Item이라 합니다.
- default.xtheme와 같이 기본적으로 제공되는 Theme는 체크박스가 나타나지 않습니다. 즉, 기본으로 제공되는 테마는 이미지를 분리할 수 없습니다.
- 스페이스바를 이용해서 체크박스를 선택할 수도 있습니다. 다중 선택도 가능하며 선택한 첫 번째 아이템의 상태를 기준으로 변경됩니다.
- 마우스 우측 버튼을 클릭 후 컨텍스트 메뉴에서 체크박스를 선택할 수도 있습니다. Set Extern 메뉴를 선택하면 체크박스가 해제되고 Unset Extern 메뉴를 선택하면 체크가 됩니다.

저장
Deploy Theme의 저장은 기존 파일 저장 방식처럼 저장 버튼을 누르면 됩니다. 저장 시 Deploy Theme와 Extern File의 저장내용 및 경로는 다음과 같습니다.

구분	저장내용	저장경로
Deploy Theme	Extern File을 제외한 테마	기존 theme경로 및 파일명과 동일 예) 기존 theme를 C:\a.xtheme라 하면 C:\a.xtheme로 저장됨
Extern File	분리된 이미지	기존 theme경로/images/분리한 Image들(파일명동일) 예) 기존 theme를 C:\theme\a.xtheme라 하고 분 리할 Image가 b.png라 하면 C:\a\images\b.png로 저장됨

구분

저장내용

저장경로

Deploy Theme

Extern File을 제외한 테마

기존 theme경로 및 파일명과 동일

예) 기존 theme를 C:\a.xtheme라 하면

C:\a.xtheme로 저장됨

Extern File

분리된 이미지

기존 theme경로/images/분리한 Image들(파일명동일)

예) 기존 theme를 C:\theme\a.xtheme라 하고 분

리할 Image가 b.png라 하면

C:\a\images\b.png로 저장됨

Deploy Theme표시
Extern Item이 있는 상태로 저장을 하면 프로젝트 탐색 창에 Deploy Theme 표시가 생기며 Extern Item을 제거하고 저장을 하면 Deploy Theme 표시도 사라집니다.