Status : Validated

The UI Designer Perspective Panel

The UI can be any type of interface created by the user, which will be used in automation.
These interfaces are mainly popups, from the simplest to the most complicated, integrating powerful and easy-to-use objects.

All interfaces created by this means can be monitored as external applications.

Description

The designer interface proposes a set of objects created by a simple mouse click, and whose parameters can be initialized or modified at any time.
The interface rendering is also updated with each modification, allowing faster setting of interface parameters.
The main windows of the designer interface are:

  • A treeview showing the popup settings files (.html,.js,.css, …) and the various items in the popup.
  • The design area of the popup. You can add elements to the interface simply by point&click.
  • A window containing the parameters of the object being created or modified.
  • For advanced users, it is possible to open the settings.js file from the treeview, and edit object descriptions directly in Javascript.


All of these objects are described in the SDK.
Each new version of the SDK may introduced new models, objects, or parameters.

Javascript Code Generation

Inserting an object in the designer automatically adds a block of javascript code in the settings.js file
Code

This code contains all the attributes required to create a visual that meets expectations.

Glossary

Treeview window

This treeview comprises settings files and object trees.
Popup.html: the main file to run the page, referring the other files. It behaves like a regular web application.
Popup.js: this file will contain javascript code specific to the page's behavior, and called from the HTML file
Popup.css: like a classic web style sheet, this file allows you to very precisely define the behavior of each element of the page.
Settings.js: contains the javascript code for the objects. Advanced users can edit every object in this file, without using the parameters window.
These files can be edited manually.

Under the previous files, all the items are arranged to create a hierarchical representation of the popup.
Treeview window

Design window

A design zone is provided to build the popup by right-clicking. In addition to the design representation, it is possible to have a test display, as well as a display in real mode simulated under Internet Explorer.
Designer window, design mode onDesigner window, design mode off
Finally, a button lets the user capture the popup created in order to use it in automation.

Editing window

Advanced users can easily adapt each object of the popup by modifying the object's characteristics and checking the rendering in the design window.
Editing window

Parameters window

Double-clicking an item in the treeview window displays the parameters related to that object.
Parameter window
The user can then modify these parameters by entering or selecting a value, or by clicking checkboxes.