I 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.
<ons-sliding-menu behind-page="menu.html" above-page="homeNav.html"> </ons-sliding-menu>
What’s included in OnsenUI?
- A comprehensive set of UI components (buttons, tab bars, toolbars, form controls etc)
- View navigation and page stack management with built-in page transitions and smooth animations
- Sliding menu/page component
- Icons from Font Awesome
- Scrollable regions
- A set of themes which can be customized
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:
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
- Online Sample with AngularJS+OnsenUI
- Online Sample with AngularJS+Ionic
- AngularJS+OnsenUI Source Code
- AngularJS+Ionic Source Code
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.
- 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.cssfile. 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.
Additional Customization Links
- Creating a custom theme
- Customizing CSS
- Customizing OnsenUI Elements
- Introducing Onsen CSS Components