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:
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 ConfigsThe 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:
1 Ext.application({
2 name: "IconsSample",
3 views: ["MainPanel"],
4 icon: "img/app-icon.png",
5 launch: function () {
6
7 var mainPnl = Ext.create("IconsSample.view.MainPanel");
8 Ext.Viewport.add(mainPnl);
9 }
10 });
This config can be used together with the phoneIcon and tableIcon configs to define default icons for phone and tablet applications:
1 Ext.application({
2 name: "IconsSample",
3 views: ["MainPanel"],
4 icon: "img/app-icon.png",
5 phoneIcon: "img/app-phone-icon.png",
6 tabletIcon: "img/app-tablet-icon.png",
7 launch: function () {
8
9 var mainPnl = Ext.create("IconsSample.view.MainPanel");
10 Ext.Viewport.add(mainPnl);
11 }
12 });
When this configuration is present, Sencha Touch uses the following code to define the application’s icons:
1 // Fragment of sencha-touch-all-debug:
2
3 if (Ext.isString(icon) || Ext.isString(phoneIcon) || Ext.isString(tabletIcon)) {
4 icon = {
5 '57': phoneIcon || tabletIcon || icon,
6 '72': tabletIcon || phoneIcon || icon,
7 '114': phoneIcon || tabletIcon || icon,
8 '144': tabletIcon || phoneIcon || icon
9 };
10 }
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 ImagesThe 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:
1 Ext.application({
2 name: "IconsSample",
3 views: ["MainPanel"],
4 icon: {
5 "57": "img/app-icon57.png",
6 "72":"img/app-icon72.png",
7 "114": "img/app-icon114.png",
8 "144": "img/app-icon144.png"
9 },
10 launch: function () {
11
12 var mainPnl = Ext.create("IconsSample.view.MainPanel");
13 Ext.Viewport.add(mainPnl);
14 }
15 });
In both modes, Sencha Touch inspects the icon config, creates links to the icons, and inserts the links in the app’s html document:
1 // Fragment of sencha-touch-all-debug.js:
2
3 precomposed = (Ext.os.is.iOS && config.glossOnIcon === false) ?'-precomposed' : '';
4
5 if (icon) {
6 var iconString = 'apple-touch-icon' + precomposed,
7 iconPath;
8
9 // Add the default icon
10 addLink(iconString, icon['57'] || icon['72'] || icon['114'] || icon['144']);
11
12 // Loop through each icon size and add it
13 for (iconPath in icon) {
14 addLink(iconString, icon[iconPath], iconPath + 'x' + iconPath);
15 }
16 }
—————————————————-
Posted By :
Manish Kumar Choithani
Senior /Lead Architect
Reference Email Ids:
[email protected]
[email protected]
[email protected]
[email protected]
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 ConfigsThe 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:
1 Ext.application({
2 name: "IconsSample",
3 views: ["MainPanel"],
4 icon: "img/app-icon.png",
5 launch: function () {
6
7 var mainPnl = Ext.create("IconsSample.view.MainPanel");
8 Ext.Viewport.add(mainPnl);
9 }
10 });
This config can be used together with the phoneIcon and tableIcon configs to define default icons for phone and tablet applications:
1 Ext.application({
2 name: "IconsSample",
3 views: ["MainPanel"],
4 icon: "img/app-icon.png",
5 phoneIcon: "img/app-phone-icon.png",
6 tabletIcon: "img/app-tablet-icon.png",
7 launch: function () {
8
9 var mainPnl = Ext.create("IconsSample.view.MainPanel");
10 Ext.Viewport.add(mainPnl);
11 }
12 });
When this configuration is present, Sencha Touch uses the following code to define the application’s icons:
1 // Fragment of sencha-touch-all-debug:
2
3 if (Ext.isString(icon) || Ext.isString(phoneIcon) || Ext.isString(tabletIcon)) {
4 icon = {
5 '57': phoneIcon || tabletIcon || icon,
6 '72': tabletIcon || phoneIcon || icon,
7 '114': phoneIcon || tabletIcon || icon,
8 '144': tabletIcon || phoneIcon || icon
9 };
10 }
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 ImagesThe 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:
1 Ext.application({
2 name: "IconsSample",
3 views: ["MainPanel"],
4 icon: {
5 "57": "img/app-icon57.png",
6 "72":"img/app-icon72.png",
7 "114": "img/app-icon114.png",
8 "144": "img/app-icon144.png"
9 },
10 launch: function () {
11
12 var mainPnl = Ext.create("IconsSample.view.MainPanel");
13 Ext.Viewport.add(mainPnl);
14 }
15 });
In both modes, Sencha Touch inspects the icon config, creates links to the icons, and inserts the links in the app’s html document:
1 // Fragment of sencha-touch-all-debug.js:
2
3 precomposed = (Ext.os.is.iOS && config.glossOnIcon === false) ?'-precomposed' : '';
4
5 if (icon) {
6 var iconString = 'apple-touch-icon' + precomposed,
7 iconPath;
8
9 // Add the default icon
10 addLink(iconString, icon['57'] || icon['72'] || icon['114'] || icon['144']);
11
12 // Loop through each icon size and add it
13 for (iconPath in icon) {
14 addLink(iconString, icon[iconPath], iconPath + 'x' + iconPath);
15 }
16 }
—————————————————-
Posted By :
Manish Kumar Choithani
Senior /Lead Architect
Reference Email Ids:
[email protected]
[email protected]
[email protected]
[email protected]