xframemobile getting started 가이드 xframemobile getting started 가이드 - 2 - 이 장에서는...

SOFTBASE XFRAMEMOBILE DEVELOPMENT GUIDE SERIES

xFrameMobile Getting Started 가이드

2013.11.01

서울특별시 구로구 구로 3 동 한신 IT 타워 1110 호

Phone 02-2108-8030 • Fax 02-2108-8032

www.softbase.co.kr

Copyright © 2014 SOFTBase Inc. All rights reserved

XFrameMobile Getting Started 가이드

- 2 -

이 장에서는 X-Internet 솔루션인 XFrameMobile 솔루션의 화면 개발 도구인 xFrame-DevStudioM 을

이용하여 화면을 개발하기 위한 기초 내용을 기술한다. 이 장에서 기술하는 내용은 아래와 같다.

xFrame-DevStudioM 시작

화면 생성 및 UI 컨트롤 배치

UI 컨트롤의 이벤트 처리

Screen factory mobile 오브젝트

공통 모듈 사용

도움말 사용

xFrameMobile 솔루션 설치 과정을 통해서 생성된 바탕화면의 “xFrame DevStudioM” 아이콘을 더블클릭하여

실행한다.

[그림 1-1. xFrameMobile 아이콘]

11 장장.. 화화면면 개개발발 기기초초

xxFFrraammee--DDeevvSSttuuddiiooMM 시시작작


- 3 -

데이터베이스 접속

xFrame-DevStudioM 이 실행되면 아래의 “[그림 1-2]”와 같이 데이터베이스 서버 접속 화면이 표시된다, 아래의

“[그림 3-2]”와 같이 설정하고 번처럼 버튼을 클릭하여 데이터베이스에 접속한다.

[그림 1-2. 데이터베이스 접속]

<표 1-1. 데이터 베이스 접속>

순서 구분 세부 단계

1 데이터베이스

탭 선택 데이터베이스에 접속하기 위해서 “Database” 탭을 선택한다.


서버 정보 입력 데이터베이스의 종류, IP 주소 및 포트 번호, 데이터베이스 명을 설정한다.


연결 “연결” 버튼을 클릭하여 데이터베이스에 접속한다.


- 4 -

프로젝트 생성

xFrameMobile 을 처음으로 설치하고 접속한 경우에는 데이터베이스에 프로젝트 정보가 없기 때문에,

프로젝트를 생성하는 창이 표시된다. 아래의 “[그림 1-3]”과 같이 설정한 이후에 버튼을 클릭한다.

[그림 1-3. 프로젝트 생성]

<표 1-2. 데이터 베이스 접속>


1

프로젝트

정보

설정

데이터베이스 명 “데이터베이스 접속” 화면에서 설정한 데이터베이스 명이 자동으로

표시 된다.

프로젝트

아이디

프로젝트에 대한 ID를 영문으로 지정한다,

데이터베이스에 각각의 프로젝트를 구별하기 위한 ID로 사용된다.

프로젝트 이름 프로젝트에 대한 이름을 지정한다.

Admin

비밀번호

개발툴의 기본 관리자 계정인 “admin” 사용자의 비밀번호를 지정한

다.

“admin” 계정은 개발툴의 모든 권한을 가짂 계정이다.

“도구””사용자 관리” 메뉴를 통해서 추가로 사용자를 등록할 수 있

다.

2 프로젝트 생성 “생성” 버튼을 클릭하여 데이터베이스에 프로젝트를 생성한다.


- 5 -

개발툴 초기 화면

xFrame-DevStudioM 이 프로젝트를 선택하고, 로그인을 정상적으로 수행하면, 아래의 그림과 같이 화면이

표시된다. 아래의 그림과 동일하게 배치가 되어 있지 않더라도, 각 창의 타이틀 부를 마우스로 드래그하여

위치를 조젃할 수 있다.

[그림 1-4. 초기 화면]

<표 1-3. 초기 화면>

번호 구분 세부 단계

1 오브젝트 창

화면 개발에 사용되는 UI 컨트롤이 표시된다.

하단부에 “Template-Server” 탭과 “Template-Local” 탭이 표시되며, 각

탭은 개발자가 공유해서 사용하는 템플릾과, 로그인한 개발자의 템플

릾이 표시된다.

2 프로젝트 창 접속한 데이터베이스와 로그인한 프로젝트가 표시되며, 화면 개발이

짂행되면 이곳에 각각의 화면이 트리 형태로 표시된다.

3 속성 창 속성 창은 화면 및 UI 컨트롤의 속성 및 이벤트를 설정하는 창이다.

4 업무 화면

개발 탭

Design 화면의 UI 를 디자인하는 탭이다.

JavaScript 화면의 비즈니스 로직을 JavaScript 언어로 개발하는 탭이다.

Transaction 화면에서 사용하는 데이터셋과 업무 서버와의 데이터 통싞 정보를

설정하는 탭이다.


- 6 -

<표 1-4. 오브젝트 구성>

번호 Object 이름 설명

1

화면에 있는 오브젝트 컨트롤들을 옮기거나 수정할 수 있다.

2

일반 필드는 사용자의 문자 및 숫자를 입력받는 가장 보편적으로 사용되는

컨트롤 이다.

3

숫자 필드는 사용자의 숫자를 입력받는 컨트롤 이다.

4

암호 필드는 사용자의 입력된 문자를 ***로 암호 형식으로 표시해주는

컨트롤 이다.

5

텍스트는 라벨 및 타이틀 등 텍스트 입력이 가능한 컨트롤 이다.

6

멀티라인은 텍스트 입력값을 다중 행으로 표현 가능한 컨트롤 이다.

7

버튼은 터치 등의 다양한 이벤트가 가능한 버튼 형식의 컨트롤 이다.

8

캘린더 뷰는 달력을 표시하는 컨트롤 이다.

9

체크 박스는 사용자에게 여러 항목 중 원하는 항목을 한개 이상 선택할 수

있게 해주는 컨트롤 이다.

10

버튼형식의 컨트롤에 선택된 데이터를 표시하며 해당 버튼을 클릭하면

데이터를 선택할수있는 picker가 출력되는 컨트롤 이다.

11

라디오 버튼은 여러 항목 중 원하는 항목을 한개만 선택할 수 있는

버튼 컨트롤 이다.

12

패널을 여러게 합쳐놓은 컨트롤 이다.

13

패널은 패널내에 다른 컨트롤을 포함하여 그룹 핸들링이 가능한

컨트롤이다.

14

리스트뷰는 객체를 포함하고 있는 리스트뷰셀을 수직방향의 목록형태로

보여주는 컨트롤이다.

15

페이지뷰는 객체를 포함하고 있는 페이지뷰 셀을 페이지 형식으로

보여주는 컨트롤이다.

16

웹뷰는 화면 내에서 웹페이지를 호출할수 있는 웹브라우저 컨트롤 이다.

17

맵뷰는 화면 내에서 지도를 출력하는 컨트롤이다.

18

데이트 피커는 일자를 선택할 수 잇는 화면이 출력되는 컨트롤 이다.

19

타임피커는 시간을 선택할 수 있는 화면이 출력되는 컨트롤 이다.

20

시간 간격을 조정하여 타이머 이벤트를 발생하는 컨트롤 이다.


- 7 -

21

그림 파일(BMP, JPG, GIF, PNG 등)을 표시할 수 있는 컨트롤 이다.

22

그래프/ 차트를 표현하는 컨트롤 이다.(지원 형식 : 선, 점)

23

그래프/ 차트를 표현하는 컨트롤 이다.(지원 형식 : 원, 도넛)

새로운 화면을 생성하기 위해서 아래의 “[그림 1-6]”과 같이 “화면””새 화면” 메뉴를 선택한다.

[그림 1-6. 화면 새 화면]

아래의 “[그림 1-7]”과 같이 화면을 테스트할 모바일 기기의 화면 크기를 설정 한다. 번 처럼 미리 설정 되어

있는 화면크기를 사용 할 수 있고 번과 같이 사용자가 직접 정의 하여 화면 크기를 지정 할 수 있다.

[그림 1-7. 화면 설정]

화화면면 생생성성 및및 UUII 컨컨트트롤롤 배배치치


- 8 -

화면 속성 지정

화면의 “Design” 탭을 선택하면 “속성”창에 화면에 대한 속성이 표시되며, 아래의 “[그림 3-8]”과 같이 “title”

속성을 “첫번째 화면” 으로 변경한다. “title” 속성은 화면을 구별하는 설명에 해당하는 갂단한 문구를 지정하는

속성이다.

[그림 1-8. 화면 속성]

<표 1-5. 화면 속성>


1 속성 창 속성창의 타이틀이 “속성 - 화면”으로 표시된다. 속성 창의 타이틀은 현재

보여주고 있는 속성의 대상 UI 컨트롤의 종류를 표시한다.

2 “title” 속성 화면 제목을 설정한다.


- 9 -

텍스트 컨트롤 생성

아래의 “[그림 1-9]”와 같이 “오브젝트” 창에서 텍스트 컨트롤을 마우스 왼쪽 클릭하여 선택한 후 “Desing”탭에

컨트롤을 표시할 위치를 클릭하면 텍스트 컨트롤이 생성된다.

[그림 1-9. 텍스트 컨트롤 생성]

텍스트 컨트롤 속성 변경

새롭게 생성한 텍스트 컨트롤을 마우스로 선택하면, 아래의 “[그림 1-10]”과 같이 “속성” 창에 속성이 표시되고,

“text” 속성을 “이름 :”으로 변경한다. 텍스트 속성은 텍스트 컨트롤을 더블 클릭 하여 “text” 속성을 변경할 수

있다.

[그림 1-10. 텍스트 컨트롤 속성]


- 10 -

<표 1-6. 텍스트 컨트롤 속성>

구분 세부 단계

“text” 속성 변경 “text” 속성을 변경하여 화면에 표시되는 내용을 설정한다.

일반 필드 컨트롤 생성

아래의 “[그림 1-11]”과 같이 “오브젝트” 창에서 일반 필드 컨트롤을 마우스로 클릭하여 선택한 이후에,

“Desing”탭에 클릭하면 일반 필드 컨트롤이 생성된다.

[그림 1-11. 일반필드 컨트롤 생성]

입력 필드 유형의 컨트롤은 각각의 데이터 입력 방식에 맞추어 숫자 필드, 일반 필드, 비밀번호 필드로

구분되어 구성되어 있다.

일반 필드 컨트롤 속성 변경

새로 생성한 일반 필드의 “name” 속성을 아래의 “[그림 1-12]”와 같이 “fldName”으로 설정한다. “name” 속성은

화면내에서 UI 컨트롤을 구별하기 위한 식별자로 사용되기 때문에, 화면내의 다른 UI 컨트롤과 중복되게

설정할 수 없다.

스크립트 로직에서 UI 컨트롤을 처리하기 위해서는 반드시 “name” 속성이 설정되어 있어야 한다. 스크립트

로직에서 사용되지 않는 컨트롤에 대해서는 “name” 속성을 지정할 필요는 없다.


- 11 -

[그림 1-12. 일반 필드 속성]

버튺 컨트롤 생성 및 속성 변경

아래의 “[그림 1-13]”과 같이 “오브젝트” 창에서 버튼 컨트롤을 마우스로 클릭하여 선택한 이후에, “Desing”탭에

클릭하면 버튼 컨트롤이 생성된다.

[그림 1-13. 버튼 컨트롤 생성]


- 12 -

버튼 컨트롤의 속성 중 “name” 및 “text” 속성을 아래의 “<표 3-7>과 같이 설정한다.

<표 1-7. 버튼 컨트롤 속성>

속성 속성 설명 속성 값

Name 컨트를의 이름 btnSayHello

Text 컨트롤에 표시된 문자열 Say Hello

Height 버튼의 높이 40

현재까지 작성된 화면은 화면의 UI 구성만 수행하였기 때문에 아무럮 동작이 수행되지 않는다. 사용자의

조작에 의해서 동작하기 위해서는 사용자가 조작하는 화면의 UI 컨트롤에 대해서 이벤트 처리를 수행해야 한다.

버튺 이벤트 처리

화면의 “btnSayHello” 버튼의 마우스 업 이벤트를 처리하여, 사용자에게 현재 시각 및 홖영 메시지를 보여주는

함수를 작성해보자.

화면 이벤트 처리와 같이, “Design” 탭에서 “btnSayHello” 버튼을 선택하고, “속성” 창의 “on_mouseup”

이벤트를 더블클릭 하거나 우측의 “버튼 Event 정의 이동”을 클릭하여 이벤트 핸들러를 생성한다.

[그림 1-14. 버튼 이벤트]

UUII 컨컨트트롤롤의의 이이벤벤트트 처처리리


- 13 -

<표 1-8. 버튼 이벤트 생성>

번호 설명

1 현재 보여주는 속성이 버튼에 대한 속성임을 확인한다.

2 기본적으로 이벤트가 발생한 UI 컨트롤의 “이름” _ “이벤트 명”(btnSayHello_onmouseup())으로

함수가 정의된다.

Scripting Intelligence 기능

Script Editing 편리 기능으로 script function 의 prototype 을 tooltip 형태로 보여주는 Intelligence Tooltip 기능,

Script Keyword Coloring, Script API member function list 를 보여주는 기능, 정의된 함수와 변수를 쉽게

찾을수 있도록 해주는 Script Define Movement 기능(단축키 F12)을 제공하고 있다. 함수와 변수가 아닌 API 일

경우 해당 정보가 도움말로 화면에 표시된다. 아래의 “[그림 1-15]”와 같이 4 가지 기능이 있다.

[그림 1-15. 스크립트 Intelligence]


- 14 -

Scripting Developer Comment 기능

Script Editing 편리 기능으로 소스 코드를 설명하는 부분을 주석의 형태로 보여주는 Developer Comment

기능이다. 아래의 “[그림 1-16]”과 같이 스크립트에 마우스 오른쪽 버튼 클릭 하여 메뉴 중에 “멀티라인 주석

삽입”을 클릭한다.

[그림 1-16. 스크립트 멀티라인 주석 삽입]

아래의 “[그림 1-17]”와 같이 소스코드를 설명할 수 있는 란이 주석으로 생성 된다. 그리고 현재날짜와 시갂이

기록된다

[그림 1-17. Scripting Developer Comment]


- 15 -

주석 처리

자바 스크립트는 아래의 “[그림 1-18]”과 같이 선택된 라인 숫자가 처럼 홗성화 되며 모양으로 가리키고

해당 라인을 표시해준다.

[그림 1-18. 선택된 라인]

자바스크립트 코드 작성시 갂편하게 주석 처리 할 수 있는 기능이 내장되어 있다. 기능은 단축키 “Ctrl+B”와

같다. 아래의 “[그림 1-19]”과 같이 주석처리할 코드를 블럭 지정한다. 오른쪽 버튼을 클릭 후 메뉴중에 “주석

블럭 설정”을 클릭 하여 주석 처리 할 수 있다.

[그림 1-19. 블럭 지정 주석 처리]

주석 처리 되어 있는 코드를 블록 지정 하여 주석을 해제 할 수 있다.

[그림 1-20. 블럭 지정 주석 해제]


- 16 -

API LIST

xFrameMobile API 는 Script Edit 창에서 해당 컨트롤의 이름을 입력 한 후 “.”을 입력하면 해당 컨트롤에 API

List 가 표시 된다. API 에 대한 종류 및 사용방법은 [xFrameMobile API 매뉴얼]을 참고한다.

[그림 1-21. xFrame API List 예]

xFrame API 는 각 [Factory : 공통으로 사용되는 API], [Screen : 화면에 대한 API], [Object: 각 Control 에

사용되는 API]로 분류된다.

[그림 1-22. Factroy API] [그림 1-23. Screen API]

[그림 1-24]와 같이 API 의 매개변수를 사용할 경우 툴팁과 변수를 자동으로 띄어 준다. 그리고 [그림 1-25]와

같이 선언 되어있는 변수 또는 함수 그리고 키워드 (screen,mobile,int, for...)공통 모듈 등 자동 완성 기능이

있다.

[그림 1-24. 변수 자동완성] [그림 1-25. 키워드,함수 자동완성]


- 17 -

장동 완성되는 목록의 오른쪽에 표시 되는 아이콘의 의미는 [표 1-9]와 같다.

<표 1-9. JavaScript ToolBar>

번호 아이콘 스크립트 공통모듈 사용

1 키워드를 나타낸다(screen,if,for) 스크립트 내에서 공통모듈의 변수를

나타낸다. (공통모듈.변수)

2 스크립트 내의 매개변수가 있는 함수

또는 공통모듈을 나타낸다.

스크립트 내에서 공통모듈의 매개변수가

있는 함수를 나타낸다.(공통모듈.함수)

3 매개 변수가 없는 함수를 나타낸다. 스크립트 내에서 공통모듈의 매개변수가

없는 함수를 나타 낸다.(공통모듈.함수)

4 오브젝트에 사용 되는 컨트롤을

나타낸다. 없음

5 스크립트 내에서 한번이라도 입력된

변수 또는 함수를 나타낸다. 없음

[그림 1-26]와 같이 변수 자료형의 해당되는 JavaScript API 가 자동 완성 된다.

[그림 1-26. JavaScript API]

xFrame@DevStudioM 의 선택, 필수, 잠금 필드의 색상을 설정하고 기본 폰트를 설정 한다. 그리고 스크립트

에디터 색상을 선택 할 수 있다.

[그림 1-27. 색상/폰트 옵션]


- 18 -

스크립트 에디터 색상의 [그림 1-28]과 같이 해당 라인을 선택하면 “선택 라인 색상”에서 설정된 색상으로

라인을 표시해 주고 문자열을 클릭하면 “참고 배경 색상”과 “참고 글자 색상”에서 설정한 색상으로 스크립트

내에 존재하는 같은 문자열들을 찾아서 설정한 색상으로 표시해 준다.

[그림 1-28. 선택 라인 색상/참고 배경 색상]

단축키 Ctrl 을 누르고 해당문자열에 마우스 커서를 위에 놓으면 [그림 1-29]과 같이 “정의 글자 색상”으로

표시되며 클릭하게 되면 같은 변수 또는 함수로 이동 하거나 API 는 도움말이 실행 된다.

[그림 1-29. 정의 글자 색상]


- 19 -

버튺 이벤트 처리 스크립트 개발

화면 스크립트 파일의 내용은 아래의 “코드 1-1”와같고, 소스 내용에 대한 설명은 소스내의 주석과 “<표 1-10>”

을 참조한다

코드 1-1 버튼 이벤트

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

// 아래의 함수는 직접 작성한 함수이다. // 현재 사간을 구하여 리턴한다. function getCurrentTime() {

// factory 오브젝트를 이용해서 현재 시간을 구한다. // JavaScript 에서 변수는 "var" 예약어를 이용해서 선언한다. var strCurrentTime = factory.getsystemtime("%Y-%M-%D %h:%m:%s");

// 현재 시간을 리턴한다. return strCurrentTime;

} /* 버튼의 마우스 업 이벤트를 처리한다. objInst 파라미터는 이벤트가 발생한 UI 컨트롤의 오브젝트이다. */ function btnSayHello_on_mouseup(objInst) {

// 현재 시간을 구하는 함수를 호출하여 값을 구한다. var strTime = getCurrentTime();

// screen 오브젝트를 이용해서 화면에 Alert 창을 표시한다. screen.alert("Hi! " + fldName.gettext() + ", 현재 시각 : " + strTime);

}

<표 1-10. 소스코드 설명>

라인 설명

1 ~ 11

화면내에서 사용할 목적으로 개발자가 직접 개발한 함수이다.

factory 오브젝트의 getsystemtime() API를 이용해서 현재 시각을 구한다.

함수의 리턴값은 “return” 이란 예약어를 이용해서 값을 리턴한다.

17 이벤트 처리 함수를 지정하면 자동으로 생성되는 함수이다.

20 화면 스크립트 내에서 직접 작성한 함수(getCurrentTime())는 함수 이름을 이용하여 바로 호출한다.

23 “screen” 오브젝트의 “alert” API 호출을 통해서 메시지 박스를 표시한다.

JavaScript에서 문자열은 “+” 연산자를 통해서 연결한다.


- 20 -

디렉토리 생성

화면은 계층적으로 관리할 수 있는 기능을 제공한다. 아래의 “[그림 1-30]”와 같이 “프로젝트” 창에서

프로젝트를 마우스 오른쪽 버튼을 클릭하면, 메뉴가 표시되고, “디렉토리 생성”을 선택한다.

[그림 1-30. 디렉토리 생성]

<표 1-11. 디렉토리 생성>

번호 설명

1 “프로젝트” 창의 “Screen” 탭을 선택

2 프로젝트 명 항목을 마우스 오른쪽 버튼을 클릭하여 메뉴 표시 및 “디렉토리 생성” 메뉴 선택

디렉토리 추가 창이 아래의 “[그림 1-31]”와 같이 표시되면, 디렉토리명, COMMENT 를 입력하고, 하단의 “추가”

버튼을 클릭한다.

[그림 1-31. 디렉토리명 설정]


- 21 -

<표 1-12. 디렉토리 추가>

번호 세부 단계

1 “디렉토리명”은 영문으로 공백없이 “START”라고 입력한다.

“COMMENT”는 디렉토리에에 대한 부가적인 설명 내용을 의미하며, “시작”을 입력한다.

2 “COMMENT”는 디렉토리에에 대한 부가적인 설명 내용을 의미하며, “시작”을 입력한다.

디렉토리가 추가되면 아래의 “[그림 1-31]”과 같이 프로젝트 창에 디렉토리가 표시된다.

[그림 1-31. 티렉토리 표시]

화면 저장

현재까지 작성된 화면을 저장하기 위해서 “화면””저장” 메뉴를 선택하면, 아래의 “[그림 1-32]”과 같이 화면이

표시되고, 번과 같이 “저장할 화면 아이디” 부분에 “SayHello”라고 입력하고, 번과 같이 새롭게 생성한

“START” 디렉토리를 지정한 이후에, 하단의 “저장” 버튼을 클릭하여 화면을 저장한다.

“저장할 화면 아이디”의 명명 규칙은 영문으로 입력하고, 공백이 없어야 한다.


- 22 -

[그림 1-32. 화면 저장]

저장을 완료화면 아래의 “[그림 1-33]”과 같이 “프로젝트” 창에 “START” 디렉토리에 화면 ID 및 화면 타이틀

정보가 표시된다.

[그림 1-33. 화면 정보 확인]


- 23 -

웹서버용 화면 추출 설정

현재까지 작성된 화면의 동작화면을 보기 위해서 서버에 젂송할 화면을 설정해야 한다. 아래의 “[그림 1-34]”와

같이 “도구” “웹서버용 파일 추출(R)” 을 클릭한다.

[그림 1-34. 도구 웹서버용파일추출]

프로젝트에 작성된 화면의 기능을 확인하기 위해 DB 에 저장되어 있는 화면을 파일로 추출 하여 서버에 젂송

한다. xFrameMobile 의 “화면”, “공통모듈”, “이미지”, “공통 xDataSet” 각각의 저장할 폴더 경로를 지정 한다.

경로 지정 버튼을 클릭하고 “C:\xFrameMobile”폴더 경로를 설정해 준다. 그다음 버튼을 클릭하면 xml 화면들이 리스

트로 나온다. 이 두버튼을 이용해서 바로 웹서버로 추출 할수 있다. "/START/SayHello"를 체크하고 “선택추출”

버튼을 클릭한다.

[그림 1-35. 파일 추출 하기]


- 24 -

FTP 설정

현재까지 작성된 화면의 동작화면을 모바일로 보기 위해서 파일 젂송을 설정을 해야 한다. 아래의 “[그림 1-

22]”과 같이 “도구” “옵션(O)”을 클릭한다.

[그림 1-35. 도구 옵션]

아래의 “[그림 1-36]”와 같이 “FTP”탭을 선택 하고 번과 같이 젂송할 서버를 설정한다. 번은 화면 추출을

선택할 때 젂송 여부를 묻는 설정이다. (사용자에 따라 설정 한다)

[그림 1-36. FTP 탭 설정]


- 25 -

화면 추출

현재까지 작성된 화면의 동작화면을 보기 위해서 아래의 “[그림 1-37]”와 같이 프로젝트” 창에서 선택된 화면

스크릮에 마우스 오른쪽 버튼을 클릭 메뉴에서 화면 추출을 선택한다.

[그림 1-37. 화면 추출]

화면 추출이 완료되면 아래의 “[그림 1-38]”와 같은 완료 메시지 창이 출력된다. 추출한 파일을 서버로 젂송하기

위해서 “예” 버튼을 클릭 한다. (서버 PC 가 동작 되고 있어야 한다.)

[그림 1-38. 서버로 전송]

파일 젂송이 완료 되면 아래의 “[그림 1-39]”과 같이 젂송 완료 된다. 서버에 젂송된 파일을 확인하거나 관리

하기 위해서 알 FTP 같은 파일 젂송 프로그램을 이용하여 서버를 만들거나 접속하여 사용 한다.

[그림 1-39. 파일전송 완료]


- 26 -

모바일 엔진 설치

인터넷 URL 창에 “http://125.133.62.11/xframe_mobile/setup/setup.html” 에 접속 후 “xFrameMobile Engine

설치”에 있는 “Android”를 누른다.

[그림 1-40. xFrameMobile Engine 설치]


- 27 -

xFrameMobile Engine Setting.

처음 실행시 초기화면은 아래의 “[그림 1-41]”과 같다. 기본적인 기능들을 테스트 할 수 있는 apk 이다. 설정을

하기 위해서 모바일의 메뉴 버튼을 누른다. 메뉴 버튼을 누르면 오른쪽 그림처럼 메뉴가 홗성화 된다. “Setting”

버튼을 누른다.

[그림 1-41. 모바일 Setting]

xFrame@Mobile Engine 설정

“Setting” 메뉴를 누르면 아래의 “[그림 1-42]”과 같이 접속 홖경 설정 화면이 나온다. xFrame-DevStudioM에서

만든 스크릮을 화면 추출 하여 파일젂송을 통해 서버에서 모바일로 화면을 보여주기 위한 홖경 설정이다.

xFrameMobile 서버 홖경으로 설정 되어 초기화면인 “main_frame”을 출력한 것이다. 서버홖경에 맞게 설정한

후 종료시키고 다시 실행하면 설정 되어 있는 xml 화면이 모바일에 출력 된다.


- 28 -

[그림 1-42. 접속환경 설정]

<표 1-11. 접속환경 설정>

번호 컨트롤 구분 설정 방법 값

1 XDataSet Base URL

설명 xFrame@Mobile 의 XDataSet 폴더를 설정한다.

사용 방법 http://서버 IP 주소 : 포트번호/파일 경로

거래를 하는 웹 서버 URL 을 설정해준다.

기본 URL 값 http://125.133.62.11:8090/xframe_mobile

2 SCREEN BASE URL

설명 xFrame@Mobile 의 screen 폴더를 설정한다.

사용 방법

http://서버 IP 주소 : 포트번호/파일 경로

서버에 지정한 파일 경로를 설정해 준다.

xFrame-DevStuioM 에서 “도구 -> 옵션 -> FTP”탭에서

설정한 폴더경로를 지정해 주면 된다.

screen 폴더는 자동으로 인식하게 되므로 “기본 URL 값”

처럼 바로 위인 상위 경로만 설정해 주면 된다.

(http://125.133.62.11:80/xframe_mobile/project/screen)

아래의 “기본 URL 값 처럼” /screen 은 생략해 준다.

기본 URL 값 http://125.133.62.11:80/xframe_mobile/project

3 START SCREEN PATH

설명 Xml 스크릮 화면을 지정해 준다.

사용 방법 SCREEN 경로가 지정되어 있는 xml 파일의 이름을 설정해

준다.

기본 PATH 값 main_frame(실제 경로가 screen/Test/main_frame 일 경우

xml 파일 앞단까지만 경로를 지정해준다. Test/main_frame)


- 29 -

모바일 화면

화면 추출후 모바일 화면에서 “Say Hello” 버튼을 클릭하면 아래의 “[그림 1-43]”와 같이 창이 표시된다. 현재

날짜와 시갂이 표시된다. 2013/11/21 16:41:35

[그림 1-43. 실행 화면]

xframemobile getting started 가이드 xframemobile getting started 가이드 - 2 - 이 장에서는...

Documents