IBM XPages headTag HTTP Headers for iOS Webclip Applications Icon Sizing

Contact Information

Chris Toohey

Blogger, podcaster, writer, and geek Chris Toohey covers topics from application development to the latest must-have-gadgets.

Latest Updates

Products & Applications

Showtime
My Blackberry Enterprise Server Push Utility for the Lotus Notes Client, allows you to create Jobs for individual Channel, Message, and Browser Content Pushes, as well as allows you to delete Pushed Channel Icons from defined recipient devices.

Time Tracker
The idea is simple. At the start of your day - upon completion of your first task - create an entry highlighting what you did and whether you feel it was an efficient or inefficient use of your time. Based on several requests, you can also select the priority, apply categories, or even align your time against a project.

For Lotus Notes Client v8.0 and above, you can use the Time Tracker Widget to make this process even easier!

Zephyr
My Configuration-based Rich Text Mail Merge and Emailing Utility, Zephyr allows you to create rich, data-driven emails to support automated workflow - all via Microsoft Word Mail Merge-like architecture. Dear <firstname> allows you to personalize each email message not only to the individual recipient, but also to the individual application workflow event!

xCopy
xCopy is a simple configurable xCopy client for the Lotus Notes client. By creating and defining xCopy Profiles, you can batch process your file backup or remote upload jobs. With the addition of the xCopy sidebar widget, you can easily kick-off these jobs, and modify both the xCopy Profiles and xCopy itself.

Community & Resources

Lotus Technical Information & Education Community

The Lotus Technical Information & Education community is comprised of IBM, business partner, and customer subject matter experts who use product wikis, published articles, white papers, community blogs and the latest in social media to build and share high quality technical content.

OpenNTF.org - Open Source Community for Lotus Notes Domino

OpenNTF is devoted to enabling groups of individuals all over the world to collaborate on IBM Lotus Notes/Domino applications and release them as open source.

developerWorks Lotus : Wikis

Share your deployment experiences and best practices in our wikis and help IBM to create scenarios for successful deployments. Contribute to the community by collaborating on shared content and leverage the shared knowledge from that community.

IBM XPages headTag HTTP Headers for iOS Webclip Applications Icon Sizing

05/21/2012 03:37:00 PM by Chris Toohey

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.

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:


<xp:this.resources>

    <xp:headTag

        tagName="link"

        rendered="true"

        loaded="true">

        <xp:this.attributes>

            <xp:parameter

                name="rel"

                value="apple-touch-icon">

            </xp:parameter>

            <xp:parameter

                name="href"

                value="icon.png">

            </xp:parameter>

        </xp:this.attributes>

    </xp:headTag>

    <xp:headTag

        tagName="link"

        rendered="true"

        loaded="true">

        <xp:this.attributes>

            <xp:parameter

                name="rel"

                value="apple-touch-icon">

            </xp:parameter>

            <xp:parameter

                name="href"

                value="icon_72.png">

            </xp:parameter>

            <xp:parameter

                name="sizes"

                value="72x72">

            </xp:parameter>

        </xp:this.attributes>

    </xp:headTag>

    <xp:headTag

        tagName="link"

        rendered="true"

        loaded="true">

        <xp:this.attributes>

            <xp:parameter

                name="rel"

                value="apple-touch-icon">

            </xp:parameter>

            <xp:parameter

                name="href"

                value="icon_114.png">

            </xp:parameter>

            <xp:parameter

                name="sizes"

                value="114x114">

            </xp:parameter>

        </xp:this.attributes>

    </xp:headTag>

    <xp:headTag

        tagName="link"

        rendered="true"

        loaded="true">

        <xp:this.attributes>

            <xp:parameter

                name="rel"

                value="apple-touch-icon">

            </xp:parameter>

            <xp:parameter

                name="href"

                value="icon_144.png">

            </xp:parameter>

            <xp:parameter

                name="sizes"

                value="144x144">

            </xp:parameter>

        </xp:this.attributes>

    </xp:headTag>

</xp:this.resources>

The rendered HTML markup looks like this:


<head>

    <title></title>

    <script

        type="text/javascript"

        src="/xsp/.ibmxspres/dojoroot-1.6.1/dojo/dojo.js"

        djconfig="locale: 'en-us'">

    </script>

    <script

        type="text/javascript"

        src="/xsp/.ibmxspres/dojoroot-1.6.1/ibm/xsp/widget/layout/layers/xspClientDojo.js">

    </script>

    <link

        rel="stylesheet"

        type="text/css"

        href="/domjava/xsp/theme/webstandard/xsp.css">

    <link

        rel="stylesheet"

        type="text/css"

        href="/domjava/xsp/theme/webstandard/xspLTR.css">

    <link

        rel="stylesheet"

        type="text/css"

        href="/domjava/xsp/theme/webstandard/xspSF.css">

    <link

        rel="apple-touch-icon"

        href="icon.png">

    <link

        rel="apple-touch-icon"

        href="icon_72.png"

        sizes="72x72">

    <link

        rel="apple-touch-icon"

        href="icon_114.png"

        sizes="114x114">

    <link

        rel="apple-touch-icon"

        href="icon_144.png"

        sizes="144x144">

    <style

        type="text/css">

    </style>

</head>

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://guru.gbs.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!