Previously, we presented you with an article about ClientSettings, an additional interface available in the Thinfinity VirtualUI Library. This interface allows developers to know and programmatically define, from their own software applications, some browser environment layout, and behavior settings. In this post, we are presenting the Javascript version of ClientSettings.
The ClientSettings interface, first available in all the Thinfinity VirtualUI supported programming languages (Visual Basic, C++, C#, Delphi, etc.), can now be added in Javascript to the app.html page to define and override environment and layout preferences as in the application side (from Visual Basic, Delphi, etc.), or to define the layout and behavior of some of the VirtualUI web interface additional elements.
In Javascript, ClientSettings is available as a Thinfinity.VirtualUI class attribute:
var vui = new Thinfinity.VirtualUI();
var clientSettings = vui.ClientSettings;
All ClientSettings attributes have a default value that determines the typical behavior in each case. Developers can change it by setting new values to these attributes before the connection starts.
The table below shows a detailed reference of the ClientSettings current properties:
| CursorVisible | Used to set the mouse pointer to ‘show’ or ‘hide’. Type: Boolean Default value: True Available from VirtualUI Library (app code): True |
||||
| MouseMoveGestureStyle | Defines whether the mouse movement is read as relative or absolute in touch devices. Type: Enum Values: MM_STYLE_RELATIVE = 0 MM_STYLE_ABSOLUTE = 1 Default value: MM_STYLE_RELATIVE Available from VirtualUI Library (app code): True |
||||
| MouseMoveGestureAction | Indicates if dragging should be interpreted as scrolling or turning of the mouse wheel, affecting only the item on which the action is triggered. Type: Enum Values: MM_ACTION_MOVE = 0, MM_ACTION_WHEEL = 1 Default value: MM_ACTION_MOVE Available from VirtualUI Library (app code): True |
||||
| UseViewportSize | Indicates which measure values will be used to define the application’s screen size. Type: Boolean Values: True: use the viewport size False: use a window screen based size. Default value: False Available from VirtualUI Library (app code): False |
||||
| DockMenu | Manages the bottom menu’s visibility. Type: JSON Structure Available from VirtualUI Library (app code): False |
||||
| Enabled | Enables/disables the complete Dock Menu. Type: Boolean Default value: True |
||||
| Pinned | Indicates when the DockMenu is pinned (visible, fixed) or unpinned (with autohide) Type: Boolean Default value: False |
||||
| Items | Name/value pairs item collection. | ||||
| WindowList | Enables/disables the “Windows list” option. Type: Boolean Default value: True |
||||
| ErrorReporting | Enables/disables the “Error Reporting” option. Type: Boolean Default value: True |
||||
| Keyboard | Enables/disables the “Keyboard” option (mobile only). Type: Boolean Default value: True |
||||
| FullScreen | Enables/disables the “Full Screen” option (for mobile devices only, if supported). Type: Boolean Default value: True |
||||
How to Use the Javascript ClientSettings Object
This example shows how to hide the mouse pointer, force the DockMenu visibility and remove the “Error Reporting” icon from the DockMenu. Just write the following code in the app.js file ( Inside C:\ProgramFiles\Thinfinity\VirtualUI\web\ folder) after the Thinfinity.VirtualUI object creation:
var vui = new Thinfinity.VirtualUI();
var clientSettings = vui.ClientSettings;
clientSettings.CursorVisible = false;
//attributes only available in Javascript
clientSettings.DockMenu.Pinned = true;
clientSettings.DockMenu.ErrorReporting = false;
// end clientSettings
...
ClientSettings Applying Order
As some ClientSettings values can be applied both on the browser side and the application, we need to define an applying order:
- A value set in the application overrides the default attribute value.
- Any value set in the Javascript always overrides any other value.
So that Thinfinity VirtualUI can resolve the final ClientSettings values we decided to set their Javascript defaults to null. In this way, only when the attribute is not null will it override the corresponding value.
The following table explains this behavior for different ClientSettings value combinations:
| Default Value | App Value | Javascript Value | Final Value |
| 1 | none | null | 1 |
| 1 | 2 | null | 2 |
| 1 | none | 3 | 3 |
| 1 | 2 | 3 | 3 |
We hope that by adding ClientSettings to the Javascript library, we are making it easier for you to take advantage of these beautiful tools to modify the browser environment layout and behavior. Don’t forget to contact us and share your experience. We will continue to update this blog with the latest Cybele Software news.
Why is UseViewportSize NOT available in VirtualUI Library (app code)? It should be.
Maybe DockWindow as well.