With the release of Omnis Studio 10.2 (Nov 10, 2020) we added many new features & enhancements for the JS client, we added some new JS controls, and in general the design interface and end user UX took a massive leap forward – all the enhancements were designed to make it easier and quicker for you to create JavaScript web & mobile applications and allow you to enhance the UX in your apps. At a recent launch event for Studio 10.2, one of our Omnis engineers & JavaScript specialist, Jason Gissing, provided a very nice summary of all the enhancements in the JS client and design tools in Studio 10.2. We have a summary here of main enhancements for JavaScript.
Overview of JS Appearance Enhancements
The enhancements in the JS client provide a refreshed, more modern look.
- Heavily influenced by Google’s Material Design, including layout & color schemes.
- Almost all JS controls had substantial work done by our JavaScript / UX team.
- Subtle animations & feedback effects, such as ripple on clicks, shadows and border focus.
- Touch-friendly sizing of controls, such as buttons, menu lines, grid rows.
- Support for Color Themes, applied to remote forms in a library, new SVG icons can be themed to match text color.
JS Client Themes to coordinate colors across your app
The new themes contain complete color schemes to be applied to JS controls and the form background.
- Themed colors are important to Material Design, including the concept of Primary/Secondary
- Allows controls to have complimentary & consistent colors applied ‘out of the box’.
- Several JS Themes are provided (applied via Ctrl-J when editing a remote form). You can create multiple JS themes and allow clients to switch between them in the app (this currently requires a reload of the page)
- Themed Colors:
- Primary: Main color used throughout the app, could a “Brand color”
- Secondary: Used to accent parts of the UI, but used more sparingly.
- Both have Light and Dark variants.
- Surface: Used for popup menus etc, and paged panes (by default).
- Themed Text Colors: Most theme colors have a …Text color variant.
-
- Primary and PrimaryText
- Text colors set to kColorDefault on a themed background color use the …Text variant.
- This simplifies process of changing colors, and text should always be legible.
- Theme Files
- Themes are defined by <theme name>.json files in html/themes.
- Contain the values for the various theme colors, and Omnis generates a <theme name>.css file from this.
- When deploying to a web server the themes folder, with .json & .css files, should be copied to the web server.
JS Client Theme Editor
The Theme Editor allows you to create new themes (open an existing one and ‘Save as’ then edit colors).
- Simplifies creation/editing process.
- Gives a visual representation of the colors
- Clicking on colored areas in the editor (on the right) allows quick editing of the contextual color
To create a consistent color scheme for your Web & Mobile apps you might like to use the Google Material Design Color Tool: https://material.io/resources/color
Scalable and Themeable SVG Icons
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 sizes), and for the JS client they can colored using the current JS theme.
- SVG icons which follow our specific format can be tinted to fit the color in the current theme.
- A single icon can be rendered in any color (and 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 your apps (subject to the relevant license terms)
Using Theme Colors in remote form design
The color picker in the Property Manager has been updated to cater to Theme colors making it easier to apply consistent colors across your app.
- The Color Picker has a new tab for theme colors
- Allows you to choose theme colors directly
- New kJSThemeColor… constants
- Color properties set to kColorDefault will use a theme color.
- Determined by the individual control & property.
- The theme for a remote form is selected by pressing Ctrl/Cmnd + J from a design form to open the JavaScript Theme selector dialog.
- Changing the design-mode theme updates all open design forms immediately
- The design-mode theme is controlled by $root.$javascripttheme
Setting the JS Theme in the client
- 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)
- 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 a future)
- Client’s current theme comes through to the form’s ‘$construct’ row parameter.
New ‘Web Preview’ Remote form design view
Remote Form design view in Studio 10.2 now runs in OBrowser (Chromium) giving you a true WYSIWYG view of your remote web forms and all components.
- Runs the JS Client and renders exactly as it will in a client browser
- Even custom CSS etc
- JSON-defined controls render now
- Third-party controls no longer need C++ paint code
- Position Assistance (using feint lines drawn automatically) has been added to align objects precisely, replaces the design grid ($showgrid), and Rulers no longer supported.
- HTML control has $showruntimepreview to render in design mode
For more information about the Omnis Studio 10.2 release, see our website: https://www.omnis.net/platform/omnis-studio-10/