iWebKit + ASP.NET

If you're like me, you want an iPhone OS-themed website. You'll also want a dynamically-generated website — static pages and forms are so 1997. The good news is that it's really easy to do, will cost you nothing and most of the heavy lifting has been already done for you. Today we'll examine how to build quick 'n' dirty web applications for the iPhone platform using Mono, ASP.NET and a theming kit called iWebKit. If you're an old web development warhorse, this is not for you. If however you're just starting out in the field, this is probably right up your alley.

Theming Options

Undoubtedly one of the best features of the iPhone platform is Mobile Safari. Safari utilizes the WebKit layout engine and is capable of rendering pages using HTML5, CSS3 and good ol' JavaScript. There are a number of frameworks out there that work with Safari (or most other WebKit browsers in fact) like iWebKit, iUI and jQTouch. I chose iWebKit because it's a nifty theming kit that gives web pages iPhone-styled flair, and from beginner to advanced users, it's crazy easy to use.

A New Solution

So in this demo / tutorial, we'll be creating a web application that gets two integer values from the user, adds them together, and returns the result back to the user. We'll also be wrapping these HTML form elements in iWebKit sexyness. If you want to code along, you'll need an iPhone, iPod Touch or a WebKit-based browser (like Midori), Mono, a wireless Ethernet connection if you want to view the webapp on your iDevice, and finally iWebKit.

Let's start by creating a new ASP.NET web application in Mono (File → New → Solution…) and call it AdditionCalcApp (how imaginative!). Go past the second dialog and hit forward. What you're presented with at this point is an empty barebones app that will give the user a button to click on and when clicked it will change the text on the button to a new value.

While we're setting-up, we might as well do two necessary things - configure xsp2 to accept LAN requests, and deploy our theming kit into a resources directory. Go to the Solution Browser, right-click on the AdditionCalcApp project and select Options (or Project → Options in the menu bar).

In the Run section of the project options, select the XSP Web Server subsection and enter your machine's IP address in the appropriate field. To check if your setup is working properly, save these changes and hit F5 to build and run your project. Fire-up Safari on your iDevice and navigate to http://<your-server-ip>:8080/ - if it's working properly, you'll see a button you can click and it'll change from "Click Me!" to "You Clicked Me!" (if not, you're on your own).

The second part of the setup is adding iWebKit to your project. Now, the method I present is quick and dirty and probably shouldn't be used for enterprise-scale web applications, but it serves it's purpose. In the Solution browser, right-click on your project and select "Add → ASP.NET Directory → Theme". This will add a folder to your project which will contain iWebKit's files. From the Framework directory in the iWebKit archive, extract css/, images/ and javascript/` into the project folder you've just created.

The Pretty Stuff

Now that we're all set up, let's get coding some HTML (in Default.aspx). Our page is split into two distinct sections: the head and the body. The head incorporates our theming and meta information and the body contains our addition input form.

<head>  
  <meta content="yes" name="apple-mobile-web-app-capable: />
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  <meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, 
      user-scalable=no" name="viewport" />
  <link href="Theme/css/style.css" rel="stylesheet" media="screen" 
      type="text/css" />
  <script src="Theme/javascript/functions.js" type="text/javascript"></script>
  <title>ASP.NET + iWebKit Demo</title>
</head>  

There are a few things to note in the head section. We have two meta tags telling the browser that this is a mobile Safari-based web application (lines two and four) and two tags that tell the browser to use the iWebKit CSS and JavaScript theming code (lines five and six). To utilize the shiny things in iWebKit in Safari, we have two main sections in the body region: the topbar divider and the content divider. The topbar divider specifies the navigation bar component of the theme and can specify links to and from other pages and a title for the page:

<div id="topbar">  
    <div id="title">ASP.NET + iWebKit</div>
    <div id="leftnav">
        <asp:hyperlink navigateurl="Default.aspx" runat="server" 
            imageurl="Theme/images/home.png"></asp:hyperlink>
    </div>
</div>  
<div id="content">  
    ...

The title divider of the topbar is obvious, it's the textual in-page title of the application. The leftnav divider allows navigation to other pages, however I've set it redirect back to the page we're on (a simple way of refreshing the page … I'm lazy). Moving on!

Nice Body!

In our #content divider we're going to place our form and some basic instructions to the user. Our form is going to have two inputs (TextBoxes A and B) and a button to run the inputs against the server to calculate our function (addition) and present the result. Code dump!

<div id="content">  
  <form id="form1" runat="server">
    <span class="graytitle">Form Example</span>
    <ul class="pageitem">
      <li class="smallfield">
        <span class="name">Value A:</span>
        <asp:textbox id="A" runat="server"></asp:textbox>
      </li>
      <li class="smallfield">
        <span class="name">Value B:</span>
        <asp:textbox id="B" runat="server"></asp:textbox>
      </li>
      <li class="button">
        <asp:button id="submit" runat="server" text="Calculate" onclick="submitClicked"></asp:button>
      </li>
    </ul>
  </form>
  <span class="graytitle">Instructions</span>
  <ul class="pageitem">
    <li class="textbox">
      <p>Click the two textfields to enter integer values. 
      Click the button to add them together.</p>
    </li>
  </ul>
</div>  
<div id="footer">  
</div>  

More of information about the span formatting tags is available in the iWebKit Documentation, but suffice to say each list tag represents an element in a grouping of elements. For each form element we give it a name (A, B or submit), some other properties and we tell them to submit these values to the web server. One thing to note is the OnClick property of the submit button. This property tells the server to invoke the submitClicked method in Default.aspx.cs, the codebehind for the page, when the user hits the button.

Code Behind Style

public partial class Default : System.Web.UI.Page  
{
    public virtual void submitClicked(object sender, EventArgs args)
    {
        submit.Text = string.Format("Result: {0}",
            Int32.Parse(A.Text) + Int32.Parse(B.Text)
        );
        A.Text = " ";
        B.Text = " ";
    }
}

This is the easy part. The above snippet replaces the method in Default.aspx.cs that Mono generated for us when we created our project. When the user clicks/touches the button on the page, the form information is submitted to server and the button event handler is invoked. We parse the text fields A and B with the static Int32 class method Parse(), add the numbers together and set the button label to that result. For the sake of being nice, we clear the A & B text fields to a non-value.

Now there are some caveats with this web application. The biggest one is that there is no error checking and there is no input validation. If the user enters a non-integer in either of the text fields, then the server is going to throw an exception and crash. This leads to the second 'fault', that is, there is no recovering from the fault once it's made without loading-up the application again. The application is using the basic error page generated by xsp2 and it's pretty non-user-friendly to say the least. There are options to configure more useful error pages but that lies outside the scope of this tutorial.

Review

Hopefully this tutorial has given you an idea how you can create easy to use and pretty web applications for mobile Safari using iWebKit and ASP.NET. In the future I will be presenting some more advanced web application tutorials that utilize databases and RESTful web services to do nifty and awesome things. Hope to see you then!