6.Widget

Widget은 소형 응용프로그램으로써 사용자의 구미에 맞게 재 배치가 가능하다는 장점을 갖고 있습니다. 일반 응용 프로그램의 경우, 그 UI영역을 큰 틀 안에 모든 화면 Form을 배치하는 Interface를 제공합니다. 반면에 Widget인 경우, 각각의 화면 Form들을 독립적으로 실행시켜서 그 배치를 사용자가 원하는 위치에 마음대로 배치할 수 있습니다.

Widget은 다음의 용도에 주로 사용됩니다.

6.1Widget 개요

Widget은 MainFrame 없이 Form만으로만 화면UI를 구현할 수 있습니다.

6.1.1Widget의 구성

일반 응용프로그램의 UI화면은 Frame과 Form의 조합으로 만들어지는 반면, Widget은 Form과 Background이미지의 조합에 의하여 만들어집니다.

아래의 그림을 보면 이해가 쉬울 것입니다.

6.1.2Widget Form의 제약사항

Widget에서 사용하는 Form은 background이미지를 반드시 가져야 하므로, Form자체의 style.background.color값은 “transparent”로 설정해야만 background이미지가 정상적으로 출력됩니다.

6.1.3Widget와 Layered기능

Layered기능이란, UI화면의 창이 이미지만큼의 영역만 갖게 하는 기능입니다.

다음의 그림을 보면 쉽게 이해하실 수 있습니다.

특히, Widget의 경우는 그 화면의 모양이 사각형이 아닌 다양한 모양을 갖는 경우가 많습니다. 그러므로 이 Layered기능을 사용하는 경우가 많습니다.

Layered기능을 위해서는 background이미지가 투명이미지여야만 합니다. 그렇지 않을 경우, 이미지의 바탕 사각형 영역도 이미지로 간주되어 Layered기능을 올바로 사용할 수 없게 됩니다.

6.1.4Widget 만드는 방법

XPLATFORM은 Widget 만드는 방법을 3가지를 제시하고 있습니다.

이 3가지 Widget만드는 방법은 다음 장에서 상세히 다룹니다.

6.2Widget Project로 만들기

일반 응용프로그램 화면 없이 Widget만으로 화면을 구성할 때 사용합니다.

6.2.1Widget 프로젝트의 생성

UX-Studio상에서 Project를 맨 처음 생성할 때부터 Widget Project로 생성해야만 합니다.

1단계:Widget Project선택

HTML5는 widget을 지원하지 않습니다.

6.2.2background 이미지 등록

Widget Project를 생성한 후에 Widget이 사용할 이미지를 먼저 등록합니다. Form을 생성할 때 연결할 background이미지를 물어보므로 먼저 이미지를 등록하는 것이 좋습니다.

1단계 : background 이미지 등록
Project Explorer에서 GlobalVariables에 아래와 화면처럼 이미지를 등록합니다. 여기서 등록한 이미지는 Widget생성시에 background이미지로 사용합니다.

2단계 : 등록한 이미지 확인
등록한 이미지를 Project Explorer창의 GlobalVariable에서 확인합니다.

이 이미지는 배경이 투명 처리된 이미지 입니다.

6.2.3Widget Form의 등록

이제 Form을 생성합니다. Widget Form을 생성하면 자동으로 ADL에 Widget이 등록됩니다.

1단계 : Widget Form생성
다음의 화면은 Form을 생성하는 화면으로 첫 번째 화면은 일반 form생성과 동일합니다.

그 다음 화면도 일반 form생성과 동일합니다.

그 다음 화면도 일반 form생성과 동일합니다. 단지 Form의 크기를 background 이미지 크기를 고려하여 설정합니다.

그 다음 화면은 일반 form생성과 다릅니다. 다음과 같이 설정합니다.

2단계 : Widget Form설정
다음은 1단계에서 생성한 Form의 Editor화면입니다. 이 화면을 보면, Background 이미지가 보이지 않고 있습니다.

background 이미지가 보이지 않는 이유는 Form의 바탕색이 background이미지를 가려서 보이지 않는 것 입니다.

background이미지가 보이게 하려면, Form의 style을 투명 처리해야만 합니다.

다음과 같이 Form의 Property값을 설정합니다.

3단계 : Widget Form의 개발
다음은 간단하게 Form에 컴포넌트들을 사용하여 Login 화면을 만든 것입니다. 여기서는 Cancel버튼을 클릭할 때, Widget이 종료되는 Event Function을 구현하겠습니다.

“Cancel”버튼의 Click Event Function에 다음과 같이 코딩 합니다.

function Button01_onclick(obj:Button, e:ClickEventInfo)
{
    exit(); // close()를 사용하지 않고 exit()를 사용했습니다.
}

여기서 exit()와 close()의 차이점은 exit()는 Widget 응용프로그램 자체를 종료하는 것이고, close()는 Widget Form만 종료하는 것입니다. 만일, close()를 사용하면 응용프로그램 Process가 메모리에 남아있게 됩니다.

6.2.4Widget의 실행

UX-Studio에서 Widget을 실행하려면, “Quick View”로는 실행할 수 없습니다. 반드시 “Launch Project”로 실행해야만 합니다.

이 화면은 Widget을 Web Browser위에서 실행시킨 화면입니다. 보이는 바와 같이 투명 처리된 이미지들 사이로 뒤의 Web Browser의 화면이 보입니다.

6.2.5응용프로그램에 등록된 Widget 확인

개발을 완료하면 ADL에 자동으로 Widget이 등록됩니다.

다음은 Project Explorer창에서 ADL에 등록된 Widget정보입니다.

[Project > ADL > Widgets > Widget0]에 자동으로 등록되어 있습니다. 물론, 이 화면에서 그 설정을 변경할 수 있습니다.

Widget의 주요 Property값을 보면 다음과 같습니다.

Name

Description

visible

Widget을 보여줄지를 결정합니다. 기본값은 true입니다.

id

ADL에 등록된 Widget의 ID입니다. Script로 접근할 때 주로 사용합니다.

background

image

등록한 Image의 Path값이 설정되어 있습니다.

formurl

생성한 form의 url값이 설정되어 있습니다.

layered

layered기능 사용여부입니다. 기본값은 true입니다.

6.3일반 Project에서 Widget 만들기

일반 Project에서 Widget를 생성하는 방법은 “Widget 프로젝트의 생성”을 제외하고, “Widget Project로 만들기”의 내용과 동일합니다.

즉, Project 자체는 일반 응용프로그램으로 만들고, 이후에 Widget을 등록하는 것으로 “background 이미지 등록”부터 “응용프로그램에 등록된 Widget 확인”까지 수행하면 Widget을 등록할 수 있습니다.

6.4Script로 Widget 만들기

대부분의 Widget은 UX-Studio의 Wizard기능을 이용하여 생성 및 등록했습니다. 실제로 “Widget 개요”의 모든 예제화면이 Wizard화면입니다.

그러나, 필요에 따라서 동적으로 Widget을 생성할 필요가 있습니다. 여기서는 Script를 이용하여 동적으로 Widget을 만드는 방법을 설명합니다.

6.4.1동적 Widget생성을 위한 준비

동적 Widget의 생성 이전에 아래의 두 가지 준비를 해야만 합니다.

6.4.2Script로 동적 Widget 생성

Script로 Widget을 생성하는 것은 실제로는 Widget Object를 생성하고, 그 생성된 Object에 Form과 background이미지를 등록하는 행위를 Script로 처리하는 것을 의미합니다.

1단계 : Widget Object를 생성하고 이미지와 Form을 연결합니다.

newWidget = new Widget(); // widget Object의 생성

// 생성한 Widget Object에 초기값을 설정합니다.
// Widget Object명은 “Widget1”입니다.
// Widget이 보여질 Screen상의 Left 좌표값이 10입니다.
// Widget이 보여질 Screen상의 Top 좌표값이 100입니다.
// Widget이 사용하는 Form url이 "Base::Sample2.xfdl"입니다.
// Widget이 사용하는 background 이미지가 "image::widget.png"입니다.
newWidget.init("Widget1",10,100,"Base::Sample2.xfdl","image::widget.png");

상세한 Method의 사용법은 XPLATFORM Reference Guide를 참조하세요.

2단계 : Widget Object를 ADL에 등록합니다.

1단계에서 생성한 Widget Object를 ADL에 등록합니다.

application.addWidget("widgetID", newWidget);

UX-Studio에서 Wizard로 Widget용 Form을 생성하면, 자동으로 등록됩니다. 등록결과는 “응용프로그램에 등록된 Widget 확인”에서와 같이 확인할 수 있습니다. 그러나 이렇게 동적으로 등록한 경우에는 UX-Studio상에서는 확인할 수 없습니다.

6.4.3Widget을 화면에 출력합니다.

생성한 Widget을 화면에 보여줍니다.

newWidget.show();

6.4.4Widget Object를 삭제합니다.

Widget Object를 소멸시킵니다.

newWidget.destroy();
newWidget = null;

6.4.5Script로 Widget에 접근 하기

동적으로 생성한 Widget Object는 Script상에서 다음과 같은 방법으로 접근 할 수 있습니다.

application.widgets[index];
application.widgets(index);
application.widgets["id"];
application.widgets("id");

여기서 접근할 수 있는 Widget Object들은 동적으로 생성한 Object들 뿐만 아니라, Wizard로 생성한 Object들에게도 접근할 수 있습니다.