11.샘플 프로젝트 (조회화면 만들기-list.xfdl)

조회화면은 고객관리 시스템의 데이터를 조건 별로 조회하는 화면입니다.

이 프로젝트를 수행하면서,

11.1프로젝트 생성하기

프로그램을 작성하기 위하여 프로젝트(Project)를 만들고, 화면(Form)을 추가하고, 컴포넌트(Component)를 디자인하는 과정이 필요합니다.

순서는 다음과 같습니다.

11.1.1프로젝트 만들기

XPLATFORM 개발툴 UX-Studio를 실행합니다.

  1. “Project 만들기” 메뉴를 선택합니다. (File > New > Project)

  1. “Project Wizard” 창을 이용하여 Name, Location 을 지정합니다.

  1. “Project Wizard” 창을 이용하여 ADL, Type Definition 파일의 생성을 지정합니다.

  1. “Project Wizard”에 사용한 옵션을 다음과 같습니다.

속성

설명

Name

Demo

Location

C:\DocumentsandSettings\LoginUserID\MyDocuments\TOBESOFT\XPLATFORM\demo

Character Set

utf-8

Language

Korean

TypeDefinition

Create new TypeDefinition from default

TypeDefinition

C:\DocumentsandSettings\LoginUserID\MyDocuments\TOBESOFT\XPLATFORM\demo\default_typedef.xml

  1. “Project 만들기”가 완료되면 UX-Studio에 만들어진 프로젝트가 열립니다.

11.1.2화면(Form) 만들기

  1. “Form 만들기” 메뉴를 선택합니다.(File > New > Item > Form)

  1. “Create New Form Wizard” 창을 이용하여 파일명(Name), 저장위치(Location)을 지정합니다.

  1. “Create New Form Wizard” 창을 이용하여 상속(Inheritance)을 지정합니다.

  1. “Create New Form Wizard” 창을 이용하여 크기(Position)를 지정합니다.

  1. “Create New Form Wizard”에 사용한 옵션을 다음과 같습니다.

속성

설명

Name

list

Location

Base

Width

800

Height

600

  1. “Form 만들기”가 완료되면 UX-Studio에 만들어진 화면(Form)이 열립니다.

  1. Form의 titletext 속성의 값을 “고객 목록 조회”로 지정합니다.

11.2데이터셋(Dataset) 컬럼 디자인하기

데이터셋(Dataset) 컴포넌트는 서버로부터 데이터를 수신하고, 그리드(Grid)에게 데이터를 공급합니다.
데이터셋(Dataset)은 데이터를 보관할 뿐만 아니라 데이터가 변경(추가/수정/삭제)된 상태를 알려줍니다. 수정된 데이터는 변경 전 원본 데이터를 보관합니다.
데이터셋(Dataset)은 2차원 테이블 형태로 데이터를 보관하므로 컬럼(Column) 구조를 가지며, 로우(Row, Record)단위로 데이터를 다루게 됩니다.
하나의 화면(From)에는 한 개 이상의 데이터셋(Dataset)을 가질 수 있습니다. 
데이터가 전체 프로젝트에 공통되는 내용일 때는 데이터셋(Dataset)을 공통영역(Global Dataset)에 만들어 여러 화면(Form)에서 동시에 연결하여 사용할 수 있습니다.

11.2.1데이터셋 만들기 - 데이터셋 : Dataset

컴포넌트 툴바에서 을 선택합니다.

어느 부분을 클릭하든 데이터셋(Dataset)은 “Invisible Objects” 탭에 생깁니다.

데이터셋(Dataset)도 컴포넌트의 일종이므로 속성과 이벤트는 “Properties”창을 이용하여 설정합니다.
데이터셋 id를 “dsCustomers”로 설정합니다.

11.2.2데이터셋 컬럼(Column) 디자인하기

데이터셋은 2차원 테이블 형태로 데이터를 보관합니다.
테스트용 데이터를 직접 입력하여 디자인 할 때 활용할 수 있습니다.
데이터셋(Dataset)의 디자인은 “Dataset Contents Editor” 창을 사용합니다.
“Dataset Contents Editor” 창은 해당 데이터셋(Dataset)을 더블 클릭하면 나타납니다.

상단의 “Const Columns” 정보는 모든 레코드(Record, Row)에 공통으로 갖는 값인 경우 상수(Const Value)로 취급하여 “상수컬럼(Const Column)”을 만듭니다.
중앙의 “Columns” 정보는 레코드의 모양을 디자인하는 곳입니다.
하단의 “Rows”는 테스트용 데이터를 설정하는 부분입니다.
자세한 사용법은 “UX-Studio 사용방법”을 참조하시기 바랍니다.

데이터셋(Dataset)에 컬럼정보와 테스트용 데이터를 추가하는 과정은 다음과 같습니다.

  1. “Dataset Contents Editor” 창을 열고 중간부분인 “Columns”부분에 (Column)을 하나 만듭니다. 컬럼의 추가는 “Columns” 툴바에 위치한 버튼을 클릭하면 만들어 집니다.

  1. 추가된 컬럼 정보에 “ID”, ”Type”, “Size”를 설정합니다.

    “ID”는 같은 Dataset 내에서 중복되지 않는 값을 갖도록 지정합니다.

    한글 컬럼ID도 허용됩니다만, 인코딩이 맞지 않는 경우에 인식이 어려울 수 있으므로 가급적 한글 컬럼ID는 권장되지 않습니다.

    “Type”는 문자열(STRING), 정수형(INT), 실수형(FLOAT/DECIMAL), 날짜형(DATE/DATETIME/TIME), 큰실수형(BIGDECIMAL), 바이너리형(BLOB)등이 있습니다.

    “Size”의 지정은 자유로우나 Type에 따라 허용치가 다르므로 Type이 허용하는 길이만큼만 지정하는 것이 좋습니다. 허용치를 넘는 데이터가 들어오는 경우는 허용범위의 데이타만 인정되고 나머지는 짤리거나 무시됩니다.

Dataset Contents Editor(dsCustomers)

Id

Type

Size

내용

id

String

4

일련번호

name

String

16

성명

email

String

32

Email

birthday

String

8

생년월일

phone

String

16

전화번호

home_addr

String

256

집주소

company

String

32

직장명

jobtitle

String

32

직급

busi_phone

String

16

직장 전화번호

busi_addr

String

256

직장 주소

완성된 모습은 다음과 같습니다.

  1. 테스트용 데이터는 디자인 할 때 서버와의 연결 없이도 화면의 출력내용을 점검할 수 있도록 합니다. 테스트용 데이터를 추가하려면 Rows”부분의 버튼을 클릭하여 레코드를 추가한 후 데이터를 직접 등록할 수 있습니다.

11.3화면 구성하기(1) : 제목, 조회버튼 디자인

기본 조회 프로그램에 제목과 조회 버튼(Button)을 추가해 보도록 하겠습니다.
컴포넌트는 Static, Div, Button을 사용합니다.

11.3.1타이틀 만들기 - 스테틱 : Static

컴포넌트 툴바에서 를 선택하여 스테틱(“Static”)을 만듭니다.

스테틱(“Static”)의 속성은 다음과 같이 변경합니다.

스테틱(Static)

속성

설명

id

sttList


text

고객 목록 조회


11.3.2디비전 만들기 - 디비전 : Div

컴포넌트 툴바에서 를 선택하여 디비전(“Div”)를 만듭니다.

디비전(“Div”)의 속성을 다음과 같이 변경합니다.

디비전(Div)

속성

설명

id

divCommand


11.3.3버튼 만들기 - 버튼 : Button

컴포넌트 툴바에서 를 선택하여 화면에 버튼(Button)을 만듭니다.

버튼(Button)의 속성을 다음과 같이 변경합니다.

버튼(Button)

속성

설명

id

btnSearch


text

조 회


11.4화면 구성하기(2) : 그리드(Grid) - 컬럼 디자인

그리드(Grid) 컴포넌트는 데이터셋(Dataset)을 연결(Bind)하여 데이터를 화면에 출력합니다. 그리드(Grid)를 데이터셋에 연결하면 출력뿐만 아니라 그리드(Grid)를 통한 입력도 가능하므로 데이터셋의 데이터를 수정할 수 있습니다.
모든 작업은 연결된 데이터셋을 중심으로 이루어지고 실시간 데이터셋으로 반영됩니다.
만일, 데이터셋에 레코드를 추가하면 그리드(Grid)에 추가된 레코드가 출력됩니다.
그리드(Grid)를 통해 데이터를 수정하면 연결된 데이터셋의 데이터가 바로 수정됩니다. 그리드(Grid)는 데이터를 출력하거나 입력할 때 Format을 줄 수 있습니다. 사용자가 데이터를 보다 쉽게 인식할 수 있도록 “-“ 문자 등을 출력 시에 보여주도록 설정이 가능합니다. 날짜를 입력할 때는 유효범위를 넘지 않도록 날짜형 입력형태를 선택할 수 있습니다.

11.4.1컬럼 디자인하기

컴포넌트 툴바에서 을 선택하여 화면에 그립니다.

만들어진 그리드(Grid)에 데이터셋(Dataset)을 연결(Bind)하고자 할 때는 해당 그리드(Grid)를 선택하고 컴포넌트 속성을 지정할 수 있는 “Properties”창에서
id는 “grdCustomers”로 설정하고 “binddataset”을 찾아 선택 항목을 클릭합니다. 화면에 디자인된 데이터셋과 공통데이터셋 목록이 열리면 연결(Bind)할 데이터셋을 선택합니다.

그리드(Grid)를 디자인 했을 때 최초 모습은 위에서 보여준 것처럼 공간표시만 보입니다. 연결할 데이터셋을 드래그하여 그리드 위로 끌어다 놓습니다.

그리드를 더블 클릭하면 데이터셋의 모든 컬럼이 그리드에 디자인된 것을 확인할 수 있습니다.

변경을 원하는 컬럼을 선택하여 오른쪽에 보이는 속성창을 이용하여 수정합니다.
삭제를 원하는 컬럼은 선택하고 마우스 오른쪽 버튼을 클릭할 때 보여지는 팝업메뉴를 이용하여 작업합니다. 컬럼의 순서를 변경하려면 “Cut”, “Paste”메뉴를 활용하십시오. XPLATFORM 프로그램에서 데이터는 데이터셋에 보관되고, 그리드(Grid)는 데이터셋을 연결하여 사용하므로 보여주고자 하는 컬럼만 디자인합니다.
그리드의 컬럼과 데이터셋의 컬럼을 연결하려고 합니다.
사전에 그리드의 binddataset값을 설정한 상태에서만 작업이 가능합니다.
연결한 그리드의 컬럼을 선택합니다. “Grid Contents Editor”오른쪽에 선택한 컬럼의 속성창이 보여집니다.

“Binding”그룹의 “text”항목에서 연결할 데이터셋의 컬럼을 선택합니다. 
예제에서 사용할 그리드는 다음과 같이 컬럼을 디자인합니다.

Grid Contents Editor(grdCustomers)

컬럼 순서

Head Cells : text

Body Cells : text

컬럼 크기

col0

ID

bind:id

80

col1

고객명

bind:name

150

col2

이메일

bind:email

200

직장명

bind:company

col3

생년월일

bind:birthday

150

직 급

bind:jobtitle

col4

전화번호

bind:phone

150

직장 전화번호

bind:busi_phone

  1. col5부터 col9까지의 컬럼을 삭제합니다.

  1. 헤더를 2줄로 만들기 위해 로우를 추가합니다.

  1. 데이터도 2줄로 만들기 위해 로우를 추가한다.

  1. head와 body의 로우가 늘어난 것을 확인하세요.

  1. id와 name 헤더는 2줄의 헤더를 하나로 합칩니다.

  1. 헤더의 text를 입력한다.

  1. id와 name 데이터도 2줄의 로우를 하나로 합칩니다.

  1. 각각의 셀에 데이터를 바인드시킵니다.

  1. 컬럼의 크기를 지정합니다.

모든 작업이 끝나면 “OK”버튼을 클릭하여 완성합니다.

11.5스크립트 작성하기 : 버튼(Button) - Dataset load

프로그램 실행 시에 서버에 구현해 놓은 서비스(search.jsp)를 호출하는 방법입니다.
서버 서비스는 이미 완성되어 있다고 가정하고 진행합니다.
화면에 서비스 호출을 위한 버튼(Button)을 만들고 클릭했을 때 서버 서비스를 호출하여 데이터셋(Dataset)에 데이터를 받도록 하는 스크립트를 작성합니다.

11.5.1버튼(Button) 스크립트 작성하기

스크립트를 작성하기 위하여 “조 회”버튼을 선택하고 “Properties”창의 이벤트 목록에서 “Onclick”이벤트를 찾아 입력에 연결할 함수명 (divCommand_btnSearch_onclick) 을 넣고 <Enter>키를 누릅니다. 또는 공란상태에서 마우스를 더블클릭하면 자동으로 함수명을 등록하고 작업영역(Work Area) 스크립트(script)탭으로 이동합니다. 이때 자동으로 등록되는 함수는 “[이벤트명]_[컴포넌트명]”으로 만들어지며 이미 같은 이름의 함수가 있는 경우에는 스크립트(Script)탭의 해당 함수 위치로 입력커서가 이동됩니다. 만일 같은 이름의 함수가 없을 때는 스트립트에 함수를 만들고 해당 위치로 이동합니다.

11.5.2데이터 추가 스크립트 작성하기

우선 서버 서비스를 호출하지 않고, 직접 스크립트로 데이터를 추가하도록 합니다. 작성할 스크립트 내용은 다음과 같습니다.

function divCommand_btnSearch_onclick(obj:Button, e:ClickEventInfo)
{
    var row = dsCustomers.addRow();
    dsCustomers.setColumn(row, "id", "0");
    dsCustomers.setColumn(row, "name", "James Carman");
    dsCustomers.setColumn(row, "email", "carman@live.com");
    dsCustomers.setColumn(row, "birthday", "19650925");
    dsCustomers.setColumn(row, "phone", "619-987-6543");
    dsCustomers.setColumn(row, "home_addr", "1234 Bonnie Ct. San Diego");
    dsCustomers.setColumn(row, "company", "Oracle Corporation");
    dsCustomers.setColumn(row, "jobtitle", "Consultant");
    dsCustomers.setColumn(row, "busi_phone", "+1.650.506.7000");
    dsCustomers.setColumn(row, "busi_addr", "500 Oracle Parkway Redwood Shores");
}

이벤트 정보(EventInfo) 객체 속성 보는 방법

XPLATFORM의 이벤트는 모두 동일한 인자(Argument)구조를 갖습니다.

첫번째 인자는 “obj”로 이벤트를 발생시킨 오브젝트(Object)를 전달합니다.

오브젝트의 종류에 따라 접근가능한 멤버리스트가 달라집니다.

오브젝트의 종류는 “obj”뒤에 “.”을 붙이면 오브젝트 종류가 기술됩니다.

두번째 인자는 “e”로 이벤트에 전달되는 여러 가지 정보를 관리하는 객체입니다.

이벤트 정보(EventInfo)객체의 멤버는 이벤트정보의 종류에 따라 달라집니다.

접근 가능한 멤버리스트를 확인하려면 “도움말(Help)”를 참조하십시오.

HTML5의 QucickView메뉴를 이용하여 실행테스트를 하면 화면이 다음과 같은 모습으로 실행됩니다.

11.5.3서비스 호출 스크립트 작성하기

서버의 CGI와 연동하여 데이터를 주고 받는 스크립트입니다.
서비스를 호출하는 기능은 transaction 메소드를 사용하였습니다.

transaction?

transaction은 데이터셋(Dataset)의 값을 갱신하기 위한 서비스를 호출하고, transaction이 완료되면 CallBack Function을 수행하는 메소드입니다.

transaction(strSvcID,strURL,strInDatasets,strOutDatasets,strArgument
    ,strCallbackFunc[,bAsync[,bBinary[,bCompress]]]);

Parameters

Type

Description

strSvcID

String

transaction을 구분하기 위한 ID값입니다.

strURL

String

transaction을 요청할 주소값입니다.

strInDatasets

String

transaction을 요청할 때 입력값으로 보낼 Dataset ID들입니다. 각 ID쌍은 빈칸으로 구분하며, a=b 형태로 실제이름과 매칭합니다.

strOutDatasets

String

transaction의 처리결과를 받을 Dataset ID들입니다. 사용은 위와 동일합니다.

strArgument

String

transaction을 위한 인자값으로 사용은 위와 동일합니다.

strCallbackFunc

String

transaction의 결과를 돌려줄 Function의 이름입니다.

bAsync

Boolean

비동기여부를 지정합니다. Default : true

bBinary

Boolean

Binary 형태로 전송할지 여부를 지정합니다. Default : false

bCompress

Boolean

통신시 PostData를 압축할지 여부를 지정합니다.

Default : false

기본으로 비동기 형태로 동작합니다.

strInDatasets의 Dataset에 ':U', ':A', ':N' 의 옵션이 붙을 수 있습니다.

':U' 는 갱신된 내용만을 strInDatasets으로 보내며, ':A' 는 모든 정보를 보냅니다. ':N' 은 현재 Delete를 제외한 Data를 Normal 상태로 보냅니다. 지정하지 않는 Dataset은 Normal로 동작합니다.

이전에 작성된 스크립트를 지우고, 서비스 호출 스크립트를 다시 작성합니다.
작성할 스크립트 내용은 다음과 같습니다.
function divCommand_btnSearch_onclick(obj:Button, e:ClickEventInfo)
{
    var id = "search";
    var url = "http://127.0.0.1:8080/xplatform9-ajax/search.jsp”;
    var reqDs = "";
    var respDs = "dsCustomers=customers";
    var args = "";
    var callback = "received";
    transaction(id, url, reqDs, respDs, args, callback);
}

11.5.4transaction의 콜백(callback) 함수 작성하기

transaction 메소드로 서버 서비스를 호출하는 경우 호출이 정상 또는 비정상적인 상황 모두 지정된 콜백(callback) 함수를 실행시킵니다. 스크립트를 구현하기 위해 적당한 함수명으로 스크립트를 작성하고, transaction 메소드 호출시 인자로 콜백(callback) 함수명을 전달합니다.

작성할 스크립트 내용은 다음과 같습니다.

function received(id, code, message)
{
    if (code == 0) {
        alert(dsCustomers.rowcount + "건의 데이터가 조회되었습니다.");
    } else{
        alert("Error["+code+"]:"+message);
    }
}
스크립트 작성후 실행할 버튼은 HTML5 툴바에서 입니다.
순서대로 실행하면 됩니다.
HTML5의 QucickView메뉴를 이용하여 프로그램 실행하고 조회버튼을 누르면 다음과 같이 동작합니다.

11.5.5그리드의 콤보 만들기

그리드 Cell을 다양한 컴퍼넌트로 보여주거나 편집을 할 수 있습니다.
그 중에 하나가 콤보(Combo)입니다. 여러 개의 예시값을 보여주는 선택목록 형태에는 콤보(Combo)를 사용합니다. 가능한 모든 컴퍼넌트를 확인하려면 “도움말(Help)”를 참조하십시오.
  1. Grid의 Combo 에 들어갈 Dataset을 추가합니다.

데이터셋(Dataset)

속성

설명

id

dsJobTitle


Dataset Contents Editor(dsJobTitle)

Id

Type

Size

내용

Code

String

256

코드

value

String

256

Dataset Contents Editor(dsJobTitle)

code

data

0

Analyst

1

Assistant

2

CEO

3

CFO

4

CIO

5

Consultant

6

Director

7

Engineer

8

Manager

9

Programmer

10

Specialist

  1. 화면에서 그리드를 선택 더블클릭하여 “Grid Contents Editor” 창을 띄웁니다.

  1. “Grid Contents Editor” 창을 이용하여, “직 급” 컬럼의 속성을 수정합니다.

    먼저 displaytype을 “combo” 로 선택하고 combodataset을 “dsJobTitle”로 선택하면 combocodecol과 cobodatacol에서 바인드할 column이 나타납니다.

Grid Contents Editor(grdCustomers)

속성

설명

displaytype

combo


combodataset

dsJobTitle


combocodecol

code


combodatacol

value


HTML5의 QucickView메뉴를 이용하여 실행테스트를 하면 화면을 다음과 같은 모습으로 실행됩니다.

11.6조회조건 만들기 : Staic, Edit

기본조회 프로그램에 조건조회 기능을 추가해 보도록 하겠습니다.
화면에 조건 부분을 추가해 보도록 하겠습니다.
컴포넌트는 Static, Edit을 사용합니다.

11.6.1타이틀 만들기 - 스테틱 : Static

컴포넌트 툴바에서 를 선택하여 스테틱(“Static”)을 만듭니다.
스테틱(“Static”)의 속성은 다음과 같이 변경합니다.

스테틱(Static)

속성

설명

id

sttSearch


text

고객명


11.6.2에디트 만들기 - 에디트 : Edit

컴포넌트 툴바에서 를 선택하여 화면에 에디트(“Edit”)를 만듭니다.
에디트(“Edit”)의 속성을 다음과 같이 변경합니다.

에디트(Edit)

속성

설명

id

edtSearch


11.6.3서비스 호출 스크립트 작성하기

조건 조회 스크립트를 추가합니다. 이전 스크립트와 변경된 부분은 “url”이고, 나머지는 동일합니다. 작성할 스크립트 내용은 다음과 같습니다.

function divCommand_btnSearch_onclick(obj:Button, e:ClickEventInfo)
{
    var id = "search";
    var url = "http://localhost:8080/xplatform9-ajax/search.jsp?keyword=" 
        + divCommand.edtSearch.text;
    var reqDs = "";
    var respDs = "dsCustomers=customers";
    var args = "";
    var callback = "received";
    transaction(id, url, reqDs, respDs, args, callback);
}

11.7컴파일 및 실행

2012년 2월 패치버전부터 컴파일 속도 개선을 위하여 Server Compile방식이 Local Compile방식으로 변경되었습니다. 즉, 기존에는 Server에서 컴파일 되었지만 2012년 2월 패치버전부터는 Client(PC)에서 컴파일 됩니다. 기존 Server Compile방식에서는 UX-Studio에서 Compile 할 *.xadl, *.xfdl등을 Server로 전송하고, Server Compile모듈이 전송된 파일들을 컴파일하여 *.js파일들을 Server에 생성하였습니다. 하지만, 변경된 Local Compile방식에서는 UX-Studio에서 Local Compile모듈인 XHTML5Compiler.exe를 호출하고 이 모듈이 *.xadl, *.xfdl등을 컴파일하여 *.js파일들을 Client에 생성합니다. Local Compile 된 파일명은 기존 Server Compile방식의 파일명과 동일합니다.

11.7.1프로젝트 전체 컴파일

프로젝트 관련정보가 아직 컴파일 되지 않은 상태이므로 개발한 화면을 실행하기 전에 프로젝트 전체를 먼저 컴파일 해야 합니다.
UX-Studio > HTML5 메뉴 > Compile Application 메뉴를 클릭하면 프로젝트 전체가 컴파일 됩니다.

컴파일된 파일들이 위치할 폴더는 UX-Studio > Tools > Options > HTML5 > Compiled Path에서 설정합니다. Compiled Path는 “<Tomcat Home>/webapps/xplatform9-ajax/projects”로 설정합니다. 이 예제에서 프로젝트명은 “demo”이므로 실제 프로젝트가 저장되는 위치는 “<Tomcat Home>/webapps/xplatform9-ajax/projects/demo/…”입니다.

단, 이 경우와 같이 PC에서 WebServer를 구동하지 않고 Server측에서 WebServer를 실행하는 경우에는 컴파일된 결과물을 수동으로 Server에 복사해야 실행할 수 있습니다. 향후에는 자동화할 예정입니다.

컴파일 할 파일과 컴파일 될 파일들을 정리하면 아래표와 같습니다.

컴파일 할 파일

컴파일 된 파일

설명


LaunchProject.jsp

WebBrowser에서 실행할 최초 HTML파일


QuickView.jsp

QuickView시 동작될 HTML파일

*.xadl

*.xadl.js

ADL파일

*.xadl.debug.js

Debugging용 ADL파일

/Service /*.xfdl

/Service /*.xfdl.js

FDL(화면)파일

/Service/*. xfdl. debug.js

Debugging용 FDL(화면)파일

__theme__/…/*.css

__theme__/…/*.css.js

Theme의 css파일

__theme__/…/*.png,…

__theme__/…/*.png,…

Image파일들, 컴파일 시 파일명 변경 없음

11.7.2QuickView 실행

개발한 list.xfdl 화면 한개를 실행하는 방법입니다.

  1. list.xfdl화면을 컴파일 합니다. UX-Studio > HTML5 메뉴 > Compile File메뉴를 클릭합니다. 이 예제에서 프로젝트명은 “demo”, 서비스 그룹명은 “Base”이므로 실제 컴파일 된 화면이 저장되는 위치는 “<Tomcat Home>/webapps/xplatform9-ajax/projects/demo/Base/list.xfdl.js”입니다.

    또한, Debug를 위하여 위와 동일한 경로에 list.xfdl.debug.js도 생성됩니다.

  1. UX-Studio > HTML5 메뉴 > QuickView메뉴를 실행합니다. Debug모드로 실행하려면 QuickVeiw Debug메뉴를 실행합니다.

QuickView 다이얼로그에 QuickView.jsp실행경로인 “http://127.0.0.1:8080/xplatform9-ajax/projects/demo/QuickView.jsp”를 설정하고 OK버튼을 클릭합니다. QuciView Debug메뉴실행시에도 위 경로와 동일하게 설정하면 됩니다.

  1. WebBrowser가 실행되고

    “http://127.0.0.1:8080/xplatform9-ajax/projects/demo/QuickView.jsp?formname=Base::list.xfdl”이 실행됩니다.

    QuickView Debug메뉴를 실행하면

    http://127.0.0.1:8080/xplatform9-ajax/projects/demo/QuickView.jsp?formname=Base::list.xfdl&debugmode=true가 실행됩니다.

11.7.3Execute Application

한개의 화면만을 실행할 때는 QuickView를 사용하지만 프로젝트 전체를 실행할 때는 Execute Application메뉴를 이용합니다. 다음은 프로젝트 전체 실행 방법에 관한 설명입니다.
  1. 프로젝트 전체를 컴파일 합니다. 위 1)에서 설명한 내용과 동일하므로 생략합니다.

  2. UX-Studio > HTML5 메뉴 > Execute Application메뉴를 실행합니다.

LaunchProject다이얼로그에 LaunchProject.jsp실행경로인 “http://127.0.0.1:8080/xplatform9-ajax/projects/demo/LaunchProject.jsp”를 설정하고 OK버튼을 클릭합니다.

  1. WebBrowser가 실행되고 “http://127.0.0.1:8080/xplatform9-ajax/projects/demo/LaunchProject.jsp”이 실행됩니다.