프로젝트 편집 | 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를 선택하고 클래스 이름을 입력합니다. 컴포넌트를 체크하여 조합된 클래스 선택자로도 생성할 수 있습니다.

Components 목록에서 Control 항목 선택 시에는 Class Selector를 추가할 수 없습니다.


자식 선택자 추가

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

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

NavigatorBar

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

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

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

코드 편집

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

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

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

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

변수로 선언하고 속성값으로 사용하기(Predefine)

XCSS 편집 시 속성값으로 반복해서 사용하는 값을 변수처럼 미리 선언해놓고 속성값을 직접 지정하는 대신 해당 변수(id)로 지정할 수 있습니다. 속성값 수정이 필요할 때 속성값을 직접 찾아서 변경하지 않고 Predefine 항목 중 원하는 Item의 value 값만 수정하면 빠르게 속성값을 반영할 수 있습니다.

Predefine 기능은 넥사크로 스튜디오에서만 사용할 수 있는 기능입니다.

XCSS 편집 시에만 설정할 수 있으며 스크립트에서 Item value에 접근하거나 수정할 수 없습니다.


CSS custom properties (variables)와는 다른 기능입니다.

XCSS 편집 시에서는 CSS custom properties (variables)를 지원하지 않습니다.

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

변수 선언하기

XCSS 편집창에서 Predefine 탭을 선택합니다. Group 항목을 추가하고 변수로 사용할 Item 항목을 추가합니다.


이름

설명

1

Add Group

Group 항목을 추가합니다.

Group 항목은 Item 항목을 종류별로 구분하기 위한 용도로만 사용합니다.

Predefine 설정 시 1개 이상의 Group 항목이 필요합니다.

2

Add Item

id, value로 구성된 변수입니다.

Item 항목 중 id 값은 XCSS에서 속성값 설정 시 사용합니다.

같은 XCSS 파일 내에서 중복된 id는 사용할 수 없습니다.

3

Delete

선택한 Group 또는 Item을 삭제합니다.

Group 삭제 시 Group에 포함된 Item도 같이 삭제합니다.

2개 이상의 항목 선택 후 삭제할 수 있습니다.

개별 Group 또는 Item 삭제 시에는 각 항목 앞에 있는 '-' 버튼으로 삭제할 수 있습니다.

4

Group 선택 필터

목록에서 선택한 Group에 포함된 Item만 표시합니다.

'All' 항목 선택 시에는 모든 Group, Item을 표시합니다.

5

id 검색 필터

검색창에 입력한 문자열이 포함된 id 값을 가진 item만 표시합니다.

다른 Group으로 Item을 이동할 수 있습니다.



Group 내에 선언된 Item 순서는 동작에 영향을 미치지 않으며 순서를 변경할 수는 없습니다.

Predefine 탭에서 선언한 변수(Item)는 XCSS 속성값 편집 시 사용할 수 있습니다.

선언한 변수를 속성값으로 사용하기(XCSS Editor)

XCSS 편집 시 인텔리센스 기능을 사용해 Predefine 탭에서 선언한 Item을 확인하고 선택할 수 있습니다.

Item을 선택하면 아래와 같은 형식으로 자동 변환되어 속성값으로 설정됩니다.

선언한 변수를 속성값으로 사용하기(속성창)

속성창에서 Predefine 탭에서 선언한 Item을 선택하려면 속성창 각 항목에 있는 'Predefine' 버튼을 클릭해서 상태를 전환한 후 'Predefine List' 버튼을 클릭하고 창을 띄워 Item을 선택합니다.

속성창에서 Predefine 기능을 사용하는 것은 속성 단위로만 설정할 수 있습니다.

예를 들어 background 속성값 설정 시에는 Predefine 기능을 사용할 수 있지만 하위에 있는 background-color 항목은 'Predefine' 버튼이 표시되지 않으며 사용할 수 없습니다.


generate 결과 확인하기

Predefine 기능을 사용한 값은 generate 과정에서 해당하는 value 값으로 변환되어 반영됩니다. XCSS 편집 시 Component Preview 창 또는 속성창 Computed Style 탭에서 변환되는 값을 확인할 수 있습니다.

Predefine 설정값 공유하기

Predefine 설정값은 테마 내 XCSS 또는 XCSS 파일 내에서만 적용됩니다. 설정한 값을 공유하려면 외부 텍스트 편집기에서 XCSS 파일을 열고 Predefines 태그 내 항목을 복사해서 가져올 수 있습니다.

<?xml version="1.0" encoding="utf-8"?>
<XCSS version="1.1">
  <Predefines>
    <Group id="Color">
      <Define id="main_color" value="blue"/>
      <Define id="font_color" value="yellow"/>
      <Define id="sub_color" value="red"/>
    </Group>
  </Predefines>
  <CSSData><![CDATA[.Button
{
	background : -nexa-define(--main_color);
}
]]></CSSData>
</XCSS>

사용 예: gray 테마 색상 변경하기

gray 테마에는 아래와 같이 선택한 항목에 대한 색상이 Predefine 항목에 정의되어 있습니다.

maincolor: #BBAAFF
subcolor: #EEEBFF

Predefine 항목값을 원하는 값(blue 계열)으로 변경하고 저장하면 변경한 값이 반영되는 것을 확인할 수 있습니다.

maincolor: #3E86FF
subcolor: #DEF1FE