Hybrid Mobile Apps are one of the ways in which you can create a cross platform Mobile Applications using HTML/JavaScript/CSS technologies. The key here is Cross Platform. I want to write once and want to take my app to all platforms. One of the quickest ways is the Hybrid Way. Although Hybrid has its disadvantages when it comes to scenarios like high graphical UIs – it is a good choice when we have a simple data entry kind of scenario. In this blog post i will introduce you to Kendo UI Mobile templates we have done. These templates will speed up your Cordova based Hybrid Mobile App development. These templates make use of our Open Source Hybrid Mobile UI Framework called Kendo UI Mobile.

What is Hybrid Mobile App?

Well, if this question is stuck in your mind – fear not. My colleague John Bristowe has done an excellent article titled “What is Hybrid Mobile App”. Do have a read here. The article will give you some perspective on Hybrid Mobile Apps.

Kendo UI Core:

We have an Open Source version of our flagship, popular JavaScript framework called Kendo UI. The Open Source package is called “Kendo UI Core”. As part of Kendo UI Core we provide HTML5 widgets for Web and Mobile Development. The open source package is released under permissive Apache V2 license. Following screenshot depicts what you get as part of Kendo UI Core:

Image may be NSFW.
Clik here to view.

Kendo UI Core Widgets

As you can see, with Kendo UI Core package you get the complete Hybrid Mobile Framework and Mobile Widgets. You can check our Kendo UI Hybrid Mobile Demos online here.

Developing with Cordova:

Apache Cordova is the preferred way to get started with Hybrid Mobile App development. Apache Cordova provide CLI or Command Line Interface using which you will create the project, simulate, build & package the mobile app. you can get started with Apache Cordova by following the Getting Started guide here.

Kendo UI Mobile Cordova Templates:

When you want to create a Hybrid Mobile App, you will mobile specific UI controls or widgets as we call it. Kendo UI Mobile provides you exactly that. In order to make it easier to start with Cordova + Kendo UI Mobile i have created 3 templates. You can use these templates to jump start your app development. Lets take a look at the templates below.

Pre-Requisites:

You will need to have the following installed on your machine:

• Node JS
• Cordova
• Gulp

Cordova Kendo UI Blank Template:

As the name says, this template will crate a blank app for you. The template will wire up the necessary pre-requisite which is Kendo UI framework and will create a blank screen in the app. Here are the steps to use this template:

• Open a command prompt/terminal on your laptop/desktop.
• Type the command cordova create <appname> –template cordova-kendo-ui-blank-template and press enter.
• Next type the command npm install and press enter. Wait for the command to complete.
• Next type the command gulp and press enter. Wait for the command to complete.

After that your blank app is ready with Kendo UI Mobile Framework and a blank screen has been created. Here is the screenshot of the app:

Image may be NSFW.
Clik here to view.

Kendo UI Mobile – Blank App Template

Cordova Kendo UI Drawer Template:

This template will provide you 3 screen and to perform navigation we will use a Side Drawer. You can follow the steps as explained above. Just the template name will change and you should use the template name as “cordova-kendo-ui-drawer-template“. Here is the screenshot of this template:

Image may be NSFW.
Clik here to view.

Kendo UI Mobile – Drawer Template

Cordova Kendo UI TabStrip Template:

This template is similar to Drawer template. This will provide you with 3 screen in the app and to perform navigation we will use a TabStrip. You can follow the steps as explained above. Just the template name will change and you should use the template name as “cordova-kendo-ui-tabstrip-template“. Here is the screenshot of this template:

Image may be NSFW.
Clik here to view.

Kendo UI Mobile – Tab Strip Template

Summary:

If you are building Hybrid Mobile Apps and you need professional looking theme and mobile widgets – Kendo UI Mobile framework will provide you that. With the above templates, your app development will get boost as the templates provide you a basic skeleton to start with. Do try out the templates and let us know if you have any feedback/suggestion by means your comments below.

Till next time – Happy Coding !

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.