Using Material design template with Convertigo

In this article, Grégory explains how to add nativeDroid2 (Material design) theme in a Convertigo Mobile project.

 

nativeDroid2 is a jQuery Mobile theme to have a beautiful modern Google style app.
The Convertigo sample project can be downloaded here: sampleMaterialDesign. You will also need the Convertigo Studio sample project named sampleMapperShop.

 

Getting Started

First of all, import the sampleMapperShop project in your Studio.
Click File>New>Project...>Convertigo Projects>Convertigo Samples and Demos>Rest samples>MapperShop samples project.
This is a Web service project that will serve data.
Then, import the sampleMaterialDesign.car file you downloaded here. Click File>Import...>Convertigo>Convertigo project.Once successfully imported, expand project name to MobileApplication, right-click on it and select Launch Fullscreen.  

Usage

The application screen is divided in 3 parts: A header, the content zone and a footer.

Header

The header contains a panel on the top left bar that gives you access to the different nativeDroid2 features, it is loaded from an external file that can be easily included in all your app pages with following directive: <!-- panel -->

<nd2-include data-src="fragments/panel.left.html"></nd2-include>
I added a "Home" button on top of list to be able to reach starting page from wherever you are.
On the right, there is a different menu button that will reveal buttons bar from bottom.

Content

The main page (app.html) contains only one button named "CLICK HERE" and performs a Convertigo call to the sampleMapperShop GetProductList sequence:
<button data-c8o-call="sampleMapperShop.GetProductList">Click here</button>
Response data is managed by CTF listen: <ul data-role="listview" data-c8o-listen="sampleMapperShop.GetProductList" data-c8o-each="product">

<li>

<div class="nd2-card">

<div class="card-media">

<a href="#" data-c8o-call="sampleMapperShop.GetProduct" data-c8o-variables='{"art_id":"__=art_id__"}'><img src="img/examples/card_bg_1.jpg"></a>

</div>

<div class="card-supporting-text">

<b>__=description__</b>

<p>__=price__  </p>

</div>

</div>

</li>

</ul>
Each product card is clickable and performs a call to another sequence to get product details.
In custom.js file, I use a routing table template to test response, the from page #id and the external page to load: {

calledRequest: "sampleMapperShop.GetProduct",

actions: [

{

condition: "product",

fromPage: "#products",

goToPage: "details.html",

options: {

},

beforeRendering: function ($doc, c8oData) {

},

afterRendering: function ($doc, c8oData) {

}



}

]

}
The details.html file contains a CTF listen: <div role="main" class="ui-content" data-inset="false" data-c8o-listen="sampleMapperShop.GetProduct">



<div class="nd2-card card-media-right card-media-small">

<div class="card-media">

<img src="img/examples/card_bg_1.jpg">

</div>

<div class="card-title">

<h3 class="card-primary-title">__=description__</h3>

<h5 class="card-subtitle">__=price__ €</h5>

<h5 class="card-subtitle">__=code__</h5>

</div>

</div>



</div>

Footer

The static footer is just a buttons bar to show the capability to include external file in jQuery Mobile "pages" to avoid to copy paste code in each pages:
<!-- footer -->

<nd2-include data-src="footer.html"></nd2-include>
 

Conclusion

nativeDroid2 theme brings multiple jQuery Mobile elements enhancements, but also new elements to your Convertigo mobile application that will make it more native look and feel.

Back to post list ...