4.컴포넌트 개별 스타일 지정하기

Edit

넥사크로 모듈 디벨로퍼는 "베타" 버전입니다.

- "베타" 기간 동안 일부 제품 기능은 변경될 수 있습니다.

- 온라인 매뉴얼 URL은 변경될 수 있습니다.

- 가이드에서 사용한 샘플 코드는 아래 링크에서 내려받을 수 있습니다.

https://github.com/TOBESOFT-DOCS/SIMPLE_MODULE_PROJECT/archive/master.zip

https://github.com/TOBESOFT-DOCS/SIMPLE_MODULE_PROJECT

컴포지트 컴포넌트 내 배치된 개별 컴포넌트는 기본 테마의 컴포넌트 스타일을 적용합니다. 배포하는 컴포지트 컴포넌트에만 적용하는 스타일을 원한다면 XCSS 파일과 cssclass 속성을 활용할 수 있습니다.

4.1XCSS 파일 편집하고 화면에 적용하기

모듈 프로젝트 생성 시 프로젝트 이름으로 XCSS 파일을 자동 생성합니다. 생성된 파일은 Resource Explorer 탭에서 찾을 수 있습니다.

1

Resource Explorer 탭에서 xcss 파일을 선택하고 컨텍스트 메뉴에서 [Edit] 항목을 클릭해 CSS 편집창을 실행합니다.

2

Text 탭에서 아래와 같이 코드를 수정합니다. Calendar 선택자를 추가하고 클래스 선택자로 simple_module이라는 항목을 추가합니다.

.Calendar.simple_module .datepicker .head
{
    background : orangered;
}
.Calendar.simple_module .datepicker .body .weekband
{
    background : orangered;
}
.Calendar.simple_module .datepicker .body
{
    -nexa-border : 1px none transparent;
}

.Calendar.simple_module .datepicker .body .dayitem[userstatus=saturday]
{
    color : #333333;
}
.Calendar.simple_module .datepicker .body .dayitem[userstatus=sunday]
{
    color : #333333;
}
.Calendar.simple_module .datepicker .body .weekitem[userstatus=saturday]
{
    color : #ffffff;
}
.Calendar.simple_module .datepicker .body .weekitem[userstatus=sunday]
{
    color : #ffffff;
}
.Calendar.simple_module_purple .datepicker .head
{
    background : #C785C8;
}
.Calendar.simple_module_purple .datepicker .body .weekband
{
    background : #C785C8;
}

CSS 편집창 기능은 아래 링크를 참고하세요.

XCSS 편집

3

Project Explorer 탭에서 xcdl 파일을 선택하고 컨텍스트 메뉴에서 [Edit] 항목을 클릭해 컴포지트 컴포넌트의 화면을 열어줍니다.

4

2개의 Calendar 컴포넌트의 cssclass 속성값을 "simple_module"로 지정합니다. 컴포넌트의 스타일이 변경된 것을 확인할 수 있습니다.

5

모듈 설치 파일을 생성합니다. 별도의 설정 없이 xcss 파일이 같이 배포된 것을 확인할 수 있습니다.

4.2모듈 설치하고 적용된 스타일 확인하기

모듈 설치 단계는 컴포지트 컴포넌트를 선택하는 단계까지는 같습니다. 해당 단계에서 [Next] 버튼을 클릭하고 Style을 적용할 App을 선택합니다.

1

설치할 컴포지트 컴포넌트 이름을 확인하고 [+] 버튼을 클릭하고 [Next] 버튼을 클릭합니다.

2

스타일 설정 화면에서 적용할 App 오브젝트를 지정합니다. 굵은 글씨로 xcss 파일이 추가된 것을 확인할 수 있습니다.

3

[Install] 버튼을 클릭하고 모듈을 설치합니다.

4

컴포지트 컴포넌트를 배치한 Form 화면을 열거나 새로 Form을 만들어서 컴포지트 컴포넌트를 배치하고 지정한 스타일이 적용되었는지 확인합니다.

4.3XCSS 편집 시 미리보기 속성 지정하기

컴포넌트 특성에 따라 특정한 값이 설정되어 있어야 컴포넌트에 적용된 스타일을 확인할 수 있는 경우가 있습니다. Grid 컴포넌트나 Combo, Radio 컴포넌트 등 데이터와 연결되어 화면을 표시하는 컴포넌트의 경우에는 데이터가 연결되어 있어야 스타일을 확인할 수 있습니다.

모듈 프로젝트 생성 시 생성되는 Design[오브젝트명].js 파일에서 XCSS 편집 시 미리보기에 필요한 속성을 지정할 수 있습니다.

1

Project Explorer에서 Design[오브젝트명].js 파일을 선택해 화면에 표시합니다.

2

속성창에서 createCssDesignContents 오브젝트 인터페이스 함수를 추가합니다.

3

createCssDesignContents 오브젝트 인터페이스 함수에서 fromValue, toValue 속성값을 지정하도록 수정합니다.

_pTwoMonthCalendar.createCssDesignContents = function ()
{
    this.set_fromValue('19990405');
    this.set_toValue('20180510');
};

4

프로젝트를 저장하고 모듈을 배포합니다.

5

넥사크로 스튜디오에서 모듈을 설치하고 테마를 열어 스타일 편집 모드를 실행합니다.

6

TwoMonthCalendar 선택자를 추가합니다.

추가한 선택자 미리보기에서 createCssDesignContents 오브젝트 인터페이스에서 지정한 속성값이 적용되어 보여지는 것을 확인할 수 있습니다.