The Omnis Studio 10.2 release (Nov 2020) provided many new features and enhancements to make it easier and quicker for you to create JavaScript web & mobile applications, together with many visual and design oriented updates to enhance the appearance and improve the UX of your apps. Previous posts on the Blog have summarized these features, but today we focus on JS Themes and SVG icons, which together allow you to provide a consistent color scheme and improve the design of your web & mobile apps.
Theme your web & mobile apps
A JS Theme allows you to apply a consistent set of colors to all forms and controls throughout your library. Omnis provides a number of themes which you can use to style your JS web & mobile applications: a default theme, which provides an effective and pleasing UI across all JS controls and devices, and a number of other light and dark themes, to provide a pleasing color scheme for different types of application, such as health or a professional style. (Note you should not confuse JS Themes with IDE themes which control the colors used in the Code Editor and are set in the Studio Browser.)
- You can change the current theme by pressing Ctrl/Cmnd + J from a remote form design form.
- Changing the design-mode theme updates all open design forms immediately and sets the theme for all the remote forms & JS components in your library. The following image shows the JS Theme selector (on the left) and the JS Split button example library (found in the Hub in the Studio Browser) and the ‘ICE’ theme is selected – note the use of SVG icons on some of the buttons
- The design-mode theme can be changed in the Ctrl-J dialog (as above), and the theme setting is stored in the $root preference $javascripttheme which you can change in the Property Manager
A theme contains a set of standard colors that are applied the controls and text in a remote form. For example, you can apply a theme color to the $backcolor and $bordercolor properties of a Split button control (as above) – and as the theme is changed in design mode the color of the Split button is changed automatically.
Setting the theme in the JS client
The JS theme can be set in design mode but you can also set the theme in the client using the “settheme” client command.
- New $clientcommand – “settheme”
- Do $cinst.$clientcommand(“settheme”, row ( “dark”))
- Changes the theme for this client, and requires a reload of the page to take (we plan to make this instant in the future)
- Client’s current theme comes through to the form’s ‘$construct’ row parameter.
The theme is set in the HTML file containing the remote form:
- A page’s HTML file includes a data-themename attribute, specifying the default theme
- Testing (Ctrl/Cmd+T) a form regenerates the HTML file, and sets the client’s default theme to be the current $javascripttheme
- (Replaces “_JT_” in the jsctempl.htm file)
Check out the online docs for more information about editing JS Themes and using them in your web & mobile applications: https://omnis.net/developers/resources/onlinedocs/WebDev/03jscomps.html#js-themes
Using SVG images for Icons
The style and usability of your applications is greatly enhanced by the colors and graphics you use, including the icons you use for the buttons, controls, toolbars and navigation. Omnis Studio 10.2 supports SVG icons for JS client controls (and window class controls), so they can be scaled to any size (therefore only one icon file is needed for all icon sizes), and for the JS client SVG icons can be “themed”, that is, the icons can be colored using the current JS theme and will change automatically as the theme changes.
- SVG icons for JavaScript components can be tinted to fit the color in the current theme (the ability to theme SVGs for window is coming in the next release).
- A single icon can be rendered in any color (and scaled to any size).
- Themeable icons are matched to the hex color.
- There is a tool (in Add-ons>Web client tools) to convert standard SVGs to our ‘Themed’ format.
- We provide an iconset of over 100 ‘material’ icons that have been ‘themed’ which you can use in the JS client (subject to the relevant license terms)
- A SVG icon is added to a control as before by specifying the $iconid property and selecting an icon from the Select Icon dialog
- The ‘material’ icons can be scaled to ‘fit’ the standard sizes (16×16, 32×32, 48×48) and any other sizes can be added
Read more about using SVG icons in your web & mobile apps here: https://omnis.net/developers/resources/onlinedocs/WebDev/03jscomps.html#svg-icons
More information about Omnis Studio 10.2
For more information about the Omnis Studio 10.2 release, see our website: https://www.omnis.net/platform/omnis-studio-10/