HTML5 Zone is brought to you in partnership with:

Jorge is the author of three software development books: "Building a Sencha Touch Application", "How to Build a jQuery Mobile Application", and the "Ext JS 3.0 Cookbook". He runs a software development and developer education shop that focuses on mobile, web and desktop technologies. Jorge is a DZone MVB and is not an employee of DZone and has posted 52 posts at DZone. You can read more from them at their website. View Full User Profile

How-to: Define Application Icons in Sencha Touch

05.12.2012
| 4495 views |
  • submit to reddit

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:Very interesting, right?
Published at DZone with permission of Jorge Ramon, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)