How to create a menu bar with PhoneGap

[Stifii]

Hi all,

First of all, i'm a French student, so excuse me for my poor level in
English ;)

Ok, I wan't create a Iphone Application with Phone Gap and my firt
question is : How can i create a fixed menu bar in the bottom of the
window ?

Thx for your futur answers.

[TSherriff]

Try creating pages using frames and add your menu to the bottom frame.

[davidRoe]

no, look for TabBar.createTabBar (originally part of UIControls,
although should now be part of the main branch).

[Stifii]

Thanks for the information.

But i have search TabBar.createTabBar and i have nothing.

Have you a tutoriel for this ?

Thanks for all.

[davidRoe]

I can't tell what condition the active codebase is in, you may want to
investigate other branches.

http://www.google.com/search?q=phonegap+createTabBar

[hanger]

I spend a long time finding the info. So if it could help somebody.



function tabbar(){
uicontrols.createTabBar();
uicontrols.createTabBarItem("toprated", "Top
Rated","tabButton:TopRated",{onSelect: function()
{navigator.notification.alert("Top Rated selected"); } } );
uicontrols.showTabBar();
uicontrols.showTabBarItems("toprated");
}
PhoneGap.addConstructor(function(){
tabbar();
});
have also a look on http://groups.google.com/group/phonegap/browse_thread/thread/b829353509cd446d

Just a remark, because it's very late and I'm tired:
Phonegap is a wonderful tool/project but definitely documentation is
missing, info is very hard to find. I almost make me give up
continuing to use phonegap. Moreover debugging is a nightmare ..
And davidRoe: I don't see the interest of such answer that's not a
way to build a community, for sure people have googled before posting
questions ..

[davidRoe]

very sorry for being such a wanker and not meticulously hunting down
the exact information to a vague question for the benefit of the
community at large. instead of spending 10 seconds pointing someone
in the right direction, I should have kept quiet, or perhaps spent a
long time hunting down and posting a probably incomplete/inaccurate
response whilst simultaneously complaining about the state of the
documentation and the other responses in the thread.

as I am sure you know, any moron can use google. the difference is
which keywords you search for. but you're tired, so I'll give you the
benefit of the doubt.

On Sep 9, 3:30 pm, hanger <mkalb...@gmail.com> wrote:
> I spend a long time finding the info.  So if it could help somebody.
>
> function tabbar(){
>  uicontrols.createTabBar();
>  uicontrols.createTabBarItem("toprated", "Top
> Rated","tabButton:TopRated",{onSelect: function()
> {navigator.notification.alert("Top Rated selected"); } } );
>  uicontrols.showTabBar();
>  uicontrols.showTabBarItems("toprated");}
>
> PhoneGap.addConstructor(function(){
>                                                 tabbar();
>                                                 });

> have also a look on  http://groups.google.com/group/phonegap/browse_thread/thread/b8293535...

[TSherriff]

Hanger,

Where does this code go?

On Sep 9, 6:30 pm, hanger <mkalb...@gmail.com> wrote:
> I spend a long time finding the info.  So if it could help somebody.
>
> function tabbar(){
>  uicontrols.createTabBar();
>  uicontrols.createTabBarItem("toprated", "Top
> Rated","tabButton:TopRated",{onSelect: function()
> {navigator.notification.alert("Top Rated selected"); } } );
>  uicontrols.showTabBar();
>  uicontrols.showTabBarItems("toprated");}
>
> PhoneGap.addConstructor(function(){
>                                                 tabbar();
>                                                 });

> have also a look on  http://groups.google.com/group/phonegap/browse_thread/thread/b8293535...

[hanger]

You can put it into index.html as "inline javascript" or in an
included javascript file.
Be carefull. In the phoneGap demo, there is allready a
PhoneGap.addConstructor . (I don't think 2 instances can coexist)

[Faith]

What I got is if I only call PhoneGap.addConstructor on the first
page. On any other pages, the TabBar is there but the onSelect event
doesn't work.
So I call PhoneGap.addConstructor on other pages except the first page
to set tabBarCallbacks for each TabBar Item.

Faith

[hanger]

What do you mean by first page ?
My full app is in one page .
I meaned : you should have only one addConstructor on a single page ...

[Shazron Abdullah]

Alternately if you use xui:

<script type="text/javascript"> 

x$(window).load(handleLoad); 

function handleLoad(e)

{

// tab bar code here

};

</script>

[TSherriff]

I don't use xui. However if i use:

function tabbar(){
uicontrols.createTabBar();
uicontrols.createTabBarItem("toprated", "Top
Rated","tabButton:TopRated",{onSelect: function()
{navigator.notification.alert("Top Rated selected"); } } );
uicontrols.showTabBar();
uicontrols.showTabBarItems("toprated");
}

PhoneGap.addConstructor(function(){
tabbar();
});

How do you I make each button go the html page that i want it to link
to?

On Sep 10, 1:21 pm, Shazron Abdullah <shazron.abdul...@nitobi.com>
wrote:

[TSherriff]

Can someone please attach a working copy of this tab bar code using
custom icons as well?

Thanks.

On Sep 10, 1:21 pm, Shazron Abdullah <shazron.abdul...@nitobi.com>
wrote:

[hanger]

To complete the stuff : in your project source you will find phonegap/
javascript/uicontrol.js that contains a description of all needed
function specialy createTabBarItem (cf bellow)

Then for the questions:
1) To integrate external images you have to put them in the ressources
folder of your project, and then you can use them like
uicontrols.createTabBarItem("home", "Home","53-house.png",{onSelect:
function() { zap("home"); } } );

2) To make the button react, I use javascript. Since my whole
application is "contained" in the index.html, I don't have this
problem, but I suppose that
document.location.href="XX.html" should work fine
But the alternative to loading new pages is to feed div with some
jquery ...


++
Marc

Descr:



* <b>Tab Buttons</b>
* - tabButton:More
* - tabButton:Favorites
* - tabButton:Featured
* - tabButton:TopRated
* - tabButton:Recents
* - tabButton:Contacts
* - tabButton:History
* - tabButton:Bookmarks
* - tabButton:Search
* - tabButton:Downloads
* - tabButton:MostRecent
* - tabButton:MostViewed
* @param {String} name internal name to refer to this tab by
* @param {String} [title] title text to show on the tab, or null if
no text should be shown
* @param {String} [image] image filename or internal identifier to
show, or null if now image should be shown
* @param {Object} [options] Options for customizing the individual
tab item
* - \c badge value to display in the optional circular badge on the
item; if null or unspecified, the badge will be hidden
*/
UIControls.prototype.createTabBarItem = function(name, label, image,
options) {};

[TSherriff]

Hanger,

Thank you very much for the instructions. I'm very new to programming,
i usually work on designs. For the html part, could you please send a
working example. For instance, should the following code look
something like:

uicontrols.createTabBarItem("home", "Home","53-house.png",{onSelect:

function() { zap("home"); } } document.location.href="XX.html" );


I know these instruction will help everybody here. Perhaps after we
get more information on linking tabs to html pages, we could have it
submitted to the main wiki.

Thanks in advance for everyone's help here!

[hanger]

No .. more like :

uicontrols.createTabBarItem("home", "Home","53-house.png",{onSelect:

function() { document.location.href="XX.html" } } );