넥사크로플랫폼은 만들어져 있는 Theme나 CSS를 적용하여 같은 프로젝트라도 전혀 다른 스타일의 UI로 쉽게 변경할 수 있습니다.
Theme와 CSS
Theme와 CSS는 넥사크로플랫폼의 스타일을 변경할 수 있다는 점에서는 동일하지만 Theme에는 CSS파일과 CSS에서 사용되는 Image파일도 같이 포함되어 있다는 차이가 있습니다.
CSS 파일의 생성
Standard Toolbar 아이콘을 클릭하거나 메뉴[File – New – File – Style Sheet]을 선택하여 CSS 파일을 생성할 수 있습니다.
Style Sheet Toolbar
Create a new Cascading Style Sheet
속성 | 설명 |
|---|---|
File name | 생성될 Style Sheet의 파일명 |
Location | 생성될 Style Sheet의 위치 |
Insert to ADL | ADL 추가 유무 및 추가될 ADL 선택 |
Insert to Form | Form 추가 유무 및 추가될 Form 선택 |
CSS 파일 편집기
CSS를 편집할 수 있는 CSS Editor는 Selector, Preview Source Code, Properties로 구성됩니다.
‘Selector’는 현재 CSS문서의 모든 Selector들을 Tree의 구조로 보여주며, 각 Selector의 추가/삭제 등의 기능을 지원합니다.
Selector[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 값을 가진 항목에 스타일을 지정할 수 있습니다.
New Selector
‘Preview’은 Style이 적용된 결과를 미리 볼 수 있으며, Mouse조작을 통해 Pushed, Mouse Over, Focused, Disabled등의 상태를 확인할 수 있습니다.
CSS Editor[Preview]
‘SourceCode’ 창에서는 현재 편집하고 있는 CSS문서를 보여주며, 개발자가 Style을 직접 수정하여 적용할 수 있습니다.
기본적으로 CSS Syntax는 선택자와 선언문으로 구성됩니다. 선택자(Selector)는 선언된 속성을 어디에 적용할지 지정하며, 선언문(Declaration)에서는 속성을 정의하게 됩니다. 속성은 속성명과 속성값으로 구분되며, 속성명은 어떤 종류의 Style을 적용할지 지정하고, 속성값에서 상세 Style을 정의합니다.
CSS Editor[Syntax]
Properties창에서는 Style을 입력, 수정할 수 있는 속성 값들이 표기되며, Properties창에서 입력된 내용은 SourceCode에 자동 update되어 Preview에서 바로 확인할 수 있습니다.
CSS Editor[Properties]
Theme 생성
Standard Toolbar 아이콘을 클릭하거나 메뉴[File – New – File – XTheme] 선택하여 CSS 파일을 생성할 수 있습니다.
Theme Toolbar
파일명과 생성 위치를 입력하여 Theme 파일을 생성할 수 있습니다.
Create a new XTheme file
속성 | 설명 |
|---|---|
File name | 생성될 Theme 파일명 |
Location | 생성될 Theme 파일 위치 |
Theme 편집기
새로운 Theme를 만들거나 기존 Theme를 수정할 수 있는 Theme 편집기는 아래와 같이 구성됩니다.
Theme Editor
속성 | 설명 | |
|---|---|---|
1 | Folder Tree | Theme에 포함될 Image파일 및 CSS 파일 목록 |
2 | Image Preview | Image 파일 Preview |
3 | New Folder | 선택된 위치에 새 Folder를 추가 |
4 | Insert | 선택된 위치에 새 파일을 목록에 추가 |
5 | Delete | 선택된 파일을 목록에서 제거 |
Style Property Editor
Style을 직관적으로 입력, 수정할 수 있는 Style Property Editor를 사용하여 Form에 사용된 개별 컴포넌트의 CSS Style을 편집할 수 있습니다. Style Property Editor에서 수정된 내용은 Properties Window에도 바로 적용되어 확인 할 수 있습니다.
CSS 파일을 수정하는 경우에는 Style Property Editor가 지원되지 않습니다. 소스 코드를 직접 수정하거나 Properties 창에서 수정해야 합니다.
Text
컴포넌트의 Text 관련 Property를 수정할 수 있습니다.
Style Property Editor[Text]
속성 | 설명 |
|---|---|
Font | Component의 Text font를 수정. (Properties 창의 font 속성) |
Color | Component의 Text Color Style을 수정. (Properties 창의 color 속성) |
Alignment | Component의 Text Align Style을 수정. (Properties 창의 align 속성) |
Border
컴포넌트의 Border관련 Property를 수정할 수 있습니다.
Style Property Editor[Border]
속성 | 설명 |
|---|---|
Border | Component의 Border Style을 수정. (Properties 창의 border 속성) |
Border Type | Component의 Border Type을 수정. (Properties 창의 bordertype 속성) |
Focus Border | Component의 Focus Border Style을 수정. (Properties 창의 focusborder 속성) |
Background
컴포넌트의 Background 관련 Property를 수정할 수 있습니다.
Style 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의 이전 값을 복구해 줍니다.
Appearance
컴포넌트의 Appearance관련 Property를 수정할 수 있습니다.
Style Property Editor[Appearance]
속성 | 설명 |
|---|---|
Opacity | Component의 Opacity Style를 수정. (Properties 창의 opacity 속성) |