3.PID(Presentation Interface Developer)의 기초

Edit

3.1PID의 소개

3.1.1PID의 소개

PID는 Visual Basic, Delphi, PowerBuilder와 유사한 Interface 및 Functionality를 제공하는 MiPlatform 개발 도구입니다. 개발자는 화면을 디자인하고 Dataset을 설정할 수 있으며 컴포넌트 이벤트 설정 및 Script를 작성할 수 있습니다. 또한 작성한 화면을 다양한 Device에 쉽게 적용할 수 있습니다.

그림 3-1PID의 소개

3.1.2권장사양

MiPlatform V3.3을 사용하는 데 필요한 시스템 권장사항입니다.

표 3-1시스템 권장사항

항목

내역

CPU

Intel Pentium 4 1.4GHz 이상(Intel Pentium i3-330M, 2.13GHz 이상 권장)

운영체제

Windows XP SP3 이상(Windows7 Home Premium 32bit SP1 이상 권장)

메모리

1GB RAM 이상(DDR3 4GB 이상 권장)

디스크 여유 공간

8GB 이상(30GB 이상 권장)

디스플레이

가속 기능을 갖고 있는 메모리 512MB 이상의 그래픽 장치 권장

3.1.3PID의 설치 및 삭제

설치

PID는 MiPlatform 설치 패키지에 포함되어 배포됩니다.

본 절의 설치과정은 MiPlatform_SetupDeveloper330U팩을 기준으로 설명합니다.

1

배포된 Setup 파일을 실행하면 설치 준비과정이 진행됩니다.

Windows Vista의 경우, 보안 경고창이 나타납니다. 반드시 실행을 선택하여 주시기 바랍니다.

그림 3-2PID 설치 준비과정

1

MiPlatform_SetupDeveloper330U의 실행에 필요한 설치 파일을 사용자 컴퓨터에 복사하고 프로그램 실행에 필요한 정보를 등록합니다.

그림 3-3프로그램 설치

2

Finish 버튼을 클릭하여 프로그램 설치를 완료합니다.

그림 3-4프로그램 설치 완료

PID의 설치정보

[시작 > 프로그램 > TOBESOFT > MiPlatform > MiPlatform V3.3.0 Unicode for Developer] 경로에서 PID를 비롯하여 설치 패키지에 포함된 툴의 단축 아이콘을 확인할 수 있습니다. 설치된 각각의 단축 아이콘과 설치 폴더에 포함된 파일은 다음과 같습니다.

시작메뉴

그림 3-5MiPlatform V3.3의 시작메뉴

단축 아이콘

표 3-2PID의 단축 아이콘

아이콘

설명

바탕화면 아이콘 생성 유무

PID V3.3 단축 아이콘

O

BSB V3.3 단축 아이콘

O

Demo 프로그램 V3.3 단축 아이콘

O

Showcase 프로그램 단축 아이콘

X

MiPlatform 도움말 아이콘

X

Uninstall 단축 아이콘

X

설치된 폴더 및 파일

그림 3-6설치된 폴더 및 파일

표 3-3설치된 폴더 및 파일

OS

경로

VISTA

C:\Users\[유저명]\AppData\Local\TobeSoft\MiPlatform330U

C:\Users\[유저명]\Documents\TOBESOFT\MiPlatform330U

XP

C:\Document and Settings\[유저명]\Local Settings\Application Data\TobeSoft\MiPlatform330U

C:\Documents and Settings\[유저명]\Local Settings\Compatible LocalLow\TOBESOFT\Miplatform330U

MiPlatform의 폴더 구조

표 3-4MiPlatform의 폴더구조

폴더

설명

기본경로(VISTA): C:\Users\[유저명]\AppData\Local\TobeSoft\MiPlatform330U

MiPlatform V3.3 기본 Component 모음

PID 기능 지원 서비스

※ 주의: 폴더 이름이나 위치를 변경할 경우 PID가 작동하지 않습니다.

도움말 파일

Temp 폴더

Template 모음

기본경로(VISTA): C:\Users\[유저명]\Documents\TOBESOFT\MiPlatform330U

Demo Sample Root

MiPlatform V3.3 문서 파일

※ 반드시 숙지하십시오.

Tutorial Sample Root

Registry 정보

Registry의 \HKEY_CURRENT_USER\SoftWare\AppDataLow\SoftWare\TobeSoft 경로에서 MiPlatform 정상 구동에 필요한 설정 정보를 확인할 수 있습니다. 설정 정보는 Registry 편집기(C:\WINDOWS\regedit.exe)로 확인할 수 있으며 사용자가 임의로 변경하면 프로그램이 손상될 수 있습니다. 설정 정보에 대한 자세한 내용과 변경 방법 등은 Administrators Guide를 참고하십시오.

그림 3-7MiPlatform의 Registry 경로

표 3-5Registry 경로

경로

설명

Demo 사이트의 경로

MiPlatform을 구동하기 위한 Registry 정보 경로

Tutorial 사이트의 경로

표 3-6MiPlaftform V3.3의 Registry 구성값

Key

설명

기본경로: \HKEY_CURRENT_USER\SoftWare\AppDataLow\SoftWare\TobeSoft\MiPlatform330U

ExecPath

C:\Users\[유저명]\AppData\Local\TobeSoft\Miplatform330

MiPlatform330.exe 실행 경로

표 3-7Setting의 Registry 구성값

Key

설명

기본경로: \HKEY_CURRENT_USER\SoftWare\AppDataLow\SoftWare\TobeSoft\MiPlatform330U\settings

CacheDir

C:\Users\[유저명]\AppData\LocalLowTobesoft\Miplatform330U\Cache\

Simulator의 Cache 정보가 들어 있는 위치로 Application Group별, device별로 저장

ComponentPath

C:\Users\[유저명]\AppData\Local\TOBESOFT\MiPlatform330U\Component

Simulator의 화면 구성에 필요한 Component 위치

CurrentLayout

4 (16진수)

현재 Device 설정값

Nexio(800x454): 0

Pocket Style(240x320): 1

PC-Ephone(640x454): 2

SmartPhoone(160x24): 3

Win32(800x600): 4

Wind32(1024x768): 5

Essence(240x320): 6

Lang

Kor

한국어 Version

MaxCommCnt

A(16진수)

통신 연결 최대값

PingWaitTime

2(16진수)

wait time

Retry

2 (16진수)

통신 연결 시도 횟수

ScriptPath

C:\Users\[유저명]\AppData\Local\TOBESOFT\MiPlatform330U\Script

Simulator 작동에 필요한 Script(js)

경로

TimeOut

1e (16진수)

통신 연결 Timeout

버전 확인

시작 프로그램 TOBESOFT MiPlatform MiPlatform V3.3.0 Unicode for Developer에서 PIDeveloper330를 실행합니다. PID의 메뉴[Help > About PID]를 클릭하면 설치된 PID의 버전을 확인할 수 있습니다.

그림 3-8PID V3.3의 정보

삭제

시작 프로그램 TOBESOFT MiPlatform MiPlatform V3.3.0 Unicode for Developer에서 Uninstall을 실행하면 설치된 MiPlatform Package 및 PID가 제거됩니다.

1

UnInstall의 실행

그림 3-9UnInstall의 실행

2

예(Y) 버튼을 클릭하면 삭제가 시작됩니다.

그림 3-10Confirm Uninstall

3

사용자의 컴퓨터에 설치된 프로그램 및 설치정보를 삭제 후 완료합니다.

Windows Vista의 경우, 시스템 접근 허용창이 나타납니다. 반드시 허용을 선택하여 주시기 바랍니다.

그림 3-11UnInstall 실행

3.1.4도움말 사용

단축키 <F1>을 누르거나 메뉴에서 [Help > Help]를 선택합니다. 아래 그림은 도움말을 실행한 화면입니다.

그림 3-12도움말

표 3-8도움말의 목차구성

JS 파일에서 사용하는 Script 문법에 관련된 도움말

Expression(표현식)에서 사용하는 문법에 관련된 도움말

Form에서 사용 가능한 Object 도움말

Start XML에 관련된 Element에 대한 도움말

Script API 도움말 모음


Script에서 사용 가능한 함수 API 도움말

Form에서 사용 가능한 API 도움말

Service에 관련된 API 도움말

Component와 관련된 Property, Method 및 Event에 대한 도움말

Component에 대한 자세한 내용은 Component Reference Guide를 참고하십시오.

Color 목록, 기능 구현 방법 등의 부가적인 도움말

3.2PID의 구성

그림 3-13PID의 구성

표 3-9PID의 구성목록

영역

구성

구성요소

1

Application Frrame

MenuBar, ToolBar, ComponentBar, AlignmentBar, DebugBar

2

Project Explorer

Application, Data, Global, WebService로 구분되어 Project 구성을 표시

3

편집 창

Design(Form), Dataset, Design Source, Script, ServiceObject, DataObject로 구분되어 각각의 편집 지원

4

Properties

Form 및 각종 Component, Dataset의 속성 및 Event 속성 표시

5

Output

Message, Debug, Find In Files로 구분되어 각종 메시지 및 결과 표시

3.2.1PID의 화면 구성

PID의 화면은 Application Frame, Project Explorer, 편집 창, Properties 창 및 Output 창으로 구분됩니다.

3.2.2Application Frame

Menu Bar

Menu Bar는 PID에서 사용하는 기능을 모아놓은 곳입니다.

그림 3-14Menu Bar

File Menu

그림 3-15File Menu

표 3-10File Menu

메뉴

아이콘

기능

New

새로운 Form 생성

Open Project

Project를 열기

Close Project


현재 선택된 Project 닫기

Close


현재 열린 Form 닫기

Save

현재 열린 Form 저장

Save As


현재 열린 Form 다른 이름으로 저장

Save All

현재 열린 모든 Form 저장

Rename


현재 Form의 이름 변경

Print

현재 Form 인쇄

Page Setup


프린터 환경 설정

Add To Template List


Template에 현재 Form 저장

Exit


프로그램 종료

Edit Menu

그림 3-16Edit Menu

표 3-11Edit Menu

메뉴

아이콘

기능

Undo


최종 단계의 이전 상태로 되돌림

Redo


Undo 하기 이전 상태로 되돌림

Cut

선택된 영역을 잘라서 클립보드에 삽입

Copy

선택된 영역을 클립보드에 삽입

Paste

클립보드에 있는 내용을 붙여 넣기

Delete

Device Form 화면 개발 중일 때는 선택된 컴포넌트 삭제

내부 로직 Script 개발 중일 때는 선택된 영역의 Text 삭제

Select All


컴포넌트를 모두 선택하거나 Script의 모든 텍스트 선택

Find

Text Editor에서 편집 작업 중일 때, 문자열을 찾기

Find Next


Text Editor에서 편집 작업 중일 때, 찾기 메뉴를 이용하여 처음 찾은 문자열 이후 나오는 문자열을 다시 찾기

Find Previous


Text Editor에서 편집 작업 중일 때, 다음 찾기와 반대로, 찾은 문자열 이전에 나오는 문자열을 다시 찾기

Replace


Text Editor에서 편집 작업 중일 때, 특정 문자열을 다른 문자열로 교체

Find in Files

지정 경로의 파일들 중 지정 단어를 포함한 파일을 찾기

Goto Line


Text Editor에서 편집 작업 중일 때, 특정 라인으로 커서를 이동

Toggle Bookmark


Text Editor에서 편집 작업 중일 때, 현재 커서의 위치에 Bookmark를 새로 만들거나 삭제

Next Bookmark


Text Editor에서 편집 작업 중일 때, 현재 커서의 위치를 다음 Bookmark 위치로 이동

Previous Bookmark


Text Editor에서 편집 작업 중일 때, 현재 커서의 위치를 이전 Bookmark 위치로 이동

Clear Bookmarks


Text Editor에서 편집 작업 중일 때, 전체 Bookmark를 삭제

List Members


Text Editor에서 편집 작업 중일 때, 현재 문자열과 ID가 같은 컴포넌트의 콤보 리스트 상자(속성, Method 리스트)를 띄움

Parameter Info


Text Editor에서 편집 작업 중일 때, 현재 문자열과 같은 함수의 파라미터 정보 상자를 띄움

Block Comment or Uncomment


Text Editor에서 편집 작업 중일 때, 선택된 영역을 주석 처리 여부 선택

Refresh File Status


파일을 다시 로드함

View Menu

그림 3-17View Menu

표 3-12View Menu

메뉴

아이콘

기능

Main


Main 툴바를 보이거나 숨김

Debug


디버그바를 보이거나 숨김

Align


정렬 바를 보이거나 숨김

Source Control


형상관리 바를 보이거나 숨김

Components


컴포넌트 바를 보이거나 숨김

Status Bar


상태 바를 보이거나 숨김

Project Explorer


Project Explorer 창을 보여줌

Properties


Properties 창을 보여줌

Output


Message, Debug 및 Find in Files 창을 보여줌

Component Toolbox


컴포넌트 툴박스 창을 보이거나 숨김

Project Menu

그림 3-18Project Menu

표 3-13Project Menu

메뉴

아이콘

기능

Reload

문서를 새로 고침

Launch Project

Project 실행

Launch Project(Variable)


변수를 입력받아 Project 실행

Make Shortcut


단축 아이콘 생성

Save the Project As Compiled XML


Project를 compiled된 XML 파일로 저장

Edit Component Template

컴포넌트 Template 관리창 실행

Project All Upload


Project 전체를 Deploy에 Upload 합니다.

Option / Deploy에서 Host를 추가해야 사용이 가능합니다.

Launch MiDeploy


Mideploy를 실행합니다.

Make Update HTML


Update HTML을 생성합니다.

Make Update Config XML


Update Config XML을 생성합니다.

Edit Start XML


Start XML을 편집합니다.

Design Menu

그림 3-19Design Menu

표 3-14Design Menu

메뉴

아이콘

기능

Align


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

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

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

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

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

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

Space


Same Space Horizontal: 마지막에 선택된 컴포넌트와 이전에 선택된 컴포넌트를 같은 간격(수평)으로 정렬

Same Space Verticaly: 마지막에 선택된 컴포넌트와 이전에 선택된 컴포넌트를 같은 간격(수직)으로 정렬

Size


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

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

Position


Left Edge: 선택된 컴포넌트를 Form의 Left를 기준으로 정렬

Right Edge: 선택된 컴포넌트를 Form의 Right를 기준으로 정렬

Top Edge: 선택된 컴포넌트를 Form의 Top을 기준으로 정렬

Bottom Edge: 선택된 컴포넌트를 Form의 Bottom을 기준으로 정렬

Horizontal Center: 선택된 컴포넌트를 Form의 수평 중앙에 정렬

Vertical Center: 선택된 컴포넌트를 Form의 수직 중앙에 정렬

Tab Order


Form에서 Tab Order를 직접 수정

Tab Order Editor


Tab Order Editor 실행

Quick View

현재까지 만들어진 Form 문서를 MiPlatform으로 실행

Quick View(Variable)


변수를 입력 받아 현재까지 만들어진 From 문서를 MiPlatform으로 실행

Debug Menu (V3.3 추가)

V3.2에서 Project 및 View Menu의 하위에 있던 Debug Start 명령과 Menu에 포함되어 있지 않고 Toolbar로만 제공하던 Debug Menu를 V3.3에서 분리, 추가하였습니다.

아울러 Debug 관련 창 활성화를 위한 메뉴를 추가하여 해당 Watch 및 Variables 창에 접근을 용이하도록 하였습니다.

그림 3-20Debug Menu

표 3-15Debug Menu

메뉴

아이콘

기능

Debug Project

Project를 Debugging 모드로 실행합니다.

Debug Form


현재 열린 Form을 Debugging 모드로 실행합니다.

Stop Debug

Debugging을 종료합니다.

Step In

호출한 함수 안으로 진입합니다.

Step Over

다음 Line으로 진행합니다.

Step To

지정된 Cursor 위치까지 한번에 진행합니다.

Step Out

함수안에서 밖으로 나옵니다.

Toggle Breakpoint

Breakpoint를 설정/해제합니다.

Delete All BreakPoints

설정된 모든 Breakpoint를 해제합니다.

Windows

Wath: Watch창을 나타나게 합니다.

Variables: Variables창을 나타나게 합니다.

Debug Message: Debug Message를 나타나게 합니다.

Tool Menu

그림 3-21Tools Menu

표 3-16Tools Menu

메뉴

아이콘

기능

Project Manager

Project Manager 실행

Device Manager


Device Manager 실행

Options

PID의 Options 설정창 열기

Custom Form Templates

사용자폼 관리창 열기

Window Menu

그림 3-22Window Menu

표 3-17Window Menu

메뉴

아이콘

기능

Cascade

열린 창을 계단식으로 정렬

Tile

열린 창을 타일식으로 정렬

Arrange Icons


최소화된 창 아이콘 정렬

Close


열린 창 닫기

Close All


열린 모든 창 닫기

Next


다음 화면으로 이동

Provious


이전 화면으로 이동

Help Menu

그림 3-23Help Menu

표 3-18Help Menu

메뉴

아이콘

기능

Help


도움말 창 표시

Whats New ?


MiPlatform V3.3의 새로운 기능 정보 창 표시

Regist


License Key 등록/갱신

About PID

PID 정보 창 표시

Toolbar

Toolbar는 PID 사용에 필요한 기본 기능을 모아놓은 곳입니다.

V3.3에서 사용자로 하여금 원래의 Toolbar 기능을 쉽게 이해할 수 있도록 Project Open, Project Launching Toolbar button의 이미지를 변경하였습니다.

그림 3-24Main Toolbar

표 3-19Main Toolbar

메뉴

기능

Open Project

Project 열기

New

새로운 Form 문서 생성

Save

현재 열린 Form 문서 저장

Save All

현재 열린 모든 Form 문서 저장

Cut

선택 영역을 잘라내어 클립보드에 저장

Copy

선택 영역을 복사해서 클립보드에 저장

Paste

클립보드에 저장된 내용 붙여넣기

Print

현재 Form 문서 인쇄

Project Manager

Project Manager 실행

Launch Project

Project 실행

Quick View

현재까지 만들어진 Form 문서를 MiPlatform으로 실행

Options

PID의 Option 설정 창 표시

About

PID의 정보 창 표시

Component Bar

Component Bar는 작업 중인 Project에 등록된 Component 모임입니다. 화면 편집 중에 해당 Component를 직접 끌어다 놓음으로써 화면을 구성할 수 있습니다.

그림 3-25Component Bar

표 3-20Component Bar

컴포넌트

기능

Select

Component Select Icon

cySpin

정해진 규칙에 따라 손쉽게 숫자를 입력받을 때 사용하는 Component

cyMaskedit

날짜의 연월일시(yyyy/mm/dd hh:mi:ss) 형식 또는 숫자의 Comma 표시와 같이 규정된 형식으로 문자열을 입력받거나 보여주는 Component

cyButton

사용자로부터 마우스 입력을 받을 때 사용하는 버튼 Component

cyStatic

Static Component는 다른 Presentation Component (Edit, Combo..)들에 대한 제목 등을 기술하거나 화면을 구성할 때 관련 있는 Component를 그룹화하는 컴포넌트

Static Component 안에는 2가지(Label, GroupBox) Control이 있습니다.

cyEdit

텍스트 표시와 입력 값을 가지는 Component

cyShape

라인, 사각형, 원, 라운드 사각형을 그리기 위한 Component

cyPie

호(Pie)모양을 그리기 위한 Component

cyCheckBox

TRUE/FALSE 값을 가지는 Component

cyFileDialog

옵션에 따라 파일 열기 대화 상자, 파일 저장 대화 상자, 폴더 선택 대화 상자를 표시하는 경우 사용되는 Component

cyFile

File을 읽거나 작성된 내용을 저장할 때 사용되는 Component

cyListBox

Dataset에 Binding하여 항목을 List로 나열하여 선택할 경우 사용되는 Component

cyComboEx

Edit와 드롭 다운 스크롤 리스트를 통합한 형태의 Component

cyRadio

제시된 여러 가지 선택사항 중에서 하나의 항목을 선택해야 할 경우 사용되는 Component

cyTextArea

사용자에게 여러 Line의 문자열을 입력받거나 표시할 경우 사용되는 Component

cyProgressbar

작업의 현재 진행 상태를 그래픽을 이용하여 보여주는 Component

cyTreeView

Data를 Tree 형태로 표시할 때 사용되는 Component

cyGrid

스프레드시트와 유사하게 Dataset의 내용을 표 형식으로 처리하는 Component

cyImage

화면에 이미지를 표시할 때 사용되는 Component

cyCalendarEx

날짜를 입력할 때 사용되는 Component

cyDiv

Form안에 다른 Form을 불러와서 하나의 Form인 것처럼 사용하거나, 관련 있는 Component를 하나의 그룹으로 묶어서 처리할 경우 사용되는 Component

cyTab

한 화면에서 여러 개의 Tab Page를 분할할 경우 사용되는 Component

cyWebBrowser

Internet Explorer와 같은 웹 브라우저 Component

cySWFlash

Flash를 보여주는 Component

cyMenuBar

Menu Item을 구성할 경우 사용되는 Component

cySplit

화면 분할을 구현하기 위한 Component

cySplitJoint

1개~4개의 Split Component를 연결하기 위한 Component

cySign

사용자의 Sign을 입력받기 위한 Component

CyPopupDiv

하나의 화면에 여러 개의 부분 화면을 구성할 때 사용하는 Component

Alignments Bar

Alignments Bar는 Form 화면 개발 시 컴포넌트를 정렬하는 기능을 모아놓은 곳입니다.

그림 3-26Alignment Bar

표 3-21Alignment Bar

메뉴

기능

Align Left

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

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

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

Debug Bar

Debug Bar는 디버깅 시 필요한 기능을 모아놓은 곳입니다.

그림 3-27Debug Bar

표 3-22Debug Bar

메뉴

기능

Start Debug

디버깅 모드 시작 <F5>

Stop Debug

디버깅 모드 종료

Step In

한 스텝씩 디버그, 스텝에 다른 함수 호출 시 해당 함수로 이동 <F11>

Step Out

한 스텝씩 디버그, 한 스텝을 모두 실행하고 다음 스텝으로 이동 <F10>

Step Over

현재 함수의 나머지 부분을 실행하고, 함수 호출이 이루어진 다음 문장에서 멈춤

Step to

현재 커서가 위치한 줄까지 실행 후 멈춤

Breakpoint

Breakpoint를 설정하는 기능

Delete All Breakpoints

설정된 Breakpoint를 해제

SCM Bar

SCM (Source Control Manager) Bar는 형상관리 시 필요한 기능을 모아놓은 곳입니다.

그림 3-28SCM Bar

표 3-23SCM Bar

메뉴

기능

Get Last Version

최종 버전을 다운

SCM Type이 Clearcase일 경우 비활성화

Check Out

서버로부터 최신 버전을 다운

Check In

수정한 내용을 서버에 올림

Undo Check Out

수정한 내용을 저장하지 않고 파일을 Check In

SCM Type이 Clearcase일 경우만 실행

Add To Source Control

SCM에 파일 등록

Remove From Source Control

SCM에 등록된 파일을 삭제

Show Version Tree

Clearcase Show Version Tree Browser을 호출

SCM Type이 Clearcase일 경우만 실행

Show History

파일 수정 내역 확인창 실행

Show Differences

SCM에 등록된 최종 버전과 현재 사용자의 파일 비교창 실행

Refresh Status

파일의 상태를 Refresh

Run Source Control Client

SCM 프로그램 실행

Status Bar

Status Bar는 PID의 상태를 나타내는 곳입니다.

그림 3-29Status Bar

표 3-24Status Bar

메뉴

기능

프로그램의 상태를 보여주는 Message Bar

선택된 Component의 Form 좌표

Form이 선택된 경우에는 마우스 커서 좌표 (단위: Pixel)

선택된 Component의 크기 (단위: Pixel)

현재 파일의 상태

스크립트 삽입모드 상태

<CAPS LOCK> 설정/해제 기능

<NUM LOCK> 설정/해제 기능

<SCROLL LOCK> 설정/해제 기능

3.2.3Project Explorer

Project Explorer는 Project에 포함된 항목들을 표시하고 각 항목별로 편집기를 제공합니다. Project Explorer는 Application, Data, Global의 세 영역으로 구성됩니다.

Application 영역은 형태별 Application Group, 각 Application 경로에 포함된 파일 목록 및 표시 가능한 각 파일별 구성 항목을 보여 줍니다. Form 형태의 Application Group은 각 화면과 그 구성 Component 목록, Application Group에 포함된 Image Resource 파일 내역을 표시하고 편집합니다.

Data 탭은 각종 통신, Local DB Protocol 목록, Business Service 목록 및 입출력 레이아웃을 표시합니다. Global 탭은 StartXML에 정의되어 있는 각종 Global 항목을 표시하고 편집합니다.

Application Group

Application 영역은 각 그룹별로 포함된 파일들의 목록과 그 내용을 표시합니다. Application Group은 Form/Js/BS/File의 4가지 Type이 있으며 설정에 따라 Project 설정값과는 별도의 Codepage 및 Cache 정책 등의 속성을 가질 수 있습니다.

Form type의 Application Group에는 화면(Form) 목록과 Image Resource 목록, Library Script, 기타 사용자 지정 파일 목록의 경로 정보가 포함되어 있습니다.

Js Type의 Application Group에는 공통 라이브러리 또는 사용자 정의 Function을 포함하는 JavaScript 파일 목록이 표시됩니다. BS와 File Type의 Application Group에는 경로 정보만 저장되어 있으며 별도 내역은 표시되어 있지 않습니다.

Application 영역의 각 항목을 더블클릭하면 적절한 Editor를 활성화시킬 수 있습니다. 또한 Form이나 JS 파일의 경우에는 Drag 하여 다른 Application Group으로 복사하거나 이동할 수 있습니다.

Application Group Editor에서 Application Group을 추가/삭제하고 설정을 변경할 수 있습니다.

그림 3-30Project Explorer

표 3-25Project Explorer 설명

영역

설명

1

Form 리스트 중 특정 Form을 Form 이름으로 빠르게 찾을 수 있는 Edit 상자

2

Application Group, Data, Global의 목록 창

Data

Data 영역에는 각종 통신용 Protocol과 Business Service 연결을 위한 Data Group이 표시됩니다.

Protocols 항목에는 Project 생성 시 포함되는 File, http, https, Rss의 네 가지 통신 Protocol과 Local DB, 기타 사용자 정의 Protocol 항목이 표시됩니다.

Data Group 항목에는 Business Service 접근 경로가 포함된 각각의 Data Group, Business Service 목록, Business Service 입출력 Layout이 표시됩니다.

각각의 항목은 Protocol Editor와 Data Group Editor를 사용하여 추가/삭제하거나 설정을 변경할 수 있습니다.

그림 3-31Data Group

표 3-26Data Group 설명

영역

설명

1

통신을 위한 Protocol에 관한 목록

2

Data 교환을 위한 Data Groups의 목록

Global

Global Area에는 Application과 Data 영역에 포함되지는 않으나 Project 전체에 걸쳐 사용되는 여러 Global 항목이 표시됩니다. 또한 각각의 편집기를 사용하여 Global Area에 항목들을 추가하거나 변경할 수 있습니다.

Project Explorer는 팝업메뉴의 Refresh 명령을 사용하여 하위 항목을 다시 읽어 표시할 수 있습니다. Global 영역의 각 항목들은 별도로 표시되지만 모두 하나의 Start XML 안에 기술됩니다. 따라서 Global 영역의 각 항목에 대해서 Refresh 명령을 사용하는 것과 Project Reload를 실행하는 것은 같은 기능입니다. Global에 관한 자세한 내용은 5장 [5. Global Contents]를 참고하십시오.

그림 3-32Global

표 3-27Global 설명

전역 변수 목록

전역 Dataset과 각 Dataset Layout 표시

항목 더블클릭 시 Script Editor 연결

Color, Font 등의 정보를 포함하는 Style Template 목록 표시

사용자 지정 Color

사용자 API 등록

Project Image Resource 목록

Menu 생성 및 속성 설정

Domain 속성 설정

MDI 형태 프로그램의 속성 설정

Frame의 속성 설정

Global ServiceObjecct 목록 표시

Global DataObject 목록 표시

3.2.4Properties

Properties는 편집 중인 Form이나 각 Component, Dataset에 대한 속성 및 이벤트 항목의 값을 표시하고 편집합니다.

이름순 속성

[그림 3-33]은 해당 컴포넌트의 속성을 이름순으로 정렬하여 속성을 설정하는 화면입니다.

그림 3-33Properties의 이름순 속성

Group별 속성

[그림 3-34]는 해당 컴포넌트의 속성을 그룹별로 정렬하여 속성을 설정하는 화면입니다.

그룹별로 속성을 볼 때 [그림 3-34]의 +나 -를 마우스로 클릭하여 항목을 펼치거나 접을 수 있습니다.

그림 3-34Properties의 Group별 속성

이벤트 설정

컴포넌트에 대한 Event 리스트가 나열되며 해당 컴포넌트 이벤트에 대한 동작(함수)을 설정합니다.

각 Event 속성의 입력 창을 더블클릭하면 해당 컴포넌트 이름과 Event 이름으로 함수를 생성하고 Event 속성값으로 할당합니다. 이미 속성값이 있는 경우에는 Script 편집 창의 해당 함수에 커서를 위치합니다.

그림 3-35Properties의 Event 설정

3.2.5Form Design

Form Design 창에서는 Project에서 사용 가능한 Component로 응용 프로그램의 각 화면을 작성합니다. Form Design 창은 Design 창과 Dataset 편집 창, Design Source Editor, Script Editor로 구성됩니다.

다수의 사용자가 동시에 하나의 Form 파일을 열어 사용하는 경우에 처음으로 Form에 접근한 사용자를 제외한 다른 사용자들의 편집 창은 읽기 전용 모드가 되어 편집 작업을 할 수 없게 되며 PID 하단의 Status bar에 Read only로 표시됩니다.

Design

Design에서는 사용자가 볼 화면을 디자인합니다. 개발자가 원하는 곳에 컴포넌트를 배치할 수 있으며 각각의 컴포넌트를 복사, 이동하거나 정렬할 수 있습니다. 또한 Project Explorer의 Data 영역에 표시된 BS의 입출력 레이아웃 항목을 Drag 하여 컴포넌트의 Contents를 생성하고 해당 BS의 정보를 연결할 수 있습니다.

그림 3-36Design Window

Dataset

Dataset은 상수와 Column 정보, 실제 데이터를 포함한 Record 영역으로 구성된 Data 처리 컴포넌트입니다. Dataset 편집 창에서 Form에 포함된 Dataset 항목을 추가, 삭제하거나 구성을 변경할 수 있습니다.

Dataset의 사용법은 4장 [4.4 Dataset의 사용]를 참고하십시오.

그림 3-37Dataset Window

표 3-28Dataset Window 설명

영역

속성

설명

1

Import Dataset

저장된 파일에서 Dataset 로드

2

Export Dataset

현재 Dataset을 파일로 저장

3

Add Dataset

Dataset 추가

4

Delete Dataset

Dataset 삭제

5

View Source

Dataset을 XML 형태로 표시

6

Const

Constant Data

7

Add Const

Constant 변수 추가

8

Delete Const

Constant 변수 삭제

9

Columns

Dataset의 Columns 설정

10

Add Column

Dataset의 Column 추가

11

Insert Column

커서가 위치한 상단에 Column 삽입

12

Delete Column

Dataset의 Column 삭제

13

Rows

Dataset의 Row 설정

14

Add Row

Dataset의 Row 추가

15

Insert Row

커서가 위치한 상단에 Row 삽입

16

Delete Row

Dataset의 Row 삭제

Design Source

Design Source Editor에는 Form의 내용 중 Script 영역을 제외한 모든 내용이 XML 형태로 표시됩니다. 표시된 XML을 직접 편집하여 Form의 내용을 변경할 수 있습니다.

그림 3-38Design Source Window

Script

Script 편집 창에서는 Form 및 각종 Component의 Event 처리 함수와 사용자 함수들을 JavaScript로 작성합니다.

그림 3-39Script Window

3.2.6Form Design 기능 개선 ( V3.3 개선 )

V3.3에서 Form Design의 기능을 개선하였습니다.

편집 창 확대

PID의 화면은 메뉴 및 Toolbar는 Project Explorer, Properties, Output Window 등 다수의 Sub Window와 편집 영역으로 구성합니다. 각 Sub Window들은 각자의 역할을 가지고 있지만 이 Sub Window들로 인해 실제 편집 공간이 부족한 경우가 있습니다.

이때 편집 공간의 확보를 위해 확대 기능을 활용할 수 있습니다.

그림 3-40편집 창 확대

기능의 활성화, 비활성화

기능의 사용을 위해서는 편집창의 제목을 표시하고 있는 MDI Client Tab button을 마우스 왼쪽 버튼으로 Double-Click 하면 된다. 편집 창 확대 기능을 활성화하면 다른 Sub Window들은 Auto Hide 상태로 전환되고 편집 창 영역이 사용할 수 있는 모든 공간으로 확장됩니다.

편집 창 확대 기능을 비활성화하려면 다시 제목을 표시하고 있는 MDI Client Tab button을 마우스 왼쪽 버튼으로 Double-Click 합니다.

그림 3-41MDI Client Tab

Ruler / Guide Line

Ruler는 Design 창의 좌측과 상단에 눈금자 형태로 표시되며 현재 Mouse Pointer의 좌표와 Guide Line의 위치 등을 표시합니다. Design 창에 Ruler를 표시하지 않기를 원하거나 Guide Line 기능을 비활성화하려면 Options 창의 Design Tab에서 설정을 변경하거나 단축키를 사용합니다.

그림 3-42Ruler / Guide Line

Mouse Pointer 표시

Options / Design / Display current mouse position 설정 시 Ruler에 Mouse Pointer의 현재 위치를 표시합니다. 마우스 이동에 따라 표시 위치를 갱신하여 줍니다. Ruler에 표시하는 Mouse의 위치는 Status bar에 표시되는 값과 같습니다.

그림 3-43Display current mouse position

Guide Line 설정

생성

Ruler에서 Guide Line을 생성하고자 하는 위치를 Click 하여 Guide Line을 생성할 수 있습니다.

Click 한 위치에는 오각형의 Guide Line Mark를 표시하며 Design 창에 파란색 Guide Line을 표시합니다.

이동

Ruler에서 생성한 Guide Line Mark를 Mouse로 Drag 하여 위치를 변경할 수 있습니다.

Options / Design / Snap to other components when move Guide Line 선택항목 값이 설정되어 있는 경우 이미 생성한 Component의 위치와 Guide Line의 위치를 일치하도록 할 수 있습니다.

삭제

Guide Line Mark를 Design 창밖으로 Drag 하거나 Double-Click 하여 삭제할 수 있습니다.

그림 3-44Guide Line

컴포넌트 자동 배치

Guide Line 생성 후 해당 Guide Line 위치로 생성한 Component를 이동하거나 크기의 변경을 위해 Tracker를 이동하면 Guide Line과 일치하도록 Tracker 위치를 조절합니다.

해당 기능은 Guide Line 표시 여부 설정과 함께 설정됩니다.

그림 3-45Snap to Guide Line

Fit to Image 기능 개선

PID V3.2에서 Image Viewer Component에 설정한 Image 크기에 맞추어 Image Viewer Component의 크기를 자동으로 설정해 주는 기능입니다. V3.3에서 해당 기능을 ImageID 속성을 갖는 모든 Component로 확장하였습니다. 현재 해당 속성을 갖고 있는 Component는 Button과 Image Viewer의 두 가지입니다.

해당 기능은 Form Design 창에서 해당 Component를 선택한 후 마우스 오른쪽 버튼을 Click 하였을 때 나타나는 Popup Menu를 통하여 사용할 수 있습니다.

그림 3-46Fit to Image

Button Component의 경우에 Image ID 속성에 설정한 Image는 4개의 상태에 해당하는 이미지를 모두 포함하고 있어 Fit to Image 기능 사용 시 원래의 이미지 크기 중 Width를 4등분 하여 적용합니다.

그림 3-47Fit to Image - Button

3.2.7Output

Message

PID로 작업하는 중에 발생할 수 있는 각종 메시지를 표시합니다. 메시지에는 각종 오류, 진행과정 표시 메시지 등이 포함됩니다.

그림 3-48Message Window

Debug

Debug 창은 디버깅 모드에서 발생하는 메시지를 보여줍니다. 디버그의 자세한 내용은 6장 [6. 디버깅]을 참고하십시오.

그림 3-49Debug Window

Find in Files 1/2

Find in Files 명령의 처리 결과를 표시합니다. 표시된 각 파일을 더블클릭하면 해당 편집 창이 열리고 해당 라인이 표시됩니다.

Find in Files 검색 창에서 Output to Panel 2의 체크 옵션에 따라 Find in Files1 또는 Find in Files 2에 결과를 표시합니다.

그림 3-50Find in Files Window

3.3PID의 설정

Options 창과 Device Manager를 사용하여 개발자 자신에게 맞는 개발 환경을 설정할 수 있습니다.

3.3.1Options

PID의 메뉴[Tools &ndash; Options]를 클릭하면 PID의 전체적인 개발 환경을 설정할 수 있습니다.

General 설정

General은 PID의 일반적인 Option을 설정합니다.

그림 3-51Option - General

표 3-29Options > General 탭의 구성

영역

속성

설명

1

Reopen last open project on Startup

PID 실행 시 마지막으로 작업했던 Project를 자동으로 엽니다

2

Make Backup(.bak) File

편집 대상 파일의 백업파일을 생성합니다.

3

Check event when save.

Form 내역을 저장할 때 Script 영역을 검사하여 컴포넌트의 Event 속성 중 부적절하게 연결된 항목의 값을 지웁니다.

4

Default Character Set

문자 Set을 설정합니다.

5

Show Form Title at Project Explorer

Project Explorer에 Form 타이틀을 표시합니다. Reopen last open project on Startup 항목과 함께 설정하면 PID 실행 시 마지막으로 편집한 Form의 Application Group에 포함된 모든 Form Contents를 Load하여 Title과 함께 표시합니다.

6

Show Form Title at Child Tab

MDI Child Tab에 Form 타이틀 표시 여부를 설정합니다.

7

Show the all App. Groups form info. When open Project

Project를 Open 시 form 정보를 같이 Load 합니다.

이 옵션은 Project Open 시 느려질 수도 있습니다.

8

Display the title on the exported Item list

Project Explorer에서 Excel로 기능 수행 시 Form에 Title을

붙여 표시할지 여부

9

Working Folder

신규 프로젝트 생성 시 프로젝트가 저장되는 폴더를 지정합니다.

10

Simulator Path

사용할 시뮬레이터의 위치를 나타냅니다.

Design 설정

Design은 PID의 Design 관련 Option을 설정합니다.

V3.2의 General에 있던 내용이 V3.3에서 Design Tab으로 옮겨졌습니다.

그림 3-52Option - Design

표 3-30Options > Design 탭의 구성

영역

속성

설명

1

Max Undo

Undo로 복구할 수 있는 최대 횟수입니다.

2

Use Component Toolbox instead Toolbar

Component Toolbox를 화면 Open 시 자동 실행 여부를 설정합니다.

3

Display Dots

Grid Size에 맞춰 Form 디자인 창에 Dot 표시 여부를 설정합니다.

4

Snap to dots when move control

컴포넌트 이동 시 이동 후 위치를 Dot에 맞출지를 설정합니다

5

Grid Size

Form 디자인 창의 격자의 크기입니다. (단위: Pixel)

6

Display Ruler

설정 시 Design 창에 Ruler를 표시할 것인지 선택합니다. 기본 설정값은 Ruler를 표시하도록 합니다.

Ctrl+Shift+R 단축키를 사용하여 이 설정값을 변경할 수 있습니다.

7

Display Guide Lines

설정 시 Ruler와 함께 Guide Line을 사용할 수 있습니다. 기본 설정값은 Guide Line을 표시하도록 합니다.

8

Snap to other components when move Guide Line

설정 시 Guide Line을 Drag 하여 위치를 변경할 때 Guide Line와 근접한 Component의 좌표와 Guide Line의 이동 위치를 일치하게 합니다. 기본 설정값은 Guide Line 이동 시 Component 좌표를 사용하도록 합니다.

9

Display current mouse position

설정 시 Ruler에 Mouse Pointer의 위치를 표시합니다. 기본 설정값은 Mouse 위치를 표시합니다.

설정 시 PC 사양에 따라 성능에 영향을 줄 수 있습니다.

10

View Linked DIV/TAB Contents

DIV/TAB에 연결된 서브폼의 미리 보기를 설정합니다.

Editor 설정

Editor 설정은 Script 편집 창의 글꼴 및 색상을 개발자의 의향에 따라 변경할 수 있습니다.

그림 3-53Option - Editor

표 3-31Option > Editor의 속성

영역

속성

설명

1

Font

글자체 설정

2

Size

글자 크기 설정

3

Script

폰트의 문자 종류 설정

4

Bold

폰트 굵게 설정

5

Italic

이탤릭 체 설정

6

Strike Out

취소줄 설정

7

Underline

밑줄 설정

8

Tab Size

탭 크기 설정

9

Indent Size

들여쓰기 크기 설정

10

Insert Spaces/Keep Tabs

탭의 표시 설정. Insert Spaces로 설정 한 경우 탭 크기만큼 공백으로 표시.

11

View Indentation Guide

들여쓰기 안내선 보기 설정

12

Auto Indent

자동 들여쓰기 설정

13

Foreground

바탕 색상 설정

14

Background

배경 색상 설정

15

Set General

현재 상태의 속성값을 모든 Font 리스트에 적용

16

Event Function Prefix

Event Function 명의 앞에 적용될 문자열을 지정

17

Set focus to the Message box when show user trace message

Trace()함수 사용 시 자동으로 Message 창으로 Focus 이동

Deploy/Update 설정

Deploy/Update 설정은 배포 또는 업데이트할 URL을 추가 또는 설정할 수 있습니다.

그림 3-54Option - Deploy/Update

표 3-32Option > Deploy/Update의 속성

영역

속성

설명

1

Update URL

배포 URL

2

Check Update On Startup

시작할 때 업데이트 체크 여부 설정

3

Prompt to update when exist

업데이트할 파일이 있을 경우 확인 창 설정

4

Add to Deploy

사이트 추가

5

Delete the selection

사이트 삭제

6

Deploy Info

사이트 정보


Profile

FTP Server 식별 ID,

Host Addr

FTP Server IP Address

Id

사용자 ID

Password

사용자 Password

Set Directory

초기 경로

Port

Number

7

Connection Test

연결 테스트 실행

SCM 설정

SCM 설정은 형상관리의 사용 여부와 관리 환경을 설정할 수 있습니다

그림 3-55Option > SCM

표 3-33Option > SCM의 속성

영역

속성

설명

1

Use SCM

SCM 사용 여부 설정

2

SCM Type

사용자가 사용할 SCM Program을 선택

Clearcase : 유료 형상관리 툴

CVS : 무료 형상관리 툴

Harvest : 유료 형상관리 툴

MaxPlus : 유료 형상관리 툴

3

Prompt the user for optional change requests

SCM Type이 Clearcase일 경우만 선택 가능하며 Clearcase 사용 시 ClearQuest 사용 여부.

4

Check User

사용자 체크 방법 설정


Only User

사용자 로그인 ID로 체크

User + Host Name

사용자 로그인 ID + Computer Name으로 체크

5

Get file when opening the workspace

프로젝트를 열 때 최신 버전으로 다운 받을지를 설정합니다

6

Check out source file(s) when edited

등록된 파일을 편집할 때 Check out 창의 호출 여부를 설정합니다

7

Check in file(s) when closing the workspace

프로젝트 종료 시 checked out된 파일이 있을 경우 Check in 여부를

묻는 메시지 창이 나타날지 여부를 설정합니다.

8

Prompt to add files when inserted

파일 추가 시 확인창이 나타날지 여부를 설정합니다

파일을 추가하는 경우 Add To Source control 창이 나타납니다.

프로젝트를 추가하는 경우 Source control에 추가여부를 확인합니다

9

Check SCM Status when open project

프로젝트가 열릴 때 파일의 상태를 체크할지 여부를 설정합니다

10

Check SCM Status when a App.Group item expanded at first time

Project Explorer의 Application 탭에서 App.Group의 아이템을 +를 클릭하여 펼칠 때 파일의 상태를 체크할지 여부를 설정합니다.

11

Source Control Client

실행할 Source Control 프로그램 경로

3.3.2Device Manager

Device Manager는 Device의 속성을 설정합니다.

PID에서 제공하는 Device에서 하나를 선택할 수 있으며 사용자 정의 Device를 추가 또는 삭제할 수 있습니다. [그림 3-56]는 PID 설치 시 기본적으로 등록되어 있는 Device에 대한 목록을 보여줍니다. [그림 3-56]의 + 버튼 또는 - 버튼을 마우스로 클릭하여 Device를 추가하거나 삭제할 수 있습니다.

Project Wizard 또는 Project Manager에서 선택된 Device의 정보를 변경한 후 저장하면 기존의 Device 목록에 새로운 Device로 추가됩니다. 추가된 Device 정보는 기존 Device처럼 사용할 수 있습니다.

Device 목록을 초기화하려면 구성 파일 중 MiPlatform 설치 폴더내의 pid_device.xml 파일을 삭제합니다.

그림 3-56Device Manager

표 3-34Device Manager 설정 요소

영역

속성

설명

1

Device Name

Device 이름

2

Width

MiPlatform이 실행될 때 전체 화면의 Width Size

3

Height

MiPlatform이 실행될 때 전체 화면의 Height Size

4

Forced to user Caption & Menu

Caption과 Menu를 강제로 표시

5

Caption Height

Caption의 높이

6

Menu Height

Menu의 높이

7

Statusbar Height

상태 바의 높이

8

Operation System

운영체제

9

Provider

공급자

10

Information URL

Device 정보가 있는 URL

11

Delete Device

Device 삭제

12

New Device

Device 추가

Device의 추가 및 수정

Device를 추가하려면 먼저 [그림 3-57]의 + 버튼을 클릭하여 새로운 Device 정보를 입력합니다. 정보 입력란에 원하는 속성을 입력한 후 OK 버튼을 클릭합니다.

Device의 수정은 Device 선택합니다. 정보 입력란에 속성을 수정한 후 OK 버튼을 클릭합니다.

그림 3-57Add Device

Device의 삭제

Device를 삭제하려면 삭제할 Device를 선택한 후 [그림 3-58]의 - 버튼을 클릭합니다. Device의 삭제 시 확인 절차가 없으므로 신중하게 생각해서 삭제하십시오.

그림 3-58Delete Device

3.4Hello, MiPlatform!!!

다음은 앞서 기술된 내용을 바탕으로 작성된 프로그램 예시입니다. 버튼이 클릭되면 화면에 메시지가 표시되는 예시입니다.

3.4.1Project 만들기

1

Project Manager 실행

PID 메뉴 [Tools - Project Manager]를 실행한 후 [그림 3-59]의 New Project를 클릭합니다.

그림 3-59Project Manager의 New Project

2

Project Wizard 설정

[그림 3-60]의 Project Wizard 1단계에서 Project의 속성을 설정합니다.

그림 3-60Project Wizard 1단계

표 3-35Project Wizard 1단계

속성

Name

Hello

Character Set

euc_kr

Working Folder

C:\Users\[유저명]\Documents\TOBESOFT\MiPlatform330\Hello

Project Wizard 2, 3, 4단계는 Project Wizard의 기본 옵션을 그대로 사용합니다.

[그림 3-61]은 프로젝트가 생성된 상태입니다.

그림 3-61새로 추가된 Hello Project

3

생성된 Project의 확인

이제 개발에 필요한 모든 준비를 마쳤습니다. 폴더를 열어서 파일을 확인합니다. [그림 3-62]는 Project를 생성 시 설정한 폴더에 Start XML File(Hello_ci_main_Win32.xml)과 Application Group 폴더(DefApp)가 생성되어 있으며, DefApp 폴더에는 Win32와 Script 폴더가 생성되어 있습니다.

그림 3-62Project 생성 후 기본폴더와 파일

3.4.2Form 생성

1

신규 Form 생성

<CTRL+N>을 눌러 Make New 를 실행한 후 Application 탭의 Form을 선택합니다.

그림 3-63Make New Form

2

Template 선택

Empty Form을 선택합니다.

그림 3-64Select Template

3

Form의 속성 설정

[그림 3-65]는 Form의 속성을 설정하는 화면입니다.

그림 3-65Form Properties 설정

표 3-36Form Properties 설명

속성

Name

formHello

Form ID

formID

Title

Hello, MiPlatform!!!

Path

Name 값에 따라 XML 파일명이 자동으로 지정

4

Initial URL에 Form 등록

Initial URL은 프로그램 실행 시 처음으로 불러오는 페이지의 경로입니다.

Form을 시작페이지에 등록합니다. 시작페이지에 Form을 등록하기 위해 Project Manager를 실행합니다. [그림 3-66]과 같이 Initial URL 항목에 DefApp::formHello라고 입력합니다. 이것은 DefApp Application Group의 formHello Form을 가져오라는 의미입니다.

그림 3-66Initial URL의 설정

5

Project 실행

Form은 Project 생성 시 지정한 Base URL에 생성됩니다.

만들어진 Form을 실행하려면 먼저 <CTRL+F5>를 누르거나, 툴 바에서 Launch Project 아이콘을 클릭하여 Project를 실행합니다.

그림 3-67Toolbar > Lanch Project

[그림 3-68]는 프로그램을 실행한 결과입니다. Form을 만들 때 title 옵션에 Hello, MiPlatform!!! 문자열이 제목 표시줄에 표시됩니다.

그림 3-68실행 화면

PID는 Project 전체 실행뿐만 아니라 각각의 Form을 개별적으로 실행할 수 있습니다.

[그림 3-69]의 Quick View 아이콘은 해당 Form을 바로 실행합니다.

그림 3-69Toolbar > Quick View

3.4.3Component의 배치와 속성 변경

1

Component의 선택

Components Bar에서 [그림 3-70]의 Button 컴포넌트를 마우스로 클릭합니다.

그림 3-70Components Bar > Button

2

Component의 화면 배치

[그림 3-71]과 같이 Form에 컴포넌트가 그려질 위치를 정하고, 마우스를 Drag & Drop 하여 컴포넌트를 배치합니다.

그림 3-71Button Component의 배치

3

Component의 속성 설정

[그림 3-72]와 같이 Button 컴포넌트의 속성을 Properties 창에서 변경합니다.

그림 3-72Button의 Properties 설정

표 3-37Button Properties 값

속성

ID

btnHello

Text

Hello, MiPlatform

Text Property의 경우 Componect를 지정한 후 한 번 더 Click 하거나 F2 키를 누르시면 화면상에서 Text의 편집이 가능합니다.

[그림 3-73]은 속성 변경 후 Text 값이 변경된 Button 컴포넌트입니다.

그림 3-73속성값이 변경된 버튼 컴포넌트

3.4.4이벤트의 설정과 스크립트 작성

1

이벤트의 설정

Button 컴포넌트를 클릭했을 때 메시지를 표시하기 위해서 Properties 창의 이벤트 리스트 중 OnClick 이벤트를 선택합니다. [그림 3-74]과 같이 btnHello_OnClick 부분을 더블클릭하면 컴포넌트 ID_Event 이름으로 함수가 자동 생성됩니다. 물론 함수 이름은 개발자가 임의로 정할 수 있으며, 이미 정의된 함수 리스트를 선택할 수 있습니다.

그림 3-74Button의 Event Script 설정

Button 컴포넌트를 클릭했을 때 작동하는 이벤트 함수가 설정되었습니다.

2

스크립트의 작성

메시지를 표시하는 Script를 작성합니다.

alert는 메시지 박스를 띄워 지정된 문자열을 사용자에게 보여 주는 함수입니다.

그림 3-75Event Script의 작성

3.4.5실행

<CTRL+S>을 눌러 변경된 사항을 저장한 후 <CTRL+F5>를 눌러 Project를 실행합니다.

Hello, MiPlatform 버튼을 클릭하면 메시지가 표시됩니다.

참고로 Quick View의 경우 변경사항에 대하여 알림 메시지를 표시하지만 Launch Project는 저장 상태로만 실행되므로 반드시 저장한 후에 Project를 실행해야 합니다.

그림 3-76Hello, MiPlatform의 실행