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

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

컴포넌트 배치하기

넥사크로 스튜디오 17 아이콘을 더블클릭하여 실행 하고 샘플 프로젝트를 오픈합니다.

1. 프로젝트의 Edu폴더에서 EMPLOYEES_Exercise 화면을 열고 작업을 시작합니다.

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

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의 내용을 격자모양으로 표현하는 컴포넌트입니다.

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

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

텍스트 형태의 컴포넌트

Static

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

상태선택자

실습하기

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에서 선택자 추가하여 편집하는 방법

• XCSS파일에서 Add Selector 아이콘 선택하여 편집창에서 해당하는 컴포넌트를 선택합니다.

• 속성창을 이용하여 입력을 완료합니다.

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

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

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

클래스 적용

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

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

   • Properties > Action > text

   • 컴포넌트 선택 후 F2

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

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

   [ EMPLOYEES ]

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

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

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

NON XCSS 속성

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

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

usedecorate = true 로 사용된 예

1 기울임 효과 (italic) 지정

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

Edit

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

상태선택자

실습하기

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처럼 클래스선택자를 사용하지 않아도 됩니다.

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

   5 Edit size - 150 × 25

   7 Edit size - 210 × 21

NON XCSS 속성

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

MaskEdit

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

상태선택자

실습하기

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개 배치했으나 같은 디자인이므로 클래스선택자를 사용하지 않아도 됩니다.

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

   814 MaskEdit size - 210 × 21

NON XCSS 속성

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

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

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

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

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

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

TextArea

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

상태선택자

실습하기

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";
}

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

   TextArea size - 210 × 144

NON XCSS 속성

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

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

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

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

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

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

버튼 형태의 컴포넌트

Button

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

상태선택자

실습하기

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";
}

2. 화면에 있는 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";
}

3. 2 Button 에 class를 적용합니다.

   • Information > cssclass : btn_save

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

   • Properties > Action > text

   • 컴포넌트 선택 후 F2

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

   • Button size - 60 × 23

CheckBox

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

상태선택자

실습하기

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";
}

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");
}

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

   • Properties > Action > text - Married

   • 컴포넌트 선택 후 F2

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

   • CheckBox size - 210 × 21

각 Status 에 따른 결과 모습

NON XCSS 속성

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

Spin

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

상태선택자

실습하기

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

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

• Name : Component

• Location : Base

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

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

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

자식선택자 추가

자식을 가지는 선택자를 트리에서 선택 우클릭 후 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;
}

실행하여 입력 된 모습

NON XCSS 속성

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

데이터 형태의 컴포넌트

Combo

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

상태선택자

실습하기

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 > innerdataset 속성의 버튼 중 버튼을 누릅니다.

• row를 추가하여 데이타를 입력합니다.

  • code - 겹치지 않도록 넘버링하여 값을 지정

  • data - 리스트항목에 표현될 데이타 값을 지정 ( 컴포넌트에서 직접적으로 보여지는 값 )

• 입력 후 속성창의 Binding 모습

• 실행모습

DataSet을 이용하는 방법

• 툴바에서 DataSet 아이콘 ( )을 선택한 후화면에 드래그 하면 화면 하단의 Invisible Object영역에 DataSet이 생성됩니다.

• 선택 후 속성창 Information > id 에서 컴포넌트에 맞는 이름으로 변경합니다.

  • Dataset00 → ds_cmb

• 생성된 DataSet을 더블클릭하여 편집 창을 띄운 뒤 columns과 rows를 추가합니다.

• 추가된 column 의 id 를 code 와 data 로 각각 변경한 뒤 rows 내용을 채워 완성합니다.

• DataSet을 이용하면 Binding > innerdataset의 dropbutton ( )을 누르면 목록을 확인할 수 있습니다. 컴포넌트에 직접적으로 데이타값을 입력할 경우에는 해당 컬럼이 맞게 binding 되지만 DataSet을 이용할 경우에는 그 작업을 해야 합니다.

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

   • Combo size - 180 × 21

NON XCSS 속성

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

ListBox

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

상태선택자

실습하기

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";
}

2. ListBox도 앞에서 배운 데이타 연결이 되야 디자인을 확인 할 수 있는 컴포넌트로 DataSet을 한 번 더 생성하여 연결 한 뒤 확인합니다.

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

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

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

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

   • ListBox size - 180 × 102

NON XCSS 속성

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

Radio

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

상태선택자

실습하기

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

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

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

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

Information > id - Dataset00 → ds_rdo
Columns > id - code, data
Rows - code : 1, 2 /  data : Male, Female

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

4. 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");
}

5. 위 과정을 모두 끝낸 라디오 컴포넌트는 처음 드래그해서 그린 그대로의 영역안에서 표현되기 때문에 아래와 같이 보입니다.

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

Radio Size - 180 × 21
Appearance > direction - vertical

NON XCSS 속성

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

Menu

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

상태선택자

실습하기

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

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

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

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

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

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

   • Information > id - Dataset00 → ds_mnu

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

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

NON XCSS 속성

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

PopupMenu

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

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

상태선택자

NON XCSS 속성

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

Grid

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

상태선택자

하위선택자

실습하기

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

.Grid
{
	-nexa-border : 1px solid #293943;
	background : #ffffff;
	border-radius : 0px;
}

2. 디자인 확인을 위하여 데이타셋을 만들어 binding 후에 진행합니다. 그리드의 데이타 셋을 생성할 때의 column과 row의 추가 수는 확인하고자 하는 디자인의 표의 모양을 보고 결정합니다.

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

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

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

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

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

   • Marrid - displaytype : checkboxcontrol / edittype : checkbox

   • Hire Date - displaytype : calendarcontrol/ edittype : date

• CheckBox로 변경시 이미지가 다 보이지 않을 경우 편집창에서 해당 셀 선택 후

  CellCheckBox > checkboxsize 에서 디자인한 버튼의 크기를 지정합니다.

Grid 의 tree 구조

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

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

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

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

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

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

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

   • displaytype : treeitemcontrol

   • edittype : tree

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

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

   • treeinitstatus - expand,all

   • treeusecheckbox - false

NON XCSS 속성

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

레이아웃 형태의 컴포넌트

Div

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

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

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

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

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

상태선택자

실습하기

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

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

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

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

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

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

   • Static - left = 10, top = 9

   • Edit - left = 123, top = 9

   • Button - left = 760, top = 10

NON XCSS 속성

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

PopupDiv

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

상태선택자

NON XCSS 속성

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

GroupBox

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

상태선택자

실습하기

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

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

2. 간단한 디자인 변경을 위해 아래 가이드와 같이 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";
}

NON XCSS 속성

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

titlegap의 예

Tab

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

상태선택자

실습하기

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

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

prebutton / nextbutton

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

extrabutton

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

NON XCSS 속성

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

그래픽 형태의 컴포넌트

ImageViewer

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

상태선택자

NON XCSS 속성

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

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

ProgressBar

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

상태선택자

NON XCSS 속성

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

날짜 형태의 컴포넌트

Calenadr

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

상태선택자

실습하기

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;
}

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

Apperance > type = normal

Apperance > type = spin

Apperance > type = monthonly

NON XCSS 속성

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

파일 형태의 컴포넌트

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

FileUpload

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

상태선택자

NON XCSS 속성

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

FileDownload

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

상태선택자