넥사크로는 각 운영체제에 적절한 기본 테마를 제공하고 있습니다. 하지만 업무 환경에 따라 적절한 디자인 작업은 애플리케이션 개발 시 필요한 작업입니다. 각 컴포넌트에 적절한 스타일 속성값을 지정하고 이를 반영할 수 있습니다.

기본 테마 수정하기

앗! NexacroTheme 항목 아래의 기본 테마는 수정할 수 없습니다.

Resource Explorer에서 Theme 항목 아래에 있는 테마만 수정하거나 사용할 수 있습니다. NexacroTheme 항목 아래에 있는 테마를 더블 클릭하면 해당 테마를 가져올 것인지 물어보는 대화상자가 표시됩니다.

기본 테마 복사해서 내 테마로 만들기

테마를 새로 만들수도 있습니다. 하지만 테마를 생성하기 위해 지정해야 하는 속성이 너무 많기 때문에 처음부터 테마를 만들기는 쉽지 않은 작업입니다. 이런 경우 기본 테마를 복사해놓고 이를 기반으로 필요한 항목을 수정해 사용합니다.

넥사크로 스튜디오의 Project Explorer 창에서 하단의 Resource Explorer 탭을 클릭합니다.

복사할 기본 테마를 더블 클릭합니다.

NexacroTheme 아래에 있는 테마를 더블 클릭하면 해당 테마를 가져올 것인지 물어보는 대화상자가 표시됩니다.

Theme 폴더 아래에 gray 테마가 복사됐습니다. 그대로 사용해도 되지만 기본 테마와 파일명이 같으면 혼란스러울 수 있으니 테마명을 변경합니다. 마우스 오른쪽 버튼을 클릭하고 컨텍스트 메뉴에서 [Rename] 항목을 선택하고 "test"로 수정합니다.

gray.xtheme 파일이 그대로 복사되지 않고 이미지 파일과 XCSS 파일이 압축이 풀린 상태로 복사됩니다.

[Project Explorer]로 다시 돌아가서 "Environment" 항목을 선택하고 속성창에서 themeid 속성값을 Theme 폴더 아래에 복사한 테마로 변경합니다.

themeid를 변경한 이후 디자인 화면이 변경되지 않는 경우가 있습니다. 이런 경우에는 [Proejct Explorer]에서 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴에서 "Refresh" 항목을 선택합니다.

Theme 폴더에 복사한 테마 파일을 마우스로 더블클릭합니다. 파일이 열리면서 theme.xcss 파일을 편집할 수 있는 에디터가 열립니다.

[Nexacro Style Sheet] 목록에서 Button을 찾아 마우스로 더블클릭합니다. [Xcss Editor]에는 .Button 선택자의 코드가 보여지고 [Preview]에는 Button 컴포넌트의 미리보기 화면이 표시됩니다.

[Xcss Editor]에 표시된 코드를 직접 수정하거나 상단 툴바에서 원하는 항목을 선택해 수정할 수 있습니다. 여기에서는 상단 툴바에서 "Color" 항목을 선택합니다.

원하는 배경색을 선택합니다.

코드에서 color 속성값과 [Preview]에 표시되는 Button 컴포넌트의 글자색이 변경된 것을 확인할 수 있습니다.

디자인 화면에서 Button 컴포넌트를 배치해봅니다. 테마에서 수정한 배경색이 반영되었는지 확인합니다. 기존에 배치한 Button 컴포넌트의 색도 모두 변경됩니다.