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
New tab index. Platforms: Android
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.