dominoGuru.com

Your Development & Design Resource

IBM XPages headTag HTTP Headers for iOS Webclip Applications Icon Sizing

One of my favorite tactics for deploying a mobile device application is via mobilized XPages applications. Sure, there are situations which call for an actual local device application that interacts with Domino via Web Services or XPages (as a Web Services broker), but sometimes having a simple XPages-based Form and View for an application is all the business logic and real world use scenario requires. In other words, sometimes faking it gets the job done.

For those situations where your mobile device users will have absolute connectivity (think internal shop floor with wireless network access), or you're really only testing out the mobile device application adoption for your internal applications (those proof of concepts before you invest too much time and resources for what ultimately might not be used by the target user audience...), the iOS (and Android for that matter) webclip icons will help make your mobile browser-friendly application look and feel more like a local on-device application.

Now, I've talked about this in the past (reference: Adding custom iPhone/iPad/iPod Touch Web Clip Icons to your IBM Lotus Notes Domino XPage Apps), but using an apple-touch-icon HTTP LinkHeader allows you to provide a simple icon for your webclip applications. However with the advent of larger resolution retina displays from Apple, those paltry 57x57 pixel images just won't cut it.

Here's a breakdown of the iOS Application Icon sizes that are now available:

Icon iOS Device Platform
57x57 iPod Touch 3 (or older)/iPhone 3 (or older)
72x72 iPad 2 (or older)
114x114 iPod Touch 4 (retina display) / iPhone 4/4S (retina display)
144x144 iPad 3 (retina display)

So let's say we take the Activity Monitor Icon of the Gloss Mac Icons set from icon artist Jojo, and create all of the icons we'll need for a given application:

Image Size (pixels) iOS Device Platform
iPod Touch 3 (or older)/iPhone 3 (or older)
iPad 2 (or older)
iPod Touch 4 (retina display) / iPhone 4/4S (retina display)
iPad 3 (retina display)

For our IBM XPages application, we'll want to create the HTTP LinkHeader but include a sizes attribute.

XPages Source: 'sizes' Property not recognized for xp:linkResource XPages Resources.XPages Source: 'sizes' Property not recognized for xp:linkResource XPages Resources.

 

Of course, the sizes Property is not a supported Property for the xp:linkResource Control. So we punt to the ultimately more flexible xp:headTag and simple include the sizes Property as an xp:this.attributes Parameter:

Pretty simple, really. For those of you using Apple's latest iPads (iPad 3) with the Retina displays, I'm certain you'll appreciate the jump in icon quality from the 57x57 default icon.

And keep in mind that this article really talks to using the same icon yet simply resizing it depending on the target device. Imagine throwing completely different icons out there...

Online Demo

Want to test this in action? Point your iOS device (should work for Android devices too) to the following URL:

http://www.dominoguru.com/demo/sxt.nsf/demo_mobile_icons.xsp

-- or use this QRCode:

qrcode

You'll get a simple XPage. Create a webclip/bookmark the site to your Home screen, and you should see the device-resolution-specific icon.

In Closing...

I got really frustrated -- silly, I know -- when I first tried using the sizes Property on an xp:linkResource Control in the XPages Resources. So frustrated, in fact, that I tweet my frustration... only to follow-up a few minutes later sharing the news that I could use the xp:headTag with complete success.

So this article is mostly about how to create resolution/hardware-specific icons for your iOS webclip applications, kinda about understanding that the xp:headTag can be used to inject all sorts of craziness into the HTTP Header that was not previously considered, and a little bit about putting some IBM XPages Development WIN! vs. simply complaining that something can't be done.

Oh, and knowing how this completely awesome and talented community can be at times, that last line was directed at absolutely no one but myself, and specifically addressing my to Twitter! complaining that something didn't do exactly what I wanted it to do when I wanted it to.

... but at least I followed up with the answer should someone else be looking!


About the author: Chris Toohey

Thought Leadership, Web & Mobile Application Development, Solutions Integration, Technical Writing & Mentoring

A published developer and webmaster of dominoGuru.com, Chris Toohey specializes in platform application development, solutions integration, and evangelism of platform capabilities and best practices.



More from dominoGuru.com


dominoGuru.com is powered by IBM Notes Domino XPages & hosted by Prominic.NET

Contact Us

Use our Contact / Feedback form or one of these email addresses:

Creative Commons License

Except where otherwise noted, dominoGuru.com by Chris Toohey is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.