6.넥사크로플랫폼 17을 이용한 화면 완성하기

Edit

넥사크로 스튜디오를 이용하여 화면을 완성해 보면서 컴포넌트 사용 방법과 기능에 대하여 알아봅니다.

이번 챕터의 넥사크로플랫폼 17을 이용한 화면 완성하기는 교육자료의 " EDU_nexacro17_Design " 샘플프로젝트의 화면을 이용해서 컴포넌트를 그리고 빈 테이블에는 컴포넌트를 채워가면서 컴포넌트의 종류와 기능에 대해서 알아보고 디자인을 변경하여 최종적으로 위와 같은 화면을 완성해 봅니다.

6.1컴포넌트 배치하기

넥사크로 스튜디오 17 아이콘을 더블클릭하여 실행 하고 샘플 프로젝트를 오픈합니다.
  1. 프로젝트의 Edu폴더에서 EMPLOYEES_Exercise 화면을 열고 작업을 시작합니다.

  1. 화면의 빈 공간과 테이블안에 컴포넌트를 아래와 같은 순서로 그리며 배치합니다.

1 4 Static
화면에 일정한 문자열을 출력하기 위해 사용하는 컴포넌트입니다.

2 6 Button
사용자가 마우스를 클릭해서 지정한 스크립트를 수행하기 위한 push button 컨트롤을 사용하게 하는 컴포넌트입니다. 

3 Div
하나의 화면에 여러 개의 부분화면울 구성할 때 사용하는 컴포넌트입니다.

5 7 Edit
사용자에게 한 줄의 문자열을 입력받고 출력하기 위해 사용되는 컴포넌트입니다.

8 14 MaskEdit
정해진 규격에 따라 입력될 필요가 있는 자료가 있을 때 사용되는 컴포넌트입니다.

9 Combo
여러 개의 값중에서 하나의 값을 선택하기 위한 용도로 사용되는 컴포넌트입니다.

10 ListBox
여러 개의 값 중에서 하나 또는 여러 개의 값을 선택하기 위한 용도로 사용되는 컴포넌트입니다.

11 Radio
여러 개의 값 중에서 하나를 선택할 때 버튼의 형태로 사용되는 컴포넌트입니다.

12 CheckBox
사각박스 안에 선택된 상태 또는 선택되지 않은 상태를 전환하면서 체크표시로 표현하는 컴포넌트입니다.

13 Calendar
날짜와 시간을 입력받기 위한 컴포넌트입니다.

15 TextArea
사용자에게 여러 줄의 문자열을 입력받고 출력하기 위해 사용되는 컴포넌트입니다.

16 Grid
Dataset의 내용을 격자모양으로 표현하는 컴포넌트입니다.

6.2컴포넌트 형태에 따른 분류로 이해하기

화면에 그린 컴포넌트를 형태에 따라 분류 한 뒤 각각 설명합니다. 해당 컴포넌트에 대한 디자인은 코드로 제시된 관련 속성가이드로 표현합니다.

6.2.1텍스트 형태의 컴포넌트

Static

화면에 일정한 문자열을 출력하기 위해 사용하는 컴포넌트

상태선택자

분류

선택자 구분

종류

Static

속성선택자

[status=disabled]

[status=mouseover]

실습하기

  1. Common.xcss에 아래의 가이드와 같이 Static의 디자인을 변경합니다.

.Static
{
    -nexa-border : 0px none;
    -nexa-vertical-align : middle;
    background : transparent;
    border-radius : 0px;
    color : #222222;
    font : bold 16px "Verdana";
}
XCSS에서 선택자 추가하여 편집하는 방법

  1. 결과가 아래와 같은 모습으로 보여집니다.

  1. 화면을 배치할 때 Static 컴포넌트를 14 위치에 그렸으나 완성 할 화면모습처럼 두 같은 컴포넌트의 디자인은 다른모습을 보이고 있습니다. 이에 지난 5장에서 배웠던 클래스선택자를 이용하여 다른 디자인을 Common.xcss에 표현할 수 있는 것입니다. 아래 클래스값의 가이드를 주어 다른 디자인도 확인해 봅니다.

.Static.sta_label
{
    -nexa-border : 0px none;
    color : #222222;
    font : bold 12px "Verdana";
}
클래스 적용

컴포넌트 선택 후 Properties > Information > cssclass 속성에 해당하는 클래스 값 입력

  1. 텍스트를 변경합니다.

    • Properties > Action > text

    • 컴포넌트 선택 후 F2

  1. 위치 및 크기를 맞춰봅니다.

    컴포넌트를 선택하고 해당 속성에서 값을 지정합니다.

    [ EMPLOYEES ]

    • Properties > Position > left, top, width, height

    • left = 15, top = 15, width = 150, height = 20

다른 Static의 위치와 크기는 그 밖에 있는 Div 컴포넌트 후에 맞추도록 하겠습니다.

NON XCSS 속성

—.xcss에서 정의 할 수 없는 일반 속성입니다. ( Script 또는 툴에서 제어 )

분류

속성

설명

Misc.

usedecorate

Decorate 효과를 적용할지 설정하는 속성 - true, false

true - Decorate 효과 적용

false - Decorate 효과 적용하지 않음

Action > text 속성값에 Tag형식으로 Decorate 효과를 설정하며 아래와 같은 형식을 지원합니다.

명령어

설 명

fs

글자의 크기(font size)를 지정

<fs v='12'> Text </fs>

fc

글자의 색상(font color)를 지정

<fc v='red'> Text </fc>, <fc v='#ff0000'>Text </fc>

ff

글자의 종류(font family)를 지정

<ff v='Verdana'>Text <ff>

b

굵은글씨(bold)를 지정

<b v='true'>Text </b>

i

기울임 효과(italic)를 지정

<i v='true'>Text </i>

u

밑줄효과(underline)를 지정

<u v='true'>Text </u>

s

취소선효과(strike)를 지정

<s v='true'>Text </s>

l

링크효과(link)를 지정

URL, 전화번호, 메일주소 중 하나를

설정할 수 있습니다.

설정된 형태에 따라 알맞는 앱이

실행됩니다.

<l v='http://www.tobesoft.co.kr'>TOBESOFT</l>

<l v='TEL : 010-1234-5678>전화걸기</l>

<l v='mailto:manager@tobesoft.com>메일보내기</l>

usedecorate = true 로 사용된 예

1 기울임 효과 (italic) 지정

2 글자의 색상 (font color)을 지정

Edit

사용자에게 한 줄의 문자열을 입력받고 출력하기 위해 사용되는 컴포넌트

상태선택자

분류

선택자 구분

종류

Edit

속성선택자

[status=disabled]

[status=mouseover]

[status=focused]

[status=readonly]

[userstatus=nulltext]

실습하기

  1. Common.xcss에 아래의 가이드와 같이 Edit의 디자인을 변경합니다.

.Edit
{
    -nexa-border : 1px solid #9c9c9c;
    -nexa-padding : 0px 8px 0px 8px;
    -nexa-text-align : left;
    background : #ffffff;
    border-radius : 0px;
    color : #222222;
    font : 12px "Verdana";
}

화면에 Edit도 2개 배치했으나 같은 디자인이므로 Static처럼 클래스선택자를 사용하지 않아도 됩니다.

  1. 컴포넌트의 크기를 맞춰봅니다. 위치는 다른 컴포넌트의 확인 이후에 맞춰보도록 합니다.

    5 Edit size - 150 × 25

    7 Edit size - 210 × 21

NON XCSS 속성

—.xcss에서 정의 할 수 없는 일반 속성입니다. ( Script 또는 툴에서 제어 )

분류

속성

설명

Action

displaynulltext

value 값이 "null"일 때 표시될 대체문자를 설정하는 속성

value

표시되는 문자열을 갖는 속성

Misc.

password

입력되는 문자를 모두 별표(*)로 대체 할 지 설정하는 속성 - true, false

MaskEdit

정해진 규격에 따라 입력될 필요가 있는 자료가 있을 때 사용되는 컴포넌트

상태선택자

분류

선택자 구분

종류

MaskEdit

속성선택자

[status=disabled]

[status=mouseover]

[status=focused]

[status=readonly]

[userstatus=nulltext]

실습하기

  1. Common.xcss에 아래의 가이드와 같이 MaskEdit의 디자인을 변경합니다.

.MaskEdit
{
    -nexa-border : 1px solid #9c9c9c;
    -nexa-padding : 0px 8px 0px 8px;
    -nexa-text-align : right;
    background : #ffffff;
    border-radius : 0px;
    color : #222222;
    font : 12px "Verdana";
}

화면에 MaskEdit도 2개 배치했으나 같은 디자인이므로 클래스선택자를 사용하지 않아도 됩니다.

  1. 컴포넌트의 크기를 맞춰봅니다. 위치는 다른 컴포넌트의 확인 이후에 맞춰보도록 합니다.

    814 MaskEdit size - 210 × 21

NON XCSS 속성

—.xcss에서 정의 할 수 없는 일반 속성입니다. ( Script 또는 툴에서 제어 )

분류

속성

설명

Action

displaynulltext

value 값이 "null"일 때 표시될 대체문자를 설정하는 속성

format

컴포넌트에 입력 받을 문자의 형식을 지정하는 속성

type

컴포넌트에 입력되는 형식을 설정하는 속성 - number, string

value

표시되는 문자열을 갖는 속성

type = string 일 때 문자열 마스크 문자

분류

속성

마스크문자

설명

Action

format

@

모든 Ascii 문자

한글과 같은 다국어 문자는 입력 불가

#

10진수 숫자 ( 0-9 )

*

알파벳 문자 ( a-z, A-Z )

9

알파벳, 숫자 ( a-z, A-Z, 0-9 )

A

대문자 알파벳 ( A-Z )

a

소문자 알파벳 ( a-z )

Z

대문자 알파벳, 10진수 숫자 ( A-Z, 0-9 )

z

소문자 알파벳, 10진수 숫자 ( a-z, 0-9 )

Employee ID 에 해당하는 MaskEdit에 사번 적용

• 컴포넌트를 선택하고 Action > type : string 으로 변경합니다.

• Action > format : AAAA - ####을 입력합니다.

• Action > value : tobe0701 값을 입력합니다.

TextArea

사용자에게 여러 줄의 문자열을 입력받고 출력하기 위해 사용되는 컴포넌트

상태선택자

분류

선택자 구분

종류

TextArea

속성선택자

[status=disabled]

[status=mouseover]

[status=focused]

[status=readonly]

[userstatus=nulltext]

하위선택자

vscrollbar

hscrollbar

분류

선택자 구분

종류

.TextArea .vscrollbar

.TextArea .hscrollbar

속성선택자

[status=disabled]

[status=mouseover]

하위선택자

incbutton

decbutton

trackbar

실습하기

  1. Common.xcss에 아래의 가이드와 같이 TextArea의 디자인을 변경합니다.

.TextArea
{
    -nexa-border : 1px solid #9c9c9c;
    -nexa-padding : 3px 3px 3px 3px;
    -nexa-text-align : left;
    -nexa-word-wrap : char;
    background : #ffffff;
    border-radius : 0px;
    color : #222222;
    font : 12px/18px "Verdana";
}
  1. 컴포넌트의 크기를 맞춰봅니다. 위치는 다른 컴포넌트의 이해 이후에 맞춰보도록 합니다.

    TextArea size - 210 × 144

NON XCSS 속성

—.xcss에서 정의 할 수 없는 일반 속성입니다. ( Script 또는 툴에서 제어 )

분류

속성

설명

Action

displaynulltext

value 값이 "null"일 때 표시될 대체문자를 설정하는 속성

value

표시되는 문자열을 갖는 속성

컴포넌트 크기와 상관없는 줄바꿈

아래이미지처럼 입력된 문자열이 컴포넌트보다 길경우 가로 혹은 세로에 scrollbar가 생기며 더 많은 문자열이 있음을 알려줍니다.( ScrollBar디자인에 대해서는 다른 장에서 자세히 배워봅니다.)

이 때 컴포넌트 크기에 의해서 다음 줄로 넘어가는 경우가 아닌 임의로 줄바꿈이 필요한 경우 해당 속성 편집 창에서 이를 해결 할 수 있습니다.

[ TextArea ]
Action > value - dropbutton 눌렀을 때 편집창
[ Static ]
Action > text - dropbutton 눌렀을 때 편집창

원하는 위치에 커서를 둔 뒤 Ctrl + Enter 로 줄바꿈이 가능하다.

6.2.2버튼 형태의 컴포넌트

Button

사용자가 마우스를 클릭해서 지정한 스크립트를 수행하기 위한 push button 컨트롤을 사용하게 하는 컴포넌트

상태선택자

분류

선택자 구분

종류

Button

속성선택자

[status=disabled]

[status=mouseover]

[status=focused]

[userstatus=pushed]

[userstatus=selected]

실습하기

  1. Common.xcss에 아래의 가이드와 같이 Button의 디자인을 변경합니다.

.Button
{
    -nexa-border : 1px solid #9c9c9c;
    -nexa-text-align : center;
    -nexa-vertical-align : middle;
    background : linear-gradient(to bottom,#ffffff,#e1e1e1);
    border-radius : 0px;
    color : #222222;
    cursor : pointer;
    font : 12px "Verdana";
}
  1. 화면에 있는 2 6 버튼이 아래처럼 같은 디자인으로 보여집니다. 버튼 또한 Static처럼 같은 화면에서 서로 다른 디자인을 표현하고 있는 경우로 위의 가이드는 6 Search Button의 디자인이므로 아래 클래스값의 가이드를 주어 2 Button도 디자인을 확인해 봅니다.

.Button.btn_save
{
    -nexa-border : 1px solid #263a7d;
    -nexa-text-align : center;
    -nexa-vertical-align : middle;
    background : URL("imagerc::btn_save.png") repeat-x;
    border-radius : 0px;
    color : #ffffff;
    font : 12px "Verdana";
}
  1. 2 Button 에 class를 적용합니다.

    • Information > cssclass : btn_save

  1. 텍스트를 변경합니다.

    • Properties > Action > text

    • 컴포넌트 선택 후 F2

  1. 컴포넌트의 크기를 맞춰봅니다. 위치는 다른 컴포넌트의 확인 이후에 맞춰보도록 합니다.

    • Button size - 60 × 23

CheckBox

사각박스 안에 선택된 상태 또는 선택되지 않은 상태를 전환하면서 체크표시로 표현하는 컴포넌트

상태선택자

분류

선택자 구분

종류

CheckBox

속성선택자

[status=disabled]

[status=mouseover]

[status=focused]

[status=readonly]

[userstatus=selected]

실습하기

  1. Common.xcss에 아래의 가이드와 같이 Checkbox의 디자인을 변경합니다.

.CheckBox
{
    -nexa-border : 0px none;
    -nexa-icon : URL("imagerc::chk_btn_N.png");
    -nexa-icon-position : left;
    -nexa-text-padding : 0px 0px 0px 6px;
    -nexa-vertical-align : middle;
    background : transparent;
    border-radius : 0px;
    color : #222222;
    font : 12px "Verdana";
}

가이드 작업 후 실행 했을 경우 Checkbox의 선택 유무를 바로 완성 화면 처럼 확인 할 수는 없을 것입니다. 넥사크로플랫폼에서 Checkbox는 Icon + Text 로 이루어진 구조입니다.

그렇기때문에 각각의 상태(mouseover, selected.. 등)에 따른 디자인은 각각의 아이콘으로 디자인한 다음 XCSS에서 위 가이드에서 처럼 " -nexa-icon " 속성을 이용해서 작성합니다.

Status 선택자 추가

Add Selector 창에서 Status / UserStatus 부분 체크 선택 하거나 편집창 컴포넌트 dropbutton 클릭 후 선택하여 편집합니다.

.CheckBox[status=disabled]
{
    -nexa-icon : URL("imagerc::chk_btn_D.png");
    color : #c1c1c1;
}
.CheckBox[status=mouseover]
{
    -nexa-icon : URL("imagerc::chk_btn_M.png");
}
.CheckBox[userstatus=selected]
{
    -nexa-icon : URL("imagerc::chk_btn_S.png");
}
.CheckBox[status=mouseover][userstatus=selected]
{
    -nexa-icon : URL("imagerc::chk_btn_MS.png");
}
  1. 텍스트를 변경합니다.

    • Properties > Action > text - Married

    • 컴포넌트 선택 후 F2

  1. 컴포넌트의 크기를 맞춰봅니다. 위치는 다른 컴포넌트의 이해 이후에 맞춰보도록 합니다.

    • CheckBox size - 210 × 21

각 Status 에 따른 결과 모습

NON XCSS 속성

—.xcss에서 정의 할 수 없는 일반 속성입니다. ( Script 또는 툴에서 제어 )

분류

속성

설명

Action

value

체크 상태에 따른 값을 저장하는 속성 - true, false

화면 모습 예

Spin

일정 범위 내의 숫자 값을 입력하기 위해 사용하는 컴포넌트

상태선택자

분류

선택자 구분

종류

Spin

속성선택자

[status=disabled]

[status=mouseover]

[status=focused]

[status=readonly]

하위선택자

spinedit

spinupbutton

spindownbutton

실습하기

화면에 미리 배치해 놓은 컴포넌트가 아닌 몇몇 컴포넌트의 설명을 위해 새로 화면을 만들어서 컴포넌트를 그린 뒤 확인하도록 하겠습니다.

  1. Form Wizard 창을 열어 생성할 화면 명과 경로를 지정합니다.

  1. 툴바에서 Spin컴포넌트( ) 를 선택하고 화면에 드로잉하여 컴포넌트를 생성합니다.

  1. 간단한 디자인 변경 확인을 위해 아래 가이드와 같이 Spin의 디자인을 변경합니다.

.Spin
{
    -nexa-border : 1px solid #9c9c9c;
    background : #ffffff;
    border-radius : 0px;
}

넥사크로플랫폼에서 Spin 컴포넌트는 입력한 숫자를 보여주는 편집영역과 그 숫자를 올리거나 내릴수 있는 버튼영역으로 이루어져 있는 구조입니다. 위 가이드는 실제 Spin의 구조 영역의 디자인 변경이 아닌 드로잉해서 보이는 컴포넌트의 모습이라고 할 수 있습니다. 이처럼 선택자 자신 뿐 아니라 자식 선택자를 가지는 컴포넌트의 디자인은 XCSS파일에서 추가하여 확인 할 수 있습니다.

자식선택자 추가

자식을 가지는 선택자를 트리에서 선택 우클릭 후 Add Child Selector를 클릭하거나 편집창에서 dropbutton을 이용해서 자식 선택자를 추가할 수 있습니다.

.Spin .spinedit
{
    -nexa-border : 0px none;
    -nexa-padding : 0px 3px 0px 3px;
    -nexa-text-align : left;
    border-radius : 0px;
    color : #222222;
    font : 12px "Verdana";
    background : transparent;
}
.Spin .spinupbutton
{
    -nexa-border : 0px none;
    -nexa-icon :  URL("imagerc::spn_upbtn_N.png");
    -nexa-text-align : center;
    -nexa-vertical-align : middle;
    background : transparent;
}
.Spin .spindownbutton
{
    -nexa-border : 0px none;
    -nexa-icon :  URL("imagerc::spn_dnbtn_N.png");
    -nexa-text-align : center;
    -nexa-vertical-align : middle;
    background : transparent;
}

자식선택자는 .Spin .spinedit 처럼 공백(space)으로 구분된다.

클래스선택자는 .Button.btn_save 처럼 공백이 없다

실행하여 입력 된 모습

NON XCSS 속성

—.xcss에서 정의 할 수 없는 일반 속성입니다. ( Script 또는 툴에서 제어 )

분류

속성

설명

Action

increment

스핀버튼 클릭 시 value속성값을 증가/감소 시킬 값을 설정하는 속성

max

value 속성이 가질 수 있는 최대값을 설정하는 속성

min

value 속성이 가질 수 있는 최소값을 설정하는 속성

Appearance

buttonposition

서브컨트롤인 스핀버튼이 표시되는 위치를 설정하는 속성

buttonsize

서브컨트롤인 스핀버튼의 가로크기를 설정하는 속성

displaycomma

편집영역에서 천단위로 콤마를 표시할지 설정하는 속성

6.2.3데이터 형태의 컴포넌트

Combo

여러 개의 값 중에서 하나의 값을 선택하기 위한 용도로 사용되는 컴포넌트

상태선택자

분류

선택자 구분

종류

Combo

속성선택자

[status=disabled]

[status=mouseover]

[status=focused]

[status=readonly]

하위선택자

dropbutton

comboedit

combolist

실습하기

  1. Common.xcss에 아래의 가이드와 같이 Combo의 디자인을 변경합니다.

.Combo
{
    -nexa-border : 1px solid #9c9c9c;
    background : #ffffff;
    border-radius : 0px;
}

콤보컴포넌트도 선택된 값을 보여주는 편집영역과 버튼영역, 리스트를 보여주는 영역으로 나눠 진 구조로 되어 있는 컴포넌트입니다. 따라서 스핀컴포넌트처럼 자식선택자를 가지는 컴포넌트로 관련디자인은 추가로 아래 가이드에서 확인합니다.

.Combo .comboedit
{
    -nexa-border : 0px none;
    -nexa-padding : 0px 0px 0px 3px;
    -nexa-text-align : left;
    background : transparent;
    border-radius : 0px;
    color : #222222;
    font : 12px "Verdana";
}
.Combo .dropbutton
{
    -nexa-border : 0px none;
    -nexa-icon : URL("imagerc::cmb_dropbtn_N.png");
    -nexa-text-align : center;
    background : #ffffff;
}
.Combo .combolist
{
    -nexa-border : 1px solid #9c9c9c;
    background : #ffffff;
    border-radius : 0px;
}
.Combo .combolist .listboxitem
{
    -nexa-border : 0px none;
    -nexa-padding : 0px 0px 0px 5px;
    -nexa-text-align : left;
    -nexa-vertical-align : middle;
    background : transparent;
    color : #222222;
    font : 12px "Verdana";
}

XCSS로 자식선택자까지 입력을 하여도 화면에서 아무것도 볼 수가 없을 것입니다. 콤보컴포넌트는 컴포넌트에 데이터를 보여주기 위해서 데이터셋을 연결해 주어야 합니다. 이런 연결작업을 데이터 바인딩(Binding)이라고 합니다. 콤보 뿐아니라 데이타를 화면에 보여 줄 모든 컴포넌트는 데이터셋과 연결할 수 있습니다. 지금부터 데이터 바인딩에 대해 알아보도록 하겠습니다.

Binding

데이터를 보여주기 위해서 데이터셋을 연결 해주는 작업

분류

속성

설명

Binding

codecolumn

코드값으로 사용될 컬럼의 설정하는 속성

datacolumn

데이타값으로 사용될 컬럼을 설정하는 속성

innerdataset

리스트를 구성할 데이터셋의 ID를 설정하는 속성

컴포넌트에 직접 데이터를 입력하는 방법

DataSet을 이용하는 방법

  1. 컴포넌트의 크기를 맞춰봅니다. 위치는 다른 컴포넌트의 확인 이후에 맞춰보도록 합니다.

    • Combo size - 180 × 21

NON XCSS 속성

—.xcss에서 정의 할 수 없는 일반 속성입니다. ( Script 또는 툴에서 제어 )

분류

속성

설명

Misc

displayrowcount

아이템 리스트에 표시될 아이템의 최대 갯수를 설정하는 속성

readonly

아이템 변경을 허용할 지 설정하는 속성

type

동작되는 방법을 설정하는 속성- dropdown, search, filter, filterlike

Appearance

buttonsize

DropDown버튼의 가로크기를 설정하는 속성

itemheight

아이템리스트에서 각 행의 높이를 설정하는 속성

ListBox

여러 개의 값 중에서 하나 또는 여러 개의 값을 선택하기 위한 용도로 사용되는 컴포넌트

상태선택자

분류

선택자 구분

종류

ListBox

속성선택자

[status=disabled]

[status=mouseover]

[status=focused]

[status=readonly]

하위선택자

listboxitem

vscrollbar

hscrollbar

실습하기

  1. Common.xcss에 아래의 가이드와 같이 ListBox의 디자인을 변경합니다.

.ListBox
{
    -nexa-border : 1px solid #9c9c9c;
    background : #ffffff;
    border-radius : 0px;
}
.ListBox .listboxitem
{
    -nexa-border : 0px none;
    -nexa-padding : 0px 0px 0px 5px;
    -nexa-text-align : left;
    -nexa-vertical-align : middle;
    background : transparent;
    color : #222222;
    font : 12px "Verdana";
}
  1. ListBox도 앞에서 배운 데이타 연결이 되야 디자인을 확인 할 수 있는 컴포넌트로 DataSet을 한 번 더 생성하여 연결 한 뒤 확인합니다.

  1. 툴바에서 아이콘 ( ) 선택 드래그 후 더블 클릭 편집창에서 아래처럼 항목을 변경 및 추가, 입력합니다.

Information > id - Dataset00 → ds_list
Columns > id - code, data
Rows - 아래참고

그림 6-1Rows 값

  1. Binding >innerdataset - ds_list 선택 후 code, data column binding 합니다.

  1. 컴포넌트의 크기를 맞춰봅니다. 위치는 다른 컴포넌트의 이해 이후에 맞춰보도록 합니다.

    • ListBox size - 180 × 102

NON XCSS 속성

—.xcss에서 정의 할 수 없는 일반 속성입니다. ( Script 또는 툴에서 제어 )

분류

속성

설명

Action

index

아이템 중 선택된 아이템의 인덱스를 갖는 속성

Appearance

itemheight

컴포넌트의 아이템 리스트에서 각 행의 높이를 설정하는 속성

multiselect

여러 개의 아이템을 선택 할 수 있게 설정하는 속성

Radio

여러 개의 값 중에서 하나를 선택할 때 버튼의 형태로 사용되는 컴포넌트

상태선택자

분류

선택자 구분

종류

Radio

속성선택자

[status=disabled]

[status=mouseover]

[status=focused]

[status=readonly]

하위선택자

radioitem

분류

선택자 구분

종류

.Radio .radioitem

속성선택자

[status=disabled]

[status=mouseover]

[status=readonly]

[userstatus=selected]

실습하기

  1. Common.xcss에 아래의 가이드와 같이 Radio의 디자인을 변경합니다.

.Radio
{
    -nexa-border : 0px none;
    background : transparent;
}

Radio컴포넌트는 앞에서 CheckBox 컴포넌트에서 설명했던 Status선택자와 데이타 바인딩 부분을 모두 사용해야 디자인을 확인 할 수 있는 컴포넌트입니다. 이에 따라 이미지와 완성 할 화면에서의 데이타값을 확인한 후 실습을 이어갑니다.

  1. 아래 항목들을 참고하여 DataSet을 생성합니다.

Information > id - Dataset00 → ds_rdo
Columns > id - code, data
Rows - code : 1, 2 /  data : Male, Female
  1. Binding >innerdataset - ds_rdo 선택 후 code, data column binding 합니다.

  1. Common.xcss에 Status와 관련 된 나머지 가이드를 입력합니다.

.Radio .radioitem
{
    -nexa-icon : URL("imagerc::rdo_btn_N.png");
    -nexa-icon-position : left;
    -nexa-text-align : left;
    -nexa-text-padding : 0px 0px 0px 6px;
    -nexa-vertical-align : middle;
    background : transparent;
    border-radius : 0px;
    color : #222222;
    font : 12px "Verdana";
}
.Radio .radioitem[status=disabled]
{
    -nexa-icon : URL("imagerc::rdo_btn_D.png");
    color : #c1c1c1;
}
.Radio .radioitem[status=mouseover]
{
    -nexa-icon : URL("imagerc::rdo_btn_M.png");
}
.Radio .radioitem[userstatus=selected]
{
    -nexa-icon : URL("imagerc::rdo_btn_S.png");
}
.Radio .radioitem[status=mouseover][userstatus=selected]
{
    -nexa-icon : URL("imagerc::rdo_btn_MS.png");
}
  1. 위 과정을 모두 끝낸 라디오 컴포넌트는 처음 드래그해서 그린 그대로의 영역안에서 표현되기 때문에 아래와 같이 보입니다.

  1. 컴포넌트의 사이즈를 맞추고 그 안에서 현재처럼 겹치거나 짤리는 모습으로 보이지 않기 위해 방향의 설정을 변경합니다.

Radio Size - 180 × 21
Appearance > direction - vertical

NON XCSS 속성

—.xcss에서 정의 할 수 없는 일반 속성입니다. ( Script 또는 툴에서 제어 )

분류

속성

설명

Action

index

선택된 아이템의 인덱스를 갖는 속성

Appearance

columncount

한 행에 표시되는 이이템 갯수를 설정하는 속성

direction

아이템이 표시되는 방향을 설정하는 속성

rowcount

한 열에 표시되는 아이템 갯수를 설정하는 속성

Menu

단계를 가지는 계층적 메뉴를 구성할 때 사용하는 컴포넌트

상태선택자

분류

선택자 구분

종류

Menu

속성선택자

[status=disabled]

[status=mouseover]

[status=focused]

하위선택자

menupopupmenu

menuitem

nextbutton

prevbutton

실습하기

Component.xfdl 화면에서 실습을 진행합니다.

  1. 툴바에서 메뉴컴포넌트( )를 선택하고 화면에 드로잉하여 컴포넌트를 생성합니다.

  1. 메뉴컴포넌트도 데이타 바인딩 후에 디자인을 확인할 수 있습니다. 디자인 변경없이 컴포넌트를 확인해 봅니다.

  1. Properties > Binding 의 속성들을 확인합니다.

innerdataset 속성에서 데이타셋을 선택하는 것과 해당 컬럼을 맞춰주는 것은 다른 컴포넌트 등과 동일합니다. 다만 위에서 보는 것처럼 그 동안의 컴포넌트보다 컬럼의 종류가 좀 다양하다고 생각하시면 됩니다.

  1. 아래 항목들을 참고하여 DataSet을 생성합니다.

    • Information > id - Dataset00 → ds_mnu

  1. 아래 소스를 참고하여 컬럼을 추가하여 데이타셋을 완성하여 컴포넌트에 바인딩합니다.

참고자료

소스 : .\Nexacro Platform 17 Design EDU\02. Sample\3. Source\ds_mnu.txt

  1. 컴포넌트에 데이타셋을 바인딩 합니다.

NON XCSS 속성

—.xcss에서 정의 할 수 없는 일반 속성입니다. ( Script 또는 툴에서 제어 )

분류

속성

설명

Binding

captioncolumn

메뉴 아이템의 텍스트가 정의된 컬럼을 설정하는 속성

checkboxcolumn

메뉴 아이템의 체크이미지 적용여부가 정의된 컬럼을 설정하는 속성

enablecolumn

메뉴 아이템의 활성화 여부가 정의된 컬럼을 설정하는 속성

hotkeycolumn

메뉴 아이템의 단축키가 정의된 컬럼을 설정하는 속성

iconcolumn

메뉴 아이템의 아이콘이 정의된 컬럼을 설정하는 속성

idcolumn

메뉴 아이템의 아이디가 정의된 컬럼을 설정하는 속성

levelcolumn

메뉴 아이템의 상/하위 관계가 정의된 컬럼을 설정하는 속성

Appearance

autohotkey

hotkeycolumn 속성에 설정된 키를 단축키로 적용할지 설정하는 속성

popupitemheight

메뉴에서 하위 메뉴가 표시될 때 각 항목의 높이를 설정하는 속성

PopupMenu

팝업형태로 메뉴를 구성하기 위한 컴포넌트

메뉴컴포넌트와 디자인적인 속성이 유사합니다.

상태선택자

분류

선택자 구분

종류

PopupMenu

속성선택자

[status=disabled]

[status=mouseover]

하위선택자

popupmenuitem

nextbutton

prevbutton

분류

선택자 구분

종류

.PopupMenu .popupmenuitem

속성선택자

[status=disabled]

[status=mouseover]

[status=focused]

[userstatus=selected]

하위선택자

popupmenuitemcheckbox

popupmenuitemexpandimage

popupmenuitemhotkeytext

popupmenuitemicon

popupmenuitemtext

NON XCSS 속성

—.xcss에서 정의 할 수 없는 일반 속성입니다. ( Script 또는 툴에서 제어 )

분류

속성

설명

Binding

captioncolumn

메뉴 아이템의 텍스트가 정의된 컬럼을 설정하는 속성

checkboxcolumn

메뉴 아이템의 체크이미지 적용여부가 정의된 컬럼을 설정하는 속성

enablecolumn

메뉴 아이템의 활성화 여부가 정의된 컬럼을 설정하는 속성

hotkeycolumn

메뉴 아이템의 단축키가 정의된 컬럼을 설정하는 속성

iconcolumn

메뉴 아이템의 아이콘이 정의된 컬럼을 설정하는 속성

idcolumn

메뉴 아이템의 아이디가 정의된 컬럼을 설정하는 속성

levelcolumn

메뉴 아이템의 상/하위 관계가 정의된 컬럼을 설정하는 속성

Grid

Dataset의 내용을 격자모양으로 표현하는 컴포넌트

상태선택자

분류

선택자 구분

종류

Grid

속성선택자

[status=disabled]

[status=mouseover]

[status=focused]

[status=readonly]

하위선택자

head

body

summary

hscrollbar

vscrollbar

하위선택자

분류

선택자 구분

종류

.Grid .head

.Grid .body

.Grid .summary

속성선택자

[status=disabled]

[status=mouseover]

[status=focused]

[status=readonly]

하위선택자

row

분류

선택자 구분

종류

.Grid .head .row

.Grid .body .row

.Grid .summary .row

속성선택자

[status=disabled]

하위선택자

cell

분류

선택자 구분

종류

.Grid .head .row .cell

.Grid .body .row .cell

.Grid .summary .row .cell

속성선택자

[status=disabled]

[status=mouseover]

[status=focused]

[status=readonly]

[userstatus=selected]

하위선택자

cellbutton

cellcalendar

cellcheckbox

cellcombo

celledit

cellmaskedit

cellprogressbar

celltextarea

celltreeitem

subcell

cellimage

cellexpandbutton

celltreeline

분류

선택자 구분

종류

.Grid .head .row .cell .celltreeitem

.Grid .body .row .cell .celltreeitem

.Grid .summary .row .cell .celltreeitem

속성선택자

[status=disabled]

[status=mouseover]

[status=focused]

하위선택자

treeitembutton

treeitemcheckbox

treeitemimage

treeitemtext

분류

선택자 구분

종류

.Grid .head .row .cell .celltreeitem .treeitembutton

.Grid .body .row .cell .celltreeitem .treeitembutton

.Grid .summary .row .cell .celltreeitem .treeitembutton

속성선택자

[status=disabled]

[status=mouseover]

[status=focused]

[userstatus=expand]

[userstatus=collapse]

[userstatus=leaf]

분류

선택자 구분

종류

.Grid .head .row .cell .celltreeitem .treeitemimage

.Grid .body .row .cell .celltreeitem .treeitemimage

.Grid .summary .row .cell .celltreeitem .treeitemimage

속성선택자

[status=disabled]

[status=mouseover]

[status=focused]

[userstatus=expand]

[userstatus=collapse]

[userstatus=leaf]

실습하기

  1. Common.xcss에 아래의 가이드와 같이 Grid의 디자인을 변경합니다.

.Grid
{
    -nexa-border : 1px solid #293943;
    background : #ffffff;
    border-radius : 0px;
}
  1. 디자인 확인을 위하여 데이타셋을 만들어 binding 후에 진행합니다. 그리드의 데이타 셋을 생성할 때의 column과 row의 추가 수는 확인하고자 하는 디자인의 표의 모양을 보고 결정합니다.

  1. 값의 확인을 위해 첫 줄의 값은 입력합니다.

  1. 화면 하단의 Invisible Object 영역에서 해당 데이타셋 선택 후 드래그 하여 그리드컴포넌트에 바인딩합니다.

위의 모습이 바인딩 후의 모습입니다. 입력한 값이 안 보이는 경우 셀의 가로 혹은 세로의 크기를 조절하여 맞춰야 하는 경우 등 디자인의 표현을 정확하게 적용하기 위해서는 컴포넌트를 알맞게 편집해야 합니다. 그러기 위해서 화면에서 컴포넌트를 더블클릭하여 열리는 팝업편집창을 제어합니다.

  1. 아래 마지막 두개의 컬럼의 모습처럼 셀 안에 다른 컴포넌트를 표현해 봅니다.

  1. 편집창에서 해당 셀 선택 후 Action > displaytype / edittype 속성으로 변경합니다.

    • Marrid - displaytype : checkboxcontrol / edittype : checkbox

    • Hire Date - displaytype : calendarcontrol/ edittype : date

Grid 의 tree 구조

treeview의 구조를 확인하기 위해서는 기본 Grid 컴포넌트에서 변경하여야 합니다. 아래와 같은 방법으로 tree 구조를 확인해 봅니다.

  1. 화면명 ' grd_tree'를 가진 화면을 새로 만들어 시작합니다.

  1. Grid 컴포넌트를 세로로 길게 드로잉하여 그려봅니다.

  1. 데이타셋을 만들어 바인딩을 합니다. tree구조는 화면에서 확인 할 데이타 값과 tree의 구조의 depth를 보여주는 level값을 가지는 두 개의 컬럼만 추가하여 만들면 됩니다.

참고자료

소스 : .\Nexacro Platform 17 Design EDU\02. Sample\3. Source\ds_grd_tree.txt

Information > id - Dataset00 → ds_tree
Columns > id - data, level

  1. 데이타 바이딩 후 화면에서 봐야 하는 데이타값을 가진 컬럼이 아닌 level컬럼은 삭제합니다.

  1. 셀에 컴포넌트 표현했던 것과 같은 속성을 이용하여 tree를 선택한다.

    • displaytype : treeitemcontrol

    • edittype : tree

  1. depth의 값을 가지고 있는 level컬럼을 연결하기 위하여 셀을 선택한 후에 CellTreeItem > treelevel 에서 level컬럼을 선택합니다.

  1. 화면에서 CellTreeItem 속성그룹에 있는 속성으로 보이는 모습의 편집을 할 수 있습니다.

    • treeinitstatus - expand,all

    • treeusecheckbox - false

NON XCSS 속성

—.xcss에서 정의 할 수 없는 일반 속성입니다. ( Script 또는 툴에서 제어 )

분류

속성

설명

Action

autofittype

스크롤없이 전체 컬럼이 표시되도록 컬럼의 너비를 자동조절 설정하는 속성

selecttype

그리드에서 선택되는 단위를 설정하는 속성 - cell, multirow, row, area, multiarea

Appearance

useselcolor

Cell 또는 Row 선택시 XCSS에 정의된 Select 관련 스타일을 적용 시킬지

설정하는 속성

CellTreeItem

treeinitstatus

셀이 트리형식일 때 최초 로드시 표시되는 트리의 상태를 설정하는 속성

treeusebutton

셀이 트리형식일 때 Collapse/Expand 버튼의 사용여부를 설정하는 속성

treeusecheckbox

셀이 트리형식일 때 체크박스 사용여부를 설정하는 속성

treeuseexpandkey

셀이 트리형식일 때 Collapse/Expand 기능을 키보드의 좌/우 방향키로

동작시킬지 설정하는 속성

treeuseimage

셀이 트리형식일 때 트리 상태를 나타내는 이미지를 사용할 지 설정하는 속성

treeuseline

셀이 트리형식일 때 하위트리와 연결되는 선을 표시할지 설정하는 속성

6.2.4레이아웃 형태의 컴포넌트

Div

하나의 화면에 여러 개의 부분화면을 구성할 때 사용하는 컴포넌트

Div 내부에 직접 컴포넌트를 생성하여 그룹핑의 의미로 사용하거나 Div영역에 기존 작성된 화면을 불러와서 사용합니다.

그룹핑의 의미로 사용하는 경우

다른 화면을 불러와서 사용하는 경우

Div컴포넌트의 속성 중 Appearance > url 을 이용하여 화면을 선택하여 불러온 결과를 확인 할수 있습니다.

상태선택자

분류

선택자 구분

종류

Div

속성선택자

[status=disabled]

[status=mouseover]

[status=focused]

실습하기

  1. Common.xcss에 아래의 가이드와 같이 Div의 디자인을 변경합니다.

.Div
{
    -nexa-border : 1px solid #9c9c9c;
    background : #ffffff;
    border-radius : 0px;
}
  1. 위치 및 크기를 맞춰봅니다.

    • Properties > Position > left, top, width, height

    • left = 15, top = 45, width = 832, height = 45

  1. Div안의 컴포넌트의 위치도 맞춰봅니다.

    • Static - left = 10, top = 9

    • Edit - left = 123, top = 9

    • Button - left = 760, top = 10

NON XCSS 속성

—.xcss에서 정의 할 수 없는 일반 속성입니다. ( Script 또는 툴에서 제어 )

분류

속성

설명

Appearance

url

컴포넌트에 화면을 연결하여 표시할때 설정하는 속성

PopupDiv

하나의 화면에 여러개의 부분화면을 구성할 때 사용하는 컴포넌트
Div와 비슷하나 PopupDiv는 포커스를 잃게되면 자동으로 사라집니다.

상태선택자

분류

선택자 구분

종류

PopupDiv

속성선택자

[status=disabled]

[status=mouseover]

[status=focused]

NON XCSS 속성

—.xcss에서 정의 할 수 없는 일반 속성입니다. ( Script 또는 툴에서 제어 )

분류

속성

설명

Appearance

url

컴포넌트에 화면을 연결하여 표시할때 설정하는 속성

GroupBox

테두리영역에 타이틀을 입력하여 그룹형태로 표현하는 컴포넌트

상태선택자

분류

선택자 구분

종류

GroupBox

속성선택자

[status=disabled]

[status=mouseover]

하위선택자

groupboxtitle

groupboxcontents

실습하기

Component.xfdl 화면에서 실습을 진행합니다.

  1. 툴바에서 GroupBox 컴포넌트( )를 선택하고 화면에 드로잉하여 컴포넌트를 생성합니다.

  1. 간단한 디자인 변경을 위해 아래 가이드와 같이 Common.xcss파일에 추가합니다.

.GroupBox .groupboxcontents
{
    -nexa-border : 1px solid #9c9c9c;
    background : #ffffff;
}
.GroupBox .groupboxtitle
{
    -nexa-border : 0px none;
    -nexa-text-align : center;
    -nexa-vertical-align : middle;
    -nexa-icon : URL("none");
    -nexa-padding : 0px 3px 0px 3px;
    background : #ffffff;
    color : #222222;
    font : 12px "Verdana";
}

GroupBox는 title + contents 영역으로 되어있는 구조의 컴포넌트입니다. 쉽게 생각하면 .GroupBox위에 .GroupBox .groupboxcontents가 얹혀있는 구조이기때문에 .GroupBox의 디자인을 따로 정의하지 않아도 두 하위선택자에 대한 디자인을 이해한다면 쉽게 표현할 수 있는 컴포넌트입니다.

NON XCSS 속성

—.xcss에서 정의 할 수 없는 일반 속성입니다. ( Script 또는 툴에서 제어 )

분류

속성

설명

Appearance

titlealign

타이틀의 위치를 설정하는 속성

titlegap

타이틀이 표시되는 위치의 간격을 pixel단위로 설정하는 속성

- 정의하지 않으면 '10'으로 적용

- 속성값에 "center" 가 포함될 때는 값이 무시됩니다.

- topleft / bottomleft : 왼쪽에서 속성값만큼 간격을 두고 표시

- topright / bottomright : 오른쪽에서 속성값만큼 간격을 두고 표시

- lefttop / righttop : 상단에서 속성값만큼 간격을 두고 표시

- leftbottom / rightbottom : 하단에서 속성값만큼 간격을 두고 표시

titlegap의 예

Tab

여러 개의 Tabpage로 구성되며 좁은 화면에 많은 수의 컴포넌트가 배치될 필요가 있을 때 사용하는 컴포넌트

상태선택자

분류

선택자 구분

종류

Tab

속성선택자

[status=disabled]

[status=mouseover]

[status=focused]

하위선택자

tabbuttonitem

nextbutton

prevbutton

tabpage

분류

선택자 구분

종류

.Tab .tabbuttonitem

속성선택자

[status=disabled]

[status=mouseover]

[status=focused]

[userstatus=select]

하위선택자

extrabutton

tabbuttonitemtext

실습하기

Component.xfdl 화면에서 실습을 진행합니다.

  1. 툴바에서 Tab 컴포넌트( )를 선택하고 화면에 드로잉하여 컴포넌트를 생성합니다.

Tab 컴포넌트의 tabbuttonitem을 제외하고는 하위선택자에 대한 모습을 드로잉해서 그렸다고 바로 그 디자인을 확인 할 수 없는 부분이 있으므로 먼저 화면에서의 Tab 컴포넌트의 구성 변경을 이해해야 합니다.

prebutton / nextbutton

드로잉해서 그린 컴포넌트보다 페이지의 수가 많아져 화면 한 줄에 다 보여 줄 수 없을 때 화면에 표시되는 버튼입니다. 페이지의 추가는 컴포넌트 선택 후 우클릭 팝업창에서 Add Tabpage/Delete Tabpage 추가 삭제 할 수 있습니다.

extrabutton

tabbuttonitem의 하위선택자로 버튼의 닫기여부를 결정하는 버튼입니다. 해당버튼은 속성으로 확인할 수 있습니다. Appearance > showextrabutton - true, false

NON XCSS 속성

—.xcss에서 정의 할 수 없는 일반 속성입니다. ( Script 또는 툴에서 제어 )

분류

속성

설명

Appearance

multiline

컴포넌트의 너비보다 탭버튼이 많을 경우 탭버튼을 여러줄로 표시할지

설정하는 속성

showextrabutton

탭버튼 오른쪽에 닫기버튼 표시여부를 설정하는 속성

tabjustify

컴포넌트의 너비보다 탭버튼이 적을 경우 너비에 맞게 여백없이 탭버튼이

표시되도록 설정하는 속성

tabposition

컴포넌트에 탭버튼이 표시되는 위치를 설정하는 속성

선택자

분류

속성

설명

.Tab .tabpage

Action

text

탭버튼에 표시되는 텍스트를 설정하는 속성

Appearance

url

탭페이지에 화면을 연결하여 표시할 때 설정하는 속성

6.2.5그래픽 형태의 컴포넌트

ImageViewer

화면에 이미지를 표현하기 위해 사용하는 컴포넌트

상태선택자

분류

선택자 구분

종류

ImageViewer

속성선택자

[status=disabled]

[status=mouseover]

[status=focused]

하위선택자

imagearea

imagetext

NON XCSS 속성

—.xcss에서 정의 할 수 없는 일반 속성입니다. ( Script 또는 툴에서 제어 )

분류

속성

설명

Appearance

image

이미지 파일의 위치 경로를 설정하는 속성

imagealign

이미지가 표시되는 위치를 설정하는 속성

stretch

컴포넌트의 크기에 맞게 이미지가 확대, 축소되는 방식을 설정하는 속성

fit - 컴포넌트 크기에 맞게 이미지 비율을 변경하여 표시

이미지가 잘리지 않으나 비율에 따라 일그러질 수 있다

fixaspectratio - 이미지의 비율을 유지하며 컴포넌트에 전체 이미지를 표시

일그러짐은 없으나 비율에 따라 공백이 표시될수 있다

Component Size : 200 × 200
Image Size : 140 × 127

ProgressBar

어떤 작업의 진행 상태를 점진적인 Bar 형태로 표현하고자 할 때 사용하는 컴포넌트

상태선택자

분류

선택자 구분

종류

ProgressBar

속성선택자

[status=disabled]

[status=mouseover]

[status=focused]

하위선택자

progressstartcap

progressendcap

progressbaritem

progressbartext

하위선택자 progressbaritem으로 ProgressBar 컴포넌트의 bar style을 다양하게 디자인 표현할 수가 있습니다. 예를 들어 .ProgressBar .progressbaritem의 background의 속성으로 bg-image를 사용할 경우 이미지의 진행모습으로 linear-gradient를 사용할 경우 그라데이션의 진행모습으로 background-color을 사용할 경우 단색의 진행모습으로 각각 다른 디자인을 표현할수 있습니다. 단, 여러가지의 표현은 클래스선택자를 이용하여야 합니다.

분류

속성

.ProgressBar .progressbaritem

background

URL("imagerc::pgb_img_N.png")

#f16e59

linear-gradient(to right,#ffffff,#cf270b)

background - color / Appearance > smooth - false

NON XCSS 속성

—.xcss에서 정의 할 수 없는 일반 속성입니다. ( Script 또는 툴에서 제어 )

분류

속성

설명

Appearance

blockgap

진행상태를 표시하는 블럭의 간격을 설정하는 속성

blocksize

진행상태를 표시하는 블럭의 너비를 설정하는 속성

direction

진행 방향을 설정하는 속성

pos

진행바의 위치를 설정하는 속성

smooth

진행바가 연속된 형태로 표시될 지 설정하는 속성

6.2.6날짜 형태의 컴포넌트

Calenadr

날짜와 시간을 입력받기 위한 컴포넌트

상태선택자

분류

선택자 구분

종류

Calendar

속성선택자

[status=disabled]

[status=mouseover]

[status=focused]

[status=readonly]

하위선택자

dropbutton

calendarspinupbutton

calendarspindownbutton

datepicker

calendaredit

분류

선택자 구분

종류

datepicker

(DatePickerControl)

속성선택자

[status=disabled]

[status=mouseover]

[status=focused]

[status=readonly]

하위선택자

head

body

분류

선택자 구분

종류

head

하위선택자

prevbutton

nextbutton

yearspin

monthspin

yearstatic

monthstatic

속성선택자

[status=disabled]

[status=mouseover]

[status=focused]

[status=readonly]

하위선택자명

속성선택자종류

.head .prevbutton

.head .nextbutton

[status=disabled]

[status=mouseover]

[status=focused]

[userstatus=pushed]

[userstatus=selected]

하위선택자명

선택자 구분

종류

.head .yearspin

.head .monthspin

속성선택자

[status=disabled]

[status=mouseover]

[status=focused]

[status=readonly]

하위선택자

spinedit

spinupbutton

spindownbutton

하위선택자명

속성선택자종류

.head .yearstatic

.head .monthstatic

[status=disabled]

[status=mouseover]

분류

선택자 구분

종류

body

속성선택자

[status=disabled]

[status=mouseover]

[status=focused]

[status=readonly]

하위선택자

weekband

weekitem

dayitem

하위선택자명

속성선택자종류

.body .weekband

[status=disabled]

[status=mouseover]

하위선택자명

속성선택자종류

.body .weekitem

[status=disabled]

[status=mouseover]

[status=readonly]

[userstatus=saturday]

[userstatus=sunday]

하위선택자명

속성선택자종류

.body .dayitem

[status=disabled]

[status=mouseover]

[status=focused]

[status=readonly]

[userstatus=selected]

[userstatus=day]

[userstatus=today]

[userstatus=saturday]

[userstatus=sunday]

[userstatus=trailingday]

실습하기

  1. Common.xcss에 아래의 가이드와 같이 Calendar의 디자인을 변경합니다.

.Calendar
{
    -nexa-border : 1px solid #9c9c9c;
    background : #ffffff;
    border-radius : 0px;
}

드로잉으로 그린 화면에서 바로 보는 컴포넌트의 디자인 변경을 위해서는 앞서 설명했던 하위선택자들에대한 디자인을 적용하면 화면에서 동일한 디자인을 확인 할 수 있습니다.

.Calendar .calendaredit
{
    -nexa-border : 0px none;
    -nexa-padding : 0px 0px 0px 3px;
    -nexa-text-align : left;
    background : transparent;
    color : #222222;
    font : 12px "Verdana";
}
.Calendar .dropbutton
{
    -nexa-border : 0px none;
    -nexa-icon : URL("imagerc::cal_dropbtn_N.png");
    -nexa-text-align : center;
    background : transparent;
}

  1. 컴포넌트의 크기를 150 × 21 로 변경한 뒤 위치를 맞춰봅니다.

여기까지 본다면 화면에 보이는 Calendar 컴포넌트의 디자인이 끝난 것처럼 보일지 모릅니다.

그렇치만 Calendar는 dropbutton을 눌렀을 때 팝업으로 나오는 팝업캘린더(DatePickerControl)의 구조와 해당 속성에 대하여 이해하고 적용해야 정확한 Calendar의 디자인을 완성할 수 있습니다.

DatePickerControl의 하위선택자에 대해 이해하고 세부적으로 나눠서 표현할 수 있는 디자인은 userstatus로 추가되어 표현될 수 있음을 위의 표를 보고 이해합니다.

Apperance > type = normal

Apperance > type = spin

Apperance > type = monthonly

NON XCSS 속성

—.xcss에서 정의 할 수 없는 일반 속성입니다. ( Script 또는 툴에서 제어 )

분류

속성

설명

Appearance

buttonsize

드롭다운버튼이나 스핀버튼의 가로 크기를 설정하는 속성

daysize

팝업달력에서 날짜영역의 크기를 설정하는 속성

headformat

head부분에 표시되는 년, 월의 형식을 설정하는 속성

headhight

head부분의 눂이를 설정하는 속성

popupsize

팝업달력의 크기를 설정하는 속성

popuptype

팝업달력이 표시되는 방식을 설정하는 속성 - none, normal, center, system

showmonthspin

팝업달력에서 월 버튼을 항상 표시할지 설정하는 속성

showyearspin

팝업달력에서 년 버튼을 항상 표시할지 설정하는 속성

type

컴포넌트가 화면에 표시되는 형식을 설정하는 속성

usetrailingday

팝업달력에서 날짜의 시작/끝 여백에 전/후 날짜를 표시할지 설정하는 속성

weekformat

팝업달력에서 요일이 표시되는 형식을 설정하는 속성

popupsize 속성값을 설정하지 않으면 undefined로 적용됩니다. undefined 설정 시 팝업달력(DatePicker)의 너비와 높이는 각각 " 220 ", " 200 "으로 적용됩니다.

6.2.7파일 형태의 컴포넌트

아래 컴포넌트는 파일 업로드, 다운로드시 사용하는 컴포넌트로 TypeDefinition > Objects 에서 추가 등록하여 사용할 수 있습니다.

FileUpload

파일 업로드 작업을 수행하는 컴포넌트

상태선택자

분류

선택자 구분

종류

FileUpload

속성선택자

[status=disabled]

[status=mouseover]

[status=focused]

[userstatus=selected]

하위선택자

fileuploaditem

hscrollbar

vscrollbar

분류

선택자 구분

종류

.fileuploaditem

속성선택자

[status=disabled]

[status=focused]

하위선택자

fileuploaditembutton

fileuploaditemedit

NON XCSS 속성

—.xcss에서 정의 할 수 없는 일반 속성입니다. ( Script 또는 툴에서 제어 )

분류

속성

설명

Appearance

buttonsize

파일찾기버튼(fileitembutton)의 가로크기를 설정하는 속성

itemheight

아이템의 높이를 설정하는 속성

FileDownload

파일 다운로드 작업을 수행하는 컴포넌트

상태선택자

분류

선택자 구분

종류

FileDownload

속성선택자

[status=disabled]

[status=mouseover]

[status=focused]

[userstatus=pushed]