Widget은 소형 응용프로그램으로써 사용자의 구미에 맞게 재 배치가 가능하다는 장점을 갖고 있습니다. 일반 응용 프로그램의 경우, 그 UI영역을 큰 틀 안에 모든 화면 Form을 배치하는 Interface를 제공합니다. 반면에 Widget인 경우, 각각의 화면 Form들을 독립적으로 실행시켜서 그 배치를 사용자가 원하는 위치에 마음대로 배치할 수 있습니다.
Widget은 다음의 용도에 주로 사용됩니다.
기업내의 업무를 외부의 지시 또는 변화되는 정보에 의해 작업자에게 자동으로 업무진행을 요청하는 용도
개인스케줄에 의한 업무와 해당 업무화면간의 자연스러운 연동이 되는 용도
자주 사용하는 화면을 Widget에 등록하거나 삭제 하는 등의 용도
차세대 Enterprise Portal로써의 Widget의 용도
증권, 상담원, 날씨, 뉴스, 생활정보, 일정관리, 시계 등 지속적으로 갱신되는 정보를 팝업 형태로 보여주거나 알림창을 띄워주는 용도
Widget 개요
Widget은 MainFrame 없이 Form만으로만 화면UI를 구현할 수 있습니다.
Widget의 구성
일반 응용프로그램의 UI화면은 Frame과 Form의 조합으로 만들어지는 반면, Widget은 Form과 Background이미지의 조합에 의하여 만들어집니다.
아래의 그림을 보면 이해가 쉬울 것입니다.
Widget Form의 제약사항
Widget에서 사용하는 Form은 background이미지를 반드시 가져야 하므로, Form자체의 style.background.color값은 “transparent”로 설정해야만 background이미지가 정상적으로 출력됩니다.
Widget와 Layered기능
Layered기능이란, UI화면의 창이 이미지만큼의 영역만 갖게 하는 기능입니다.
다음의 그림을 보면 쉽게 이해하실 수 있습니다.
특히, Widget의 경우는 그 화면의 모양이 사각형이 아닌 다양한 모양을 갖는 경우가 많습니다. 그러므로 이 Layered기능을 사용하는 경우가 많습니다.
Layered기능을 위해서는 background이미지가 투명이미지여야만 합니다. 그렇지 않을 경우, 이미지의 바탕 사각형 영역도 이미지로 간주되어 Layered기능을 올바로 사용할 수 없게 됩니다.
Widget 만드는 방법
XPLATFORM은 Widget 만드는 방법을 3가지를 제시하고 있습니다.
Widget Project로 만들기
Widget만 사용할 경우의 개발 방법입니다.
MainFrame없이 Widget만 사용합니다. 그러므로, 일반 응용프로그램 화면 없이 Widget으로만 사용자 화면을 구성할 때 사용합니다.
일반 Project에서 Widget 만들기
일반 응용프로그램 화면이 있고, 부가적으로 Widget를 병행하여 사용할 경우의 개발 방법입니다.
MainFrame과 Widget이 공존하여 다양한 UI를 제공하고 할 때 사용합니다.
script로 Widget만들기
동적으로 Widget를 만들 때 사용합니다.
이 3가지 Widget만드는 방법은 다음 장에서 상세히 다룹니다.
Widget Project로 만들기
일반 응용프로그램 화면 없이 Widget만으로 화면을 구성할 때 사용합니다.
Widget 프로젝트의 생성
UX-Studio상에서 Project를 맨 처음 생성할 때부터 Widget Project로 생성해야만 합니다.
1단계:Widget Project선택
HTML5는 widget을 지원하지 않습니다.
background 이미지 등록
Widget Project를 생성한 후에 Widget이 사용할 이미지를 먼저 등록합니다. Form을 생성할 때 연결할 background이미지를 물어보므로 먼저 이미지를 등록하는 것이 좋습니다.
1단계 : background 이미지 등록 Project Explorer에서 GlobalVariables에 아래와 화면처럼 이미지를 등록합니다. 여기서 등록한 이미지는 Widget생성시에 background이미지로 사용합니다.
2단계 : 등록한 이미지 확인 등록한 이미지를 Project Explorer창의 GlobalVariable에서 확인합니다.
이 이미지는 배경이 투명 처리된 이미지 입니다.
Widget 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가 메모리에 남아있게 됩니다.
Widget의 실행
UX-Studio에서 Widget을 실행하려면, “Quick View”로는 실행할 수 없습니다. 반드시 “Launch Project”로 실행해야만 합니다.
이 화면은 Widget을 Web Browser위에서 실행시킨 화면입니다. 보이는 바와 같이 투명 처리된 이미지들 사이로 뒤의 Web Browser의 화면이 보입니다.
응용프로그램에 등록된 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입니다. |
일반 Project에서 Widget 만들기
일반 Project에서 Widget를 생성하는 방법은 “Widget 프로젝트의 생성”을 제외하고, “Widget Project로 만들기”의 내용과 동일합니다.
즉, Project 자체는 일반 응용프로그램으로 만들고, 이후에 Widget을 등록하는 것으로 “background 이미지 등록”부터 “응용프로그램에 등록된 Widget 확인”까지 수행하면 Widget을 등록할 수 있습니다.
Script로 Widget 만들기
대부분의 Widget은 UX-Studio의 Wizard기능을 이용하여 생성 및 등록했습니다. 실제로 “Widget 개요”의 모든 예제화면이 Wizard화면입니다.
그러나, 필요에 따라서 동적으로 Widget을 생성할 필요가 있습니다. 여기서는 Script를 이용하여 동적으로 Widget을 만드는 방법을 설명합니다.
동적 Widget생성을 위한 준비
동적 Widget의 생성 이전에 아래의 두 가지 준비를 해야만 합니다.
Widget용 background Image를 준비합니다.
“background 이미지 등록”에서와 같은 방법으로 Image를 등록합니다.
Widget용 Form을 생성합니다.
Widget에서 사용할 Form을 생성합니다. Widget용으로 생성한 것이 아니므로, ADL에 Widget이 등록되지 않은 상태입니다.
Script로 동적 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상에서는 확인할 수 없습니다.
Widget을 화면에 출력합니다.
생성한 Widget을 화면에 보여줍니다.
newWidget.show();
Widget Object를 삭제합니다.
Widget Object를 소멸시킵니다.
newWidget.destroy(); newWidget = null;
Script로 Widget에 접근 하기
동적으로 생성한 Widget Object는 Script상에서 다음과 같은 방법으로 접근 할 수 있습니다.
application.widgets[index];
application.widgets(index);
application.widgets["id"];
application.widgets("id");여기서 접근할 수 있는 Widget Object들은 동적으로 생성한 Object들 뿐만 아니라, Wizard로 생성한 Object들에게도 접근할 수 있습니다.