Class idx.mobile.deviceTheme

This module detects the user agent of the browser and loads the appropriate theme files. It can be enabled by simply requiring dojox/mobile/deviceTheme from your application, or it can be loaded directly before dojo.js is loaded; THE SECOND APPROACH IS STRONGLY RECOMMENDED because loading this module via require/define can lead to timing/loading issues which causes widgets to initialise before the applicable CSS is loaded and applied, and layout problems can ensue.

You can also pass an additional query parameter string, device={theme-id}, to select a specific theme through the browser URL input. The available theme-ids are "oneui-android" and "oneui-ios". The names are case-sensitive. If the given theme-id is not recognised, the "oneui-ios" theme is used.

• http://your.server.com/yourapp.html // automatic detection
• http://your.server.com/yourapp.html?theme=oneui-android // forces Android variant of One UI theme

To simulate a particular device, the user agent may be overridden by setting dojoConfig.mblUserAgent.

By default, an all-in-one theme file (e.g. themes/oneui-ios/oneui-ios.css) is loaded. The all-in-one theme files load style sheets for all the dojox/mobile and idx/mobile widgets regardless of whether they are used in your application or not. If you want to choose what theme files to load, you can specify them via dojoConfig as shown in the following example:

• data-dojo-config="mblThemeFiles:['dojox/base','dojox/Button','idx/About']"

In the case of this example, if iphone is detected, for example, the following files will be loaded:

• idx/mobile/themes/oneui_ios/dojox/base.css
• idx/mobile/themes/oneui_ios/dojox/Button.css
• idx/mobile/themes/oneui_ios/idx/About.css

Note that theme files for widgets included in dojox/mobile should be prefixed with "dojox/" while theme files for widgets included in idx/mobile should be prefixed with "idx/". If the path prefix is omitted, "dojox/" will be added automatically to provide compatibility with the config parameters for dojox/mobile/deviceTheme.

If you want to load style sheets for your own custom widgets, you can specify a package name along with a theme file name in an array.

• ['dojox/base','idx/About',['com.acme','MyWidget']]

In this case, the following files will be loaded:

• idx/mobile/themes/oneui_ios/dojox/base.css
• idx/mobile/themes/oneui_ios/idx/About.css
• com/acme/themes/oneui_ios/MyWidget.css

If you specify '@theme' as a theme file name, it will be replaced with the theme folder name (e.g. 'oneui_ios'). For example,

• ['@theme',['com.acme','MyWidget']]

will load the following files:

• idx/mobile/themes/oneui_ios/oneui_ios.css
• com/acme/themes/oneui_ios/MyWidget.css

Defined in: <idx\mobile\deviceTheme.js>.

Constructor Summary

Constructor Attributes	Constructor Name and Description
	idx.mobile.deviceTheme() Automatically loads an applicable variant of the One UI theme.

---