Book Image

Building Mobile Applications Using Kendo UI Mobile and ASP.NET Web API

Book Image

Building Mobile Applications Using Kendo UI Mobile and ASP.NET Web API

Overview of this book

With the world becoming more mobile, there is a growing need for mobile websites and applications. Building these from scratch is not a simple process. Kendo UI Mobile makes building websites and applications easier than ever before. Build applications for phones and tablets in no time at all and provide your user with a native look and feel.Building Mobile Applications Using Kendo UI Mobile and ASP.NET Web API helps you to understand the concept of building mobile applications using HTML5 based frameworks, specifically Kendo UI Mobile. It teaches you in a simple step-by-step manner how to create a service backend layer using ASP.NET Web API and how to integrate it with your front end mobile application, which is the missing piece of the puzzle for most developers who are new to mobile applications development. Learn everything from the basics of HTML5 to design and development of a mobile application using Kendo UI Mobile and ASP.NET Web API. Integrate them in the right way using extensible and maintainable JavaScript code.Starting with the basics of the Kendo UI platform, learn how to build a real world mobile application from scratch. You will explore the Kendo UI framework elements and integrate the sample mobile application with the ASP.NET Web API service. One of the most important things that you will learn from this book is how to organize your code using the JavaScript Revealing Module Pattern. You will also take a journey through Kendo UI Mobile widgets with lots of code samples hosted in jsFiddle. At the end of this book, you will complete the integration of the sample application and master fixing real world problems utilizing your newly acquired professional techniques that will save you time and effort.Building Mobile Applications Using Kendo UI Mobile and ASP.NET Web API will help you improve your mobile application development skills using hands-on examples, and will help you address the common problems faced by beginners as well as experienced web programmers. 
Table of Contents (15 chapters)
Building Mobile Applications Using Kendo UI Mobile and ASP.NET Web API
About the Authors
About the Reviewers

HTML5 and CSS3

HTML5, jQuery, and CSS3 are the new mantra for developing cutting-edge web applications. When we say web, it includes the standard websites/applications, mobile websites/applications, as well as hybrid applications. Even though this book is about Kendo UI Mobile, it's important to have an idea about the underlying technologies behind the Kendo UI Mobile framework, namely, HTML5, CSS3, and jQuery. Let's take a high-level view at HTML5 and CSS3 technologies briefly before we take a deep dive into Kendo UI Mobile. Since we expect the readers of this book to have knowledge in jQuery, we won't be discussing the basics of jQuery here.

HTML5 – Steve Jobs made me famous

HTML5 shot to fame among the Internet public when Steve Jobs famously announced the death of Flash on the iOS devices and endorsed HTML5 as the future, as it helps to build advanced graphics, typography, animations, and transitions without relying on third-party browser plugins.

HTML5 is a markup language specification that is comprised of a significant number of features, technologies, and APIs that allow content developers to create a rich and interactive experience. HTML5 is still in the recommendation stage, but many browsers already implement a significant portion of the specification. This poses a challenge for developers as they need to figure out which browsers support which features before kick starting an HTML5 project.

Main features of HTML5

Even though the specification for HTML5 is not complete yet, tons of features are already implemented by mainstream browsers. The following are some of the main features of HTML5 as it stands as of today:

  • Application cache to support offline web apps

  • Geolocation

  • Server-sent events

  • Audio and video

  • Indexed DB

  • WebSocket API

  • Canvas API

  • MathML

  • Web storage

  • Cross-document messaging

  • Microdata

  • Web Workers

  • Drag-and-drop

  • Scalable Vector Graphics (SVG)

  • XMLHttpRequest Level 2

Note from Google is a very good website for HTML5 reference with tons of tutorials, articles, and other resources.

Who is behind the HTML5 specification?

There are three different organizations behind the development of the HTML5 specification: W3C (World Wide Web Consortium), WHATWG (Web Hypertext Application Technology Working Group), and IETF (Internet Engineering Task Force). As a result, there are two versions of the HTML5 specification maintained by W3C and WHATWG, which can be found at and respectively. IETF comprises of the groups responsible for Internet protocols such as HTTP, and handles the WebSocket protocol which is used by the WebSocket API of HTML5.

Two different versions of HTML5 is not a matter of concern as the WHATWG version is considered as a living standard (meaning there will be constant development and versions no longer will be applied) and W3C is planning to create a single definitive standard, which WHATWG calls a snapshot of their living standard.

The WHATWG effort is focused on developing the canonical description of HTML and related technologies (meaning fixing bugs, adding new features, and generally tracking implementations), while W3C will continue the HTML5 specification work, focusing on a single definitive standard.

A sample HTML5 page

Now let's get our hands dirty and take a look at a simple HTML5 page:

    <meta charset="utf-8">    
    <title>Our first HTML5 page </title>
      <h1>Sample HTML5 Structure</h1>
          <li><a href="#">Link1</a></li>
          <li><a href="#">Link2</a></li>
      <h1>Main Section</h1>
      <h2>This is a sample HTML5 Page</h2>
        <p>Article 1 goes here</p>
        <p>Article 2 goes here</p>
      <p>Footer goes here</p>


Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at If you purchased this book elsewhere, you can visit and register to have the files e-mailed directly to you.

DOCTYPE and character encodings

The DOCTYPE declaration for HTML5 is very simple: <!DOCTYPE HTML>

This line needs to be added at the top of every HTML5 page that we create. The new DOCTYPE declaration is plain and simple, unlike the lengthy and hard to remember ones in HTML4 shown as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

All the latest browsers will look at the new DOCTYPE declaration and switch the contents into standard mode.

Like the DOCTYPE declaration, the character set declaration is also simplified in HTML5 as shown as follows:

<meta charset="UTF-8">

The meta charset attribute in a meta element is used instead of a pragma directive as in HTML4.

This is how a typical character encoding looks in HTML4:

<meta http-equiv="Content-type" content="text/html;charset=UTF-8">

Some new HTML5 tags

As highlighted in the earlier code, you can see some new HTML5 tags which are semantic markups. Semantic markups describe their meaning or purpose clearly to the browser and to the developer. In HTML4, we used the <div> tag to define a division in a page, but it never provided any details about the contents and had no specific meaning. To make sense, developers used to add an id attribute and provide a meaningful ID such as sectionHeader, footer, and navLinks as follows:

<div id="sectionHeader"> </div>

The semantic elements such as <header>, <footer>, and <nav> were added in to HTML5 as a result of mining billions of web pages, for figuring out what common IDs and CSS class names the developers use most often, and for selecting a small subset to be added in to the HTML5 specification. It made perfect sense as this will help search engines and accessibility tools to crawl the web pages easily and developers can work on neat HTML code.

Let's now checkout some of the new semantic markups we used in our sample HTML5 page.


The <header> element represents a group of introductory or navigational aids. Typically <header> will be the first element in a page. It is intended to usually contain the section's heading (an h1–h6 element or an hgroup element), but this is not a requirement. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos.


The <nav> element represents a section with navigation links to other pages or to sections inside a page. This element is primarily intended for sections that consist of major navigation blocks. Usually footers will have a short list of links to various pages of a site. The <footer> element alone is sufficient for such cases, while a <nav> element can also be used, but it is usually unnecessary.

The following are some more places where you can think about adding the <nav> element:

  • Bread Crumbs

  • Table of Contents

  • Side Navigation


The <section> element represents a generic section of a document or application. A section, in this context, is a thematic grouping of the following contents:

  • Chapter

  • Various tabbed pages in a tabbed dialog box

  • Numbered sections of a thesis

A website's home page could be split into sections for an introduction, news items, and contact information. It is a segment of content that you will consider storing as a record in a database.

The <section> element is appropriate only if the contents would be listed explicitly in the document's outline.


The <article> element represents an independent section of content such as a blog post, a comment, and a magazine article. An article should be an independent entity and it should be possible to distribute or reuse it even when the surrounding contents are removed.


The <footer> element represents information about the containing element such as links to related content or copyright information. Footers need not be added at the end of the section even though it is the usual practice.

Note is a great website to test your browser's HTML5 compatibility.


CSS3 is the latest version of CSS, that unlike CSS2 (which is a single large specification of CSS) is divided into multiple modules which are documented and worked upon separately. Work on the CSS3 specification started back in 1998 as soon as the specifications for CSS2 were complete, and it is still undergoing updates.

CSS3 helps in adding life to a web page by animating its elements, applying different effects such as gradients, shadows, multiple backgrounds, and opacity, and much more without using images or client-side code as done with previous versions of CSS. CSS3 helps to improve performance of the application as CSS files are cached on the client side and use hardware acceleration technique for animations on supported browsers.

CSS3 has over 50 modules published from the CSS Working Group such as Media Queries, Namespaces, Color, Animations, Backgrounds and Borders, Selectors, and 2D/3D Transformations.

Let's see using a quick example, how easy it is to apply rounder border, transformation, and shadow to an HTML element using CSS3.

First, let's define a simple div element and add some styles to it:

    <style type="text/css">
      width: 200px;
      height: 100px;
      background-color: #A3D1FF;
      border: 1px solid black;
      margin: 10px;
      padding: 5px;
    <div style="margin: 75px">
      <div id="myDiv">
      I am an HTML div

The HTML is rendered as shown in the following figure:

Now, we need to rotate this div by 40 degrees, add rounded corners to the border, and add a shadow to the box. In CSS3, achieving these requirements is very easy using few lines of code. Add the following CSS3 properties to the CSS definition of our HTML document:

border-radius: 10px;
box-shadow: 8px 8px 1px gray;
transform: rotate(40deg);
-ms-transform: rotate(40deg); /* IE 9 */
-webkit-transform: rotate(40deg); /* Safari and Chrome */

On reloading the HTML page, we can see our div has transformed to this new look: