Jorge Ramon

  • Home
  • New Here?
  • Articles
    • All
    • Sencha Touch
    • jQuery Mobile
    • ExtJS
  • Books
  • About

How to Define Application Icons in Sencha Touch

March 12, 2012 6 Comments

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?

Stay Tuned

Don’t miss any articles. Get free updates in your inbox.



MiamiCoder will never sell your email address.

Tagged With: Sencha Touch Tutorial 6 Comments

Comments

  1. geeksnail says

    April 5, 2012 at 2:46 AM

    You said about the sencha touch 2.0, right?
    I didn’t find the icon configuration feild in sencha touch 1.1

    Reply
    • Jorge says

      April 5, 2012 at 7:32 AM

      Sencha Touch 2.

      Reply
      • Lucas says

        May 2, 2012 at 6:12 PM

        And how to add those to native compilation for iOS?

        on packager.json by default it uses icon.png, but I need to specify one for each model.

        Reply
  2. Ram says

    June 6, 2012 at 2:51 AM

    Hi Jorge,

    Please can you provide any tutorial on adding a custom image/icon on a button in sencha touch 2 using sass

    Reply
  3. Ronan Quillevere says

    September 17, 2012 at 4:32 AM

    Very good article, thx. I quote it in one of our blog post talking about saving a web site as an application on iOS and how Sencha Touch 2 does it.

    one2teamdev.blogspot.fr/2012/09/web-site-as-web-app.html

    Reply
    • Jorge says

      September 17, 2012 at 7:32 AM

      Thanks, Ronan.

      Reply

Leave a Reply to Ram Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Free Mobile User Interface Recipes Kit

Free Mobile User Interface Recipes Kit

Sign up to receive my posts via email and get a FREE Mobile User Interface Recipes Kit with mockups packages for three real-world mobile apps. You will save hours of design time when you use the kit to build your own apps.



I will never share your email address.

Get My Books

The beginner's guide to Sencha Touch apps
The beginner's guide to jQuery Mobile apps

Book: How to Build a jQuery Mobile Application

Topics

  • » jQuery Mobile Tutorials
  • » Sencha Touch Tutorials
  • » ExtJS Tutorials
  • » Books
  • » Tools
  • » .Net Tutorials
  • » BlackBerry Tutorials
  • » iOS Tutorials
  • » Node.js Tutorials
  • » Android Training
  • » BlackBerry Training
  • » iOS Training

Search

Contact Me

  •  Email: jorge[AT]jorgeramon.me
  •  Twitter: @MiamiCoder
  •  LinkedIn: Jorge Ramon


Don’t Miss the Free Updates

Receive free updates in your inbox.
Your address is safe with me.

Copyright © 2019 Jorge Ramon · The opinions expressed herein do not represent the views of my employers in any way · Log in