ControlFreak

LANGUAGES: VB.NET | C#

ASP.NET VERSIONS: 2.x | 3.5

 

Create iPhone Applications

Using ASP.NET AJAX

 

By Steve C. Orr

 

Thankfully, most existing Web applications will work reasonably well on the iPhone with no modification necessary. However, if you want to create a first class iPhone application, you should study the iPhone development tips detailed here.

 

What Is an iPhone Application?

When Apple s iPhone was released to the public, Steve Jobs announced that its development platform would be Web 2.0. The iPhone s integrated Safari Web browser is clearly the most sophisticated Web browser ever built into a handheld device. This strength is multiplied by the iPhone s always connected design (thanks to its Wi-Fi capabilities and AT&T s ubiquitous EDGE network). When all this is added up, the sum equals powerful client-side Web application support (see Figure 1).

 

Figure 1: The iPhone displays nearly all existing Web sites without issue, but there are some details you may want to keep in mind for creating optimal iPhone interfaces.

 

In other words, iPhone application development techniques parallel modern Web application development techniques. The foundations are HTML, AJAX, and a healthy dose of JavaScript to utilize client-side capabilities and minimize the impact of server communication.

 

Unfortunately, the iPhone does not currently support plug-ins, such as Flash, Silverlight, Java, or ActiveX controls. It can, however, display PDFs. The integrated Safari Web browser has surprisingly rich JavaScript support virtually everything you d expect from a modern desktop browser, but with a few logical exceptions. Because finger dragging is reserved for users to scroll their way around the Safari viewport, client-side drag events are not supported. Hover and mouse-over events are also not supported, as there is no mouse. For the same reason, there are no tooltips. Cookie support and intelligent caching capabilities are indeed present, but keep in mind that the iPhone has a limited amount of space for such things, so you should try to be conservative.

 

Does Size Really Matter?

The iPhone s screen can rotate, stretch, and scale intuitively to make it feel enormous at times even though physically the iPhone is diminutive enough to slide into any pocket.

 

When a user double taps the iPhone s screen, Safari automatically zooms into and enlarges the HTML block in which the user clicked. Users don t generally see or understand such HTML blocks (like divs, tables, images, etc.), but you should understand this significance so your iPhone users can more easily focus on your application s most important content. As is the trend these days, tables should generally be avoided in favor of divs, spans, and CSS when possible. This helps the iPhone render and wrap page sections in useful ways.

 

Page elements such as text boxes and submit buttons tend to display a bit undersized on the iPhone, so you may choose to enlarge them for iPhone users. Also keep in mind that handheld devices will probably never be optimal for extensive textual data entry, so try to lean away from textbox input, when possible, in favor of list controls, checkboxes, and other simple input elements.

 

To enable a Web application to display optimally for both PC users and iPhone users, you might want to detect iPhone users and take action to display some page elements differently for them. To detect iPhone users you simply need to look for the word iPhone in the browser s user agent string, as shown below:

 

If Request.UserAgent.ToLower.Contains("iphone;") Then 'VB

if (Request.UserAgent.ToLower.Contains("iphone;")) 'C#

if (navigator.userAgent.match(/iPhone/i) 'JavaScript

 

Now that the revamped iPod Touch has been released (which has virtually identical Web browsing capabilities to the iPhone) you might also want to look for the word iPod in the user agent string to add support for it, too.

 

It can sometimes be helpful to tell the iPhone what resolution you feel would be best for displaying your application s content. This can be done by adding a viewport meta tag into the page s header section, as shown in this example that suggests a width of 728 pixels:

 

<meta name="viewport" content="width=728"/>

 

You can add other suggestions for the iPhone as well, either by creating multiple viewport meta tags or by combining the parameters with semicolons:

 

<meta name="viewport" content="width=320;user-scalable=no"/>

<meta name="viewport" content="initial-scale=1" />

 

Tinkering with these meta tags can be a useful way to get content to display at desired sizes on the iPhone.

 

Does ASP.NET AJAX Work on the iPhone?

The short answer to this question is: Yes! Unfortunately, there also is a long answer involving which firmware version your iPhone users have installed. Users can update their iPhone s firmware by plugging their iPhone into a Mac or 32-bit version of Windows with iTunes installed. iTunes then guides them through the simple upgrade process.

 

If your users have never upgraded their firmware, then they are using version 1.0 of the iPhone firmware and ASP.NET AJAX will work perfectly. The next two minor firmware version updates released (versions 1.01 and 1.02) accidentally broke compatibility with ASP.NET AJAX although there is a workaround. When version 1.1 of the firmware was released, compatibility was gratefully restored. The iPod Touch (which benefited from a later release date) has always been compatible with ASP.NET AJAX. So, in summary, if your users have never upgraded their firmware, or they have the latest version of the firmware installed, ASP.NET AJAX will work perfectly with no workarounds necessary.

 

Microsoft and Apple have recently improved their communication to ensure similar incompatibilities do not occur with future updates. The iPhone s firmware version number can be extracted from the browser s user agent string, an example of which is shown here:

 

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en)

AppleWebKit/420+ (KHTML, like Gecko) Version/3.0

Mobile/1A543a Safari/419.3

 

In the above example, 1A543a signifies the original 1.0 version of the iPhone firmware. Version 1.01 displays 1C25 instead, and version 1.02 is represented by 1C28 . Version 1.1 (which restored standard ASP.NET AJAX support) is signified by 3A109a . This is summarized in the table shown in Figure 2.

 

iPhone Firmware Version	Time Frame	ASP.NET AJAX Supported?	Version Details	User Agent Version String
1.0	iPhone Launch/Early 2007	Yes	The original iPhone firmware version. ASP.NET AJAX worked perfectly.	1A543a
1.01	Summer 2007	No	Contained Safari security updates. Also accidentally broke compatibility with ASP.NET AJAX. A workaround is possible.	1C25
1.02	Summer 2007	No	Contained more Safari security updates. Standard ASP.NET AJAX support still broken.	1C28
1.1	Late September 2007	Yes	Contained significant new iPhone features, security updates, and finally restored standard support for ASP.NET AJAX.	3A109a

Figure 2: ASP.NET AJAX support history for the iPhone.

 

I ve written a couple server-side functions that use the above information to extract the iPhone firmware version and determine if it s a version that supports standard ASP.NET AJAX or not. Those functions are listed in Figure 3.

 

Public Shared Function iPhoneFirmwareVersion() As String

 Dim useragent As String = Request.UserAgent.ToLower

 Dim i As Integer = useragent.IndexOf("version/3.0 ") + 12

 Dim i2 As Integer = useragent.IndexOf(" ", i)

 Dim v As String = useragent.Substring(i, i2 - i)

 Return v.Replace("mobile/", "").Trim()

End Function

Public Shared Function iPhoneSupportsAJAX() As Boolean

 Dim v As String = iPhoneFirmwareVersion()

 If v.Length < 1 Then Return False

 Return (v = "1a543a" OrElse v.StartsWith("1") = False)

End Function

Figure 3A: These VB.NET functions determine the user s iPhone firmware version and whether it supports standard ASP.NET AJAX.

 

public static string iPhoneFirmwareVersion()

{

 string useragent = Request.UserAgent.ToLower();

 int i = useragent.IndexOf("version/3.0 ") + 12;

 int i2 = useragent.IndexOf(" ", i);

 string v = useragent.Substring(i, i2 - i);

 return v.Replace("mobile/", "").Trim();

}

public static bool iPhoneSupportsAJAX()

{

 string v = iPhoneFirmwareVersion();

 if (v.Length < 1) return false;

 return (v == "1a543a" || v.StartsWith("1") == false);

}

Figure 3B: These are the C# equivalent of the VB.NET functions shown in Figure 3A.

 

You could use the above functions to detect users with problematic firmware versions and instruct them to upgrade their firmware to use your application. Or you could use these functions to display an alternate user interface to users with a problematic firmware version. Or you could choose to put the burden upon yourself as the developer by implementing a workaround that will support all iPhone users, regardless of their firmware version.

 

The Workaround

As mentioned previously, supporting all iPhone firmware versions (including the two problematic ones) requires a workaround. This workaround requires changing one line in Microsoft s client-side AJAX JavaScript library.

 

First, make a copy of MicrosoftAjax.js (found by default in the Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.x\MicrosoftAjaxLibrary\System.Web.Extensions\v1.0.x\ folder). Then locate this problematic line of JavaScript:

 

Sys.Serialization.JavaScriptSerializer._stringRegEx=new

RegExp('["\b\f\n\r\t\\\\\x00-F]',"i");

 

And change the line to this:

 

Sys.Serialization.JavaScriptSerializer._stringRegEx=new

RegExp('["\\b\\f\\n\\r\\t\\\\\\x00-\\x1F]', 'i');

 

Save your modified version of MicrosoftAjax.js to an appropriate public folder within your Web application. Then, for every page in your application that has a ScriptManager control, add the file s path to the ScriptManager control s Scripts collection property, as shown here:

 

<asp:ScriptManager ID="ScriptManager1" runat="server" >

 <Scripts>

   <asp:ScriptReference Path="../js/MicrosoftAjax.js" />

 </Scripts>

</asp:ScriptManager>

 

You might also choose to take the above steps with the debug version of MicrosoftAjax.js, named MicrosoftAjax.debug.js. The only difference between the standard and debug files is white space. The debug version is more readable and therefore more useful for during development, while the standard version is more compact and thus more appropriate for release.

 

Should I Use ASP.NET AJAX for iPhone Development?

Just because you can use ASP.NET AJAX for iPhone development doesn t necessarily mean you should in all cases. Like any technology decision, there are tradeoffs to consider.

 

ASP.NET AJAX support means you can use ASP.NET 3.5 s UpdatePanel, Timer, and UpdateProgress controls (for example) to easily implement cutting edge AJAX capabilities into your iPhone compatible Web applications. They just work, with no special iPhone code needed. You can go a step further and use the open-source controls from the ASP.NET AJAX Control Toolkit, as well. Most of them work fine on the iPhone, with the only exceptions being a few that rely on the unsupported events listed earlier in this article.

 

However, you should keep in mind that utilizing ASP.NET AJAX requires its moderately sized client-side JavaScript library to be delivered to the iPhone. This isn t much of an issue for users with strong Internet connections. However, adding the additional libraries of the AJAX Control Toolkit can cause a noticeable delay upon page load. Even so, this can be worthwhile, considering the rich functionality provided. If you go this route, it s generally best to keep the user on that page so they needn t suffer that page load delay repeatedly.

 

Because users will sometimes have weak Internet connections from remote locations, it can be good to move as much logic as possible to the client side to minimize the amount of client-server communication. In fact, many simple iPhone applications consist purely of JavaScript and HTML, with little or no server-side interaction at all.

 

Conclusion

Apple has indeed hit another homerun with the iPhone. It s selling like hotcakes, and is destined to take over the world of handhelds much as the iPod did. As a Web developer, if you ve managed to ignore the iPhone so far, you should realize that your time for such luxuries is running out. The iPhone is evidence that mobile applications truly are destined to play a vital part in all our futures. Luckily, the iPhone is also evidence that the mobile revolution predicted for so many years may instead end up being more of a softer and gentler evolutionary change. We won t have to use special toolkits or mobile frameworks to create alternate front ends for our applications. Instead, we can continue to create applications very much like we always have, and they ll simply work.

 

While the Web 2.0 development platform enabled by the iPhone unleashes a vast array of development possibilities, it also imposes some significant limitations. For example, we currently have no direct access to the data or files contained within the iPhone. Wouldn t it be great to write an application that interacts directly with the iPhone s music library, photo collection, or contact list? Unfortunately, this currently isn t possible. However, there are rumors that Steve Jobs will soon open up the iPhone platform to enable more integrated kinds of applications. But until then, we still have plenty of creative and exciting development possibilities at our fingertips. It s time to dig in and start exploring the future of handheld development!

 

Useful iPhone References

Apple Developer Connection: http://developer.apple.com/iphone/designingcontent.html

iPhone Simulator: http://www.testiphone.com/

Google s iPhone Development Forum: http://groups.google.com/group/iphonewebdev

iPhone compatible Games & Apps: http://SteveOrr.net/games/

 

Steve C. Orr is an ASP Insider, MCSD, Certified ScrumMaster, Microsoft MVP in ASP.NET, and author of the book Beginning ASP.NET 2.0 AJAX by Wrox. He s been developing software solutions for leading companies in the Seattle area for more than a decade. When he s not busy designing software systems or writing about them, he can often be found loitering at local user groups and habitually lurking in the ASP.NET newsgroup. Find out more about him at http://SteveOrr.net or e-mail him at mailto:Steve@Orr.net.