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

간단한 달력 위젯 만들기

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로 지정합니다.

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

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

바로 실행되는 위젯 만들기

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

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);
};

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

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

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

트레이에서 위젯 제어하기

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

icon: "application"
tooltip: Nexacro Widget Tray

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

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

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

트레이에서 오른쪽 마우스 버튼을 클릭해서 메뉴를 표시하고 메뉴 항목을 선택했을 때의 동작을 지정하는 코드입니다. "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();
	}
};

트레이에서 메뉴 선택 시 매번 새로 위젯 화면을 생성하지 않고 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");
};