ASP.NET VERSIONS:2.X | 3.5
Create iPhone Applications
Using ASP.NET AJAX
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 first iPhone was originally 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.
Figure 3: ASP.NET AJAX support history for the iPhone.
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 References:
Developing for the iPhone
iPhone Simulator:
http://www.testiphone.com/
Google’s iPhone Development Forum:
http://groups.google.com/group/iphonewebdev
iPhone compatible Games & Apps:
http://iPhonePlaza.net
This original version of
this article was published in the January 2008 issue of
ASP.NET Pro Magazine.