Design and build a collaborative user experience for a chance to win cool prizes!
Blog

Vaadin Elements in mobile apps

By  
Sami Suo-Heikki
·
On Aug 9, 2016 5:26:00 AM
·

Vaadin Elements has been paving the way as the go-to UI components library for progressive web apps. But what about mobile apps?

To use Vaadin Elements in a mobile app, you need to have the same web view as you would have in the browser. Thanks to open source SDKs, like Ionic with Cordova, you can easily create a hybrid mobile app from your existing web app that uses the same web view as browsers. 

With a hybrid app you are no longer constrained by the limitations of the browser. You’re able to use native app features like camera and accelerometer access, but still write your app using web technologies.

Getting Started

The fastest way to start building mobile apps is to use the Ionic framework. Ionic is an open source front-end SDK for developing mobile apps with web technologies.

Install Ionic

First install Cordova and Ionic and then use Ionic’s command line interface to start a new app:

$ npm install -g cordova ionic
$ ionic start elementsApp blank

This creates an elementsApp/ directory, which contains your Ionic project. Try out your app by running ionic serve from the elementsApp/ directory: 

$ cd elementsApp
$ ionic serve

Browse to the Ionic's development server to check your app:

Install Vaadin Elements

Install Vaadin Elements with bower. Vaadin Elements will be installed to the www/lib/ directory: 

$ bower install --save vaadin-core-elements

Import Web Components polyfill

Not all browsers support web components natively, so you need to import the Web Components polyfill to the root of your app. Add the polyfill to index.html in the elementsApp/www/ directory:

<script src="lib/webcomponentsjs/webcomponents-lite.min.js"></script>

Import Vaadin Elements

Import Vaadin Elements in index.html in the elementsApp/www/ directory: 

<link rel="import" href="lib/vaadin-core-elements/vaadin-core-elements.html">

Now you are ready to use Vaadin Elements in your mobile application.

Start coding!

Add Elements

Start by adding a few Vaadin Elements inside the body of your index.html. You can seamlessly use Vaadin Elements together with Ionic’s native UI components.

<body ng-app="starter">
   <ion-pane>
     <ion-header-bar class="bar-stable">
       <h1 class="title">Game of Thrones houses</h1>
     </ion-header-bar>
     <ion-content>
       <div class="filters">
         <vaadin-combo-box label="Region"></vaadin-combo-box>
       </div>
       <vaadin-grid>
         <table>
           <colgroup>
             <col name="name">
           </colgroup>
         </table>
       </vaadin-grid>
     </ion-content>
   </ion-pane>
 </body>

Add Business logic

The next step is to show some data in our application. Wrap your business logic inside an HTMLImports.whenReady event callback to make sure that the elements are ready to use. In this example we are using An Api of Ice and Fire to populate vaadin-combo-box and vaadin-grid.

 
<script>
     var grid = document.querySelector('vaadin-grid');
     var combobox = document.querySelector('vaadin-combo-box');
 
     HTMLImports.whenReady(function () {
 
       updateHouses();
 
       // Add items to combo-boxes
       document.querySelector('vaadin-combo-box').items = ['Dorne', 'The North', 'The Riverlands', 'The Stormlands', 'The Vale', 'The Westerlands'];
 
       // Update grid items when combo-box value changes
       combobox.addEventListener('selected-item-changed', function(event) {
         updateHouses(event.detail.value);
       });
     });
 
     // Add items to vaadin-grid
     function updateHouses(region) {
       region = region ? region : '';
       getJSON('http://www.anapioficeandfire.com/api/houses?region='+region, function (json) {
         grid.items = json;
       });
     }
</script> 

Conclusion

Vaadin Elements and Ionic both use Bower so it’s easy to extend an Ionic app with Vaadin Elements. The responsive design of Vaadin Elements makes it a favourable choice when selecting the UI components for mobile apps. In addition, the material design fits nicely with the CSS components of Ionic.

See the complete source code on GitHub
Sami Suo-Heikki
Sami Suo-Heikki is a young, ambitious developer. During the day he is working as a front end developer at Vaadin and on nights (at least till Milestone 4) solving the problem of dyslexia in his startup company. On weekends you might find him running marathons. You can follow him on Twitter - @samisuoheikki
Other posts by Sami Suo-Heikki