Using a MobileFirst Hybrid application as a container for server-generated pages

improve this page | report issue

This tutorial covers the following topics:

Migrating applications to IBM MobileFirst Platform Foundation

  • By using mobile web technology, you can deploy applications to the widest variety of devices.
  • The existence of public application stores, such as Apple iTunes and Google Play, changes the way applications are hosted and marketed. These changes make traditional methods of distribution less relevant.
  • IBM MobileFirst Platform Foundation provides the solution to build cross-platform applications that can be distributed through the application stores by using the hybrid application programming model.
  • In the hybrid model, developers typically package the application HTML, CSS, and JavaScript™ code as part of the application that is deployed to the application store.
  • This tutorial shows the remote loading of dynamic content capability, where the HTML, CSS, and JavaScript code is hosted externally from the natively packaged hybrid.

Creating MobileFirst applications


From a terminal window, use the following CLI commands to add a project and application:

mfp create UsingApplicationAsAContainer
cd UsingApplicationAsAContainer
mfp add hybrid UsingApplicationAsAContainer

Next, add a required environment, for example Android:

cd UsingApplicationAsAContainer
mfp add environment android


In MobileFirst Studio, create a new project, "UsingApplicationAsAContainer"

A project might host multiple applications. However, in this tutorial, you use only one app: UsingApplicationAsAContainer

You can set the target environments either while you are working in the MobileFirst Project wizard, or later.

IBM MobileFirst environments

  • IBM MobileFirst Foundation provides a model for organizing the application project structure for each target environment (for example, Android, iPhone, iPad).
  • You select your target environment through the MobileFirst Environment wizard.


IBM MobileFirst Common environment

  • The simplest way to use MobileFirst apps as containers for server-generated pages is through the Common environment.
  • Open the application-descriptor.xml file and edit the mainFile tag to point to


<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<application xmlns="" id="UsingApplicationAsAContainer" platformVersion="">
        <name>application's author</name>
        <email>application author's e-mail</email>
        <copyright>Copyright My Company</copyright>
    <iphone bundleId="com.UsingApplicationAsAContainer" version="1.0">
        <worklightSettings include="false"/>
            <encryptWebResources enabled="false"/>
            <testWebResourcesChecksum enabled="false" ignoreFileExtensions="png, jpg, jpeg, gif, mp4, mp3"/>
    <android version="1.0">
        <worklightSettings include="false"/>
            <encryptWebResources enabled="false"/>
            <testWebResourcesChecksum enabled="false" ignoreFileExtensions="png, jpg, jpeg, gif, mp4, mp3"/>

Running your application on the Android emulator

  1. Build the Android environment.
  2. Deploy the application.
  3. Right-click the generated Android project and click Run As > Android Application.

You can see that the URL is displayed in your Android emulator.


Running your application on the iOS emulator

  1. Deploy the application to your iOS emulator.
  2. Right-click the IOS environment and click Run As > Xcode project.


Sample application

Click to download the sample.

Inclusive terminology note: The Mobile First Platform team is making changes to support the IBM® initiative to replace racially biased and other discriminatory language in our code and content with more inclusive language. While IBM values the use of inclusive language, terms that are outside of IBM's direct influence are sometimes required for the sake of maintaining user understanding. As other industry leaders join IBM in embracing the use of inclusive language, IBM will continue to update the documentation to reflect those changes.
Last modified on November 09, 2016