Unless you have been living under a rock or hunkered down in an underground bunker like Brendan Fraser in Blast From The Past, you have probably heard of PhoneGap. It's that magic thing that enables you to write mobile applications the same way that you would build a web application.

However, there is still a gap (no pun intended, I swear) here. While PhoneGap might make it easy for you to create an application that runs on a mobile device, how do you make it look like a mobile application? In this tutorial you will see how Kendo UI Mobile, a brand new framework for building HTML5 native applications, can help you do just that. It works great with PhoneGap and it gives you the native looking controls you need, like TabStrips, ListViews, NavBars, and so much more.

Additionally, you will learn how to use PhoneGap Build along with Kendo UI Mobile's unique Adaptive Rendering Framework to write your application one time, and deploy it on multiple platforms.

Introducing Kendo UI Mobile

Kendo UI Mobile is the hot new HTML5 mobile framework that enables you to build phone and tablet applications that actually look like they are using native UI controls.

You can download a fully functional trial of Kendo UI Mobile that even comes with support. Please note, your name and email address are required to obtain the trial download.

The mobile framework contains a complete collection of feature rich widgets that are targeted at both phone and tablet form factors. You can browse the demos and see familiar mobile UI controls like the TabStrip, the NavBar, and even the ubiquitous iPad SplitView.

Figure 1. Mobile devices have very different UI controls than standard websites due to their smaller form factor.

You can think of Kendo UI Mobile of being made up of two pieces: the framework and the widgets.

Mobile framework

The mobile framework includes core functionality of Kendo UI Mobile (see Figure 1). This includes the core Application object that is created when you create an application with Kendo UI Mobile, as well as things like Views, which contain the rendered content between the header and footer of the application.

Figure 2. The Kendo UI Mobile framework includes core components for building your HTML5 mobile applications.

Widgets

The widgets are the UI components that you would expect to find in a mobile application (see Figure 2). Because mobile devices have touch interfaces, the UI components are very different than what you would find in a normal web application. Widgets include the TabStrip and the ListView. The ListView features kinetic scrolling, pull to refresh, and everything that you have come to expect from a quality mobile application.

Figure 3. Kendo UI Mobile widgets are a comprehensive suite of UI components specifically for mobile device interface development.

Adaptive rendering

Kendo UI Mobile will automatically adjust the UI to the current device's native look and feel (see Figure 3). The same application will look different on iOS and Android. On iOS, for example, the TabStrip is at the bottom where you would expect it to be, while on Android it's moved to the top. Currently Kendo UI Mobile supports iOS, Android, BlackBerry, and Meego (see Figure 4).

Figure 4. Kendo UI Mobile demos let you see what Kendo UI Mobile looks like on a variety of devices.

Figure 4. Kendo UI Mobile's adaptive rendering framework renders your HTML5 application with a native look on iOS (left), Android (right), BlackBerry, and Meego.

Note: Looking for Windows Phone support? See this article for why it's missing from our list of supported platforms.

Getting started with PhoneGap Build

PhoneGap Build is a project that is currently in Beta. Once you upload an application's source to it, PhoneGap Build can build the application for every supported PhoneGap platform and then give you a link or QR code to download the application. You can upload your application to PhoneGap as a single index.html page or as a ZIP file containing your project assets. Alternatively, you can have PhoneGap Build pull your code from an existing Git repository, or have it create a new one for you.

Note: To build for iOS, you will need to register your device with the iOS Developer Center and upload your corresponding certificate so that you can deploy your app straight to the device without having to go through Xcode. Check out this article for more information on setting that up.

Create a new application with PhoneGap Build

You will need to create an account at build.phonegap.com. You can use your Adobe account, or you can login with your GitHub account. Once you sign in, you will be prompted to create an application by providing a name and specifying if you want to upload the source or use Git (see Figure 5). You can even use GitHub and pull from there.

Figure 5. Creating a new application in PhoneGap Build.

I named the new application Reddits. You can use any name for your application.

For this tutorial, I strongly recommend pushing the code to a GitHub repository and then pulling it in for PhoneGap Build. If you do, select the Pull From A Git/Svn Repo Url option and type your existing GitHub repository URL. I prefer this approach, as having to zip up an application over and over and upload it over and over to refresh it is tedious.

Get the Kendo UI Mobile bootstrap project

You will need some specific files to get started with PhoneGap Build, so I have created a bootstrap project that you can download here.

The Kendo UI Mobile bootstrap project contains all of the files that you need to get rolling with a new Kendo UI Mobile application using PhoneGap Build (see Figure 6). Specifically, it includes the following files:

Index.html – the main page for the mobile application.
Config.xml – a file that you will edit later to specify some settings that PhoneGap Build will need for your project.
An assets folder where you’ll need to place the Kendo Mobile assets, as well as the main app.js file where the application is loaded. For the sample project, the Kendo UI CDN is used.

Figure 6. The Kendo UI Mobile bootstrap project helps you get up and running with Kendo UI and PhoneGap Build.

The Anatomy of a Kendo UI Mobile application

Kendo UI Mobile framework is easy to use, relying mostly on the HTML markup to define the application. Using HTML5 data attributes, you specify the structure of your application in the HTML, so you need to write only a minimal amount of JavaScript. This enables you to layout your mobile application with markup instead of trying to do it all with convoluted JavaScript code consisting of a thousand selectors.

You will need to include the kendo.mobile.all.min.css file in your page. This file has all the styles in it for the different mobile devices. You will also need to include jQuery, and the kendo.mobile.min.js file:

        <link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css">

<script src="assets/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
    

In the bootstrap project I have included a basic Kendo UI Mobile Layout (see Figure 7). Kendo UI Mobile applications generally include two main components, Layouts and Views. Your application may consist of any number of these components in virtually any combination. However, it is most common to have a single Layout that has multiple Views.

Figure 7. The Kendo UI Mobile bootstrap project.

Open index.html to see how a Kendo UI Mobile application is structured.

Layouts

A Kendo UI Mobile Layout is a shared container for multiple views. It usually has a NavBar widget as well as a TabStrip widget, but this depends on how you want to design your application. The Layout in the bootstrap application has the following markup:

        <div data-role="layout" data-id="main-layout">
  <div data-role="header">
    <div data-role="navbar">
      <span data-role="view-title"></span>
    </div>
  </div>
  <div data-role="footer">
    <div data-role="tabstrip">
      <a data-icon="home" href="#home">Home</a>
      <a data-icon="settings" href="#settings">Settings</a>
    </div>
  </div>
</div>

    

The top level div has a data-role of layout. This tells Kendo UI Mobile that this is a Layout container. It's also possible to create Kendo UI Mobile controls from HTML elements by selecting them with a jQuery selector and then calling the appropriate widget. For instance, for a ListView you might use the following:

$(“#itemsList”).kendoMobileListView();

However, it is far more common and cleaner to specify the widget you want to use with the data-role attribute and configure the widget using additional data attributes.

Within the top level layout element, there are two div elements, one with data-role="header" and the other with data-role="footer". You will want to define headers and footers for your layout before you start using widgets like the NavBar or TabStrip. This will let Kendo UI Mobile know where you want to position them in the application.

Inside the header element there is a NavBar widget. It, in turn, has a simple span with data-role="view-title". This will display the title of the currently loaded view in the NavBar. This way when you switch views (via a TabStrip for example), the current view title will be displayed.

The footer contains the popular TabStrip. It's declared by using a div and setting data-role="tabstrip". Each TabStrip item can have an icon by setting the data-icon property. For a complete list of icons that you can use, check out the TabStrip documentation. Each TabStrip button is pointed at a corresponding View with its href set to a # plus the View id.

Views

As previously mentioned, Views represent the content inside of Layout. Technically, they don't have to be in a Layout, but they commonly reside there. While it may seem logical that they would be placed inside of their Layout div, this is not the case. They are placed on the same level as the Layout div.

        <div data-role="view" data-show="MYAPP.show" data-layout="main-layout” id="home" data-title="Home">
  <p>Home View</p>
</div>

<div data-role="view" data-layout="main-layout" id="settings" data-title="Settings">
  <p>Settings View</p>
</div>

    

By now you have caught on to the use of data attributes for configuration. In the case of views, they are used to define which Layout the view should use (if any) and the title that should be displayed in the NavBar when the view is loaded.

If you want to preview the application in your browser, simply open your browser's developer tools and type MYAPP.run(); in the console. This function is called by the PhoneGap deviceready event when your application is running natively.

Creating a simple app

Now that you have the bootstrap project and you understand how to lay out elements with Kendo UI Mobile, you are ready to build a simple application and then upload it to PhoneGap Build.

This simple application will use the home screen of the bootstrap and add the hot programming topics from Reddit. To do this you will need to add a ListView to the application as well as use a DataSource.

Add a ListView

Add a ul element to the home view and set its data-role to listview. This will specify that it is a Kendo UI Mobile ListView. The ListView can either take up the whole screen, or it can be inset. For this example, set the ListView style to inset using the data-style attribute.

<ul data-role="listview" data-style="inset"></ul>

ListViews can have static items or they can be bound to a source of data (either remote or local data). For this example, you are going to bind the ListView to the Reddit remote JSON API.

Create the data source

Add the following code to app.js

        // this function returns a Kendo UI DataSource
// which reads the top threads off of the programming.reddit
// datasource
MYAPP.reddit = kendo.data.DataSource.create({
  // set the data to a local array of object
  transport: {
    read: "http://www.reddit.com/r/programming.json"
  },
  schema: {
    data: "data.children",
    fields: {
      title: "data.title"
    }
  }
});

    

This is a Kendo UI DataSource. It reads the remote endpoint (using a jQuery .ajax call under the covers) and then parses the returned result according to the specified schema object. Now that the DataSource has been defined, you will need to specify it on your ListView.

Note: You may be wondering why I've given the DataSource a rather odd variable name ( MYAPP.reddit ). In JavaScript you want to put all your variables in a single object, which will then go into the global namespace. This keeps you from cluttering the global namespace with a bunch of custom variables that could step all over each other.

The data attribute for defining a data source on a ListView is straightforward: data-source="MYAPP.reddit".

Now, the only thing left is to define a template for the ListView.

Kendo UI Mobile Templates are lightweight and engineered to be exceptionally fast. You can declare a template by creating a script block and giving it a type of "text/x-kendo-templ" and an ID so you can specify the template in the ListView. Kendo UI Mobile templates support several syntaxes. The example below uses is the "#: <value> #" format, where <value> is the field from the DataSource that you want displayed.

        <script type="text/x-kendo-templ" id="reddit-template">
  #: title #
</script>

    

Add this to index.html. This will display the title field in li elements inside the ListView. Notice that you don't need to wrap each element in an li.

To inform the ListView that you want it to use this template when it renders items, set the data-template attribute:

        <ul data-role="listview" data-style="inset" data-template="reddit-template" 
 data-source="MYAPP.reddit"></ul>
    

Using PhoneGap Build

If you didn't create a project in PhoneGap Build earlier, now is the time. Before you can actually upload your file, or pull it from Git, you need to modify the config.xml file. This file tells PhoneGap Build some very important information. For example, here is mine.

        <?xml version="1.0" encoding="UTF-8"?>
<widget xmlns = http://www.w3.org/ns/widgets 
        xmlns:gap = "http://phonegap.com/ns/1.0"
        id = "com.burke.www"
        version = "1.0.0">

  <name>Reddits</name>

  <description>
    A super simple application for testing Phonegap Build With Kendo UI Mobile
  </description>

<author href="http://a.shinynew.me"
        email="burkeholland@gmail.com">
        Burke Holland
</author>

<icon src="icon.png" gap:role="default" />

<feature name="http://api.phonegap.com/1.0/network"/>

<preference name="orientation" value="portrait" />
</widget> 

    

This specifies the title of the application, the description, the version of PhoneGap you are using, and the permissions the application is going to need. For instance, if you were going to use the camera, you would need to specify an additional feature.

<feature name="http://api.phonegap.com/1.0/camera"/>

The build process

Once you upload or specify your Git repository to pull from, PhoneGap Build will begin building your project for all platforms (for iOS you need to upload your certificate and provisioning profile file). My build process completed in around 10 minutes. As each build process finishes you are presented with a download button and a QR code (see Figure 8).

Figure 8. PhoneGap Build automatically bundles and builds your project into a native application that you can install directly on the device.

PhoneGap

You might notice that there is a script reference for a phonegap.js file that doesn't exist in the project.

<script src="phonegap.js" type="text/javascript" charset="utf-8"></script>

This is because PhoneGap Build provides that file for you to make sure it's specific for the platform that is being built.

You can change the version of PhoneGap that you want to target at any time by going to the PhoneGap Build admin panel and updating the version.

Run the app

You can scan the QR codes you receive with your devices or you can navigate to build.phonegap.com on your device and tap the Download button. This will install the application on your device. I installed the application from PhoneGap Build on my iPhone 4 and Galaxy Nexus. The same app runs on two different devices (see Figure 9).

Figure 9. A photo of my iPhone and Nexus running the same app installed directly from PhoneGap Build.

Where to go from here

Now you should be able to put all of the pieces together. PhoneGap gives you a native shell and device access. PhoneGap Build packages your application for every platform. Kendo UI Mobile gives you native UI controls on every device with the familiarity of jQuery and a simple markup-driven architecture.

Download Kendo UI today and get started building native mobile apps with HTML5.

Continue your learning on Kendo UI Mobile by checking out the mobile demos. Also make sure to visit our comprehensive documentation site and explore the API, widgets, and various tutorial articles.

Here are some links to help you keep going:

Getting started with Kendo UI Mobile

by Burke Holland

Content

Created

Page tools

Requirements

Prerequisite knowledge