5.화면(Form) 개발

Edit

Form은 Application과 사용자 간의 Interface로 Design, Data 및 Event가 포함됩니다. Application 설계에 따라 Form을 Design 하고 Data와 Event 처리 방법을 기술합니다.

5.1Form의 생성

1

Make New 실행

[그림 5-1]의 New 아이콘을 클릭하거나 [그림 5-2]의 메뉴 [File > New]를 선택합니다.

그림 5-1Toolbar의 New

그림 5-2Menu의 New

2

Make New에서 Form 선택

그림 5-3Make New - Form 선택

3

Select Template에서 Form 선택

Template을 선택하여 새로운 Form을 만듭니다. 자주 사용되는 형태의 Form은 Template으로 등록하여 새로운 Form을 만들 때 사용할 수 있습니다. 설치 시에 5개의 기본 Template을 포함하고 있습니다.

그림 5-4Select Template

4

Form Properties 설정

[그림 5-5]의 Form Properties에서 Form의 기본 속성값을 설정합니다. Form ID, 이름 등의 속성을 설정합니다.

그림 5-5Form Properties

표 5-1Form Properties 속성

영역

속성

설명

1

Name

Form 이름

2

Title

Form 실행 시 제목 표시줄에 표시되는 제목

3

Form ID

Form 고유 식별 ID

4

Application Group

소속된 App. Group

5

Include Event Script

하나의 XML 파일에 Form 내용과 Script를 같이 저장

6

Component & Dataset. Image Only

Form 내용은 XML에 저장하고 Script는 JS 파일에 따로 저장

화면 Layout이 여러 종류이고 Script는 한 개를 공통으로 사용할 경우(PDA 등)에 특수하게 사용

Template을 사용하여 Form을 생성하는 경우 Template에 설정된 값이 기본 속성값으로 지정됩니다.

그림 5-6Select Template

5

Form 생성완료

[그림 5-7]은 Address Search Form이 추가된 화면입니다. 이미 정의된 컴포넌트, 속성 및 이벤트로 구성되어 있습니다. Empty Form의 경우 빈 Form이 화면에 나타납니다.

그림 5-7Tempate > Zip Search

5.2컴포넌트의 사용

Project에 등록된 Component로 화면을 구성합니다.

5.2.1컴포넌트 생성

Component Toolbar에서 Component를 선택한 후 Form 위에서 마우스를 Drag하여 원하는 크기의 Component를 생성합니다. Project Manager에서 기본 생성 Size 정보를 입력한 경우, 마우스 클릭만으로 Component가 생성됩니다.

그림 5-8컴포넌트 생성

5.2.2컴포넌트 복사

컴포넌트 복사는 컴포넌트를 구분하는 아이디만을 다르게 하여 같은 속성을 가진 컴포넌트를 생성하는 것입니다.

선택된 컴포넌트를 Copy <CTRL+C>하여 Paste <CTRL+V>합니다. [그림 5-9]는 Button 컴포넌트를 복사한 화면입니다.

그림 5-9컴포넌트의 복사

5.2.3컴포넌트 삭제

컴포넌트 선택 후 마우스 오른쪽 버튼을 클릭하여 팝업메뉴의 [Delete]를 클릭합니다. 또는 해당 컴포넌트 선택 후 <DEL>키를 눌러 삭제합니다.

그림 5-10컴포넌트의 삭제

5.2.4컴포넌트 배치

Alignments Bar는 다중 선택된 컴포넌트의 배치를 쉽게 하기 위한 도구 모음입니다.

그림 5-11Alignments Bar

표 5-2Alignment Bar 설명과 예제

Align Left

마지막에 선택된 컴포넌트의 Left 값을 기준으로 정렬

<SHIFT>를 누르고 컴포넌트를 마우스로 클릭하여 선택

Align Horizontal Centers

마지막에 선택된 컴포넌트 수평 중앙값을 기준으로 정렬

Align Right

마지막에 선택된 컴포넌트의 Right 값을 기준으로 정렬

Align Top

마지막에 선택된 컴포넌트의 Top 값을 기준으로 정렬

Align Vertical Centers

마지막에 선택된 컴포넌트의 수직 중앙값을 기준으로 정렬

Align Bottom

마지막에 선택된 컴포넌트의 Bottom 값을 기준으로 정렬

Same Width

마지막에 선택된 컴포넌트의 Width 값을 기준으로 크기 변경

Same Height

마지막에 선택된 컴포넌트의 Height 값을 기준으로 높이 변경

Horizontal Space

선택된 컴포넌트를 같은 간격(수평)으로 정렬

Vertical Space

선택된 컴포넌트를 같은 간격(수직)으로 정렬

Lock Control

컴포넌트의 위치를 고정시키거나 해제

5.2.5컴포넌트 속성 설정

컴포넌트의 속성은 Properties 창에서 설정합니다. 컴포넌트 속성에 대한 자세한 설명은 Component Reference Manual을 참고하십시오.

일반 속성 설정

일반 속성은 Font, Color, Style 등과 관련된 속성으로 Properties 창에서 즉시 수정할 수 있습니다.

[그림 5-12]은 Edit 컴포넌트를 선택한 후 Text 속성을 변경한 화면입니다.

그림 5-12Component의 Property 설정

Contents 속성 설정

Contents 속성은 별도의 Contents Editor를 가지고 있습니다. Contents Editor를 이용하여 속성값을 설정합니다. Contents 속성을 가진 Component는 Grid, Combo, Div, Tab 및 Radio 등이 있습니다. [그림 5-13]은 Grid의 Contents 속성을 편집하는 Grid Contents Editor 화면입니다.

그림 5-13Grid Component의 Contents Editor

Domain 속성 설정

Properties 창의 DomainID 속성을 클릭하여 Domain 정보를 설정합니다. Domain 정보 파일에 설정된 정보가 Component에 적용됩니다. Domain 설정은 [5.9 Domain]을 참고하십시오. 보다 자세한 내용은 Administrators Guide를 참고하십시오.

그림 5-14Button Component의 DomainID

[그림 514] Button Component의 DomainID

5.2.6이벤트 설정

컴포넌트에서 발생한 이벤트에 대한 동작을 설정합니다. 해당 컴포넌트의 이벤트 리스트 중에서 특정 이벤트 발생 시 호출될 함수명을 입력합니다. 입력된 함수의 기능이 Script 개발 창에 구현됩니다.

[그림 5-15]는 OnClick 이벤트를 등록하고 이벤트에 대한 동작으로 메시지 창을 띄우는 스크립트 작성 화면입니다. OnClick 이벤트는 Button 컴포넌트를 클릭할 때 발생합니다.

그림 5-15Component의 Event 설정

5.2.7Tab Order 설정

Tab Order에서 <TAB> 키를 눌러 한 컴포넌트에서 다른 컴포넌트로 이동하는 순서를 설정합니다. 각 Form은 고유의 Tab Order를 가집니다. 일반적으로 Tab Order는 컴포넌트를 만드는 순서와 일치하지만 필요에 따라 순서를 변경할 수도 있습니다. Tab Order는 단축키 또는 Tab Order Editor를 사용하여 변경합니다.

단축키로 Tab Order를 변경하는 방법

Form에 포커스를 위치하고 <CTRL+D>를 누릅니다. [그림 5-16]은 Tab Order가 컴포넌트에 나타난 화면입니다. 탭이 이동할 순서대로 컴포넌트를 하나씩 클릭하면 Tab Order가 새로 설정됩니다.

설정이 끝난 후 다시 <CTRL+D>를 누르면 Tab Order 설정이 완료됩니다.

그림 5-16Tab Order의 설정

Tab Order Editor로 Tab Order를 변경하는 방법

Tab Order Editor를 실행하려면 [그림 5-17]의 메뉴 [Design > Tab Order Editor]를 클릭합니다.

그림 5-17메뉴 > Tab Order Editor

Tab Order는 [그림 5-18]의 컴포넌트 리스트 순서와 동일합니다. Tab Order를 변경하려면 선택된 컴포넌트를 원하는 위치에 Drag&Drop 하거나 [Up] 버튼, [Down] 버튼을 클릭하여 순서를 변경합니다.

그림 5-18Tab Order Editor

5.2.8Tab Order 제외

컴포넌트의 TabStop 속성이 False로 설정된 컴포넌트는 <TAB> 키로 컴포넌트를 순환할 때 Tab Order에 상관없이 TabStop 속성이 True인 다음 컴포넌트가 선택됩니다. [그림 5-19]은 Button 컴포넌트의 TabStop 속성값을 False로 설정하는 화면입니다.

그림 5-19TabStop 속성 설정

5.2.9Edit Component Template (V3.3 변경)

Edit Component Template는 기존 Component의 속성을 변경하여 Component Template으로 등록합니다. Template으로 등록된 Component는 반복하여 사용할 수 있습니다.

1

메뉴 [Project > Edit Component Template]를 선택합니다.

그림 5-20Edit Component Template

2

[그림 5-21]과 같이 +버튼을 클릭하면 New Component Template창이 나타납니다.

Category, Type, ID 등의 속성을 설정한 후 OK버튼을 클릭합니다.

그림 5-21Component Template 추가

3

추가된 Component Template의 Text의 속성을 변경한 후 OK버튼을 클릭합니다.

그림 5-22Component Template 추가

4

Component Toolbox의 Common 카테고리를 클릭하시면, 새로 추가한 Component Template이 나타납니다.

그림 5-23Component Template 추가

5

[그림 5-24]는 추가된 컴포넌트의 생성된 화면입니다.

그림 5-24Component Template

Component Template은 Project명_ct.xml File로 저장됩니다. 다른 개발자와 Component Template을 공유하실 경우 Project명_ct.xml File를 공유하시면 됩니다.

그림 5-25Component Template

V3.3에서 Component Template 화면의 Template 목록 표시 영역과 속성 입력 영역, Preview 표시 영역 사이에 Separator를 두어 편집 중에 각 영역 크기를 조절하여 사용할 수 있도록 개선했습니다.

그림 5-26Component Template Editor

5.2.10Multi Line 속성 입력 (V3.3 변경)

Button 또는 Static Component의 Text 속성과 같은 Multi-Line 속성의 경우 일반 Text 속성과 달리 속성 입력창에 버튼을 표시하고 해당 버튼을 누르는 경우 Multi Line 편집창을 표시합니다.

Text 입력 중 행 변경을 위해서는 Control 키와 Enter 키를 함께 입력합니다.

그림 5-27Multi Line 입력기

5.3Dataset의 사용

Dataset은 Data를 처리하는 Table 형태의 기억장소입니다. Dataset 컴포넌트는 Server Side의 Service Object와 연결하여 사용할 수 있으며, Client Side에서 Table 형태의 Structure를 생성하여 사용할 수도 있습니다. Presentation용 Component와 Dataset이 Bind된 경우 Data 변경사항이 해당 Component에 자동으로 동기화되는 기능도 제공합니다.

5.3.1Dataset 추가

[그림 5-28]과 같이 + 버튼을 클릭하면 Dataset0가 기본적으로 생성됩니다.

그림 5-28Dataset의 추가

5.3.2Dataset 복사

Copy<CTRL+C>와 Paste<CTRL+V>를 이용하여 Dataset을 쉽게 복사할 수 있습니다. 하지만 Dataset의 속성은 복사가 되지 않으므로 속성은 새로 설정해야 합니다.

그림 5-29Dataset의 복사

5.3.3Dataset 속성 설정

Dataset의 속성 변경은 해당 Dataset 선택 후 Properties 창에서 변경할 수 있습니다.

[그림 5-30]은 Dataset의 ID 값을 변경하는 화면입니다. Properties에 관한 자세한 설명은 Component Reference Guide를 참고하십시오.

그림 5-30Dataset의 Properties 설정

Const Column

Const Column은 각 Record(Row)와 상관없이 같은 값을 갖는 상수열입니다.

Row가 추가될 때마다 Const에서 설정한 Column 값이 자동적으로 설정됩니다. 이 기능을 사용하여 Data 통신 시 통신량을 줄일 수 있습니다.

[그림 5-31]과 같이 Const를 하나 추가하여 ID를 Column0로 설정합니다. 이후 Row에 Record가 추가될 때마다 Const의 Value 값이 자동으로 추가된 Record에 들어갑니다.

그림 5-31Const의 추가

[그림 5-32]는 Form에 Grid 컴포넌트를 배치하고 [그림 5-28]에서 작성한 Dataset0를 Binding하여 실행한 화면입니다. column0열의 모든 값이 Const에서 설정한 값으로 변경되어 있습니다.

그림 5-32Const의 사용

Colunms와 Rows의 사용

Dataset은 Table 형태의 기억장소입니다. 여기서 Table의 열에 대한 설정이 Columns이고 행에 대한 설정이 Rows입니다. Column을 먼저 설정하고 Row를 설정합니다.

그림 5-33Column 및 Row 의 추가

5.3.4Dataset의 Import 및 Export

PID에 정의된 Dataset의 구조를 파일형태로 저장하거나 이미 저장된 Dataset을 불러옵니다.

Dataset 파일의 기본 확장자는 dts입니다.

Dataset의 Export

[그림 5-34]은 Dataset의 구조 및 내용을 파일에 저장하는 화면입니다.

그림 5-34Export Dataset

Dataset의 Import

저장된 파일로부터 Dataset의 Format 정보와 내용을 읽어 새로운 Dataset을 생성합니다.

그림 5-35Import Dataset

Dataset의 저장 형태

DataSet을 선택한 후 마우스 오른쪽 클릭을 하여 팝업메뉴의 [Contents Edit]를 클릭합니다.

저장된 파일은 [그림 5-36]과 같이 XML 형태로 저장됩니다.

그림 5-36Dataset > Contents Edit Window

5.4Dataset과 Component의 Data Binding

변경되는 Data 내역을 Component에 실시간 반영되도록 Component와 Dataset, Dataset과 Business Service를 연결합니다. Binding 방법에는 각 Component와 Dataset의 속성을 변경하는 방법과 Project Explorer에서 Binding할 Dataset을 Component에 직접 Drag & Drop하는 방법이 있습니다.

본 절은 Demo Project를 예제로 사용합니다.

1

Project(Demo)를 Open합니다.

2

Application Group(DefApp)에 Form을 추가합니다.

3

추가된 Form에 Grid Component와 Edit Component를 배치합니다.

4

Business Service로 만들어진 Output 데이터를 Grid Component에 Binding 하기 위하여 person_list의 dsSearchGbn Dataset을 복사합니다.

5

Grid Component와 Dataset을 Binding 하기 위하여 dsSearchGbn Dataset 을 Grid Component에 Drag & Drop합니다. [그림 5-37]은 Dataset 과 Grid Component가 Binding된 화면입니다.

그림 5-37Dataset과 Grid Component의 Binding

6

Edit Component와 Dataset의 한 개 Column을 Binding 하기 위하여 dsSearchGbn Dataset의 code Column을 Edit Component에 Drag & Drop합니다.

[그림 5-38]은 Dataset 과 Edit Component가 Binding된 화면입니다.

그림 5-38Dataset과 Edit Component의 Binding

Quick View <CTRL+F6>를 실행합니다. [그림 5-39]는 Form을 실행한 화면입니다. Access DB에서 Business Service를 통해 전달된 Data가 Dataset에 전달되고 Dataset은 Component와 Binding 되어있어 Data 값이 화면에 표시됩니다.

그림 5-39Quick View로 실행된 Form

Quick View(Variable) 파라미터: Quick View 실행 중 Form에 파라미터를 전달해야 하는 경우 메뉴[Design Quick View (Variable)]를 선택합니다. Edit Variable 편집 창에서 사용할 파라미터를 입력합니다. 입력된 변수는 Form의 Event Script에서 사용할 수 있습니다. 메뉴 [Project Launch Project (Variable)]는 Project 전체 실행 시 초기 파라미터를 입력 받습니다.

5.5Design Source 편집

Form에 적용된 Component의 배치, 속성값 등은 [그림 5-40]의 Text 편집기에서 수정할 수 있습니다. Design Source 창과 Design 창은 상호 연동됩니다.

그림 5-40Design Source Editor

5.6Script 편집

Dataset을 포함한 각종 Component의 Event 처리 함수와 사용자 정의 함수를 JavaScript로 작성합니다.

그림 5-41Script Edit Window

5.6.1Editor 기본기능

Find

Script 편집 중 원하는 문자열을 찾을 때 Find를 사용합니다. Find의 실행은 메뉴 [Edit > Find]를 클릭합니다.

그림 5-42Menu - Find

그림 5-43Find Window

표 5-3Find Window 속성

영역

속성

설명

1

Find What

찾을 문자열

2

Match whole word only

온전한 문자열을 찾음

3

Match Case

대/소문자가 일치하는 문자열을 찾음

4

Regular expression

정규식을 이용하여 문자열을 찾음

5

Find Next

일치하는 다음 문자열을 찾음

6

Direction

커서가 위치하는 곳에서부터 찾을 위치 설정

표 5-4정규식 문자

문자

의미

예제

.

문자하나

“..do”는 Redo나 Undo 등을 의미

[]

대괄호 내의 문자나 문자범위

“sl[aou]g”는 slag, slog, slug 등을 의미

[^]

캐럿 다음에 오는 것을 제외한 문자나 문자범위

“sl[^r-z]g”는 slag, slog등을 의미하고, slug는 의미하지 않음

*

앞선 문자나 식을 0개 이상 사용

“r*d”는 rd, red, reed 등을 의미

+

앞선 문자나 식을 1개 이상 사용

“re+d”는 red, reed 등을 의미하고 rd는 의미하지 않음

^

줄 시작

“^word”는 줄이 시작되는 위치에 있는 word를 의미

$

줄 끝

“word$”는 줄이 끝나는 위치에 있는 word를 의미

\

다음 문자가 정규식이 아님

“red\$”는 red$를 의미($를 줄 끝 문자로 인식하지 않음)

Replace

Replace는 특정 문자열을 새로운 문자열로 바꿉니다.

옵션의 내용은 Find와 동일하며 Replace in selection only는 변경될 영역을 선택할 수 있습니다.

그림 5-44Replace Window

표 5-5Replace Window 속성

영역

속성

설명

1

Find what

찾을 문자열

2

Replace with

대체될 문자열

3

Match whole word only

온전한 문자열을 찾음

4

Match Case

대/소문자가 일치하는 문자열을 찾음

5

Regular expression

을 이용하여 문자열을 찾음

6

Replace in selection only

선택된 영역에 대하여 문자열을 찾아 대체함

7

Find Next

다음 문자열을 찾음

8

Replace

현재 찾은 문자열만을 바꿈

9

Replace All

모든 문자열을 바꿈

10

Direction

커서가 위치하는 곳에서부터 찾을 위치 설정

Comment

Comment는 프로그램 실행 시에 스크립트를 실행하지 않는 영역을 말합니다.

MiPlatform의 Script는 Java 형태의 Script 언어이므로 JavaScript와 같은 Comment 방법을 갖습니다.

Block Comment

Comment할 내용을 /* 와 */ 로 묶어주는 방법입니다.

Line Comment

Comment할 부분의 앞에 //를 입력하는 방법입니다.

[그림 5-45]은 Comment를 작성한 예제입니다.

그림 5-45Comment

5.6.2Intelligent Inspector

Intelligent Inspector는 Script 작성 중 사용되는 각종 Object의 속성 또는 멤버 함수, 각종 API 함수를 표시하여 개발자의 생산성을 향상시켜줍니다.

List Member

ScriptAPI 함수, 각 컴포넌트의 속성, Method 리스트, Variable 함수 리스트를 제공합니다.

그림 5-46Intelligent Inspector > List Member

Parameter Information

함수 파라미터 목록을 표시해 줍니다.

그림 5-47Intelligent Inspector > Parameter Infomation

5.6.3Bookmark의 사용

Script 또는 Design Source 편집 중 특정 줄에 Bookmark를 사용하여 해당 줄로 쉽게 이동할 수 있습니다.

그림 5-48Bookmark

Bookmark의 설정 및 해제

표 5-6Bookmark의 설정 및 해제

기능

단축키

설명

Toggle Bookmark

Ctrl+F2

커서 위치의 Bookmark를 설정 및 해제

Clear Bookmark


설정된 Bookmark를 모두 해제

Bookmark 찾기

커서가 위치한 파일에서 이동이 가능합니다.

표 5-7Bookmark의 사용

기능

단축키

설명

Next Bookmark

F2

다음 북마크를 찾아 커서를 위치

Previous Bookmark

Shift+F2

이전 북마크를 찾아 커서를 위치

5.7Grid Contents Editor

Grid Contents Editor는 Grid의 Contents Property를 편집하는 Editor입니다.

Grid 컴포넌트는 Properties 창에서 볼 수 있는 속성 외에 Grid를 구성하는 각 Cell 단위별로 많은 속성을 가지고 있습니다. Form 편집 창에서 Grid 컴포넌트를 선택하고 Properties 창에서 Contents 속성을 선택하면 Grid Contents Editor가 실행됩니다.

5.7.1Grid Contents Editor의 구성

Grid Contents Editor는 기본 편집 창, 속성 창 및 Text Editor로 구성되어 있습니다.

기본 편집 창에서는 팝업메뉴와 단축키를 사용하여 Cell을 추가/삭제하거나 속성을 편집할 수 있습니다. 기본 편집 창의 최상단에는 Column Index가 표시되고 아래로는 Head, Body, Summary로 구분되어 표시됩니다. 기본 편집 창에 표시된 파란 점선은 부모 Grid의 실제 Width를 표시합니다. 기본 편집 창의 파란 점선을 지나 표시된 Column이 있는 경우에는 부모 Grid에 Scroll Bar가 표시됩니다.

속성 창에는 Cell 구분, 해당 Cell의 속성 목록, 각각의 속성값이 표시됩니다. 속성 창 사용 방법은 Properties 창의 속성 설정 방법과 동일합니다. 속성 창에는 Expression 값을 편집하는 기능이 추가되어 있습니다.

그림 5-49Grid Contents Editor

[그림 5-48]의 Text Editor에서 Grid Contents를 XML 형태로 표시하고 편집합니다.

그림 5-50Grid Contents Editor

5.7.2Grid Contents Editor

Grid는 상단의 Header와 Body로 구분되며 Body 부분은 다시 General Cell 영역과 Summary Cell 영역으로 구분됩니다. Column을 하나 이상 추가해야 Grid Contents를 편집할 수 있습니다. Column이 하나 이상 생성된 후에 Header Cell과 Body Cell도 추가할 수 있습니다.

Column의 추가/편집

Grid Contents Editor를 시작하면 내용이 없는 빈 Grid Contents가 생성됩니다. Header나 Body 등의 내용을 추가하려면 먼저 Column을 추가하여야 합니다.

기본 편집 창에서 오른쪽 마우스를 클릭하여 [그림 5-51]의 팝업 메뉴 [Add Column]을 선택하거나 단축키 <CTRL+0>를 눌러 Column을 추가합니다.

그림 5-51Add a New Column

특정 Column을 선택하면 오른쪽의 속성 창에 해당 Column의 속성들이 표시됩니다. Column의 속성값은 Fix, Width 두 가지가 있습니다. 여러 개의 Column을 선택하면 선택된 모든 Column의 속성값 중 공통값만 표시됩니다. 값이 표시되지 않는 속성값을 설정하면 선택된 모든 Column의 해당 속성값이 동일하게 저장됩니다.

그림 5-52Select multi column

[그림 5-52]와 같이 여러 개의 Column을 선택하고 특정 Column 위에서 팝업메뉴를 띄워 [Same width] 명령을 실행합니다. 선택된 모든 Column의 Width 값을 팝업메뉴가 띄워진 Column의 Width 값으로 변경할 수 있습니다.

Header Row의 추가/편집

Header 영역은 각 Column의 Title을 표시하는 영역입니다.

기본 편집 창의 빈 공간에서 팝업메뉴를 띄워 [Add Head Row] 선택하거나 단축키 <CTRL+1>를 눌러 Header Row를 추가합니다.

[그림 5-53]에는 첫 번째 Header Cell과 두 번째 Cell이 다른 Font로 보입니다. Grid의 각 Cell은 기본적으로 Grid 컴포넌트에 설정된 Font가 적용되지만 각 Cell별로 별도의 Font를 지정할 수 있습니다. Header에 포함된 Cell들은 부모 Grid로부터 HeadBold, HeadBorder, HeadHeight의 속성값을 상속받아 사용합니다. [그림 5-53]의 1st Header Cell은 별도의 Font 속성을 지정하지 않았지만 부모 Grid로부터 Font 값을 상속받아 설정되었습니다.

그림 5-53Edit Header

[그림 5-54]과 같이 Header, Body 및 Summary 영역의 각 Cell을 선택하면 Colid 속성이 표시됩니다. Colid 속성에서 부모 Grid에 Bind된 Dataset의 Column 목록을 확인하거나 선택할 수 있습니다.

그림 5-54Edit Body Cell Attribute

Body Row의 추가/편집

Body 영역은 데이터를 표시하는 영역입니다. 생성된 Body 영역은 부모 Grid의 하단에 표시되고 각각의 Cell에는 속성에 따라 해당 데이터가 표시됩니다. 기본 편집창의 빈 공간에서 팝업메뉴를 띄워 [Add Body Row]를 선택하거나 단축키 <CTRL+2>를 눌러 Body Row를 추가합니다.

Summary Row의 추가/편집

Summary 영역은 Body 영역에 표시된 데이터들의 합계를 표시하는 영역입니다. 생성된 Summary 영역은 Grid의 하단에 표시되고 각각의 Cell에는 속성에 따라 해당 Column에 표시된 Data의 합계가 표시됩니다. 기본 편집 창의 빈 공간에서 팝업메뉴를 띄워 [Add Sum Row]를 선택하거나 단축키 <CTRL+3>을 눌러 Summary Row를 추가합니다.

Merge / Divide Cell

생성된 Header, Body 및 Summary 영역의 Cell 중 일부를 하나의 Cell로 통합할 수 있습니다. [그림 5-55]과 같이 Merge 하려는 Cell을 선택한 후에 팝업메뉴 [Merge Cells]을 선택하거나 단축키 <CTRL+M>을 눌러 선택한 Cell을 하나로 통합합니다.

그림 5-55Merge Cells

[Merge Cells]을 클릭하시면, [그림5-56]과 같은 속성정보를 유지할지에 대한 선택창이 나타납니다. 예(Y)를 클릭하시면 서브셀의 속성이 각각 유지되며, 아니오(N)을 누르시면 첫 번째 셀의 정보로 변경되어 유지됩니다.

그림 5-56Merge Cells

Cell Merge는 같은 영역 안에 있는 Cell만 통합할 수 있습니다. 예를 들어 Header 영역 안에 있는 Cell끼리 통합할 수 있지만 Header 영역의 Cell과 Body 영역의 Cell을 함께 통합할 수 없습니다. Body 영역과 Summary 영역도 동일합니다.

그림 5-57Merged Cell

[그림 5-57]과 같이 통합된 Cell은 ColSpan(RowSpan) 속성값에 통합된 Column(Row) 개수가 표시됩니다. 또한 기본 편집 창의 상단에 표시된 Column 표시도 통합된 상태의 Column으로 표시됩니다. Cell을 통합하여 하나로 표시된 영역에 둘 이상의 Column을 Binding하여 복합적인 내용을 표시하거나, 다른 형식으로 표시할 수도 있습니다.

통합된 Cell을 선택하면 선택된 Cell의 Subcell 속성에 통합된 Cell의 개수가 표시되고 속성값을 선택하면 Edit Sub Cells 창이 나타납니다.

통합된 Cell의 팝업메뉴에서 [Divide Cell]을 선택하거나 단축키 <CTRL+SHIFT+M>을 눌러 최소 Cell 단위로 다시 분할할 수 있습니다.

Sub-Cell 속성 편집

통합된 Cell의 단위 Cell 속성을 수정하려면 해당 Cell 선택 후 Subcell 속성을 선택합니다. [그림 5-58]의 Edit Sub Cells 창이 나타납니다.

그림 5-58Edit Sub Cells

각 Cell 속성 수정 방법은 일반 Cell 속성 편집 방법과 동일합니다. 단, Subcell Edit 창에서 Column을 추가 또는 삭제하거나 Column 속성을 변경할 수 없습니다. 또한 XML도 직접 편집할 수 없습니다.

Expression 속성값 편집 (V3.3 개선)

Grid Cell을 선택하면 속성 목록이 표시됩니다. 표시된 속성 중에서 (e)와 같이 표시된 속성들은 해당 속성값으로 표현식(Expression)을 가질 수 있습니다.

단, V3.2와 달리 PID V3.3에서는 Expression을 사용 가능한 속성 입력 창에 버튼이 함께 표시하고 해당 버튼을 누르면 Expression String Editor가 시작됩니다.

그림 5-59Edit Expression String

Format 추가/삭제

Grid는 서로 다른 여러 개의 Contents를 동시에 갖고 있습니다. 필요에 따라 특정 Contents를 사용할 수 있습니다. 각각의 Contents를 Format이라 부르며 기본 편집창의 좌측 상단 Tab 부분에서 추가하거나 삭제할 수 있습니다.

그림 5-60새로운 Format 추가

최초의 부모 Grid를 생성하면 기본적으로 Default라는 이름의 Format이 생성됩니다. 하지만 아직 XML 소스에는 Format이 표시되지 않습니다. 두 개 이상의 Format이 생성되면 비로소 XML에 Format Tag로 분리되어 내용이 표시됩니다. 각각의 Format 수정 방법은 최초 생성된 Default Contents의 편집 방식과 동일합니다.

5.7.3Grid Contents Editor 단축키

표 5-8Grid Contents Editor의 기능

기능

단축키

설명

Add Column

Ctrl+0

Column 추가

Add Head Row

Ctrl+1

Head Row 추가

Add Body Row

Ctrl+2

Body Row 추가

Add Sum Row

Ctrl+3

Sum Row 추가

Cut

Ctrl+X

Column 또는 Row 잘라내기

Copy

Ctrl+C

Columns 또는 Rows를 선택 후 복사하기

Paste

Ctrl+V

클립보드에 복사된 내용을 붙여넣기

Append: Column 또는 Row의 마지막에 붙여 넣음

Insert: 커서가 위치한 왼쪽 또는 위쪽에 끼워 넣음

Paste Properties Only: 커서가 위치한 Column 또는 Row에 속성값만을 붙여넣기

Add

Ctrl+N

Column 또는 Row 추가

Insert

Ctrl+I

Column 또는 Row 삽입

Delete

Ctrl+D

Column 또는 Row 삭제

Merge Cells

Ctrl+M

선택된 영역의 Cell을 합침

Divide Cell

Ctrl+Shift+M

Merge된 Cell을 다시 나눔

Same Width

Ctrl+W

전체영역이 선택된 경우 모든 Column의 Width 값을 첫 번째 Column의 Width 값으로 변경

Undo

Ctrl+Z

Undo 기능

Redo

Ctrl+Y

Redo 기능

5.8Add to Template List

개발자가 작성한 Form을 Template List에 등록합니다. Template List에 등록된 Form은 반복해서 사용할 수 있습니다.

프로그램 설치 시 포함된 Demo Project의 Person_entry Form을 Template List에 등록합니다.

1

등록하려는 Form을 엽니다.

2

메뉴 [File > Add to Template List]를 선택합니다. Add to Template 창이 나타납니다.

그림 5-61Add to Template

3

Form 이름과 설명을 입력 후 OK 버튼을 클릭합니다.

그림 5-62Add to Template

4

Template List에 등록되었습니다.

그림 5-63Template List 등록완료

5

Make New에서 Form을 선택한 후 OK 버튼을 클릭합니다. [그림 5-64]와 같이 Template List에 새로 추가한 Form이 등록되어 있습니다.

그림 5-64Template List

Template List는 Pid_TemplateList.xml 파일에 저장됩니다. 다른 개발자와 Template를 공유하실 경우 Pid_TemplateList.xml 파일과 해당 Template의 From 화면을 공유하시면 됩니다.

그림 5-65Pid_TemplateList.xml

5.9WebService (V3.3 삭제)

PID V3.3에서 Web Service 관련 기능을 제거했습니다. 따라서 기존에 작성했던 Web Service 기능에 대한 추가 및 변경은 불가능합니다.

Web Service 기능을 MiPlatform V3.3 Application에 포함하기 위해서는 X-UP과의 연동을 권장합니다.

WebService는 표준화된 XML 기반의 인터페이스를 통하여 플랫폼에 독립적이고 프로그램 언어에 중립적 방법으로 네트워크상에서 애플리케이션들이 접근할 수 있는 하나의 로직입니다.

PID V3.2에서는 Microsoft 사에서 제공하는 SOAP Toolkit을 사용하여 Web Service를 사용하기 위한 환경을 제공하였습니다. 그러나 그간 PID에서 제공하는 Web Service 관련 기능이 SOAP Toolkit의 기반 제약, 또는 호환성의 문제로 인해 실제 각 사이트에서 구현되어 있는 Web Service를 적절히 사용하기에 무리가 있어왔습니다.

이에 PID V3.3에서는 해당 기능을 삭제하고 앞서 언급한 X-UP과 연동을 통하여 Web Service를 사용하도록 하였습니다.

5.10MiDeploy

개발된 MiPlatform Start XML, Form, Domain, Resource 파일 등을 FTP Protocol을 사용하여 사용자가 접근할 수 있는 Site에 올리기 위해 사용합니다.

1

Demo 프로젝트를 Open합니다.

2

메뉴 [Project > Launch MiDeploy]를 선택합니다. MiDeploy 창이 나타납니다.

그림 5-66Launch MiDeploy 실행

3

MiDeploy 화면입니다. Connect 키를 클릭합니다.

그림 5-67MiDeploy 화면

표 5-9MiDeploy의 속성

영역

속성

설명

1

Project List

Upload될 Project List

2

Move Item

Upload 실행

3

FTP Directory Tree

접속한 FTP 서버의 경로를 트리 형태로 표시

4

FTP List

접속 후 원격 경로에 있는 파일 목록을 표시

5

Compile Xml

Start XML, Form, Domain 등의 XML 파일을 Compiled XML 형태로 전송할지 여부 설정

6

Compress(From, Js, Text File Only)

From, Js, Text File을 압축하여 전송할지 여부 설정

7

Create Directory

전송하려는 원격지의 경로가 존재하지 않는 경우 해당 경로를 생성할지 여부를 설정

8

Use the prescribed path

개발자가 입력한 Start xml 상대 경로로 Upload 할지 여부 설정

9

Make Directory

디렉토리를 생성

10

Rename

폴더명 재설정

11

Delete

선택된 디렉토리, 파일 명을 수정

12

Refresh

선택된 폴더의 내용을 새로 고칩

13

Connect

Select FTP Server 실행

14

Disconnect

FTP 연결 해제

15

Close

MiDeploy 닫기

4

FTP Server의 속성을 설정하는 화면입니다. +키를 눌러 새 FTP Server 연결을 생성한 후 FTP Server의 속성을 설정합니다. Login Test키를 눌러 로그인을 체크합니다.

그림 5-68Select FTP Server 화면

표 5-10Select FTP Server의 속성

영역

속성

설명

1

Server List

FTP Server 리스트

2

Add Server

FTP Server 추가

3

Delete Server

FTP Server 삭제

4

Profile Name

FTP Server 식별 ID,

5

Host

FTP Server IP Address

6

Port

Number

7

Login

로그인 ID

8

Password

로그인 비밀번호

9

Login Test

로그인 체크 테스트

10

Set Directory

초기 경로

5

전체 프로젝트를 Upload합니다.

Start Xml Setting 화면은 개발자가 Start Xml에 반영될 상대경로를 변경할 수 있습니다.

Project 전체 Upload 시나 Start Xml에서 Upload시에만 나타납니다.

수정 된 경로로 Start Xml이 Upload 됩니다. 설정된 상대 경로 값은 Local StartXml에는 반영되지 않습니다

그림 5-69Start Xml Setting 화면

6

Upload할 파일과 폴더 리스트입니다. OK 버튼을 클릭합니다.

그림 5-70MiDeploy-Upload List화면

7

Upload를 성공했습니다. 확인버튼을 클릭합니다.

그림 5-71Upload성공 화면

8

Upload가 완료되었습니다.

그림 5-72Upload완료 화면