Widget is a small application and has a strong point that it can be re-deployed per the user’s taste. In the general application, the Interface which deploys its area to all screen Forms in the big framework. But in Widget, each of the screen Forms is executed independently and can be deployed as the user wants.
Widget is mainly used for the following uses:
When the enterprise business are requested to the operators for the automatic business procedure due to the direction from outside or the changed information
For The business by the individual’s schedule and the natural linkage with the related business screens
For registering or deleting the screens which are used frequently to Widget
Use of Widget as the new generation’s Enterprise Portal
For Popup of the business screens which use the Push function like securities, agents, weather, news, lifestyle information, calendar, clock, etc. And for the use of Alarm.
Overview of Widget
Widget can implement the screen UI just with Form without MainFrame.
Composition of Widget
While the UI screen of the general applications is made with the combination of Frame and Form, that of Widget is made with the combination of Form and Background Image.
With the following figure, it can be understood more easily.
Limitations of Widget Form
Since the Form used at Widget must have the image of background, the value for style.background.color of Form itself must be set with “transparent”. Only with this condition, the image of background is output normally.
Widget and Layered Function
The Layered function is the function that makes the UI screen have the area just as much as the image.
With the following figure, it can be understood more easily.
Especially, for Widget, its screen has mostly various shapes not the square one. Therefore, this Layered function is used mostly.
For the Layered function, the image of background must be transparent. If not, the image of the base square area is regarded as the image and the layered function can’t be used properly.
Way to Make Widget
XPLATFORM provides three ways to make Widget.
Making with Widget Project
It is the development way just only with Widget.
Without MainFrame, only Widget is used. Therefore, without the general applications, only Widget is used when the user’s screen is composed.
Making Widget at the general Project
It is the development way when there is the screen for the general application and Widget is used additionally.
It is used when MainFrame and Widget coexist and provide the various UI.
Making Widget with script
It is used when Widget is made dynamically.
These three ways to make Widget will be dealt more in detail at the next chapter.
Making with Widget Project
It is used when the screen is composed just with Widget but without the screen for the general applications.
Generation of Widget Project
From the start of generating the project at UX-Studio, the project must be generated by Widget Project.
The 1st Stage: Selection of Widget Project
HTML5 doesn’t support Widget.
Registration of the Image of background
After the generation of Widget Project, register first the image that Widget will use. Since when Form is generated, the image of background is asked for the connection, it has better register first.
The 1st Stage : Registration of the image of background At Project Explorer, register the image at GlobalVariables as the screen below. Here, the registered image is used as the image of background when Widget is generated.
The 2nd Stage : Check the registered image. Check the registered image at GlobalVariable at the Project Explorer window.
This image is the image whose background is handled to be transparent.
Registration of Widget Form
Now, generate Form. When Widget Form is generated, automatically Widget is registered at ADL.
The 1st Stage : Generation of Widget Form The following screen is the screen that Form is generated and the first one is the same as that of the generation of the general form.
Next screen is the same as that of the generation of the general form.
Next screen is the same as that of the generation of the general form. But it must be set just with the consideration of the size of Form to the image of background.
Next screen is different from the general form creation. Set as follows.
The 2nd Stage: Setting of Widget Form The following is the Editor screen of Form generated at the 1st stage. On this screen, the image of Background is not shown.
The reason why the image of background is not shown is that the base color of Form covers it and therefore, it is not shown.
In order to show the image of background, the style of Form must be handled to be transparent.
Set the Property value for Form as follows:
The 3rd Stage: Development of Widget Form The following is made to the Login screen by simply using Components at Form. Here, when the Cancel button is clicked, implement Event Function that makes Widget finished.
The followings are coded to Click Event Function of the “Cancel” button:
function Button01_onclick(obj:Button, e:ClickEventInfo)
{
exit(); // close() is not used but exit() is used.
}Here, the difference between exit() and close() is that exit() finishes the application of Widget itself and close() just finishes Widget Form. If close() is used, Process of the application remains at the memory.
Execution of Widget
When Widget is executed at UX-Studio, it can’t be executed by “Quick View”. It must be done by “Launch Project”.
This screen is the one that Widget is executed on Web Browser. As shown, between the images that are handled to be transparent, the screen of Web Browser is shown.
Check Widget Registered at the Application
When the development is completed, Widget is registered automatically at ADL.
The following is the information about Widget registered to ADL at the Project Explorer window.
At [Project > ADL > Widgets> Widget0] registered automatically. Definitely, on this screen, the setting can be changed.
The followings are the major Property value for Widget:
Name | Description |
|---|---|
visible | Determines if Widget will be shown or not. The default is true. |
id | ID of Widget registered at ADL. It is used mainly to approach to Script. |
background image | The Path value for Image registered is set. |
formurl | The url value for form generated is set. |
layered | It is whether to use layered or not. The default is true. |
Making Widget at the General Project
The method to generate Widget at the general Project is the same as that described in “Making with Widget Project” except “Generation of Widget Project”.
In other words, the Project itself is made by the general program first and after that, with the execution described from “Registration of the Image of background” to “Check Widget Registered at the Application” Widget can be registered.
Making Widget with Script
Most Widgets are generated and registered by using the Wizard function of UX-Studio. Actually, all of the example screens at “Overview of Widget”are the Wizard screens.
But when necessary, Widget needs to be generated dynamically. Here, the way to make Widget dynamically by using Script is described.
Preparation for Generation of Dynamic Widget
Prior to the generation of dynamic Widget, two of the followings must be prepared:
Prepare the image of background for the use of Widget.
Register Image with the same method as the one at “Registration of the Image of background”.
Generate Form for the use of Widget.
Generate Form that will be used at Widget. Since it is not generated for the use of Widget, it is not the state that Widget is registered at ADL.
Generation of Dynamic Widget with Script
To generate Widget with Script means that actually the activity that Widget Object is generated and Form and the image of background are registered at this generated Object is handled at Script.
The 1st Stage: Generate Widget Object and connect image and Form.
newWidget = new Widget(); // generation of widget Object
// set the initial value to the generated Widget Object.
// the name of Widget Object is “Widget1”.
// the left coordinates on the screen which will be shown at Widget are 10.
// the top coordinates on the screen which will shown at Widget are 100.
// Form url that Widget uses is "Base::Sample2.xfdl".
// Image of background that Widget uses is "image::widget.png".
newWidget.init("Widget1",10,100,"Base::Sample2.xfdl","image::widget.png");For more detailed method, refer to XPLATFORM Reference Guide.
The 2nd Stage : Register Widget Object at ADL.
Register Widget Object which was generated at the 1st stage at ADL.
application.addWidget("widgetID", newWidget);When Form for the use of Widget with Wizard at UX-Studio, it is registered automatically. The result of registration is checked as it is done at “Check Widget Registered at the Application”. But when it is registered dynamically, it couldn’t be checked at UX-Studio.
Output Widget on the Screen.
Show the generated Widget on the screen.
newWidget.show();
Delete Widget Object.
Destroy Widget Object.
newWidget.destroy(); newWidget = null;
Approaching to Widget with Script
Widget Object generated dynamically can be approached by the following methods on Script:
application.widgets[index];
application.widgets(index);
application.widgets["id"];
application.widgets("id");Here the approachable Widget Objects can approach to not only the dynamically generating objects but also objects generating with Wizard.