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

Form의 생성

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

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

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

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

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

컴포넌트의 사용

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

컴포넌트 생성

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

컴포넌트 복사

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

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

컴포넌트 삭제

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

컴포넌트 배치

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

컴포넌트 속성 설정

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

일반 속성 설정

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

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

Contents 속성 설정

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

Domain 속성 설정

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

[그림 514] Button Component의 DomainID

이벤트 설정

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

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

Tab 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 설정이 완료됩니다.

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

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

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

Tab Order 제외

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

Edit Component Template (V3.3 변경)

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

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

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

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

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

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

Dataset의 사용

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

Dataset 추가

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

Dataset 복사

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

Dataset 속성 설정

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

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

Const Column

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

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

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

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

Colunms와 Rows의 사용

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

Dataset의 Import 및 Export

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

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

Dataset의 Export

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

Dataset의 Import

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

Dataset의 저장 형태

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

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

Dataset과 Component의 Data Binding

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

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

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

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

Design Source 편집

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

Script 편집

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

Editor 기본기능

Find

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

Replace

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

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

Comment

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

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

Block Comment

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

Line Comment

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

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

Intelligent Inspector

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

List Member

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

Parameter Information

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

Bookmark의 사용

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

Bookmark의 설정 및 해제

Bookmark 찾기

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

Grid Contents Editor

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

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

Grid Contents Editor의 구성

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

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

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

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

Grid 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을 추가합니다.

특정 Column을 선택하면 오른쪽의 속성 창에 해당 Column의 속성들이 표시됩니다. Column의 속성값은 Fix, Width 두 가지가 있습니다. 여러 개의 Column을 선택하면 선택된 모든 Column의 속성값 중 공통값만 표시됩니다. 값이 표시되지 않는 속성값을 설정하면 선택된 모든 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-54]과 같이 Header, Body 및 Summary 영역의 각 Cell을 선택하면 Colid 속성이 표시됩니다. Colid 속성에서 부모 Grid에 Bind된 Dataset의 Column 목록을 확인하거나 선택할 수 있습니다.

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을 하나로 통합합니다.

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

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

[그림 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 창이 나타납니다.

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

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

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

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

Format 추가/삭제

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

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

Grid Contents Editor 단축키

Add to Template List

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

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

WebService (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를 사용하도록 하였습니다.

MiDeploy

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

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

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

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