프로젝트 편집 | Theme, XCSS

Theme

Theme 파일은 이미지와 XCSS 파일을 포함한 형태를 의미합니다. 기본 테마는 압축된 형태로 제공하지만 프로젝트에서는 테마를 압축이 풀린 형태로 사용합니다.

Theme 편집기는 Resource Explorer에서 "Theme" 항목 아래에 표시되는 테마를 더블클릭하거나 컨텍스트 메뉴에서 [Edit]를 선택해 열 수 있습니다.

Resource Explorer에서 "NexacroTheme" 항목 아래에 표시되는 테마는 넥사크로 스튜디오 설치 시 기본 제공되는 테마입니다. 해당 테마는 수정하거나 삭제할 수 없습니다. 테마를 수정하려면 "Theme" 항목 아래에 테마를 옮겨와야 합니다. "NexacroTheme" 항목 아래에 표시되는 테마를 선택한 후 드래그해서 "Theme" 항목 아래로 옮겨놓을 수 있습니다.

"NexacroTheme" 항목 아래에 표시되는 테마를 편집하려고 시도하면 프로젝트에 해당 테마를 복사하겠냐고 물어보는 대화상자가 표시되고 [Yes] 선택 시 "Theme" 항목 아래로 복사되며 편집창을 실행합니다.


Image

Theme에서 사용할 이미지를 트리 형태로 제공합니다. 이미지는 추가 및 삭제할 수 있으며 이미지를 선택하면 미리보기 화면으로 확인할 수 있습니다.

여기서 추가한 이미지 파일은 XCSS 소스에 URL 형태로 입력하여 테마 이미지로 적용할 수 있습니다.

XCSS

Theme의 스타일을 정의할 수 있는 XCSS를 편집할 수 있습니다.

XCSS

XCSS는 넥사크로플랫폼 화면을 구성하는 화면 요소들을 디자인하는 기능을 의미합니다. 스타일을 적용할 수 있는 선택자에는 컴포넌트, Form, Frame, TitleBar, StatusBar, ScrollBar 등이 있습니다.

XCSS 편집기는 Project Explorer에서 xcss 파일을 선택하거나 Resource Explorer에서 xcss 파일을 선택한 후 더블클릭하거나 파일 선택 후 컨텍스트 메뉴에서 [Edit]를 선택하여 편집할 수 있습니다.

CSS 편집기는 선택자 목록을 트리 형태로 제공합니다.


이름

설명

1

Sort by Group

선택자를 컴포넌트 그룹으로 정렬

Sort by Alphabet

선택자를 알파벳 순서로 정렬

Add Selector

선택자 추가

Add Child Selector

선택한 선택자의 자식 선택자 추가

Delete Selector (Delete)

선택한 선택자 삭제

Delete All Selector

(Ctrl+Shift+Del)

모든 선택자 삭제

Options

Native Css로 Generate할 대상 브라우저 선택

2

Selector Tree

선택자 목록을 트리로 구성

3

Component Preview

선택된 항목에 대한 미리보기 영역

4

Style Quick Editor

선택한 선택자에 자주 변경되는 스타일에 대한 빠른 편집 제공

5

xcss Editor

Nexacro Style Sheet 편집기

6

Generated Code Preview

NRE / Browser 별 변환된 Text형식의 CSS 미리보기

7

Navigatorbar

원하는 선택자를 순서대로 찾아가거나 추가할 수 있습니다.

트리에서 선택자를 클릭하면 해당 XCSS 코드와 Native CSS 코드, 미리보기 이미지를 표시합니다. 또한 선택자 각 Attribute는 속성창에서도 수정할 수 있습니다.

선택자를 표시하는 트리 영역에서 마우스 오른쪽 버튼을 클릭해 표시되는 컨텍스트 메뉴에서는 사용하지 않는 선택자의 Attribute 코드를 삭제하는 기능을 지원합니다.

이름

설명

View

Xcss Editor 내에서 배치된 창 표시 여부를 설정합니다.

Add Selector

선택자 추가

Add Child Selector

선택한 선택자의 자식 선택자 추가

Delete Selector

선택한 선택자 삭제

Delete All Selector

모든 선택자 삭제

Compress

선택한 생성자에서 사용하지 않는 Attribute 코드 삭제

UnCompress

선택한 생성자에서 삭제된 Attribute 코드 복구

Compress All

모든 생성자에서 사용하지 않는 Attribute 코드 삭제

UnCompress All

모든 생성자에서 삭제된 Attribute 코드 복구

Collapse All

선택자 트리 모두 접기

Expand All

선택자 트리 모두 펼치기

작성한 스크립트에 오류가 있는 경우에는 Error List에 표시되며 오류가 발생한 선택자를 표시해줍니다.

선택자 추가

CSS 편집기의 툴바에서 "Add Selector"를 클릭하여 선택자를 추가할 수 있습니다. Components 목록에서 체크한 컴포넌트로 선택자를 추가할 수 있습니다.


이름

설명

1

Multi Selector

같은 값을 가지는 여러 개 선택자를 묶어서 한번에 지정합니다.

2개 이상의 컴포넌트를 선택하거나 Status를 2개 이상 선택한 경우 체크박스 영역이 활성화되며 체크하는 경우 Multi Selector로 처리합니다.

예를 들어 Button, Calendar 컴포넌트를 선택하고 Multi Selector를 체크하면 아래와 같이 처리합니다.

.Button,

.Calendar

{

}

2

Class Selector

특정 클래스를 지정하고 현재 선택자의 설정을 반영합니다.

예를 들어 Button 컴포넌트 중 TEST라는 클래스를 지정해 다른 속성을 만들 수 있습니다. 이렇게 만든 선택자는 컴포넌트의 cssclass 속성값에 "TEST"를 지정하면 반영됩니다.

.Button.TEST

{

background : aqua;

}

3

Use Attribute

선택자에서 사용할 속성을 에디터에 추가할지 여부를 선택합니다.

해당 항목을 체크하면 해당 선택자에서 사용할 수 있는 속성 목록에 에디터에 표시됩니다.

4

Status Combination

Status 항목과 UserStatus 항목을 모두 선택한 경우 묶어서 한번에 지정합니다.

예를 들어 Button 컴포넌트의 mouseover Status 항목과 selected UserStatus 항목을 선택한 후 해당 항목을 체크하면 아래와 같이 처리합니다.

.Button[status=mouseover][userstatus=selected]

{

}

Status 항목 선택 시 속성 선택자를 지정합니다. enabled 상태는 기본값으로 처리되어 별도 속성 선택자를 지정하지 않습니다.

클래스 선택자 추가

Add Selector 창에서 Class Selector를 선택하고 클래스 이름을 입력합니다. 컴포넌트를 체크하여 조합된 클래스 선택자로도 생성할 수 있습니다.

자식 선택자 추가

자식을 가지는 선택자를 트리에서 선택하고 툴바의 Add Child Selector를 클릭하면 자식 선택자를 추가할 수 있습니다.

넥사크로플랫폼에서 사용하는 자식 선택자라는 표현은 CSS의 자식 선택자와는 다릅니다. 형식은 하위 선택자(Descendant selectors)와 유사합니다.

NavigatorBar

컴포넌트 항목으로 바로 이동하거나 하위 항목 중에서 원하는 항목으로 바로 이동하는 기능을 제공합니다. [♦] 버튼을 클릭하면 이동할 수 있는 모든 컴포넌트 목록이 표시되며 항목 선택 시 해당하는 컴포넌트 코드로 이동합니다.

선택자 또는 자식 선택자를 옆에 표시되는 버튼을 클릭하면 하위 항목 목록이 표시되며 항목 선택 시 해당하는 항목 코드로 이동합니다.

해당 항목이 없는 경우에는 [+] 버튼이 표시됩니다. 해당 버튼 클릭 시 하위 항목이 추가됩니다.

코드 편집

에디터에서 속성값 입력 시 자동으로 속성값 목록과 관련 syntax를 표시해줍니다. 엔터키로 원하는 속성값을 선택하면 입력할 수 있는 속성값 형태를 표시합니다.

입력할 수 있는 속성값 유형이 2개 이상이면 키보드에서 위, 아래 방향키를 사용해 속성값 유형을 선택할 수 있습니다. 엔터키를 입력해 원하는 속성값 유형을 선택하면 관련된 입력 예제를 화면에 표시합니다.

Style Quick Editor 영역은 접거나 펼칠 수 있습니다. 필요에 따라 Text Editor 영역을 좀 더 넓게 활용할 수 있습니다.

Xcss Editor 하단 탭에서 "Text" 항목 선택 시 전체 코드를 수정할 수 있습니다.