February 21, 2009
Navigation bars in hybrid applications
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.
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.
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.