NativeTabbar

Enterprise Browser 5.0

Overview

The NativeTabbar methods allow multiple instances of the webview to appear in separate tabs. On Android, the tabs are true Native Tabbar controls, giving the application a native look and feel. On Windows Mobile/CE there are no visible tabs. An application can employ either a Tabbar or a Toolbar, but should not attempt to do both simultaneously. An app can switch between tabs programatically, as shown in the Nativetabbar Tutorial.

IMPORTANT: In EB 2.5 and later, the remove() method is no longer available.

Enabling the API

There are two methods of enabling the NativeTabbar API:

  • Include all ebapi modules
  • Include only the required API modules

For either of these methods, you'll need to include files from the /Enterprise Browser/JavaScript Files/Enterprise Browser directory on the computer that you installed the Enterprise Browser.

Include all JS API modules

To include all JS APIs, copy the ebapi-modules.js file to a location accessible by the app's files and include a reference to the JavaScript file in the app's HTML. For instance, to include the modules file in the app's index.html, copy the file to the same directory as that index.html and add the following line to the HTML's HEAD section:


<script type="text/javascript" charset="utf-8" src="ebapi-modules.js"></script>

Note that the pathing for this file is relative to the current page.

This will define the EB class within the page. Any page you need to use the modules will need to have the .js file included in this fashion.

Include only the required modules

To include single APIs, you must first include the ebapi.js in your HTML as well as the API file you want to use. For instance, to use the NativeTabbar API, I would add the following code to my HTML file(s), assuming the API files have been copied to the same directory as the HTML.


<script type="text/javascript" charset="utf-8" src="ebapi.js"></script>
<script type="text/javascript" charset="utf-8" src="eb.nativetabbar.js"></script>

The ebapi.js file is necessary for all single API inclusions.

Methods

create(ARRAY tabElements, HASH tabBarProperties)

Removes the current tabbar and replaces it with this one. Callback will be called when tab is switched. Whilst the actual number of tabs you can create will depend on the memory available on your device there is an absolute upper limit of 30 tabs in any one application.

Parameters

  • tabElements : ARRAY

    Array of Tab elements.

    • tabElement : HASH

      Properties of Tab elements.

      • label : STRING

        Visible label to display on the tabbar.

      • label : STRING

        Path the Config.xml file containing properties of the tab being created.

      • action : STRING

        URL to page which will be loaded into tab. It may be JavaScript method to call: 'javascript: methodOnTab();'. Or path to html page to load.

      • icon : STRING

        Icon Relative path (from Enterprise Browser application) to local files on the device. Platforms: Win32, Android

      • reload : BOOLEAN Default: false

        When tab is activated - page in tab will be reloaded.

      • selectedColor : INTEGER

        Change the selected color of this tab. On Android this works only if you setup selectedColor for all tabs and also setup backgroundColor for the whole Tabbar. This property change background color on Android according to the platform's UI-style specifications. Platforms: Win32, Android

      • disabled : BOOLEAN Default: false

        Tab will be displayed as disabled. Platforms: Win32, Android

      • backgroundColor : INTEGER

        Background color for tab. Use when your application background color is not white for removing blink during switch tabs. Platforms: Win32, Android

      • useCurrentViewForTab : BOOLEAN Default: false

        Gives a smooth transfer to a newly opened tab from the current view into this Tab and make this Tab active. Only one Tab can have this parameter. Platforms: WM, CE, Win32

      • perishable : BOOLEAN Default: false

        Sets whether this tab is allowed to be destroyed when a memory limit is reached (Windows Mobile) Platforms: WM

      • createOnInit : BOOLEAN Default: false

        Create tab immediately when TabBar is created. Action also will be executed. If false, the tab will be created when it is switched to. Don't use this parameter on the devices with a small amount of RAM. Platforms: WM

      • config : STRING

        Used to specify the path of the config.xml file containing properties to apply at the time of tab creation for a particular tab. Platforms: Android

  • tabBarProperties : HASH

    Properties of TabBar.

    • backgroundColor : INTEGER

      Background color of the tabbar. Platforms: Win32, Android

    • hiddenTabs : BOOLEAN Default: true

      Do not display Tabs with labels. Only hiddenTab=true is currently supported. Platforms: WM

    • createOnInit : BOOLEAN Default: false

      Create tabs immediately when TabBar is created. Action also will be executed. If false, then each tab will be created when first switch to the tab is executed. Don't use this parameter on the devices with a small amount of RAM. Platforms: WM

    • placeTabsBottom : BOOLEAN

      Place TabBar at bottom of screen (default = top). Platforms: Android

  • callback : CallBackHandler

Callback

Async Callback Returning Parameters: HASH

    • tab_index : INTEGER

      New tab index.

    • newTabIndex : INTEGER

      New tab index. Platforms: WM

    • oldTabIndex : INTEGER

      New tab index. If you switched to first activated tab, when oldTabIndex will be -1, which means that there was no old tab index exists. Platforms: WM

    • tabEvent : STRING

      Platforms: WM

      Possible Values :

      onTabFocus
      Fires when a tab gains focus.
      onTabNewError
      Fires when a new tab cannot be created.

Callback for Android

Callback method name must be “tabbar_callback” only. Callbacks of any other name will return no data.

Callback will be received in all visited tabs with the following parameters:

Async Callback Returning Parameters: HASH

  • newTabIndex : INTEGER

    New tab index. Platforms: Android

  • prevtab_index : INTEGER

    Previous tab index. Platforms: Android

    • Returns

    Synchronous Return:

    • Void

    Platforms

    • Android
    • Windows Mobile
    • Windows CE

    Method Access:

    • Class Method: This method can only be accessed via the API class object.
      • EB.NativeTabbar.create(ARRAY tabElements, HASH tabBarProperties)

    currentTabIndex()

    Returns the current tab 0-based index.

    Parameters

    • callback : CallBackHandler

    Callback

    Async Callback Returning Parameters: INTEGER

      Returns

      Synchronous Return:

      • INTEGER

      Platforms

      • Android
      • Windows Mobile
      • Windows CE

      Method Access:

      • Class Method: This method can only be accessed via the API class object.
        • EB.NativeTabbar.currentTabIndex()

      removeTab(INTEGER tabIndex)

      Removes the Tab by index. Method will remove the WebView for the specific tab, it will not remove the tab from the tab array, so all indexes will remain the same.You cannot delete the tab with useCurrentViewForTab flag.If you switch to previously removed tab, tab will be recreated.

      Parameters

      • tabIndex : INTEGER

        The index for tab (index numbered from 0) to delete.

      • callback : CallBackHandler

      Returns

      Synchronous Return:

      • Void

      Platforms

      • Windows Mobile

      Method Access:

      • Class Method: This method can only be accessed via the API class object.
        • EB.NativeTabbar.removeTab(INTEGER tabIndex)

      switchTab(INTEGER tabIndex)

      Switch active tab.

      Parameters

      • tabIndex : INTEGER

        The index for this tab (index numbered from 0).

      • callback : CallBackHandler

      Returns

      Synchronous Return:

      • Void

      Platforms

      • Android
      • Windows Mobile
      • Windows CE

      Method Access:

      • Class Method: This method can only be accessed via the API class object.
        • EB.NativeTabbar.switchTab(INTEGER tabIndex)

      Remarks

      Device Limitations With Multiple Tabs

      Please consider the limitations of the device when creating multiple tabs with the Native TabBar. The number of tabs that can be created will depend on the resources of the device and the complexities of the pages displayed in those tabs but, as a general rule, a maximum of 10 tabs on an MC75a should be enforced. Also consider setting the createOnInit property to false so that not all tabs are initialized when the TabBar is first created and using the in-process engine for a more responsive experience.