다음은 MiPlatform를 쉽게 이해할 수 있는 명함관리 시스템 개발 예제입니다.

명함관리 시스템은 사용자가 자신의 고객리스트를 관리하는 고객 관리 프로그램입니다.

Project Open

PID의 [File > Open Project] 를 실행하면 아래 그림과 같은 화면이 나타나며 이 화면에서 Demo를 선택해 명함관리 시스템을 Open 할 수 있습니다.

명함관리 시스템의 사용자 화면 구성도

Project 실행

PID의 [Project > Launch Project]로 Project를 선택해 명함관리 시스템을 실행합니다.

사용자 화면 구성

명함관리 시스템은 3개의 사용자 화면(로그인화면, 등록화면, 조회화면)으로 이루어져 있습니다.

다음 표는 3개의 사용자 화면에 대한 설명입니다.

명함관리 시스템의 사용자 화면
사용자 화면	설명
로그인 화면	로그인 화면은 명함관리 시스템의 사용자를 인증하는 화면입니다.
등록 화면	등록 화면은 명함관리 시스템의 데이터를 추가, 수정 또는 삭제하는 화면입니다.
조회 화면	조회 화면은 명함관리 시스템의 데이터를 조건 별로 조회하는 화면입니다.

다음 그림은 사용자 화면의 상호 관계 입니다.

명함관리 시스템의 사용자 화면 구성도

Menu 구성

로그인 후 명함관리 시스템을 실행하면 상단에 전체 메뉴와 좌측에 폼 메뉴가 나옵니다.

상단 메뉴를 사용해서 폼 메뉴의 구성을 그림과 같이 TreeView Style 과 Button Style중에서 사용자 선택으로 사용할 수 있습니다.

폼 메뉴

고객 정보의 조회, 등록 관리를 하기 위해서 DB를 통한 데이터를 데이터 Handling하는 Business Service(이하 BS)를 사용하는데, 이때 Local DB(SqLiteDB)와 SQLServer DB를 활용합니다.

Local DB는 TOBESOFT에서 제공하는 BSB Tool을 사용해서 작성된 Xml 파일을 활용하게 되어있으며, SQLServer DB는 BSB Tool이나 일반 Editor에서 작성된 Jsp, Asp를 활용하게 되어 있습니다.

따라서 활용하고자 하는 DB를 상단 메뉴의 Data Interface에서 선택할 수 있습니다.

Data Interface

BS를 호출할 때는 Project Explorer의 DataGroups에 설정되어 있는 값을 참조하게 됩니다.

그림과 같이 Data Groups Editor에서 Service Group을 등록, 수정, 삭제할 수 있습니다.

Data Interface

* Ex1과 Ex2의 결과는 동일합니다.

// Ex1. 
Dataset0.ServiceID = "jspsvc::test.jsp"
Transaction("trtest", "jspsvc::trtest.jsp", "input=Dataset0", "", "", "fn_result")
// Ex2. 
Dataset0.ServiceID = "http://demo.miplatform.com/AspService/Demo/test.jsp")
Transaction("trtest", "http://demo.miplatform.com/AspService/Demo/trtest.jsp", "input=Dataset0", "", "", "fn_result")

Local Service는 Working Folder의 Service 폴더에 존재합니다.

로그인 화면

로그인 화면에서는 명함관리 시스템 사용자를 인증합니다.

로그인 화면은 자체의 Event Script Code로 USER ID 와 PASSWD의 입력값을 처리합니다. 따라서 Database와 연관된 작업이 없기 때문에 BS가 필요하지 않습니다.

로그인 화면은 Project 실행 시 최초에 보이는 화면이므로 Project Manager에서 SessionURL로 설정합니다.

SessionURL로 등록된 화면은 명함관리 시스템에 재접속할 때마다 자동으로 실행됩니다.

로그인 화면

등록 화면

등록 화면에서는 명함관리 시스템의 고객 정보를 추가, 수정하거나 삭제할 수 있습니다.

등록 화면은 명함 목록 조회 BS와 수정 BS가 필요합니다.

명함 목록 조회 BS는 전체 고객 정보를 검색하여 고객 정보를 화면에 보여줍니다. 수정 BS는 고객 정보를 추가, 수정하거나 삭제합니다.

고객 정보의 조회, 입력, 삭제, 저장은 상단의 Button을 이용합니다.

고객 정보의 작성, 수정은 화면 하단의 Edit, Combo, TextArea 등을 통해서 합니다.

등록 화면

조회 화면

조회 화면에서 고객 정보를 조건 별로 조회합니다.

조회 화면은 조회 BS가 필요합니다. (조회 BS는 고객 정보를 조건 별로 검색하는 BS입니다.)

상단의 조회 조건을 입력하여 고객 정보를 조회할 수 있습니다.

고객 정보의 조회, Excel 전환은 상단의 Button을 이용합니다.

조회 화면

Project 설명

본 장에서는 명함관리 시스템의 일부인 등록 화면의 내부 source를 설명합니다.

등록 화면의 Form과 Script, Dataset의 연관관계를 설명함으로써, 한 화면을 작동시키기 위하여 필요한 작업들을 설명합니다.

등록 화면 열기

Project Explorer에서 AppGroup(DefApp)안의 person_entry를 마우스 더블클릭하거나, 또는 마우스 우측 버튼 클릭 후 PopupMenu의 Edit를 선택하여 등록 화면 Form을 Open합니다.

화면 Open

등록 화면 화면 디자인 및 Event 등록

Form 편집창에서 상단의 Button들에게 각각 Event 함수들을 등록해 주어, 실행 시에 사용자의 Action (Click, Grag, MouseOver등)에 대한 Event 처리를 합니다.

Button에 Event 설정

Button에 대한 Event 함수들을 등록하기 위하여, 각 Button들에 해당하는 Properties 창의 Event 항목란에 함수명을 입력합니다. 함수명을 입력하는 방법은 직접 입력하는 수동 방법과, 마우스 더블클릭으로 기본값을 입력하는 자동 방법이 있습니다. Event 함수를 마우스 더블클릭하거나 또는 Enter 입력하면, 해당 Event에 대한 Script의 위치로 이동할 수 있고 이벤트 함수의 내용을 coding 할 수 있습니다.

Button OnClick Event의 Script 내용

Service에 연결해 고객 정보 가져오기

Script 창의 코딩 내용을 확대하면 아래와 같습니다.

function fn_query()
{
	if (g_conType == "dbsvc")
	{
		dsPerson.ServiceId = g_contype + "::person_select";
	}
	else
	{
		if (g_conType == "aspsvc")
		{
			dsPerson.ServiceId = g_contype + "::select.asp";
		}
		else
		{
			if (g_conType == "jspsvc")
			{
				dsPerson.ServiceId = g_contype + "::select.jsp";
			}
		}
	}
	dsPerson.Load();
}

사용한 dsPerson은 Dataset Object이고, 이 Object가 화면과 Data source를 연결하는 Object입니다. 여기서 Data source란 data를 발생하는 service를 의미합니다.
Object와 Data source를 연결하는 곳이 ServiceId 속성값을 지정하는 부분입니다. 이곳에서 연결하는 Data source는 SqlLiteDB, asp file, jsp file이며, asp와 jsp는 투비소프트에서 Web Page를 통해 제공하고 있습니다.
if 분기의 조건이 되는 g_conType의 값은 Data Interface에서 선택한 값에 의하여 결정됩니다.
dsPerson.ServiceID에게 Data source를 연결하고 dsPerson.Load()를 호출하면, Data source에 접속하여 고객 정보를 조회한 후 dsPerson에 저장합니다.
dsPerson에 저장된 자료를 화면과 연결하는 것은 다음 장에서 설명합니다.
여기서 사용하는 dsPerson Dataset Object는 등록 화면에서 사용하는 Dataset에서 확인할 수 있습니다.

등록 화면에서 사용하는 Dataset

고객 정보를 화면의 Grid와 연결하기

고객 정보를 보여주기 위해 화면 중앙에 Grid가 있으며, 해당 Grid와 dsPerson Dataset을 연결하기 위하여 Grid의 BindDataset Property 값을 dsPerson으로 입력합니다.

고객 정보를 보여주는 Grid 화면

또한, Grid의 각 칼럼값들과 dsPerson Dataset의 칼럼값들을 연결하기 위하여 Grid 편집창을 오픈한다.

Grid 편집창을 오픈하기 위하여 해당 Grid를 더블클릭하거나 Grid Contents Properties의 버튼 클릭합니다.

Grid Contents Editor 화면

Grid Contents Editor 화면은 Grid의 두 번째 칼럼인 name과 dsPerson의 person_name colume을 서로 연결하는 것을 보여줍니다.

고객 정보를 화면의 Edit box와 연결하기

Edit의 BindDataset Property 값은 dsPerson으로 하고, Column Property 값을 person_name로 하여 dsPerson Dataset의 person_name column과 Edit box를 연결합니다.

Edit에 Property 설정