Widgets are small UI tools that are always displayed on the screen for monitoring real-time information, such as clock or CPU status. In the Nexacro, widget UI can be implemented by opening a new window with a transparent layer.
Creating a Simple Calendar Widget
1
Create a new project. Select the Full type from Frameset Template.
2
Add the Button component to the Form_Work form and create the onclick event function as shown below.
The layered property is a property that sets the background window to be transparent when creating ChildFrame. By setting this property value to true, you can display a background image of the desired shape on the screen.
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 border='0px none'",
0, 0);
};The WidgetMain1.xfdl form is a form that will be displayed in the widget form. As only necessary UI is exposed in the widget form, the taskbar, title bar, and status bar are processed to be invisible in the OpenStyle parameter setting. Then, set the topmost property value to true to ensure that it is not covered by other programs.
3
Create a new Form object with the name of WidgetMain1.
4
On the ResourceExplorer tab, select ImageResource, and select "Import" from the Context menu.
Import a transparent image file to be used as the background image. For example, if it is a circular shape, only the circle is displayed with the background area being displayed transparently. In the example, the image below was used.
https://pixabay.com/en/book-character-glasses-show-1773756/
5
Select the transparent image file as the imageurl property value in the background property of the Form object and then set the background-color property value to transparent.
6
Resize the Form object to fit the transparent image file and then place the Calendar component in the desired position.
Set the type in the Calendar component to "monthonly."
7
Select NRE as the execution option from the toolbar and click the Launch icon or enter the shortcut key (Ctrl + F5) to run the app.
When running Launch, the widget function cannot be used in web browsers other than NRE.
8
When you click the button in the app, the widget UI created with WidgetMain1 is displayed on the screen.
9
You can drag the non-transparent background image area with the mouse to move it to the desired position.
If you click the transparent background image area, then you cannot change the position of the widget by dragging it with the mouse as the focus moves to the window shown at the back.
If you click the individual component, then you cannot change the position of the widget by dragging it with the mouse as the individual component needs to operate.
Creating a Widget that Runs Immediately
In the previous example, the widget UI appeared when the main form was executed and the button was clicked. In this example, we will create a widget that runs immediately (or appears to do so) without user input.
1
Create the oninit event function in the Form_Work form that was used in the previous example as shown below.
this.Form_Work_oninit = function(obj:nexacro.Form,e:nexacro.EventInfo)
{
nexacro.getApplication().mainframe.visible = false;
nexacro.open("NewWidget",
"FrameBase::WidgetMain1.xfdl",
this.getOwnerFrame(), "",
"showontaskbar=false showtitlebar=false showstatusbar=false topmost=true layered=true border='0px none'",
0, 0);
};2
Add the Button component for closing the widget to the widget form (WidgetMain1).
In the previous example, when the main form is closed, the widget is closed with it but as the title bar is not displayed on the widget, a separate close button needs to be created.
3
Add the Button component and then create the onclick event function as shown below.
this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
this.close();
};4
Select NRE as the execution option from the toolbar and then click the Launch icon or enter the shortcut key (Ctrl + F5) to run the app.
As the app runs, the open method is executed while making the mainframe invisible, resulting in only the widget UI being displayed on the screen. Click the [CLOSE] button to close the widget UI.
Controlling the Widget in the Tray
Having the widget displayed on the screen may interfere with any other tasks you are performing. In that case, you can hide the widget for a while and then make it visible again. You can register the tray in the app and control widgets from the tray.
1
Select the App in the Project Explorer and select the [Add > Tray] item from the context menu.
2
Select the tray icon and then set the icon, tooltip property values in the property window.
icon: "application" tooltip: Nexacro Widget Tray
For the icon property value, you can use the system icon provided by default or set the URL value. In the example,
3
Add the onrbuttonup event function as shown below.
"PopupMenu00" is the PopupMenu component id value to be created in the next step. It makes the menu appear when right-clicking on the tray.
this.Tray0_onrbuttonup = function(obj:nexacro.Tray,e:nexacro.MouseEventInfo)
{
var pdivWigetMenu = obj.items[obj.findItem("PopupMenu00")];
pdivWigetMenu.trackPopup()
};4
Click the add button in the PopupMenu window underneath the tray icon.
5
Select the PopupMenu00 item to set innerdataset in the property window to the right.
Specify the captioncolumn, idcolumn items as "Widget", "Exit" and the levelcolumn item as 0.
6
By selecting the Event icon from the properties window, you can add event functions. Add the onmenuclick event function as below.
This code specifies the operation when the menu item is selected by right-clicking with the mouse cursor on the tray. When the "Widget" item is selected, the widget is displayed if the widget is closed (invisible), and only the log is recorded if it is already displayed. When the "Exit" item is selected, the app will be closed.
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.visible = true;
}
}
else if(e.id == "Exit")
{
nexacro.getApplication().exit();
}
};7
Modify the event script that occurs when the button is clicked on the widget form (WidgetMain1).
When selecting the menu in the tray, do not create a new widget screen every time, but rather only modify the visible property value to change whether to display or not. Then, add the code to display a message in the tray area when the widget is closed.
this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
//this.close();
this.parent.visible = false;
nexacro.getApplication().trays["Tray0"].showBalloonTip("information", "Info", "Widget Close");
};8
Select NRE as the execution option from the toolbar and then click the Launch icon or enter the shortcut key (Ctrl + F5) to check if the tray is displayed normally in the lower right corner of the window screen, and check that the menu is displayed when right-clicked.