Sample PhoneGap Application with AngularJS/OnsenUI

May 13, 2014By 2 Comments

onsen_logoI recently came across another new UI framework to help in building mobile hybrid applications from the creators of Monaca (IDE and tooling for PhoneGap Development). It’s called OnsenUI and includes custom elements built with AngularJS directives (like the Ionic Framework) and uses Topcoat for the underlying CSS and themes.

For example, here’s a sliding menu component from my sample app:

<ons-sliding-menu
    behind-page="menu.html"
    above-page="homeNav.html">
</ons-sliding-menu>

What’s included in OnsenUI?

Sample Application

I just finished a new sample PhoneGap/Cordova application to show an example of OnsenUI being used. Since I had already created a sample mobile iTunes Media Explorer application using AngularJS+Ionic I thought it might be useful to go through the process of re-building it with OnsenUI to try it out.

Here are a couple of screenshots from this new OnsenUI version:

image (3)

image (4)

You can check out both projects in my GitHub repos to see how the different frameworks could be used to build similar outcomes. I also have both versions of the application hosted online if you want to try them out fast. All of the links for the two projects are below:

iTunes Media Explorer Hosted Links and Source Code

If you try the Online Samples, resize your browser window down to more of a device width/height to get a better idea of how it would look. Also, the applications differ slightly in look and feature but you get the idea…

Getting Started

Check out their Getting Started Guide here to begin using OnsenUI. I recommend downloading the Demos zip file there to see a comprehensive set of code to use for reference in building your own apps along with the sample app I’ve written. To try it quickly you can just use one of their sample templates provided on the Getting Started page.

Also, check out their plans for more tools and support for building PhoneGap apps coming soon.

Additional Notes

  • I used the OnsenUI components (<ons-xx>) in my application but was still able to customize the navigation bar a bit using the custom CSS generator tool and thought I might mention it in case others find this useful. I can’t guarantee this will (or is supposed to) work for all components, but the generator appeared to give class names that matched the topcoat CSS classnames underlying the custom (<ons-xx>) components, just without the topcoat- prefix. So I took the output from the generator and just added the topcoat- prefix to each class name to override the styles for the navigation bar. You can see the result in the ../css/app.css file. Check out the links below for more details on different ways to customize and theme your CSS.
  • Some of the documentation and guides are not quite as explanatory or comprehensive as I’ve seen with others and required some trial and error, but hopefully my sample application can help you avoid some of that. Your best bet is to also go through the Demos and view the source for each as well.
  • Disclaimer: This is my first stab at trying out this framework, so things may not be built to the best they could be (also a few hacks included), but the point was to give an idea of how the UI framework looks and works. :)
Many people visiting my blog have seen me write about Topcoat, Kendo UI and Ionic Framework in the past and OnsenUI is yet another option I wanted to present as a choice in helping you build your mobile hybrid apps. :)

Additional Customization Links

Filed in: AngularJSAngularJS sample applicationCordovaCSSHTML/JSMobile DevelopmentPhoneGapTopcoat Tags:

About the Author ()

Comments (2)

Trackback URL | Comments RSS Feed

  1. Brent Seufert says:

    The Big Question: after having used OnsenUI and Ionic… do you have a preference?
    Thanks, Brent

  2. jay says:

    which one is best Ionic or OnsenUI ?

Leave a Reply