MobileFirst projects, environments, and skins

Develop mobile applications within projects, build your applications, and create skins for specific devices.

MobileFirst projects

To develop your mobile applications, you must first create a project.

You can develop one or several mobile applications, which you can build for different environments.

In your project, when you create an application, you have a main application folder, in which you can find several subfolders and files:

A common folder, for you to store the code that is shared between all environments, such as HTML, CSS, or JavaScript code.
One folder for each environment that is supported by the application, and where you store the code that is specific to this environment, such as Java™ code for Android or Objective-C code for iOS.
A legal folder, for you to store all the license-related documents.
An application-descriptor.xml file that contains the application metadata. For more information about this file, see The application descriptor.
A build-settings.xml file, for you to prepare minification and concatenation configurations for each environment. For more information about this file, see MobileFirst application build settings.

Within your project, you can create the graphical user interface of your mobile application by using the Rich Page Editor (deprecated). The Rich Page Editor is a WYSIWYG editor in MobileFirst Studio.

When the application is finished, you can test it with the Mobile Browser Simulator in MobileFirst Studio. However, you cannot test native code with MobileFirst Studio. To test native code, you must test it with a real device or with the development kit of the appropriate environment.

MobileFirst environments

You can build your mobile applications for different environments, such as:

Mobile environments, which include iPhone, iPad, Android phones and tablets, BlackBerry 6 and 7 (deprecated. See Features deprecated in V7.0.0), BlackBerry 10, Windows Phone Silverlight 8, and Windows 8 Universal.
Desktop environments, which include Adobe AIR.
Web environments, which include Mobile web app and Desktop Browser web page.

There is a difference between the Mobile web app environment and the Desktop Browser web page environment.

Mobile web apps are only used in a mobile device browser. Choose the Mobile web app environment when you want your users to surf to your application by using their mobile device.
Desktop browser web pages are used only in a desktop web browser. With the Desktop Browser web page environment, you can develop an application that you then embed inside your website, but this application is not meant for use in a mobile device.
- For example, since Facebook uses iframes as containers to its apps, you can use the Desktop Browser web page environment to create Facebook apps by setting https://host:port/apps/services/www/application_name/desktopbrowser/ as the canvas URL in the Facebook dashboard.

If your web application is not based on IBM MobileFirst™ Platform Foundation, you must first port it to IBM MobileFirst Platform Foundation. If your web application is based on IBM MobileFirst Platform Foundation, you can add the Desktop Browser web page environment to your existing project.

MobileFirst skins

Different types of devices exist for a same environment. If you want to write a piece of code that is specific to a certain device, you must create a skin. Skins are subvariants of an environment and they provide support for multiple form factors in a single executable file for devices of the same OS family. Skins are packaged together in one app. At run time, only the skin that corresponds to the target device is applied.

Note: Cordova applications do not support application skins.