Menu hamburger icon

Onsen UI 1.3 has been released!

Onsen UI 1.3

We are happy to announce that Onsen UI 1.3 has just been released! In the new version you will find not only bug fixes and improvements but also some awesome new features that will improve the experience of using Onsen UI. We also believe this is the most stable release of Onsen UI to date.

One of the main features introduced with this version of Onsen UI is a Window Universal (Windows Phone 8.1, Windows 8.1 and IE 11) partial support! We will release another blog post in the upcoming days describing exactly what this entails.

In this article we will introduce some of the main changes and additions in the framework. For a full list of changes, please refer to the Changelog.

Installing Onsen UI 1.3

There are several ways to install Onsen UI. You can download Onsen UI from our download page, clone our GitHub repository or, if you prefer using Bower, by executing the following command:

$ bower install onsenui

We will now introduce some of the features that we are most excited about in this release.

Passing scope for dialogs and popover

It is now possible to pass a scope variable when creating dialogs and popovers with ons.createDialog(), ons.createPopover() and ons.createAlertDialog(). The reason why this is a big deal is that it makes it a lot easier to integrate these components in an AngularJS app, while previously it was quite hard for dynamic content.

When creating a dialog the following syntax can be used:

ons.createDialog('dialog.html', {parentScope: $scope}).then(function(dialog) {
  $scope.dialog = dialog;
});

The dialog scope will now be a child to the $scope variable in the example above. Thus, the methods as well as the data can be accessed inside the dialog.

In this simple example the feature is used to do data binding with form elements inside a dialog:

See the Pen Passing scope to dialog by Andreas Argelius (@argelius) on CodePen.

Event handler attributes

In this release many Onsen UI elements have been extended with event handler attributes such ons-preopen, ons-postopen, ons-destroy etc. You can find a list of all the elements, in which this feature is implemented, inside the Changelog.

This is familiar to AngularJS users since it works exactly like the ngClick directive and can be used to add custom behavior when an event occurs. Just like ngClick it will also pass an object called $event to the handler.

The <ons-sliding-menu> component emits four events: “preopen”, “postopen”, “preclose” and “postclose”. Thus, they can be handled with the attributes ons-preopen, ons-postopen, ons-preclose and ons-postclose respectively.

<ons-sliding-menu
  ons-preclose="handleEvent($event)"
  main-page="main.html"
  menu-page="menu.html">
</ons-sliding-menu>

And in the controller code:

angular.module('myApp').controller('MyController', function($scope) {
  $scope.handleEvent = function($event) {
    // This code will be executed before the menu is closed.
  };
});

Let’s now take a look at the attributes in action with the following CodePen example:


See the Pen Sliding Menu by Andi Pavllo (@andipavllo) on CodePen.


A new functionality has been added to the <ons-navigator> component. Using the method replacePage(), it is possible to replace the page currently at the top of the stack with another one. The method takes, a pageUrl string as an argument, which can be either an HTML document or an ons-template, as well as some optional attributes.

myNavigator.replacePage('page.html', {
  animation: 'lift'
});

Other major changes and additions

  • popPage() now accepts an animation parameter to customize the transition when popping a page. The default transition will be the one that was used to push the page.
  • Better testing using Protractor.
  • The ons-placeholder attribute has been improved to make it more flexible.
  • The behavior when items are removed dynamically from a list with the ons-lazy-repeat attribute has been improved.

And now?

We are very happy about features that are implemented in this new version of Onsen UI, but we will not stop here! Soon we will introduce the new tools we have implemented to make your Windows Universal apps development more effective: Intellisense support, Visual Studio template and TypeScript support. We will also publish some guides about how to use these tools and how to create sample apps for Windows Universal platform.

We are working hard to improve Onsen UI, that’s why we would like to ask you, one more time: “If you enjoy using Onsen UI please spread the word so we can grow the community!”

In case you’ve found a bug or if you have a feature that you would like to see in an upcoming version of Onsen UI, please open an issue on our GitHub issues page. You’re also welcome to open a pull request to fix bugs, correct mistakes or even implement a new feature. We will happily accept contributions if we deem them good enough.

We hope you will appreciate the work that we have done in this release, continue to follow us and be part of our community!

Comments