Kendo UI Mobile and ASP.NET MVC : Building the Mobile Task Manager, Part 1 - Getting Started

Written by John DeVightJohn DeVight on 12 Apr 2012 18:32

Download the Sample Code at: Kendo UI ASP.NET Sample Applications, Source Code tab by clicking on "Download" under "Latest Version" and looking for Mobile -> TaskManager.

Overview

I recently developed a language translator application as a side project for World Concepts, Inc. that runs on the Android using PhoneGap. I started out using jQuery Mobile and after a month of frustration with positioning and adjusting the styles for the widgets, I managed to get it working. The biggest problem I found was that it didn't look like other Android applications. It looked like an applciation for the iPhone. Not what I wanted. So I started rewriting the application from the beginning using Kendo UI Mobile. That went extremely well. I managed to complete the rewrite in a week and had an application that looks like other Android applications.

For a free product, jQuery Mobile is pretty good, but I found the experience of working with Kendo UI Mobile to be much, much better than working with jQuery Mobile. Why? Several reasons. They are:

  1. Kendo UI Mobile allows the developer to explicitly set the target environment. By setting the target environment, Kendo UI Mobile applies the appropriate stylesheets to give the application the look-and-feel of the target environment. (Note: that a Kendo UI Mobile application that is running in the browser will auto detect the target environment, but running in PhoneGap, it can't detect the target environment).
  2. Kendo UI support is fantastic! Any questions I have about Kendo UI that I post in the forums get answered in usually one business day.
  3. I didn't have to mess around with the CSS styles for the widgets. When they got rendered, they looked the way I would expect them to look. Not the same experience that I had with jQuery Mobile.

If you are serious about mobile development Kendo UI Mobile is, in my opinion, the way to go. The pricing for Kendo UI Mobile is very reasonable. They also offer a free trial version that you can use to get started immediately.

I've been developing sample applications for Kendo UI Web and decided to provide the community with a sample applicaiton using Kendo UI Mobile. The sample application uses the same data as the TaskManager sample application. What I did was "extend" the TaskManager.Mvc application by including a class library with a MobileController. But I am getting ahead of myself. Let's start with setting up the development environment.

Development Environment

  1. Android Development Environment - PhoneGap has excellent documentation on configuring the PhoneGap environment. You can read the documentation for configuring the environment for Android development here. One thing I would like to mention is that to download and install the ADT Plugin, I had to run Eclipse as an administrator. From what I have read, it is because I put Eclipse in the C:\Program Files folder.
  2. The current release of Kendo UI Mobile.
  3. ASP.NET Development Environment - Install Visual Studio 2010 (any version including Express) and ASP.NET MVC 3.

Creating the Android Application

To develop an application for Android you have to work with Java and eclipse. For all the .NET developers who haven't worked with Java, it really isn't a big deal. You only need to do a little bit of Java when setting up the application and will need to get a little familiar with the eclipse IDE, but that is it. As I mentioned earlier, PhoneGap has excellent documentation on configuring the PhoneGap environment. However, I'll provide a brief overview of what I did to install the development tools:

  1. Download and install Java SE 7u3
  2. Download and unzip eclipse to the C:\Program Files folder. I then right-clicked on eclipse.exe and selected "Pin to Start Menu". I then went to the Start Menu, right-clicked on "eclipse", selected properties, clicked the Advance button, and checked the "run as administrator" checkbox.
  3. Download and install the Android SDK for Windows installer.
    1. When the install is complete, I ran the Android SDK Tools -> SDK Manager (as an administrator) and installed the Android 2.2 (API 8) SDK. Why Android 2.2? To reach the widest audience.
    2. I then run the Android SDK Tools -> AVD Manager (as an administrator) and created a new Android Virtual Device called Android22 with a target of Android 2.2 (API level 8).
  4. I launched eclipse and select Help -> Install New Software… and install the ADT Plugin for Eclipse.

Creating the TaskManager Android Application

  1. In eclipse, I select File -> New -> Project. In the "New Project" dialog, I expand the Android folder, and select Android Project. I click Next.
  2. In the "Create Android Project" dialog, I set Project Name = TaskManager. I click Next.
  3. In the "Select Build Target" dialog, I select the "Android 2.2" platform. I click Next.
  4. In the "Application Info" dialog, I set the following fields:
    • Application Name: TaskManager
    • Package Name: com.kendouisamples.taskmanager
    • Create Activity: App
  5. I click Finish.

Screenshots

Step 1 Step 2
select-wizard.png
create-android-project.png
Step 3 Step 4
select-build-target.png
application-info.png

Configuring the TaskManager Android Application for PhoneGap

Now that the application has been created, it needs to be modified to be a PhoneGap application. I did the following:

  • In Windows Explorer, the root folder for the Android application (I'll refer to as android-root) I create a folder called libs. In the android-root/assets folder, I create a folder called www. In the android-root/assets/www folder I create a folder called js.
  • From the PhoneGap download, I go to /lib/android.
    1. I copy the cordova-1.5.0.jar to the anrdoid-root/libs folder.
    2. I copy the cordova-1.5.0.js to the android-root/assets/www/js folder.
    3. I copy the xml folder to the android-root/res folder.
  • I refresh the project in eclipse (select the root folder and press F5).
  • I right-click on the libs folder and in the popup menu, I select Build Path -> Configure Build Path to display the "Properties for TaskManager" dialog with the "Java Build Path" selected and the Libraries tab selected.
    1. I click the "Add JARs…" button, locate and select the cordova-1.5.0.jar file.
  • Using notepad, I open the android-root/AndroidManifest.xml file. I change it to look like the following:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.kendouisamples.taskmanager"
    android:versionCode="1"
    android:versionName="1.0" >
    <supports-screens
        android:largeScreens="true"
        android:normalScreens="true"
        android:smallScreens="true"
        android:resizeable="true"
        android:anyDensity="true"
        />
 
    <uses-permission android:name="android.permission.INTERNET" />
 
    <uses-sdk android:minSdkVersion="8" />
 
    <application
        android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:debuggable="false">
        <activity android:name=".App"
                  android:label="@string/app_name" 
                  android:configChanges="orientation|keyboardHidden">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name="org.apache.cordova.DroidGap" android:label="@string/app_name" 
                  android:configChanges="orientation|keyboardHidden">
            <intent-filter>
            </intent-filter>
        </activity>
    </application>
 
</manifest>

Note that the PhoneGap documentation has a long list of "uses-permission" tags. This is the entire list of permissions available. I only need internet access for this application, so I have only added the "android.permission.INTERNET" permission.
  • In eclipse, I expand the following: TaskManager -> src -> com.kendouisamples.taskmanager -> App.java -> App and double-click on "onCreate(Bundle): void". I change it to look like the following:
package com.kendouisamples.taskmanager;
 
import org.apache.cordova.*;
import android.os.Bundle;
 
public class App extends DroidGap {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.loadUrl("file:///android_asset/www/index.html");
    }
}

Creating the Interface using Kendo UI Mobile

The first step is to copy the necessary Kendo UI Mobile files to your Android application:

  1. In the android-root/assets/www folder, create a styles folder. In the android-root/assets/www/styles folder, create a kendo folder.
  2. From the Kendo UI Mobile download, copy the styles/kendo.mobile.all.min.css file and the styles/images folder to the android-root/assets/www/styles folder.
  3. In the android-root/assets/www/js folder, create a kendo folder.
  4. From the Kendo UI Mobile download, copy the js/jquery.min.js file and the js/kendo.mobile.min.js file to the android-root/assets/www/js folder.

Now to create the interface. If you want to use eclipse as your code editor, you can. You'll need to download an html editor plugin. I've found that using Notepad++ works just as well.

  1. In the Java code above, you can see that the PhoneGap application displays the index.html file located in the android-root/assets/www folder. Create the index.html file.
  2. Add the following code to index.html:
<!DOCTYPE html>
<html>
<head>
    <title>Overview</title>
 
    <link href="styles/kendo/kendo.mobile.all.min.css" rel="stylesheet" />
 
    <script src="js/cordova-1.5.0.js"></script>
    <script src="js/kendo/jquery.min.js"></script>
    <script src="js/kendo/kendo.mobile.min.js"></script>
</head>
<body>
    <div id="home" data-role="view" data-title="Task Manager">
        <ul id="home-listview" data-role="listview">
            <li>Sprints</li>
            <li>Developers</li>
        </ul>
    </div>
 
    <script>
        window.kendoMobileApplication = new kendo.mobile.Application(document.body, { platform: "android" });
    </script>
</body>
</html>

The index.html page is really no different than any other webpage. A couple of things to take note are:

  1. Each "page" in the mobile application is a div element with a data-role attribute set to "view". The first view that is rendered on the page is the page that is displayed when the application starts. At the end of the page, before the closing body tag is a script tag that initializes the applciation as a "Kendo Mobile Application". Here is where I specify the platform to be "android". Kendo UI Mobile will attempt to identify the mobile device and render the page appropriately. However, when it is embedded in a PhoneGap application, this doesn't seem to work. The default for Kendo UI Mobile is iOS (iPhone and iPad). So to get Kendo UI Mobile to render for the Android, you need to explicitly set the platform to "android".

In the home page has an unordered list (ul) with a data-role attribute of listview. Just like the div had an data-role attribute of view to tell Kendo UI that the div is a page, setting the data-role attribute to listview tells Kendo UI that the unordered list is a Kendo UI ListView. We'll be doing a bit more with it in Part 2.

Running the Android Application

To run the application; in eclipse, right-click on TaskManager and from the popup menu select Run As -> Android Application. This will run the application using the "Android22" Virtual Mobile device that was created using the Android AVD Manager tool. Here is a screenshot:

taskmanager-mobile-part1-home-page.png

Running the Application in a Browser

The nice thing about developing the application is that alot of the development and testing can be done from a WebKit enabled browser. The two that I know of is Safari and Chrome. Download your preferred browser, right-click on the index.html file and in the popup menu, highlight Open with -> Google Chrome (or whatever your preferred browser is).

Conclusion

The initial steps of setting up the Android development environment is a bit tedious, but overall, not that difficult. Referencing the necessary files for Kendo UI Mobile is simple, and creating the "home" view is straight-forward. Now that all the setup is done, Kendo UI Mobile and ASP.NET MVC : Building the Mobile Task Manager, Part 2 - Displaying Data is where the fun begins!

References


Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License