I’ve recently worked on an application that required a mobile (iphone/Android) to quickly search through data and do it in such a way that it fits the dimensions of the iPhone/Android Phone. One of the great things about Android and iPhone is the fact that both operating systems use safari webkit as their web browser. It is a slimmed down version however it has a lot of the same features as the full blown safari web browser. That being the case, building a web application for the iPhone is also building a web app for the Android phone too. iPhone and Android, however, suffer from the same ailment… Dimensions. Yes it’s true you can browse the web and see websites and it looks almost exactly the same as it does on your desktop PC (minus things like flash), but the problem you run into is that to see the entire website, the browser must shrink the webpage to the point at which you can no longer read the text until you zoom in. Then the content goes off in all directions off the viewable area of the screen and you must drag your screen in each direction to view the content. Fine for a regular website. Not so fine for an application in which you must interact with the content. Most native applications for the iPhone have a prescribed look and feel about them that does a great job making it easy to interact with the area of the screen that you have to work with on the iPhone. A great way of making an iPhone web app is to mimic that same look and feel in a web browser. So how do we do this?
iUI — don’t reinvent the wheel
A great start is a web framework called iUI (http://code.google.com/p/iui/). This is basically a pre-built template for building iPhone web apps and it utilizes some of the powerful proprietary css features in webkit such as curved borders etc… This gives the same feel as a native iPhone app.
iUI framework also has built in ajax functionality.
ASP.net issues
iUI is a great framework but it has specific expectations regarding the html/javascript/css. PHP works very easily with iUI as the programming model typically doesn’t send anything that the developer doesn’t specify. The developer will typically build a form and the inputs for that form and that form will send POST variables to the server where PHP will process and send results. ASP.net has a more complex partial class system in which a aspx page is (typically) comprised of the aspx page and the ‘code behind’ C# or VB code file. The C# code will interact with the aspx page by processing ASP.net-specific controls with a ‘runat=”server”‘ attribute in the user control. However, much of the processing of these ASP.net-specific controls will add generated html and javascript code and many times this code doesn’t ‘play nice’ with the iUI framework.
A Solution
While the ASP.net partial classing model is powerful it’s not the only way to skin the cat. The particular application I was working on was using the Microsoft Membership to handle user log ins which required a form to send the user name and password to be processed by ASP.net. I simply built a regular html form (minus the runat=”server” attribute):
<body>
<form id="login_form" style="display:none" method="post" action="Default.aspx">
<strong>User Name</strong><br />
<input type="text" autocorrect="off" autocapitalize="off" id="iUserName" name="iUserName" /><br />
<strong>Password</strong><br />
<input type="password" id="iPassword" name="iPassword" /><br />
<input class="whiteButton" autocorrect="off" autocapitalize="off" type="submit" value="Login" />
</form>
</body>Assuming our aspx page is ‘Default’ this will post back the form back to the Default.aspx page. We can get the information that was posted back to us with the ‘Request.Form’ structure and get the post variables. To log into the Microsoft membership system, we can validate the username and password with Security.Membership.ValidateUser static function. If the user name and password are correct then we log into the system with the FormsAuthentication.SetAuthCookie function:
if (Request.Form["iUserName"] != null && Request.Form["iUserName"] != string.Empty) { if (System.Web.Security.Membership.ValidateUser(Request.Form["iUserName"].ToString(), Request.Form["iPassword"])) { FormsAuthentication.SetAuthCookie(Request.Form["iUserName"].ToString(), true); Response.Redirect("~/app/iphone/iphone.aspx"); } else { Response.Write("Invalid username or password"); } }
So what just happened?
By using a plain vanilla HTML form we are not generating a lot of unnecessary HTML code that would conflict with the iUI framework. We can easily get the posted variables even if we no longer have the easy access to the controls as we would if we were processing the controls on the server. This also has another added benefit of being less bytes sent from the server to the phone. 3G networks are still not near as fast as broadband is and it can take time to download and process extra code. This trims down the amount of code you send to the browser making it faster for your page to load.
Conclusion
This article is not meant to document how to use iUI. You can find that here. There is more information on how to use iUI with microsoft MVC here.
Leave a Reply
You must be logged in to post a comment.