Native UI Controls in PhoneGap coming along nicely

They say a picture’s worth a thousand words. Frankly I think inflation has really taken its toll on the cost of words, but nevertheless here’s a quick view of what’s been going on in my UIControls PhoneGap branch on Github.

In that screenshot the UIWebView frame, aka the actual webpage content of the app itself, was automatically resized so the toolbar and tabbar has room to be shown. And yes, those are native widgets for the toolbar and tabbar.

Currently the toolbar doesn’t support showing of any buttons, but the tab bar is fully functional. What it doesn’t support (or at least, it’s not tested at all yet) is using custom images in the tab bar items. But that’ll happen shortly.

Next on my roadmap before this feature can be pulled into the main PhoneGap branch is adding buttons to the toolbar, and animating the tool and tab bars when they’re shown. Currently they just pop into view. I’d like it to be possible for it to slide or fade in instead.

Check back here, or subscribe to my feed, to stay tuned on my additions to PhoneGap.

9 thoughts on “Native UI Controls in PhoneGap coming along nicely”

  1. Any chance that I can test these mods out? I cloned the git code & run it from xCode but don't see the new native UI controls in the PhoneGap app? Thanks for any tips.

  2. Of course! I’d love to get as much feedback on this as possible. If you’re new to git, you probably just cloned my master repo, and didn’t pull down the “uicontrols” branch. To do this, go ahead and try:mkdir phonegapcd phonegapgit initgit remote add NachoMan git:// pull NachoMan uicontrolsIf you want to make any changes there, please feel free and email me any patches you come up with. Let me know what you think about it.

  3. Mike, is the native approach something that might be merged into the main project or was it more like an experiment?

    How does platform-independent application design fare using either the native or faked tab bar & nav bar? Is there an advantage to one or the other for making maintenance of a phonegap app easier?

  4. It’s most likely going to get merged soon; it’s just a matter of sitting down with them and working out how we’re going to handle plugins like this in the future.

    The advantages of going “Native” for core features such as navigation and alerts are twofold: a) your users are most comfortable dealing with UI elements that are part of the native operating system, and b) they’ll be more responsive to the user’s input.

    Since PhoneGap has per-platform implementations of different javascript interfaces, it’s possible to create platform-specific implementations of the same UI concepts that are on the iPhone. So for Android you’d render native controls in such a way that users of that platform are most comfortable.

    And if all else fails, you can always fall back to implementing that feature in native JavaScript/HTML.

    This is all just theory at the moment however, since I’ve only developed for the iPhone personally.

  5. Quick question, I am looking to have a login view that takes up the entire screen. Once i log in, i want it to you use your Tabbar. I was going about it by waiting for authentication on index.html and then going to tabbar.html once authenticated. Sort of the way traditional apps work. Everything works, but the tabbar doesn’t show up. Shows up fine if the tabbar is in index.html though. Should I be going about this another way? I am open to any solution

  6. PhoneGap-based applications don’t work if you load a different HTML page. They work as Ajax applications where you asynchronously load additional content using XMLHttpRequest. This is because there’s a great deal of initialization that happens when PhoneGap first launches your index.html file, and this isn’t done on subsequent page loads.

    When I do this, I show/hide HTML tags that take up the whole screen, and swap them out using CSS3 animations. If you want to use the native tab bar code, you only have to show the tab bar when you’re ready to.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.