Worklight - How to use IBM Worklight Tabbar API?

Question

How can I use IBM Worklight Tabbar API to make tabbased mobile application for iPhone and Android platform,

I found the Tabbar API: http://pic.dhe.ibm.com/infocenter/wrklight/v5r0m5/index.jsp?topic=%2Fcom.ibm.worklight.help.doc%2Fapiref%2Fr_tab_bar_api.html

But, not getting how to start with tabbar in my application.

cnandreu cnandreu · Accepted Answer · 2013-03-05T07:47:57

Take a look at the Getting Started Module for Common Controls. Slides 14-19 should help you.

Here's a quick example for iOS:

var tb = WL.TabBar;
tb.init();
tb.addItem("0", func1 , "One",  { image : "images/1.png"});
tb.addItem("1", func2 , "Two",  { image : "images/2.png"});
tb.addItem("2", func3, "Three", { image : "images/3.png"});
tb.setVisible(true);
tb.setSelectedItem("0");

Make sure func1, func2 and func3 are functions that are defined previously in your application and the images passed (1.png, 2.png and 3.png) also exist in your images folder. You can get some free icons here, the main site is here.

Here's an example of func1:

var func1 = function () { 
  alert('hello world');
}

For Android:

common/[app].html

Add the following after the body tag:

<div id="AppBody"> </div>

android/js/[app].js

WL.TabBar.setParentDivId("AppBody");
WL.TabBar.init();
WL.TabBar.addItem("item1", function(){ alert("item 1 pressed"); },"item1 title",{
    image: "images/tabicon.png",
    imageSelected : "images/tabicon.png"
});   
WL.TabBar.addItem("item2", function(){ alert("item 2 pressed"); },"item2 title",{
    image: "images/tabicon.png",
    imageSelected : "images/tabicon.png"
});
WL.TabBar.addItem("item3", function(){ alert("item 3 pressed"); },"item3 title",{
    image: "images/tabicon.png",
    imageSelected : "images/tabicon.png"
});
WL.TabBar.addItem("item4", function(){ alert("item 4 pressed"); },"item4 title",{
    image: "images/tabicon.png",
    imageSelected : "images/tabicon.png"
});
WL.TabBar.addItem("item5", function(){ alert("item 5 pressed"); },"item5 title",{
    image: "images/tabicon.png",
    imageSelected : "images/tabicon.png"
});
WL.TabBar.setVisible(true);

android/images/tabicon.png

Make sure that the images exists in your project.

Code Sample

There's a working Worklight Project/Code Sample here with the correct html, js and images.

Worklight - How to use IBM Worklight Tabbar API?

1 Answers