Optimizing your application for various environments

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 explores the ways in which you can optimize an environment.

• What is environment optimization?
• Currently supported environments

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 implemented by using web technologies (HTML, CSS, and JavaScript) and are shared by all environments. You can then add environment-specific optimizations when needed.

If you use a source control management system (such as Rational Team Concert™, Git, or Subversion), refer to the topic about integrating with source control systems, in the user documentation.

Currently supported environments

Smartphones

• iOS 7.x, 8.x
• Android 2.3.3, 4.x, 5.x
• BlackBerry OS 6.x, 7.x, 10.x
• Windows Phone 8.x

Tablets

• iOS 7.x, 8.x
• Android 2.3.3, 4.x, 5.x
• Windows 8.x

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

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?

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 added later on.

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

Adding an environment

Using the command-line interface (CLI)

• In a terminal window, navigate to the application folder and use the command: mfp add environment. An interactive menu is displayed.

Using the Studio

1. Click the MobileFirst icon from the Eclipse menu bar and select MobileFirst Environment.
2. Right-click the MobileFirst project folder and select 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.

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.

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.

Images optimization

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 as the image files in the common folder override the image files in the common folder.