Optimizing your application for various environments

improve this page | report issue

Overview

MobileFirst applications run in mobile, tablet, and web environments.

These Runtime environments differ in many aspects such as screen size, orientation, specific UI guidelines and components, physical user interface and unique environment functionalities.

This tutorial will explore the ways an environment can be optimized.

What is environment optimization?

IBM MobileFirst Platform Foundation increases development efficiency and productivity by providing an environment optimization framework. The core logic and design guidelines of the app are written by using web technologies (HTML, CSS, and JavaScript) and are shared by all environments. Environment-specific optimizations can then be added when required.

If a source control management system (such as Rational Team Concert™, Git or Subversion) is used, refer to the user documentation topic: Integrating with source control systems.

Currently supported environments

missing_alt Smartphones
  • iOS 6 and later
  • Android 2.3.3, 4.x and later
  • BlackBerry OS 6 and later
  • Windows Phone 8 and later
missing_alt

Tablets

  • iOS 6 and later
  • Android 2.3.3, 4.x and later
  • Windows 8 and later
missing_alt

Web

  • Modern browsers that support HTML 4, CSS 2.1 and JavaScript 1.5 at a minimum
  • Browsers that support HTML 5 and CSS 3
missing_alt

Browsers

  • Modern browsers that support HTML 4, CSS 2.1 and JavaScript 1.5 at a minimum
  • Browsers that support HTML 5 and CSS 3

How does optimization work?

missing_alt

The MobileFirst application structure is divided into environment folders (iPhone, Android, BlackBerry and so on).

Each environment folder contains the web resources (CSS, JS, images, and so on) that are relevant for that specific environment.

A newly created application contains the base environment in the common folder. The web resources that are in the common folder serve as the basis for the optimized environments that might be add later on.

The common folder must hold only resources that are shared by all environments.

Adding an environment
There are 2 ways to add an environment to a MobileFirst project:

  1. Clicking the MobileFirst icon from the Eclipse menu bar and selecting MobileFirst Environment.
  2. Right-clicking the MobileFirst project folder and selecting New > MobileFirst Environment.

HTML optimization
The newly added environment (for example, iPhone) extends the resources of the common environment in the following way: The new environment HTML code overrides the common HTML file.
Note: By default, a new environment does not include a new HTML file because the common HTML file is shared by all environments.

missing_alt

JavaScript optimization
The newly added environment (for example, iPhone) extends the resources of the common environment in the following way: The JavaScript file from an environment folder has a wlEnvInit() function that invokes the wlCommonInit() JavaScript function from the common folder.

Technically, the JavaScript from an environment folder is appended to the file from the common folder.
Using the same variable names as in the common folder redefines their meaning.

missing_alt

CSS optimization
The newly added environment (for example, iPhone) extends the resources of the common environment in the following way: The CSS file from an environment folder is appended to the CSS file from the common folder.

Using the same property names as the ones in the common folder overrides their settings.
Note: The CSS from the environment folder might contain some default CSS rules that match the environment needs.

missing_alt

Images optimizations
The newly added environment (for example, iPhone) extends the resources of the common environment in the following way: Image files in the images folder of the environment folder that have the same file name than the image files in the common folder override the image files in the common folder.

missing_alt
Last modified on December 02, 2015