MobileFirst projects, environments, and skins
With MobileFirst Studio, develop mobile applications within projects, build the applications for different environments, and create skins for specific devices.
MobileFirst projects
To develop the mobile applications with MPF, first create a project in MobileFirst Studio.
A project in MobileFirst Studio is a place for developing mobile applications, which we can build for different environments.
In the project we can have a main application folder, holding subfolders:
- A common folder, for storing code shared between all environments, such as HTML, CSS, or JavaScript code.
- One folder for each environment supported by the application, and where we store code specific to this environment, such as Java code for Android or Objective-C code for iOS.
- A legal folder, for storing license-related documents.
- An application-descriptor.xml file containing the application metadata. See The application descriptor.
- A build-settings.xml file, for preparing minification and concatenation configurations for each environment. See MobileFirst application build settings.
Within the project, create the graphical user interface of the mobile application using the Rich Page Editor. The Rich Page Editor is a WYSIWYG editor in MobileFirst Studio.
When the application is finished, we can test it with the Mobile Browser Simulator in MobileFirst Studio. However, we cannot test native code with MobileFirst Studio. We must test native code using a real device or with the development kit of the appropriate environment. To test the application:
- Build and deploy the application: MobileFirst Studio creates the project with the native code we can then view and update.
- Test it with the Mobile Browser Simulator, which emulates the target device, or with a real device.
MobileFirst environments
We can build the mobile applications for different environments, such as:
- Mobile environments, which include iPhone, iPad, Android phones and tablets, BlackBerry 6 and 7, BlackBerry 10, and Windows Phone 8.
- Desktop environments, which include Adobe AIR and Windows 8.
- 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 the users to surf to the application using their mobile device.
- Desktop browser web pages are used only in a desktop web browser. With the Desktop Browser web page environment, develop an application that you then embed inside the website, but this application is not meant for use in a mobile device.
- For example, since Facebook uses iframes as containers to its apps, we 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 the web application is not based on IBM MobileFirst Platform Foundation, we must first port it IBM MPF. If the web application is based on IBM MobileFirst Platform Foundation, we can add the Desktop Browser web page environment to the existing project.
MobileFirst skins
Different types of devices exist for a same environment. To write a piece of code specific to a certain device, we 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.
Parent topic: Artifacts produced during development cycle