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:
- For Apple iOS platforms, the default splash images are stored as follows:
- For iPhone, under iphone\native\Resources
- For iPad, under ipad\native\Resources
The file names of the default splash images are as follows, and vary according to iOS version and target device:
- For iPhone Non-Retina display (iOS6.1 and earlier): Default~iphone.png 320 by 480 pixels
- For iPhone Retina display (iOS6.1 and earlier): Default@2x~iphone.png 640 by 960 pixels
- For iPhone 4-inch Retina display (iOS6.1 and earlier): Default568h@2x~iphone.png 640 by 1136 pixels
- For iPhone Retina display (iOS7): Default@2x~iphone.png 640 by 960 pixels
- For iPhone 4-inch Retina display (iOS7): Default568h@2x~iphone.png 640 by 1136 pixels
- For iPad (iOS6.1 and earlier): Default-Portrait~ipad.png 768 by 1004 pixels
- For iPad Retina display (iOS6.1 and earlier): Default-Portrait@2x~ipad.png 1536 by 2008 pixels
- For iPad (iOS6.1 and earlier): Default-Landscape~ipad.png 1024 by 748 pixels
- For iPad Retina display (iOS6.1 and earlier): Default-Landscape@2x~ipad.png 2048 by 1496 pixels
- For iPad (iOS7): Default-Portrait~ipad.png 768 by 1004 pixels
- For iPad Retina display (iOS7): Default-Portrait@2x~ipad.png 1536 by 2008 pixels
- For iPad (iOS7): Default-Landscape~ipad.png 1024 by 748 pixels
- For iPad Retina display (iOS7): Default-Landscape@2x~ipad.png 2048 by 1496 pixels
- For Android platforms, the file name of the default splash image is splash.9.png; it is stored:
- For all resolutions, under android\native\res\drawable
- For BlackBerry 10, under blackberry10\native\www. The file must be in .png format and there are four different splash screen sizes:
- splash 1024 pixels width by 600 pixels height: splash-1024x600.png
- splash 1280 pixels width by 768 pixels height: splash-1280x768.png
- splash 600 pixels width by 1024 pixels height: splash-600x1024.png
- splash 768 pixels width by 1280 pixels height: splash-768x1280.png
- For BlackBerry 6 and 7, the file name of the splash image is splash.png, stored under blackberry\native.
- For Windows Phone 8, the file name of the splash image is SplashScreenImage.jpg, stored under windowsphone8\native. This file must be in .jpg format, with a width of 768 pixels and height of 1280 pixels.
- For Windows 8, the file name of the splash image is splashscreen.png, stored under windows8\native\images. This file must be in .png format, with a width of 620 pixels and height of 300 pixels.
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.
- For Apple iOS platforms:
- There are two ways of creating a custom splash image:
- Replace the default image in ipad\native\Resources (or iphone\native\Resources), OR
- Add the new (replacement) image to ipad\nativeResources\Resources (or iphone\nativeResources\Resources).
- Rebuild the application by clicking Run As > Run on MobileFirst Development Server or Run As > Build....
The second method (step 2) is preferable because it does not delete any files from the native directory, which is often not backed up in a source code control system. When we add your image to the nativeResources directory, it is copied to the native directory during the build. The replacement splash image must not be placed in any folder other than Resources.
- For Android:
- There are two ways of creating a custom splash image:
- Replace the default image in android\native\res\drawable, OR
- Add the new (replacement) image to android\nativeResources\res\drawable.
- Rebuild the application by clicking Run As > Run on MobileFirst Development Server or Run As > Build....
The second method (step 2) is preferable because it does not delete any files from the native directory, which is often not backed up in a source code control system. When we add your image to the nativeResources directory, it is copied to the native directory during the build. The replacement splash image must not be placed in any folder inside the res folder other than drawable.
- For BlackBerry 10:
- There are two ways of creating a custom splash image:
- Replace the default image in blackberry10\native\www, OR
- Add the new (replacement) image to blackberry10\nativeResources\www.
- Rebuild the application by clicking Run As > Run on MobileFirst Development Server or Run As > Build....
The second method (step 2) is preferable because it does not delete any files from the native directory, which is often not backed up in a source code control system. When we add your image to the nativeResources directory, it is copied to the native directory during the build.
- For BlackBerry 6 and 7:
- Replace the default image in blackberry\native. If the original splash image is not backed up in a source code control system, it is advisable to rename or back up the original image first.
- Rebuild the application by clicking Run As > Run on MobileFirst Development Server or Run As > Build....
- For Windows Phone 8:
- There are two ways of creating a custom splash image:
- Replace the default image in windowsphone8\native, OR
- Add the new (replacement) image to windowsphone8\nativeResouces.
- Rebuild the application by clicking Run As > Run on MobileFirst Development Server or Run As > Build....
The second method (step 2) is preferable because it does not delete any files from the native directory, which is often not backed up in a source code control system. When we add your image to the nativeResources directory, it is copied to the native directory during the build.
- For Windows 8:
- Replace the default image in windows8\native\images. If the original splash image is not backed up in a source code control system, it is advisable to rename or back up the original image first.
- Rebuild the application by clicking Run As > Run on MobileFirst Development Server or Run As > Build....
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