(For more resources related to this topic, see here.)
How to do it…
To create an application, include the JavaScript and CSS files in your page. Perform the following steps:
- Create an HTML document, index.html, under your project directory. Please note that this directory should be placed in the web root of your web server.
- Create the directories styles and scripts under your project directory.
- Copy the CSS file kendo.mobile.all.min.css, from <downloaded directory>/styles to the styles directory created in step 2. Then add a reference to the CSS file in the head section of the document.
- Download the jQuery library from jQuery.com. Place this file in the scripts directory and add a reference to this file in the document before closing the body tag. You can also specify the CDN location of the file in the document.
- Copy the JavaScript file kendo.mobile.min.js, from the <downloaded directory>/js tag to the scripts directory created in step 2. Then add a reference to this JavaScript file in the document (after jQuery).
- Add the text “Hello Kendo!!” in the body tag of the index.html file as follows:
<!DOCTYPE HTML>
<html>
<head>
<title>My first Kendo Mobile Application</title>
<link rel="stylesheet"
type="text/css"
href="styles/kendo.mobile.all.min.css">
</head>
<body>
Hello Kendo!!
<script type="text/javascript"
src = "scripts/jquery.min.js">
</script>
<script type="text/javascript"
src = "scripts/kendo.mobile.min.js">
</script>
</body>
</html>
The preceding code snippet is a simple HTML page with references to Kendo Mobile CSS and JavaScript files. These files are minified and contain all the features, themes, and widgets. In production, you would like to include only those that are required. The downloaded ZIP file includes CSS and JavaScript files for specific features. However, in development you can use the minified files that contain all features.
Another thing to note is that apart from the reference to the script kendo.mobile.min.js, the page also includes a reference to jQuery. It is the only external dependency for Kendo UI.
When you view this page on a mobile device, you will see the text Hello Kendo!! shown. This page does not include any of the widgets that come as a part of the library. Now let’s build on top of our Hello World application and add some visual elements; that is, UI widgets to the page. This can be done with the following steps:
- Add a layout first. A mobile application generally has a header, a footer, and multiple views. It is also observed that while navigating through different views in an application, the header and footer remain constant. The framework allows you to define a global layout that may contain a header and a footer for all the views in the application. Also, the framework allows you to define multiple views that can share the same layout. The following is the same page that now includes a header and footer defined in the layout:
<body>
<div
data-role="layout"
data-id="defaultLayout">
<header data-role="header">
<div data-role="navbar">
My first application
</div>
</header>
<footer data-role="footer">
<div data-role="tabstrip">
<a data-icon="about">About</a>
<a data-icon="settings">Settings</a>
</div>
</footer>
</div>
</body> - The body contains a few div tags with data attributes. Let’s look into one of these tags in detail.
<div data-role="layout" data-id="defaultLayout">
Here, the div tag contains two data attributes, role and id. The role data attribute is used to initialize and configure a widget. The data-role attribute has a value, layout, identifying the target element as a layout widget. All the widgets are expected to have a role data attribute that helps in marking the target element for a specific purpose. It instructs the library which widget needs to be added to the page. The id data attribute is used to identify the widget (the layout widget) in the page. A page may define several layout widgets and each one of these must be identified by a unique ID. Here, the data-id attribute has defaultLayout as its value. Now there can be many views referring to this layout by its id.
- Similarly, there are other elements in the page with the data-role attribute, defining them as one of widgets in the page. Let’s take a look at the header and footer widgets defined inside the layout.
<header data-role="header">... </header>
<footer data-role="footer">...</footer>The header and footer tags have the role data attribute set to header and footer respectively. This aligns them to the top and bottom of the page, giving the rest of the available space for different views to render. Also, note that there is a navbar widget in the header and a tabstrip widget defined in the footer. As mentioned earlier, the framework comes with several widgets that can help you build the application rapidly.
- Now add views to the page. The index.html page now has a layout defined and when you run the page in the browser, you will see an error message in the console which says:
Uncaught Error: Your kendo mobile application element does not contain any direct child elements with data-role=”view” attribute set. Make sure that you instantiate the mobile application using the correct container.
Views represent the actual content that has to be displayed between the header and the footer that we defined while creating a layout. A layout cannot exist without a view and hence you see that error message in the console. To fix this error, you need to define a view for your mobile application.
- Add the following to your index.html page:
<div data-role="view"
data-layout="defaultLayout">
Hello Kendo!!
</div>As mentioned earlier, every widget needs to have a role data attribute to identify itself as a particular widget in the page. Here, the target element is defined as a view widget and tied to the layout by defining the data-layout attribute. The data-layout attribute has a value defaultLayout that is the same as the value for the data-id attribute of the layout that we defined earlier. This attaches the view to the layout and you will not see the error message anymore.
Similarly, you can have multiple Views defined in the page that can make use of the same layout. Now, there’s only one pending task for the application to start working: initializing the application. A Kendo Mobile application can be initialized using the Application object. To do that, add the following code to the page:
<script>
var app = new kendo.mobile.Application();
</script>Include the previous script block right after references to jQuery and Kendo Mobile and before closing the body tag. This single line of JavaScript code will initialize your Kendo Mobile application and all the widgets with the data-role attribute.
The Application object is used for many other purposes .
How it works…
When you run the index.html page in a browser, you will see a navbar and a tabstrip in the header and footer of the page. Also, the message Hello Kendo!! being shown in the body of the page. The following screenshot shows how it will look like when you view the page on an iPhone:
If you have noticed, this looks like a native iOS application. The framework has the capability to render the application that looks like a native application on a device. When you view the same page on an Android device, it will look like an native Android application, as shown in the following screenshot:
The framework identifies the platform on which the mobile application is being run and then provides native look and feel to the application. There are ways in which you can customize this behavior.
Summary
Creating a sample application (Simple)got us started with the Kendo UI Mobile framework and showed us how to build a sample application using the same. We also saw some of the Mobile UI widgets, such as layouts, views, navbar, and tabstrip in brief.
Resources for Article :
Further resources on this subject:
- Working with remote data [Article]
- The Decider: External APIs [Article]
- Constructing and Evaluating Your Design Solution [Article]