How to Define Application Icons in Sencha Touch

The Custom Icon and Image Creation Guidelines for iOS applications recommend different web clip and application icon sizes for phones and tablets. Sencha Touch provides a means to define these icons in the Application Class. The icons will be shown on the home screen for iPhone and iPad applications.

These are the web clip and Application icon sizes, as recommended by the guidelines:

• Size for iPhone and iPod touch (in pixels): 57 x 57
• Size for high-resolution iPhone and iPod touch (in pixels): 114 x 114
• Size for iPad (in pixels): 72 x 72
• Size for high-resolution iPad (in pixels): 144 x 144

In Sencha Touch, we define the app’s icons with the help of three configuration options of the Application Class – icon, phoneIcon, and tabletIcon.

Defining Sencha Touch Application Icons Using The icon, phoneIcon, and tabletIcon Configs

The icon config has two modes of operation. The first mode accepts a string with the path to a single icon, which will be used regardless of the iOS device where the application is installed. Here’s an example:

Ext.application({
    name: "IconsSample",
    views: ["MainPanel"],
    icon: "img/app-icon.png",
    launch: function () {

        var mainPnl = Ext.create("IconsSample.view.MainPanel");
        Ext.Viewport.add(mainPnl);
    }
});

This config can be used together with the phoneIcon and tableIcon configs to define default icons for phone and tablet applications:

Ext.application({
    name: "IconsSample",
    views: ["MainPanel"],
    icon: "img/app-icon.png",
    phoneIcon: "img/app-phone-icon.png",
    tabletIcon: "img/app-tablet-icon.png",
    launch: function () {

        var mainPnl = Ext.create("IconsSample.view.MainPanel");
        Ext.Viewport.add(mainPnl);
    }
});

When this configuration is present, Sencha Touch uses the following code to define the application’s icons:

// Fragment of sencha-touch-all-debug:

if (Ext.isString(icon) || Ext.isString(phoneIcon) || Ext.isString(tabletIcon)) {
    icon = {
        '57': phoneIcon || tabletIcon || icon,
        '72': tabletIcon || phoneIcon || icon,
        '114': phoneIcon || tabletIcon || icon,
        '144': tabletIcon || phoneIcon || icon
    };
}

Note how the icon config is transformed into an object with four properties. Each property is in turn and object representing an icon configuration that follows the guidelines above.

Defining Sencha Touch Application Icons Using a Set of Images

The second mode of operation of the icon config gives you maximum control, as you have the opportunity to directly define the icon for each iOS device. In this case you specify an object with four properties, each representing an icon configuration for a particular device. This mode supersedes the phoneIcon and tabletIcon configs. Here’s an example:

Ext.application({
    name: "IconsSample",
    views: ["MainPanel"],
    icon: {
        "57": "img/app-icon57.png",
        "72":"img/app-icon72.png",
        "114": "img/app-icon114.png",
        "144": "img/app-icon144.png"
    },
    launch: function () {

        var mainPnl = Ext.create("IconsSample.view.MainPanel");
        Ext.Viewport.add(mainPnl);
    }
});

In both modes, Sencha Touch inspects the icon config, creates links to the icons, and inserts the links in the app’s html document:

// Fragment of sencha-touch-all-debug.js:

precomposed = (Ext.os.is.iOS && config.glossOnIcon === false) ? '-precomposed' : '';

if (icon) {
    var iconString = 'apple-touch-icon' + precomposed,
            iconPath;

    // Add the default icon
    addLink(iconString, icon['57'] || icon['72'] || icon['114'] || icon['144']);

    // Loop through each icon size and add it
    for (iconPath in icon) {
        addLink(iconString, icon[iconPath], iconPath + 'x' + iconPath);
    }
}

Very interesting, right?