[MiPlatform] 마이플랫폼 버튼, 메뉴바, 트리뷰, Division 컴포넌트

버튼, 메뉴바, 트리뷰, Division

우선 마이플랫폼의 교육자료를 다운받아야한다.

support.tobesoft.co.kr/Support/index.html

support.tobesoft.co.kr

 

해당 사이트에 들어가서 Education -> 교육자료에 들어가서 2페이지의 교육자료를 다운받아준다.

교육자료 압축파일을 다운

 

 

 

C드라이브에 교육자료를 압축해제해주면 된다

 

 

 

 

 

참고로 제작자들이 C드라이브에만 될수있게 스크립트를 작성했기때문에 다른 디렉터리에서는 열리지않는다.

Education 디렉터리의 xml파일을 확인해보면 이런 스크립트를 확인할 수 있다

 

 

 

 

 

새 프로젝트 생성에서 Add Exist를 통해 교육자료 프로젝트를 생성해주면 된다.

 

 

 

열기버튼을 누르면 아무런 변화가 없지만 당황하지말고 프로젝트를 불러오면 된다.

메인 메뉴 -> File -> Open Project를 클릭하거나 툴바에서 Open Project 아이콘을 클릭해주자.

 

 

 

 

그러면 오픈 프로젝트 창이 새로뜨는데 Education 프로젝트를 클릭하고 OK버튼을 클릭

 

 

 

교육자료 프로젝트를 불러오면 이런 화면이 뜰 것이다.

교육자료 프로젝트파일을 열었을때 화면

 

 

 

 

왼쪽의 AppGroup의 Form들을보면 많은 예제가 있을 것이다. 하나하나씩 해볼것이다.

base_hello Form은 Edit(텍스트박스)에 문자를 적고 옆의 버튼을 클릭하면 Edit에 적은 문자들이 메세지박스로 출력되는 예제이다.

Edit 박스, 버튼 설치

 

 

각 텍스트를 바꿔보자.

Properties 창에서 원하는 Text를 입력

 

 

 

버튼의 이벤트를 지정해보자.

버튼을 더블클릭하거나 Properties의 이벤트 아이콘(별모양아이콘)을 클릭해서 OnClick을 더블클릭해주면된다.

 

더블 클릭하면 폼 디자인 창에서 스크립트창으로 바뀐다

 

이제 이벤트를 작성해보자.

참고로 메세지 박스 출력 코드는 alert(); 로 할 수 있다.

 

 

 

버튼 이벤트 설정

Edit박스의 이름.Text  를 작성하면 Edit박스의 텍스트를 추출하거나 수정할 수 있다.

alert(에딧박스이름.Text);

버튼을 클릭하면 Edit박스의 텍스트가 메세지박스로 출력된다

 

 

 

 

 

버튼을 클릭하면 Hello!!로 바뀐다

 

 

 

 

 

모든 이벤트의 Argument는 obj를 받는다.

버튼 클릭의 이벤트에서 Button0를 obj로 바꾸면 똑같이 실행할 수 있다.

버튼을 클릭하면 Hello~~로 바뀐다

 

 

 

 

 

 

 

 

이벤트 코드를 작성할때 주의할 점이 하나 있다. 이벤트 함수를 작성할때 버튼의 ID를 바꿔보자.

ID를 Button0 -> btn_hello  로 수정

 

ID를 바꿨지만 스크립트나 이벤트 함수 이름은 ID처럼 바뀌지 않는 것을 볼 수 있다.

 

 이렇게되면 Button0의 이벤트가 btn_hello로 바꼈으므로 함수 이름, 이벤트의 이름도 바꿔야하기때문에 번거로울 수 있다. 따라서 이벤트 코드를 작성하기 전에 ID를 미리 설계를 해놓고 이벤트 코드를 작성하자.

 

 

 

 

 

 

메뉴바 설정

base_menu1  로 Form을 새로 생성

 

MenuBar 세팅

 

Tree View 세팅

 

 

Division 세팅

 

참고로 Division은 윈폼에서 GroupBox 역할을 하기때문에 그룹화를 시켜줄때 사용된다.

Division을 옮기면 안에있던 버튼들도 같이 움직이는 것을 확인할 수 있다.

 

 

 

 

MenuBar, TreeView  는 데이터셋 바인딩이 가능하다.

원래있던 base_menu 폼에서 Dataset을 복사해서 우리가 만든 base_menu1 데이터셋에 붙여넣기를 해줘야한다.

데이터셋 복사

이때, Dataset의 Columns가 3개있는 것을 확인할 수 있다.

caption은 메뉴에 글자 나오는 부분

id는 Url을 담는 부분

level은 메뉴 밑의 하위 메뉴를 담당하는 부분이다.

 

 

 

이제 TreeView에 바인딩을 해보자.

TreeView의 Datasets 바인딩 과정

 

 

드래그해서 트리뷰에 던져주면 새로운 창이 하나 뜰것이다.

밑의 LevelColumn, TextColumn을 각각 level, caption으로 지정해주고 OK버튼을 눌러주자. 나머지는 옵션이다.

레벨, 캡션만 지정해주고 OK버튼 클릭

 

 

 

OK버튼을 클릭해주면 TreeView에 데이터셋이 바인딩되어서 데이터가 보이는 것을 알 수 있을 것이다.

Form의 TreeView에 바인딩된 모습

 

 

 

 

MenuBar 도 데이터셋을 바인딩할 수 있다.

Properties에서 MenuDataset으로 해당 데이터셋을 지정, 각 컬럼들을 맞게 설정해준다.

CaptionCol은 MenuBar에서 Dataset에서 컬럼이름이 caption이면 자동으로 caption으로 지정되어있다.

LevelCol은 하위, 상위 메뉴지정된 것을 불러온다.

IDCol 은 Url을 지정할 컬럼으로 사용된다.

 

 

여기까지했을때 한번 실행시켜보자.

메뉴바, 트리뷰에 각각 데이터셋들이 바인딩된 것을 확인할 수 있다

 

 

 

이제 이벤트를 작성해보자.

MenuBar 이벤트작성

 

Argument중에 strID가 추가된 것을 볼 수 있는데, 메뉴바 속성에서 IDCol을 id로 지정했기때문에 데이터셋 레코드의 ID 컬럼 값을 전달해준다. 

 

 

 

이벤트코드를 작성해보자.

 

 

실행시킨다음에 메뉴바에서 하위 메뉴를 클릭하면 그 데이터값들이 Div0 에 출력되는 것을 볼 수 있다.

오른쪽자료는 원래 교육자료에 있기때문에 다음에 만들어볼 화면이니 신경쓰지말자.

 

 

하지만 상위메뉴(인사관리, 회계관리)를 클릭하면 Div0의 데이터들이 사라지는 것을 볼 수 있을 것이다.

 이는 Dataset에서 id Rows에 아무값이 없기때문에 상위메뉴를 클릭했을때 아무값도 아닌것이 출력되어서 사라지는 것처럼 보이는 것이다.

이것을 해결하기위해 제어문으로 오류를 잡아줄 수 있다.

제어문 추가

해당 제어문을 추가해주면 상위메뉴를 클릭해도 출력된 데이터가 사라지지않는 것을 볼 수 있을 것이다.

 

 

TreeView 이벤트 작성

트리뷰 이벤트 추가된 스크립트

트리뷰 Argument에서 nOldRow, nNewRow가 있는데 클릭하기전 레코드 번호, 새로 클릭한 레코드 번호가 Argument가 전달된다.

 

 - TreeView를 클릭했을때, 메뉴바를 클릭했을때처럼 데이터가 출력하는 것이 목적이므로 굳이 Div0 출력구문을 작성하지않고, 메뉴바 함수를 그대로 가져와서 하드코딩을 방지하면서 작성해보자.(obj는 메뉴바 id를 전달하면된다.)

 - 메뉴바 이벤트에서는 strID가 Argument로 지정되어있어서 ID컬럼에 연결된 데이터가 넘어온다. 하지만, 트리뷰에서는 자동으로 지정되어있지않으므로 만들어서 넘겨줘야한다.

 - 그래서 url을 변수로 설정해서 데이터셋에서 값을 꺼낸다음 GetColumn 라는 값을 가져오는 함수를 호출해야한다.

GetColumn은 레코드와 컬럼명을 줘야하는데, 레코드는 새 레코드(nNewRow), 컬럼명은 "id"로해서 코드를 작성해주어야한다.

 

트리뷰 이벤트 코드 작성

이 상태에서 실행해보자.

트리뷰의 하위메뉴를 클릭하면 데이터가 출력되는 것을 볼 수 있다

 

 

 

 

 

 

 

 

Grid나 Division은 더블클릭하거나 Properties의 Contents의 ...을 클릭하면 버튼이 어디에 있는지 볼 수 있다.

클릭하면 Contents창이 뜨는데, xml의 스크립트가 작성되어있는 것을 볼 수 있다.

 

 

다음 포스팅은 사원관리를하는 폼을 작성해보자.