Fredde's Android Dev

Getting it going with ASP.NET MVC3 + jQuery Mobile

Fredde — Wed, 19 Oct 2011 10:12:31 +0000

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.

The objectives in this post

In this post I will show the following things:

Create an ASP.NET MVC3 solution in Visual Studio
Reference and use jQuery + jQuery Mobile
Creating a jQuery Mobile page (e.g. an MVC View using jQuery Mobile)

Create the initial Visual Studio project

Create an ASP.NET MVC3 Web Application project and its empty project template. Just leave the default settings, e.g. use the Razor View Engine and click OK. The web application project is created, including one single Error view inside the Shared folder inside Views. When creating the new project you will also get a layout template as well, called _Layout.cshtml. This layout may be compared to the master page file in an ordinary ASP.NET web application.

In the _Layout.cshtml you will find the style sheets included in the application along with a reference to the jQuery framework. The next thing to do is to remove the reference to the Site.css style sheet and the jQuery framework. The modified _Layout.cshtml will now look like this:



  
    @ViewBag.Title
  

  
    @RenderBody()

Now it’s time to include the jQuery Mobile things and some other stuff.

Include jQuery Mobile js and css

First of all the jQuery Mobile framework has to be downloaded. This is found here (version 1.0 RC1). For this example I decided to use the uncompressed versions for both the js and the css. Save the javascript file in the Scripts folder and the css file in the Content folder. To use jQuery Mobile the core jQuery framework is needed as well, so this is downloaded to the same folder as the Mobile pack. Include the files in the Visual Studio project and add references to the files in _Layout.cshtml file. These steps should end up with a _Layout.cshtml file looking like this, after adding a new empty “main.css” style sheet to the Content folder:



 
    @ViewBag.Title

    
    
    
    

    
    
    

 

 
    @RenderBody()

I decided to go with the latest version of jQuery, e.g. version 1.6.4.

Of course all downloaded things above may be included as CDN resources instead, making the _Layout.cshtml file look like this:



  
       @ViewBag.Title

       
       
       
       

       
       
       

   

   
     @RenderBody()

Now everything is set up to use the framework, let’s add a “Hello World!” view.

Adding a View

The easiest way to add a View to an MVC application is to first add a Controller, let’s call it HomeController, by right-clicking the Controllers folder and choose “Add” -> “Controller…”. By default an Index action is created in the newly created controller:

using System.Web.Mvc;

namespace DroidDevSeries.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/
        public ActionResult Index()
        {
            return View();
        }
    }
}

Right-click return View(); on line 11 and choose “Add View”. This will create a folder structure in the Views folder with a Home folder with an Index.cshtml file inside:

Making it look mobile

One of the best things with jQuery Mobile is, according to me, that its base component for making a web page look like a mobile app is the div tag. A page in the jQuery Mobile world is a div tag with a data-role attribute set to page. So if a view to be used on a mobile device is added to the solution, its .cshtml file should look something like this:

@{
ViewBag.Title = "Index";
}

 
     Sample page
     Hello World!
     © Copyright SomeCompany

Note that I decided to add a header, some content and a footer as well, using the div tag attributes:

data-role=”header“
data-role=”content“
data-role=”footer“

In upcoming posts other data-roles will be shown, allowing jQuery Mobile to hook in on things and make it pretty.

Viewing the page created above in the Chrome browser will look like this:

and with an Android emulator:

Now we’re on our way, next up is to add some fancy toolbar buttons in the page header and page footer and some sort of list in the content section. Read about that in upcoming posts.

No more native (I think)

Fredde — Tue, 04 Oct 2011 07:13:48 +0000

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

Fredde — Wed, 27 Oct 2010 17:42:43 +0000

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

Fredde — Tue, 19 Oct 2010 20:23:55 +0000

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 {

    private ArrayList mOverlays = new ArrayList();
    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

Fredde — Mon, 18 Oct 2010 18:19:01 +0000

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

Fredde — Sun, 17 Oct 2010 20:07:00 +0000

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?

Fredde — Sat, 16 Oct 2010 21:17:16 +0000

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

Fredde — Sat, 16 Oct 2010 17:29:05 +0000

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

Fredde — Thu, 14 Oct 2010 21:12:34 +0000

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

Fredde — Thu, 14 Oct 2010 09:32:11 +0000

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:

I’ll try to remember that now!