native Tab bar of iphone in phonegap

Question

I want to use native tab bar of iphone using phonegap. I have used the code and plugin shown in http://wiki.phonegap.com/w/page/16494801/iPhone:-UIControls-%28TabBar%29 . But the tab bar did not display. Can anyone help me to get tab bar in my application?

Answer 1

It is quite easy. Normally this will not happen, because you are adding a forth parameter.

The TabBar is expecting this forth parameter or null. But the test if this exist is buggy.

So just put in forth dummy item --> {( foo: "bar" )} <---

plugins.tabBar.createItem("Advent Calendar", 
                          "Sven Elch", 
                          "abc.png", 
                          { foo : "bar" }  // <-----
);

or patch if condition in TabBar.m (line 334 or so).

if(options != [NSNull null])
{
    id badgeOpt = [options objectForKey:@"badge"];

    if(badgeOpt && badgeOpt != [NSNull null])
        item.badgeValue = [badgeOpt stringValue];
}

Answer 2

Steps (might be the same for any plugin):

• Get the plugin iOS NativeControls
• Copy *.xib, *.m and *.h files to your project's "Plugins" folder (should already exist and contain a README file)
• They have to be added to the project as well, so drag them from the "Plugins" folder (in Finder) to the same folder (in Xcode) and select to create references
• Open "Resources/Cordova.plist" and under "Plugins", add a key with the plugin name "NativeControls" and a string value of "NativeControls" (I guess it's the plugin's main class name)

• Try the following example ( NOTE: this example is from 2012-06-28, I'm actually working on an improved version that removes the toolbar functionality and replaces it with an actually working navigation bar – see here )

   window.plugins.nativeControls.createTabBar() window.plugins.nativeControls.createTabBarItem('home', 'Home', 'tabButton:Contacts') window.plugins.nativeControls.showTabBar() window.plugins.nativeControls.showTabBarItems('home') window.plugins.nativeControls.createToolBar() window.plugins.nativeControls.setToolBarTitle('Hello toolbar.') window.plugins.nativeControls.showToolBar() alert("Tabs and toolbar should now become visible")

I can't get the title of the toolbar to work, though, but both the tab and the toolbar itself (without text) is showing.

Answer 3

I believe that plugin got deprecated. Go to http://github.com/phonegap/phonegap-plugins/ . In there you will see a plugin called native control under iPhone. That is the plugin you want to use.

After you download it, add the nativecontrols files to your plugin folder in your project. Add NativeControls as a key and value in phonegap.plist file. Add the nativecontrols js file to your www directory. Then you can create, show, etc your tabbar

Answer 4

Just try this:

<script>
    var moreNum = 1;
    plugins.nativeControls.createToolBar();
    plugins.nativeControls.setToolBarTitle("hello");

    plugins.nativeControls.createTabBar();  
    plugins.nativeControls.createTabBarItem("search","search","tabButton:Search");
    plugins.nativeControls.createTabBarItem("book","book","tabButton:Contacts");
    plugins.nativeControls.createTabBarItem("more","more","tabButton:More",{"onSelect":function(){
                                            plugins.nativeControls.updateTabBarItem("more",{"badge":((++moreNum).toString())});
                                            }});
    plugins.nativeControls.showTabBar();
    plugins.nativeControls.showTabBarItems("book","search","more");
</script>