Onsen UI is a popular framework for creating hybrid mobile
web apps. It has native look and feels for iOS and Android. In the past we used
ChocolateChipUI for some projects, but nowadays OnsenUI seems more active and popular.
here are some hints in case you want to use it in your own project.
Fortunately OnsenUI is framework agnostic, so it should be easy to use it in DukeScript.
For simple demos with a single ons-page it works out of the box. But typically you
use a ons-navigator to navigate between pages.
The ons-navigator provides page stack management and navigation.
Stack navigation is the most common navigation pattern for mobile apps.
When a page is pushed on top of the stack it is displayed with a transition animation.
When the user returns to the previous page the top page will be popped from the top of the stack and hidden with an opposite transition animation.
To display the pushed page the navigator reads the page from a ons-template and adds it to the dom.
The ons-page throws an “init” event
during it’s lifecycle and we can listen on the document for these events.
All we need to do is take the relevant view model and call applybindings for the new page.
You can have your own management for binding viewmodels on demand. For the sake
of simplicity, we’ll simply bind the root view model and pick the relevant submodel
in the ons-page. This way you can simply add the bindings as if the template would already be part of the page.
Let’s have a look at an example with some bindings:
And here’s the view model we’re binding to:
The interesting part is the call to “OnsenUITemplates.registerListener()” and “OnsenUITemplates.switchPage(“details.html”)”.
The “registerListener” methods job is to wait for an ons-page to be loaded and apply the bindings.
The method “switchPage” is used, when the user wants to swith to a view via a
Function in the Java viewmodel (see method “detailsItem”). It simply asks the Navigator to load a certain ons-page.
As soon as the page is loaded an “init” event is thrown and the bindings are applied.
That’s it. With these little changes you can use the beautiful OnsenUI for your DukeScript mobile apps.