Using the Javascript ClientSettings Object

Javascript ClientSettingsPreviously, 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:

CursorVisibleUsed to set the mouse pointer to ‘show’ or ‘hide’.
Type: Boolean
Default value: True
Available from VirtualUI Library (app code): True
MouseMoveGestureStyleDefines 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
MouseMoveGestureActionIndicates 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
UseViewportSizeIndicates 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
DockMenuManages  the bottom menu’s visibility.
Type: JSON Structure
Available from VirtualUI Library (app code): False
EnabledEnables/disables the complete Dock Menu.
Type: Boolean
Default value: True
PinnedIndicates when the DockMenu is pinned (visible, fixed) or unpinned (with autohide)
Type: Boolean
Default value: False
ItemsName/value pairs item collection.
WindowListEnables/disables the “Windows list” option.
Type: Boolean
Default value: True
ErrorReportingEnables/disables the “Error Reporting” option.
Type: Boolean
Default value: True
KeyboardEnables/disables the “Keyboard” option (mobile only).
Type: Boolean
Default value: True
FullScreenEnables/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 ValueApp ValueJavascript ValueFinal Value
1nonenull1
12null2
1none33
1233

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.

Comments (2)

Why is UseViewportSize NOT available in VirtualUI Library (app code)? It should be.
Maybe DockWindow as well.

Leave a comment