In this article Nicolas Albert, explains how Polymer framework can be used for developing Mobile Convertigo Projects.



 
Polymer  project is now a very popular Web Components framework  based on encapsulated and interoperable custom elements that extend HTML itself. Built atop these new standards, Polymer makes it easier and faster to create anything from a button to a complete application across desktop, mobile, and beyond. This article explains how you can leverage Polymer technology while using all the benefits from the Convertigo Mobility Platform.
 

Polymer in Convertigo

Polymer (www.polymer-project.org) is a new generation graphic framework to design modern UIs. Polymer works by defining custom components, some my be visual (Such as buttons, lists, ..) or non visual such as data services.  To integrate Polymer with Convertigo, we created a template project that will give you everything to start a mobile project using polymer and Convertigo back end services. Your project will support flash update, push notifications, device hardware access, and Convertigo Server data integration seamlessly. The magic is done by defining a custom component called c8o-service, providing all the back end server integration features, that you will be able to use in your polymer apps. Also, help is provided to package the app to be compliant to Convertigo’s Mobile Builder so that you can cloud build or locally build any mobile app based on polymer.

Getting started with a Polymer project

You will find attached to this article two Convertigo Projects : template_Polymer.car (Download here) is the starter project you can import in the studio, feel free to rename it to your project and use the sample code inside to learn how to use the c8o-service component. You will also need the lib_Polymer.car (Download here) to be imported in your studio in order to run your polymer based projects. This lib_ Polymer.car project brings all the polymer components plus the c8o-service component.

As you can see in the post-list.html file the usage for the c8o-service :
<link rel="import" href="../../../lib_Polymer/bower_components/polymer/polymer.html">
<link rel="import" href="../../../lib_Polymer/c8o_components/c8o-service.html">
<link rel="import" href="post-card.html">

<polymer-element name="post-list" attributes="show">
 <template>
 <style>
 :host {
 display: block;
 width: 100%;
 }
 post-card {
 margin-bottom: 30px;
 }
 </style>

 <c8o-service id="service" rdata="{{mydata}}"></c8o-service>
 
 <div layout vertical center>
 <template repeat="{{element in mydata.document.element}}">
 <post-card>
 <img src="{{element.avatar}}" width="70" height="70">
 <h2>{{element.username}}</h2>
 <p>{{element.text}}</p>
 </post-card>
 </template>
 
 </div>
 </template>
 <script>
 Polymer('post-list', {
 ready: function() {
 C8O.log.debug("post-list ready");
 this.$.service.call(".listPosts");
 }
 });
 </script>
</polymer-element>

The service supports a rdata attribute populated from the data returned from Convertigo server, and a call method you can use to invoke a Convertigo requestable (Sequence, or transaction). As all data communications to Convertigo server are handled by the standard C8O Javascript client library, all Convertigo services such as push notifications, local cache are available to polymer apps. See in DisplayObject/mobile/js/custom.js Hooks and API.

Preparing your app be compatible with Mobile Builder

Convertigo Mobile builder packages your app to be ready for Cordova builds, to be sure you app will be packaged correctly  you must first “vulcanize” it . Vulcanize is a Node.js   tool able to check dependencies and inline in a single html files all the needed Polymer components. This is mandatory to avoid packaging in your app the whole Polymer components library, resulting with a over sized mobile app. See this link about Vulcanize and Node.js. This is why you should write your app in the main.html page, then, when using the dovulcanize.cmd command file, the main.html will be “vulcanized” to app.html, resulting to a Convertigo Mobile Builder compliant file. In this way , you will be able to use Convertigo’s flash update feature with Polymer projects.

Conclusion

Convertigo technology is an open technology able to integrate many third party frameworks thus, giving the openness and flexibility needed for mobile developers. Although Convertigo ships with the JQuery Mobile framework by default, we see here that any other framework can be easily integrated. Happy testing : )

 

Leave a comment