Adding JavaScript Client forms, CSS, HTML controls or any web page to Omnis desktop apps is very easy in Omnis Studio 10.1. The OBrowser component is a very powerful and flexible component that you can add to your window classes to make your Omnis desktop applications more feature rich and to provide a better user experience. You can use OBrowser to display a web page, or to run HTML based controls in a window class, or using the JS Client Bridge you can even display your JavaScript based remote forms in a window class to enhance your desktop apps!
Using OBrowser
OBrowser allows you to very easily embed a web page or whole website into your thick client windows – in fact, we use it in the Hub in the Studio Browser to display news & info about Omnis Software. Even though the OBrowser control is a fully featured web browser, it is best suited to embedding specific web pages, rather than use as a general purpose, standalone web browser. The OBrowser component is available in the External Components group in the Components Store and can be added to a window class like any other component.
In Omnis Studio 10.1 the macOS version of OBrowser now uses the Chromium Embedded Framework (CEF), which the Windows version of OBrowser already uses, which means OBrowser on macOS now supports the standard OBrowser CEF configuration settings using the cefSwitches configuration item in the config.json (as on Windows).
Displaying a web page
To use the OBrowser component as a standard browser you need to set the $urlorcontrolname property to a full URL with a prefix either http://, https:// or file://, such as ‘https://www.omnis.net’. In design mode this will be a static page, but in runtime the page will behave exactly as expected for a standard browser (although popups are not allowed). As the end user navigates the web page, the read-only property $currenturl contains the URL of the page currently open. The OBrowser component has various methods you can use to control the content, including $forward() and $back(), plus $setdataurl() assigns a data URL to the component. The component also reports various events, including evBrowserOpenUrl, evBrowserStartDownload and evBrowserLoadStateChange. There is an example app using OBrowser under the Samples option in the Hub in the Studio Browser.
OBrowser Configuration
The OBrowser object has a section in Omnis configuration file (config.json) named “obrowser”, including ‘logSeverity’ for configuring error logging, as well as options to control the cache and debugging.
HTML Window Controls
Omnis HTML window controls are HTML based controls that you can add to your window classes – in effect, you can use any browser based technology including JavaScript and CSS to implement an HTML control. In order to add an HTML based control to a window class you need to use the OBrowser component, which in this case can be used to display a single HTML based control in a window class (rather than a web page, as described above). The Omnis HTML controls themselves are located in the ‘htmlcontrols’ folder in the main Omnis Studio folder, and could be any type of control that you have created yourself, or obtained from a third-party such as an open source component.
To add an HTML control to a window class, you need to add the OBrowser object to the window, which is available in the External Components group in the Component Store, and set its $urlorcontrolname property to the name of the control (rather than a web URL) – this property displays a droplist containing the names of all the available controls installed into the htmlcontrols folder in your Omnis development tree.
JS Client Bridge
We created a special type of HTML window control called the JS Client Bridge to allow you to run the JavaScript Client inside OBrowser in a window class. This allows you to create or reuse an existing remote form, that connects over the internet to the Omnis Server, but display it in a desktop app using a window class.
You can download the JS Client Bridge from our GitHub page:
github.com/OmnisStudio/Omnis-JSCBridge