Getting it going with ASP.NET MVC3 + jQuery Mobile

In the following posts I’d like to show a really basic example how to create a simple jQuery Mobile page containing a page header (e.g. a title) with a toolbar button, a body with some text and a footer with some sort of copyright text. After that I’ll show some basic navigation stuff along with a form and of course submitting this form to a controller action. This will include both client side stuff, e.g. javascript + HTML5 + CSS, and server side code, e.g. MVC controller actions.

I will use Visual Studio and its standard project template for an ASP.NET MVC3 web application, e.g. the empty MVC3 template. I will use the Razor view engine and include jQuery Mobile to make it look good on mobile devices.

No more native (I think)

OK, time for some action around here again! The other day I was browsing the internet and bumped into a comparison between a number of HML5 + Javascript + CSS frameworks for mobile and handheld devices. First of all my aim was to gather more information about the Sencha Touch framework, but since I got started on a ASP.NET MVC3 web project at work I googled for “mobile development using MVC3″ and read about a guy writing about creating a blog using jQuery Mobile and MVC3.

Thanks to Chad Lung! The article was an inspiration to start developing a small mobile time report web application.

So, what’s next? Well, I’ve created an ASP.NET MCV3 web application and started playing around with it to get familiar with the jQuery Mobile framework. So far everything is great, except pretty bad performance on page and dialog transitions on Android devices. Luckily the framework supports disabling all animations on transitions and the application runs smooth. I’ll sum up the things in a separate post later on.

Having a short break

As some may have noticed, the posting here has come to a stop for the moment. There will be more coming here soon of course, but for the moment I’m working on learning Dependency Injection and writing about that on freddes.se.

I’ll be back here in a couple of days or so!

The map integration

In the previous post on the design for the real app I decided to start the implementation of the map showing some objects of some kind. That’s done now…

To have some sort of chance on success I took a lot of code from the Google Map View tutorial, e.g. the adding of map overlays. First I created an entities package (se.freddes.mapinfo.entities) and added an entity class:

• GeoItem
  • Properties/attributes
    • Title
    • Details
    • ItemLink
    • X
    • Y

The class doesn’t contain any methods, but it implements the java.io.Serializable interface. The interface is needed later on when deserializing of Json objects. This will be explained in upcoming posts. The source for the GeoItem class looks like this:

package se.freddes.mapinfo.entities;

import java.io.Serializable;
import com.google.android.maps.Overlay;
import android.net.Uri;

public class GeoItem extends Overlay implements Serializable {

    private String Title;
    private String Details;
    private String ItemLink;
    private Double X;
    private Double Y;

    public Double getX() {
        return this.X;
    }
    public Double getY() {
        return this.Y;
    }
    public String getTitle() {
        return Title;
    }
    public void setTitle(String title) {
        this.Title = title;
    }
    public String getDetails() {
        return Details;
    }
    public void setDetails(String details) {
        this.Details = details;
    }
    public Uri getItemLink() {
        return Uri.parse(ItemLink);
    }
    public void setItemLink(Uri itemLink) {
        this.ItemLink = itemLink.toString();
    }
}

To make it possible to adding the GeoItems as overlays on the map, I decided to steal the implementation of the HelloItemizedOverlay from part 2 of the Google Map View tutorial. The only thing I did was to rename it to GeoItemizedOverlay, which made the code look like this:

package se.freddes.mapinfo.entities;

import java.util.ArrayList;

import android.app.AlertDialog;
import android.content.Context;
import android.graphics.drawable.Drawable;

import com.google.android.maps.ItemizedOverlay;
import com.google.android.maps.OverlayItem;

public class GeoItemizedOverlay extends ItemizedOverlay<OverlayItem> {

    private ArrayList<OverlayItem> mOverlays = new ArrayList<OverlayItem>();
    private Context mContext;

    public GeoItemizedOverlay(Drawable defaultMarker, Context context) {
        super(boundCenterBottom(defaultMarker));
        mContext = context;
    }

    @Override
    protected OverlayItem createItem(int i) {
        return mOverlays.get(i);
    }

    @Override
    public int size() {
        return mOverlays.size();
    }

    public void addOverlay(OverlayItem overlay) {
        mOverlays.add(overlay);
        populate();
    }

    @Override
    protected boolean onTap(int index) {
        OverlayItem item = mOverlays.get(index);
        AlertDialog.Builder dialog = new AlertDialog.Builder(mContext);
        dialog.setTitle(item.getTitle());
        dialog.setMessage(item.getSnippet());
        dialog.show();
        return true;
    }

}

The overlays are added to the map using the following construction:

private void addItems(MapView mapView) {
    mapView.getOverlays().clear();
    GeoItemizedOverlay items =
        GeoItemHandler.getItems((this.getResources().getDrawable(R.drawable.pushpin)), mapView);
    if(items != null) {
        mapView.getOverlays().add(items);
    }
}

The GeoItemHandler.getItems method on line 4 will be shown in a later post on Json object deserialization. Note that before adding the overlays the old ones are removed, on line 2. The addItems private method above is called from the onCreate event handler.

So, that’s it for the items to be displayed. The thing needed now is a way to show the map, e.g. an activity for the map. This is shown in part 1 of the Google Map View tutorial.

I won’t show this here since it is exactly the same as in the tutorial. This means that next up is to get some data to display, e.g. implement a Web service handler.

I forget to name the app

I just realized I forgot to give the app a name…

It will be called MapInfo. How about that for a fancy name?
The source package will therefore be se.freddes.mapinfo.

Design for the “real” app

In a previous post I decided to create an app showing things or objects on a map, displaying detailed info about the objects and the app should be served with data from a web service returning JSON objects. The web service will be a RESTful web service, but this is of course not the primary thing with the system.

The app will, in the first version, consist of three modules:

• Web service handler
  • Consume the web service
  • Deserialize the received JSON objects into POJOs
  • Provide an interface for other parts to get fresh data from the web service
• “Caching”/local storage
  • The app shall be able store historical data
  • The app shall cache the latest received data to use when the app starts, before a refresh
  • Store a favorites, such as favorite restaurant or air port
• Map integration
  • The objects shall be displayed on map
  • Detailed information shall be displayed for the selected object
  • The objects shall have some kind of context menu for adding them to the favorites list

I think I’ll start off with the Map integration since that’s the one most needed to see any results from the other parts of the system. I think this one will be the hardest to make it work properly but at the same time the easiest to feed with fake data.

More info will be published here later.

OK, what to build?

Since I finished the tutorials on the Android Developers site I felt I needed to build my own somewhat useful app, I have to decide what to build. When I was younger I had a great interest in meteorology and airplanes, so I got familiar with something called METAR. METAR is a way of encoding weather observations and I bumped into those when visiting my cousin at his work on an airport. When I later started doing some serious web programming I decided to create a web services exposing methods for getting METAR encoded data, to be consumed from a web site presenting those on a map. So why not go the same way this time when learning a new target OS?

The thing with this decision to build such an application is the following:

• The app has to consume one or more web services, returning JSON objects
• The app has to deserialize data from the web services, e.g. deserialize JSON objects into Java object
• The app has to have a map for presenting the information
• The app has to have a database to store historical data

When giving those requirements on the app, I felt that it will look much like the Google Maps app already out there on the market, but I don’t really care. I will learn the Android development stuff and I will create my on app implementing the requirements stated above. After all it will be well suited for presenting restaurants from my girl friend’s restaurant guide (LaLevin’s restaurangguide on http://lalevin.wordpress.com) as well, so maybe I’ll do that…

I’ll get back here when I have some kind of system design to show.

Resources on the Android Developers’ site

Before starting to develop my own apps, I really feel that I have to give credits to the Android Developers’ site and all the resources presented there. The Android Developers’ Resources site is filled with sweet things, tutorials that are great, technical articles, code samples and tons of other stuff.

The tutorials were great for me being a newbie on the Android app development. Have a look there, everything you need is there from setting up the environment to adding maps and databases to your app. Good luck!

The Notepad Tutorial

The three step Notepad Tutorial is a great tutorial giving you a great insight i different things, like storing things to a database, databinding lists of items etc. It gives a great introduction on building real world apps for the Android OS.

It is divided into three parts where part two and three are continuations on the previous step. You can download each step’s base of code but it makes more sense to start off with part one and create your own base of code for the next step.

Before starting with this tutorial I had finished the others, which was more or less needed. I felt really comfortable after finishing the third part of this tutorial, actually so comfortable that I now can build my own app. I have a couple of ideas in mind, and I will try to log things here in upcoming posts. But before that, let’s look at some key things from the Notepad thing.

In the first part I got introduced to the ListView, the layout for the items in the ListView and the ListActivity. I now felt that I had missed writing about activities and their central role in the Android app development. Let’s have a look at them here.

An Activity is exactly what is says, it is a component, some sort of view, where the user may perform some kind of useful things. In the Notepad tutorial the ListActivity is the first thing that meets the user. It is a list of notes present in the database for the app. The ListActivity is a subclass of the Activity class that gives more functionality handling items, e.g. event handling when the user selects an item etc.

Another great thing in the first part is the creation of the option menu on the ListView and the events on that menu. It also covers the filling of the ListView, using a cursor and databinding.

The second and third part of the tutorial the key things are:

• Constructing an app using multiple activities
• Passing data between activities with Bundle objects
• Context menus
• Maintain application states

After finishing all the three steps I felt I had a pretty good base for developing my own app, so let’s get the things going!

Internet access for apps

In the previous post on the MapView (Google Maps API) I bumped into to problems having the app connecting to the Internet. It turned out that it was a configuration issue, where I had forgotten to specify the app’s need for Internet access. I wrote about it before but I feel like writing it again, just to make myself remember it. The thing is that I will for sure forget it and curse my stupidity in the future when developing apps needing Internet access…

OK, on line 7 is the configuration to be added to the AndroidManifest.xml file:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="se.freddes.helloworldgooglemaps"
      android:versionCode="1"
      android:versionName="1.0">

    <uses-permission android:name="android.permission.INTERNET" />

    <application ...>
        <activity ...>
        .
        .
        .
        </activity>
    </application>

</manifest>

I’ll try to remember that now!