Style

The ./style directory contains named styles that are used by the system to style views.
Styles allow you to set pre-defined properties for views that depend on the device type and current orientation.
Each style file contains a JSON with the following fields:

• name: The name of the style. This must be the same as the file name.
• content: The style itself
  • parent (optional): A parent style. The parent style is used as the basis and all values for this style are merged with it.
  • content: The content style.
    • default: Contains StyleValues that are applied if no other value from landscape or portrait is defined.
    • landscape: Contains StyleValues that are applied if the current device orientation is landscape.
    • portrait: Contains StyleValues that are applied if the current device orientation is portrait.
    • orientation: Defines which orientations are allowed for this style depending on the device type.

Example

In the following example, a simple style is defined that specifies different values for the layout to be used for the view depending on the device orientation and device type.
It is also possible to use a default key instead of portrait, landscape, phone, tab7 and tab12 to set a value that will be treated as the the default value.

{
 "name": "detailViewStyle",
 "content": {
  "parent": "baseStyle",
  "content": {
    "landscape": {
      "layoutName": {
        "phone": "detailViewLandscape",
        "tab7": "detailViewTabLandscape",
        "tab12": "detailViewTabLandscape"
      },
      "backgroundColor": "#FFFFFF"
    },
    "portrait": {
      "layoutName": {
        "phone": "detailViewPortrait",
        "tab7": "detailViewTabPortrait",
        "tab12": "detailViewTabPortrait"
      },
      "backgroundColor": "#FFFFFF"
    },
    "orientation": {
      "phone": "all",
      "tab7": "all",
      "tab12": "all"
    }
  }
 }
}

Orientation

The orientation field is used to specify which orientations are allowed for a view. Possible values are:

• all: All device orienatation are allowed.
• portrait: Only portrait orientation is allowed.
• landscape: Only landscape orientation is allowed.
• portraitSensor: Portrait and portrait upside down orientations are allowed.
• landscapeSensor: Landscape and landscape upside down orientations are allowed.

Style Values

The following table contains all possible values that can be used in a style.

note

For legacy reasons, not all values can be set for the device type.
For example, the backgroundColor must be used directly as in the example.
This is indicated in the table by the Allows Device Type columns.

Key	Type	Description	Default Value	Allows Device Type
"layoutName"	String	The name of the layout to be used.	null	true
"menuWidth"	UnitSize	Indicates that the view should be opened as a side menu and defines the width to be used for the menu.	null	true
"backgroundColor"	Color	Color used for the views background.	null	true
"bottombarBackgroundColor"	Color	Color used for the bottom bar.	null	true
"loadingBackgroundColor"	Color	Color used as a background when the loading indicator is present.	null	true
"loadingSpinnerColor"	Color	Color used for the spinner when the loading indicator is present.	null	true
"statusbarBackgroundColor"	Color	Color used for the background of the status bar.	null	true
"navbarBackgroundColor"	Color	Color used for the nav bar background.	null	true
"navbarDisabled"	Boolean	Indicates if the navigation bar should be disabled.	null	true
"navbarElevation"	Integer	If set, the navigation bar is raised by the given value and a drop shadow is applied to it.	null	true
"navbarHeights"	UnitSize	The height to be used for the navigation bar.	null	true
"navbarLayout"	String	The name of the layout to be used for the nav bar.	null	true
"tabbarBackgroundColor"	Color	Color used for the tab bar backgroung.	null	false
"tabbarBackgroundImageActive"	String	URL to an image to be used as the active image if the view is part of a tab view.	null	false
"tabbarBackgroundImageInactive"	String	URL to an image to be used as the inactive image if the view is part of a tab view.	null	false
"tabbarBackgroundImageActiveScaleType"	ScaleType	ScaleType for the image to be used as the active image if the view is part of a tab view.	null	false
"tabbarBackgroundImageInactiveScaleType"	ScaleType	ScaleType for the image to be used as the inactive image if the view is part of a tab view.	null	false
"tabbarHeights"	UnitSize	The height to be used for the tab bar.	null	true
"tabbarLayout"	String	The name of the layout to be used for the tab bar.	null	true

Usage

When creating a view with the showView action, a named style can be referenced using the namedStyle parameter, as shown in the following example:

{
  "type": "showView",
  "params": {
    "layout": "detailView",
    "staticTemplate": "detailView",
    "namedStyle": "detailViewStyle"
  }
}