넥사크로 디자인의 이해 - xcss 편집기 선택자 다루기 calendar 활용편

이 글을 읽으면 

• Calendar Component의 선택자 구조를 이해할 수 있습니다.
• Calendar Component의 선택자를 이용하여 Style을 적용할 수 있습니다.

 

디자인 하기

1. Calendar Component 선택자 확인하기

Calendar Component의 기본 구조

Calendar는 날짜와 시간을 입력 받기 위한 컴포넌트입니다. Components 중에서도 Calendar의 선택자는 복잡하고 다양하여 초기에 정확한 구조 이해가 필요합니다. 위의 트리(Tree) 구조를 통해서 Calendar 선택자를 확인하고 Style을 적용하여 디자인을 완성해보겠습니다.

2. Calendar Component 생성하기

① 상단의 Component Toolbar에서 Calendar Component 아이콘을 선택합니다.

② Calendar Component 아이콘을 선택한 상태에서 화면을 한번 클릭하거나 원하는 크기로 마우스 드래그하여 생성합니다.

 

Calendar Type

Calendar Component의 3가지 디자인

Calendar Component는 type 속성값에 따라 화면에 보이는 형식이 달라집니다. 속성값은 Properties > Appearance > type에서 변경할 수 있으며 속성값은 normal(default), monthonly, spin으로 총 3가지입니다. 예제에서는 normal(default)을 사용합니다.

* type 속성값을 monthonly로 지정한 경우에는 속성값 변경 후, 컴포넌트의 크기를 조절해주세요!

 

3. 속성 선택자 추가하기

① XCSS 편집창에서 Add Selector 아이콘을 선택합니다.

② Components에서 Calendar를 체크하고 Add 버튼을 누른 후, 속성과 속성값을 추가합니다.

* 속성값 입력은 정확도와 텍스트의 오류 방지를 위하여 Properties에서 작업하는 것을 권장합니다.

구분	종류	결과 코드
Components	Calendar	.Calendar {     -nexa-border : 1px solid #cccccc;     background : transparent; }

 

4. 자식 선택자 추가하기

Calendar의 자식 선택자는 3depth로 이루어져 있을 만큼 종류가 다양합니다. Calendar의 type 속성값인 normal을 기준으로 디자인을 보면서 순차적으로 자식 선택자를 추가해보겠습니다.

Dropbutton 디자인 하기

① XCSS 편집창에서 Add Child Selector 아이콘을 선택합니다.

② Child Controls에서 calendaredit, dropbutton을 체크하고 Add 버튼을 누릅니다.

③ 추가된 Selector를 클릭하여 각각 속성과 속성값을 추가합니다.

구분	종류	결과 코드
Child Controls	calendaredit	.Calendar .calendaredit {     -nexa-border : 0px none;     -nexa-padding : 1px 9px 0px 9px;     background : #ffffff; }
	dropbutton	.Calendar .dropbutton {     -nexa-border : 0px none, 0px none, 0px none, 1px solid #cccccc;     -nexa-icon : url('imagerc::btn_WF_Calendar.png');     background : #f9f9f9; }

 

Popup Calendar 디자인 하기

Calendar Component에서 우측의 달력 아이콘을 클릭했을 때 팝업 형식으로 보이는 달력입니다. 자식 선택자는 크게 년도(year)와 월(month)을 조정할 수 있는 head와 일(day)을 조정할 수 있는 body로 구분합니다.

• head

① .Calendar Selector를 선택한 상태에서 XCSS Editor의 NavigatorBar로 이동합니다.

② NavigatorBar에서 Calendar > datepicker > head로 설정하고 Add Selector 아이콘(＋)을 클릭합니다.

③ 추가된 Selector를 클릭하여 각각 속성과 속성값을 추가합니다.

구분	종류		결과 코드
Child Controls	datepicker	head	.Calendar .datepicker .head {     background : #333333;     color : #ffffff; }

 

위와 같은 방법으로 아래 표를 참고하여 Calendar > datepicker > head > 자식 선택자를 설정하고 속성과 속성값을 추가합니다.

구분	종류				결과 코드
Child Controls	datepicker	head	prevbutton		.Calendar .datepicker .head .prevbutton {     -nexa-icon : url('imagerc::btn_WF_Calprev.png');     cursor : pointer; }
			nextbutton		.Calendar .datepicker .head .nextbutton {     -nexa-icon : url('imagerc::btn_WF_Calnext.png');     cursor : pointer; }
			yearstatic		.Calendar .datepicker .head .monthstatic, .Calendar .datepicker .head .yearstatic {     cursor : pointer; }
			monthstatic
			yearspin	spinupbutton spindownbutton spinedit	.Calendar .datepicker .head .yearspin .spinupbutton {     -nexa-icon : url('imagerc::btn_WF_Calspinup.png');     cursor : pointer; } .Calendar .datepicker .head .yearspin .spindownbutton {     -nexa-icon : url('imagerc::btn_WF_Calspindown.png');     cursor : pointer; } .Calendar .datepicker .head .yearspin .spinedit {     background : #f9f9f9;     color : #000000; }
			monthspin

• body

① .Calendar Selector를 선택한 상태에서 XCSS Editor의 NavigatorBar로 이동합니다.

② NavigatorBar에서 Calendar > datepicker > body로 설정하고 Add Selector 아이콘(＋)을 클릭합니다.

③ 추가된 Selector를 클릭하여 각각 속성과 속성값을 추가합니다.

구분	종류		결과 코드
Child Controls	datepicker	body	.Calendar .datepicker .body {     background : #f9f9f9; }

 

위와 같은 방법으로 아래 표를 참고하여 Calendar > datepicker > body > 자식 선택자를 설정하고 속성과 속성값을 추가합니다.

구분	종류			결과 코드
Child Controls	datepicker	body	weekband	.Calendar .datepicker .body .weekband {     background : transparent; }
			weekitem	.Calendar .datepicker .body .weekitem {     color : #000000; }
			dayitem	.Calendar .datepicker .body .dayitem {     cursor : pointer; }

5. 결과화면

 

XCSS에서 속성을 반영하면 Project Explorer > Base > 해당 .xfdl에서 디자인이 적용된 화면을 볼 수 있습니다.

Nexacro Browser에서도 동일한 디자인이 적용된 Calendar를 확인할 수 있습니다.

 

PS.

Calendar는 업무에서 많이 활용하고 있는 Component 중 하나 입니다. Calendar의 자식 선택자 사용법을 익히고 업무에 다양하게 활용해보세요!

 

참고

컴포넌트 활용 워크북 - Calendar

디자인 교육자료 - Nexacro Platform 17 Design EDU.zip

* 교육자료 프로젝트의 화면 및 XCSS, Theme를 확인하기에 적합한 툴 버전은 2019.6.25.1(17.0.0.2101) 이후 버전입니다.

 

플레이넥사크로 바로가기

https://www.playnexacro.com/

play nexacro