February 21, 2009

Navigation bars in hybrid applications

Posted in iPhone development tagged , , , , , , , , , , , , , at 9:03 pm by tetontech

I have had a couple of questions regarding if it is possible to have navigation bars, at the top or bottom, in a hybrid application.  The answer is an emphatic yes.  In fact it is dead simple.

I have been working on a charting library QuickConnect that is soon to be released in QCiPhone 1.5 Beta 2.  The example application uses a navigation/tool bar at the bottom of the screen to change the chart being displayed.  The first picture below shows the application with a pie chart displayed.  The second image shows the same application after the bar button has been selected.  I am showing these running in Mobile Safari in the Dashcode emulator so Safari’s standard bar is below the button bar.  This example also works when put into a QuickConnectiPhone Xcode project.  There Safari’s bar would not exist.

Showing a pie chart.

Showing a pie chart.

Showing the bar chart after the bar button has been selected

Showing the bar chart after the bar button has been selected

The bar at the bottom is the same element in both pictures.  The way to do this is to make the stack layout part shorter than the screen and place the bar at the top or the bottom.  If you want the default navigation bar at the top of the screen like the Mail app use Dashcode’s Browser part rather than it’s Stack Layout part and the navigation bar will be created and handled for you.

The image below shows the development screen for the charting example app.  The upper-left of the picture shows box3, the navigation/tool bar, with its’ contained buttons.  It also shows the stackLayout with its’ contained views.  Notice that box3 is not a sub-component of any of the contained views.

In the design portion of the Dashcode screen notice that box3 is below the stackLayout object.  It will stay there as the views update.

The design screen for the example application showing the stack layout part and the box that is the navigation/tool bar at the bottom

The design screen for the example application showing the stack layout part and the box that is the navigation/tool bar at the bottom

I hope this helps you see that there is little that you can’t do in a hybrid application user interface that you can do in UI builder.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: