The following development hints assume that the basic setup for a mobile application and loading of the appropriate version of the One UI mobile theme have been done.

Creating a header for a view

This is simply achieved using a regular dojox/mobile/Heading. All of the usual properties of the Heading (e.g. 'label', 'back', etc.) may be used as normal. For example:

<div data-dojo-type="dojox/mobile/ScrollableView" data-dojo-props="selected: true">
  <div data-dojo-type="dojox/mobile/Heading" data-dojo-props="label:'Product name', fixed:'top'">
  </div>
    ...
</div>

Buttons in a header

Back button

A back button may be included in a Heading by setting the 'back' property, as normal. The One UI iOS theme will render it with text, whilst the One UI Android theme will render it as a left-facing chevron without text.

<div data-dojo-type="dojox/mobile/ScrollableView" data-dojo-props="selected: true">
  <div data-dojo-type="dojox/mobile/Heading" data-dojo-props="label:'Some view', back:'Back', moveTo:'id_mainView', fixed:'top'">
  </div>
    ...
</div>

ToolBarButtons

Buttons (both iconic and textual) may be placed in a Heading by including ToolBarButtons within it. These may be floated left and right as required, and will by styled appropriately by the One UI theme.

<div data-dojo-type="dojox/mobile/ScrollableView" data-dojo-props="selected: true">
  <div data-dojo-type="dojox/mobile/Heading" data-dojo-props="label:'Product name', fixed:'top'">
    <span data-dojo-type="dojox/mobile/ToolBarButton" data-dojo-props="icon:'mblDomButtonIdxHeadingSearchIcon'" style="float:right;"></span>
    <span data-dojo-type="dojox/mobile/ToolBarButton" data-dojo-props="label:'Cancel'" style="float:left;"></span>
  </div>
    ...
</div>

Icons

The One UI IDX toolkit defines several CSS classes that are intended to be used with the 'icon' property of ToolBarButtons in order to set the icon for them. They are:

Tabs in a header

Tabs can be created in a Heading by including a dojox/mobile/Tabbar in it. Because the designs of iOS and Android tabs vary so much it is necessary to create each in a slightly different way: iOS tabs need to be created using a 'segmentedControl' type of TabBar and explicitly centered using a dedicated <div>, whereas Android tabs just need to be created using the 'flatTab' type of TabBar. For example:

<div data-dojo-type="dojox/mobile/View">
  <!-- Heading. --> 
  <div class="iosOnly" data-dojo-type="dojox/mobile/Heading" data-dojo-props="fixed:'top'">
    <div class="tabletOnly" style="position:absolute; width:100%; height:100%; text-align:center; z-index:1">  
      <div data-dojo-type="dojox.mobile.TabBar" data-dojo-props="barType:'segmentedControl'">
        <div data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props='selected:true'>First view</div>
        <div data-dojo-type="dojox.mobile.TabBarButton">Second (long titled) view</div>
        <div data-dojo-type="dojox.mobile.TabBarButton">Last view</div>
      </div>
    </div>  
  </div>
  <div class="androidOnly" data-dojo-type="dojox/mobile/Heading" data-dojo-props="fixed:'top', label:'Tabs'">
    <div class="tabletOnly" data-dojo-type="dojox.mobile.TabBar" data-dojo-props="barType:'flatTab', center:false">
      <div data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props='selected:true'>First view</div>
      <div data-dojo-type="dojox.mobile.TabBarButton">Second (long titled) view</div>
      <div data-dojo-type="dojox.mobile.TabBarButton">Last view</div>
    </div>
  </div>
  
  <!-- Content. -->
  <div data-dojo-type="dojox/mobile/ScrollableView" data-dojo-props="selected:true">
    ...
  </div>
</div>

Note:

  1. The outer view contains two Headings - one which is shown as part of the iOS UI and the other for Android.
  2. The iOS TabBar is wrapped in an absolutely positioned <div> that is the same size as the Heading and which centers the segmented TabBar absolutely within the Heading (ignoring any other content to the left and right).
  3. The iOS TabBar is a segmentedControl whereas the Android one is a flatTab
  4. The Android TabBar does not need an enclosing <div> to center it, and it has 'center:false' set so that the tabs align on the left.
  5. The CSS within the One UI IDX toolkit iOS and Android themes will style the TabBars appropriately (and differently) for each platform.

Drop-down menus

Drop-down menus that are related to ToolBarButtons in a Heading (including Andoid 'spinner's) can be implemented using dojox.mobile.ToolTips and dojox.mobile.EdgeToEdgeLists. The tooltip should have a class of 'mblIdxHeadingDropDown' set so that the One UI IDX CSS can style it appropriately for iOS or Android. ToolBarButtons that display menus should normally have their 'toggle' property set to true, so that they can be given some visual highlighting whilst the menu is showing.

Unlike the dijit framework, the dojox.mobile framework does not have any explicit support for menus. Therefore, it is the responsibilitly of the application to orchestrate the showing and hiding of menus and their positioning in response to UI events. A crude example of this can be found in the header testcase in /idx/mobile/tests/test_Header.html.

<div class="mblIdxHeadingDropDown" id="id_menu_1" data-dojo-type="dojox/mobile/Tooltip">
  <ul data-dojo-type="dojox/mobile/EdgeToEdgeList">
    <li data-dojo-type="dojox/mobile/ListItem" data-dojo-props='moveTo:"id_view_1"'>View 1</li>
    <li data-dojo-type="dojox/mobile/ListItem" data-dojo-props="clickable:true" onClick="foo()">Action 1</li>
  </ul>
</div>

Android split action bars

When there are too many actions to fit in the main Heading then Android UIs sometimes us a 'split action bar'. This can be implemented using a dojox.mobile.TabBar. The TabBar should have a class of 'mblIdxHeadingSplitActionBar' set so that the One UI IDX CSS can style it appropriately.

<div class="androidOnly phoneOnly mblIdxHeadingSplitActionBar" data-dojo-type="dojox/mobile/TabBar" data-dojo-props="fixed:'bottom'">
  <span data-dojo-type="dojox/mobile/TabBarButton" data-dojo-props="icon:'mblDomButtonIdxHeadingSplitShareIcon'" onClick="foo()"></span>
  <span data-dojo-type="dojox/mobile/TabBarButton" data-dojo-props="icon:'mblDomButtonIdxHeadingSplitUserIcon'" onClick="bar()"></span>
  <span data-dojo-type="dojox/mobile/TabBarButton" data-dojo-props="icon:'mblDomButtonIdxHeadingSplitOverflowIcon'" onClick="baz()"></span>
</div>

Icons

The One UI IDX toolkit defines several CSS classes that are intended to be used with the 'icon' property of TabBarButtons in order to set the icon for them. They are:

Android spinners

Android UIs sometimes make use of a 'spinner' control in the Heading that combines the view title with a small down arrow indicator and which displays a menu when clicked. This can be implemented using a dojox.mobile.ToolBarButton. The ToolBbarButton should have a class of 'mblIdxHeadingSpinner' and have its 'toggle' property set to true. If a spinner is used then the title of the Heading should be removed (set to '') as the text of the spinner substitutes for it.

<script>
  var useSpinner = (dojox.mobile.currentTheme === "oneui_android");
  if(useSpinner) {
    registry.byId("id_heading").set("label", "");
  }
</script>	
  ...		
<div id="id_heading" data-dojo-type="dojox/mobile/Heading" data-dojo-props="label:'Product name', fixed:'top'">
  <span id="id_spinner" class="androidOnly mblIdxHeadingSpinner" data-dojo-type="dojox/mobile/ToolBarButton" data-dojo-props="toggle:true">Product name</span>
    ...
</div>