6.Theme / CSS

넥사크로플랫폼은 만들어져 있는 Theme나 CSS를 적용하여 같은 프로젝트라도 전혀 다른 스타일의 UI로 쉽게 변경할 수 있습니다.

6.1Theme와 CSS

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

6.1.1CSS 파일의 생성스타일:CSS 파일 생성

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

그림 6-1Style Sheet Toolbar

그림 6-2Create a new Cascading Style Sheet

표 6-1Create a new Cascading Style Sheet

속성

설명

File name

생성될 Style Sheet의 파일명

Location

생성될 Style Sheet의 위치

Insert to ADL

ADL 추가 유무 및 추가될 ADL 선택

Insert to Form

Form 추가 유무 및 추가될 Form 선택

6.1.2CSS 파일 편집기스타일:CSS 파일 편집

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

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

그림 6-3Selector[Popup Menu]

표 6-2Selector[Popup Menu]

메뉴

기능

Go to Source

선택된 Selector의 Source Code 위치로 이동. Selector을 Double Click하여 동일한 기능을 수행 가능

New Selector

신규 Selector 입력

Add Selector

선택된 Selector에 Child Selector를 추가.

Delete

선택된 Selector를 삭제

Rename

선택된 Selector의 이름 바꾸기

Compress All

사용되지 않는 Property를 전부 제거합니다.

Uncompress

선택된 Selector가 제공하는 Property를 css에 표시합니다.

Expand

선택된 Selector의 하위 Tree Item을 펼침

Collapse

선택된 Selector의 하위 Tree Item을 감춤

아래그림은 New Selector의 입력 창입니다. 선택한 요소에 대한 스타일을 지정하거나 특정 ID 값을 가진 항목에 스타일을 지정할 수 있습니다.

그림 6-4New Selector

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

그림 6-5CSS Editor[Preview]

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

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

그림 6-6CSS Editor[Syntax]

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

그림 6-7CSS Editor[Properties]

6.1.3Theme 생성테마:Theme 생성

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

그림 6-8Theme Toolbar

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

그림 6-9Create a new XTheme file

표 6-3Create a new XTheme file

속성

설명

File name

생성될 Theme 파일명

Location

생성될 Theme 파일 위치

6.1.4Theme 편집기테마:Theme 편집

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

그림 6-10Theme Editor

표 6-4Theme Editor


속성

설명

1

Folder Tree

Theme에 포함될 Image파일 및 CSS 파일 목록

2

Image Preview

Image 파일 Preview

3

New Folder

선택된 위치에 새 Folder를 추가

4

Insert

선택된 위치에 새 파일을 목록에 추가

5

Delete

선택된 파일을 목록에서 제거

6.2Style Property Editor스타일:Style Property Editor

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

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

6.2.1Text

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

그림 6-11Style Property Editor[Text]

표 6-5Style Property Editor[Text]

속성

설명

Font

Component의 Text font를 수정. (Properties 창의 font 속성)

Color

Component의 Text Color Style을 수정. (Properties 창의 color 속성)

Alignment

Component의 Text Align Style을 수정. (Properties 창의 align 속성)

6.2.2Border

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

그림 6-12Style Property Editor[Border]

표 6-6Style Property Editor[Border]

속성

설명

Border

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

Border Type

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

Focus Border

Component의 Focus Border Style을 수정.

(Properties 창의 focusborder 속성)

6.2.3Background

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

그림 6-13Style Property Editor[Background]

표 6-7Style Property Editor[Background]

속성

설명

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의 이전 값을 복구해 줍니다.

6.2.4Appearance

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

그림 6-14Style Property Editor[Appearance]

표 6-8Style Property Editor[Appearance]

속성

설명

Opacity

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