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.

Answer 1

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.