4.위젯 앱 개발하기

Edit

위젯은 시계나 CPU 현황 같은 실시간 정보를 모니터링하기 위한 용도로 화면에 항상 띄워놓는 작은 UI 도구입니다. 넥사크로플랫폼에서는 투명한 레이어를 가지는 새 창을 띄우는 방식으로 위젯 UI를 구현할 수 있습니다.

4.1간단한 달력 위젯 만들기

1

새로운 프로젝트를 생성합니다. Frameset Template에서 Full 타입을 선택합니다.

2

Form_Work 폼에 Button 컴포넌트를 추가하고 아래와 같이 onclick 이벤트 함수를 생성합니다.

layered 속성은 ChildFrame 생성 시 배경 윈도우를 투명하게 설정하는 속성입니다. 이 속성값을 true로 설정하면 원하는 모양의 배경 이미지를 화면에 표현할 수 있습니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
    nexacro.open("NewWidget", 
        "FrameBase::WidgetMain1.xfdl", 
        this.getOwnerFrame(), "", 
        "showontaskbar=false showtitlebar=false showstatusbar=false topmost=true layered=true", 
        0, 0);
};

WidgetMain1.xfdl 폼은 위젯 형태로 보일 폼입니다. 위젯 형태로 필요한 UI만 노출하기 때문에 OpenStyle 파라미터 설정에서 태스크바나 타이틀바, 상태표시바는 보이지 않게 처리합니다. 그리고 다른 프로그램에 가리지 않도록 topmost 속성값을 true로 지정합니다.

3

WidgetMain1 라는 이름으로 새로운 Form 오브젝트를 생성합니다.

4

ResourceExplorer 탭을 선택하고 컨텍스트 메뉴에서 [Import ImageResource]를 선택합니다.

배경 이미지로 사용할 투명한 이미지 파일을 가져옵니다. 예를 들어 원 형태의 이미지라면 원 모양만 보여지고 바탕 영역은 투명하게 보여집니다. 예제에서는 아래 이미지를 사용했습니다.

https://pixabay.com/en/book-character-glasses-show-1773756/

5

Form 오브젝트의 background 속성에서 imageurl 속성값으로 투명 이미지 파일을 선택하고 background-color 속성값은 transparent로 설정합니다.

6

투명 이미지 파일에 맞게 Form 오브젝트의 크기를 조정하고 Calendar 컴포넌트를 적절한 위치에 배치합니다.

7

툴바에서 실행옵션으로 NRE를 선택하고 Launch 아이콘을 클릭하거나 단축키 (Ctrl + F5)를 입력하고 앱을 실행합니다.

Launch 실행 시 NRE 이외의 웹브라우저에서는 위젯 기능을 사용할 수 없습니다.

8

앱에서 버튼을 클릭하면 WidgetMain1 으로 만든 위젯 UI가 화면에 표시됩니다.

9

투명하지 않은 배경 이미지 영역을 마우스로 드래그하면 원하는 위치로 이동할 수 있습니다.

투명한 배경 영역 클릭 시에는 뒤에 보여지는 윈도우에 포커스가 이동하기 때문에 마우스로 드래그해서 위젯 위치를 변경할 수 없습니다.

개별 컴포넌트 클릭 시에는 개별 컴포넌트 동작을 해야 하기 때문에 마우스로 드래그해서 위젯 위치를 변경할 수 없습니다.

4.2바로 실행되는 위젯 만들기

이전 예제에서는 메인 폼을 실행하고 버튼 클릭 시 위젯 UI가 나타났습니다. 이번 예제에서는 사용자의 입력 없이 바로 실행되는(것 처럼 보이는) 위젯을 만들어봅니다.

1

이전 예제에서 사용한 Form_Work 폼에 아래와 같이 oninit 이벤트 함수를 생성합니다.

this.Form_Work_oninit = function(obj:nexacro.Form,e:nexacro.EventInfo)
{
    nexacro.getApplication().mainframe.set_visible(false);
    nexacro.open("NewWidget", 
        "FrameBase::WidgetMain1.xfdl", 
        this.getOwnerFrame(), "", 
        "showontaskbar=false showtitlebar=false showstatusbar=false topmost=true layered=true", 
        0, 0);
};

2

위젯을 종료하기 위한 Button 컴포넌트를 위젯 폼(WidgetMain1)에 추가합니다.

이전 예제에서는 메인 폼을 닫으면 위젯이 같이 종료되는데, 위젯에는 타이틀바가 표시되지 않아서 닫기 버튼을 따로 만들어주어야 합니다.

3

Button 컴포넌트를 추가하고 아래와 같이 onclick 이벤트 함수를 생성합니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
    this.close();
};

4

툴바에서 실행옵션으로 NRE를 선택하고 Launch 아이콘을 클릭하거나 단축키 (Ctrl + F5)를 입력하고 앱을 실행합니다.

앱이 실행되면서 메인프레임을 보이지 않게 하면서 open 메소드가 실행되기 때문에 위젯 UI만 화면에 표시됩니다. [CLOSE] 버튼을 클릭하면 위젯 UI가 닫힙니다.

4.3트레이에서 위젯 제어하기

위젯이 떠있으면 다른 작업을 할 때 방해가 될 수 있습니다. 그런 경우에는 잠시 위젯을 감추어두었다가 다시 보이도록 할 수 있습니다. 앱에 트레이를 등록하고 트레이에서 위젯을 제어할 수 있습니다.

1

Project Explorer에서 App을 선택하고 컨텍스트 메뉴에서 [Add > Tray] 항목을 선택합니다.

2

트레이 아이콘을 선택하고 속성창에서 icon, tooltip 속성값을 설정합니다.

icon: http://docs.tobesoft.com/r/image/get/7fa1a6a352a4f33c
tooltip: nexacro Widget Tray

icon 속성값은 기본으로 제공되는 시스템 아이콘을 사용하거나 URL 값을 설정할 수 있습니다. 예제에서는 넥사크로 아이콘 이미지(ico 파일)를 사용했습니다.

3

onrbuttonup 이벤트 함수를 아래와 같이 추가합니다.

"PopupMenu00"은 다음 단계에서 만들 PopupMenu 컴포넌트 id 값입니다. 트레이에서 마우스 오른쪽 버튼을 클릭했을 때 메뉴가 표시되도록 합니다.

this.Tray0_onrbuttonup = function(obj:nexacro.Tray,e:nexacro.MouseEventInfo)
{
    var pdivWigetMenu = obj.items[obj.findItem("PopupMenu00")];
    pdivWigetMenu.trackPopup()
};

4

트레이 아이콘 아래에 PopupMenu 창에서 추가하기 버튼을 클릭합니다.

5

PopupMenu00 항목을 선택하면 오른쪽 속성창에서 innerdataset을 설정할 수 있습니다.

captioncolumn, idcolumn 항목은 "Widget", "Exit"로 지정하고 levelcolumn 항목은 0으로 지정합니다.

6

속성창에서 Event 아이콘을 선택하면 이벤트 함수를 추가할 수 있습니다. onmenuclick 이벤트 함수를 아래와 같이 추가합니다.

트레이에서 오른쪽 마우스 버튼을 클릭해서 메뉴를 표시하고 메뉴 항목을 선택했을 때의 동작을 지정하는 코드입니다. "Widget" 항목을 선택했을 때 위젯이 닫혀있는(보이지 않는) 경우에는 위젯을 보여주고 이미 위젯이 표시되고 있는 경우에는 로그만 기록합니다. "Exit" 항목을 선택한 경우에는 앱을 종료합니다.

this.Tray0_PopupMenu00_onmenuclick = function(obj:nexacro.TrayPopupMenu,e:nexacro.MenuClickEventInfo)
{
    if(e.id == "Widget")
    {
        var widgetFrame = nexacro.getPopupFrames()["NewWidget"];
        if(widgetFrame.visible)
        {        
            trace(widgetFrame);        
        }
        else
        {
            widgetFrame.set_visible(true);
        }

    }
    else if(e.id == "Exit")
    {
        nexacro.getApplication().exit();
    }
};

7

위젯 폼(WidgetMain1)에서 버튼 클릭 시 발생하는 이벤트 스크립트를 수정합니다.

트레이에서 메뉴 선택 시 매번 새로 위젯 화면을 생성하지 않고 visible 속성값만 수정해서 표시 여부만 변경합니다. 그리고 위젯이 닫힐 때 트레이 영역에 메시지를 표시하도록 코드를 추가했습니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
    //this.close();
    this.parent.set_visible(false);
    nexacro.getApplication().trays["Tray0"].showBalloonTip("information", "Info", "Widget Close");
};

8

툴바에서 실행옵션으로 NRE를 선택하고 Launch 아이콘을 클릭하거나 단축키 (Ctrl + F5)를 입력하고 윈도우 화면 오른쪽 아래에 트레이가 정상적으로 표시되고 오른쪽 마우스 버튼 클릭 시 메뉴가 표시되는지 확인합니다.