+

Search Tips   |   Advanced Search

Application resources

We must provide various types of resources if you are to create applications that can run in multiple environments.

We must provide the following resources to create applications that can run in multiple environments. IBM MobileFirst Platform Foundation automatically generates any missing resources not supplied. However, for production quality, provide all resources required by the environments in which the application runs.


Application descriptor

The application descriptor is a mandatory XML file containing application metadata, and is stored in the root directory of the app. The file is automatically generated by MobileFirst Studio when you create an application, and can then be manually edited to add custom properties.


Main file

The main file is an HTML5 file containing the application skeleton. This file loads all the web resources (scripts and style sheets) necessary to define the general components of the application, and to hook to required document events. This file is in the \common folder of the app directory and optionally in the optimization and skin folders.

The main file contains a <body> tag. This tag must have an id attribute set to content. If we change this value, the application environment does not initialize correctly.


Style sheets

The app code can include CSS files to define the application view. Style sheets are placed under the \common folder (normally under \common\css) and optionally in the optimization and skin folders.


Scripts

The app code can include JavaScript files that implement interactive user interface components, business logic and back-end query integration, and a message dictionary for globalization purposes. Scripts are placed under the \common folder (normally under \common\js) and optionally in the optimization and skin folders.


Thumbnail image

The thumbnail image provides a graphical identification for the application. It must be a square image, preferably of size 128 by 128 pixels. It is used to identify the app in the MobileFirst catalog.

MobileFirst Studio creates a default thumbnail image when the app is created. We can override this default image (using the same file name) with a replacement image that matches the application. The file is in the \common\images folder of the app.


Splash image

The splash image applies for mobile environments and Windows 8 apps. The splash image (or splash screen) is displayed while the application is being initialized. It must be in the exact dimensions of the app.

MobileFirst Studio creates a default splash image when you create an application environment. These default images are stored in the following locations:


Add a custom splash image

We can override the default images created by MobileFirst Studio with a splash image that matches the application.

The procedures for doing this differ, depending on the target platform. But in all cases, the custom splash image must match the size of the default splash image you are replacing, and must use the same file name.


Application icons

MobileFirst Studio creates default application icons when you create the app. We can override them with images that match the application. For Android, iPad, and iPhone, put the replacement icons (using the same file names, except as noted with an asterisk * below) in the location indicated by the Location of overriding icon column in the following table.

The following table summarizes the sizes and location of each application icon.

Environment File name Description Location of default icon Location of overriding icon
Adobe AIR icon16x16.png icon32x32.png icon48x48.png icon128x128.png Application icons of various sizes that are attached to the AIR version of the application.

The dimensions of each icon are specified in its name.

air\images
Android icon.png An icon that is displayed on the device springboard. We can provide a different icon for each device density to support. android\native\res\drawable \android\nativeResources\res\drawable or android\nativeResources\res\drawable-ldpi -hdpi or other options.
BlackBerry 10 icon.png An icon that is displayed on the device.

Its dimensions are 114 by 114 pixels.

For best practices on creating application icons, see https://developer.blackberry.com/devzone/design/application_icons.html.

blackberry10\native\www blackberry10\nativeResources\www
BlackBerry 6 and 7 icon.png An icon that is displayed on the device.

Its dimensions are 80 by 80 pixels.

blackberry\native
iPad icon-xxxx.png

* Filename varies by size and target device. Exact file name can change as long as it is listed in the plist file.

An icon that is displayed on the device springboard. Size depends on iOS version and target device.

iOS6.1 and earlier:

  • Non-Retina display: 72 by 72 pixels

  • Retina display: 144 by 144 pixels

iOS7:

  • Non-Retina display: 76 by 76 pixels

  • Retina display: 152 by 152 pixels

ipad\native\resources \ipad\nativeResources\Resources
iPhone icon-xxxx.png

* Filename varies by size and target device. Exact file name can change as long as it is listed in the plist file.

An icon that is displayed on the device springboard. Size depends on iOS version and target device.

iOS6.1 and earlier:

  • Non-retina display: 57 by 57 pixels

  • Retina display: 114 by 114 pixels

iOS7:

  • 120 by 120 pixels

iphone\native\resources \iphone\nativeResources\Resources
Windows Phone 8 Background.png

ApplicationIcon.png

Both icons are used to identify the application.

Background.png is displayed on the device home screen, and must be 300 by 300 pixels.

ApplicationIcon.png is displayed in the list of applications, and must be 100 by 100 pixels.

windowsphone8\native
Windows 8 storelogo.png

logo.png

smalllogo.png

All icons are used to identify the application.

storelogo.png is the image the Windows Store uses when it displays the app listing in search results and with the app description in the listing page. The image must be 50 by 50 pixels.

logo.png represents the square tile image of the app in the Start screen. The image must be 150 by 150 pixels.

smalllogo.png is displayed with the app display name in search results on the Start screen. smalllogo.png is also used in the list of searchable apps and when the Start page is zoomed out. The image must be 30 by 30 pixels.

windows8\native\images


Parent topic: Anatomy of a MobileFirst application