Using MobileFirst application as a container for server-generated pages

improve this page | report issue

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.
  • In this module, you see the remote loading of dynamic content capability, where the HTML, CSS, and JavaScript code is hosted externally from the natively packaged hybrid.

Creating IBM MobileFirst applications

  • A project and applications are created by using the IBM MobileFirst Project wizard. new-project-wizzard-1
  • A project might host multiple applications. However, in this module, you use only one app: UsingApplicationAsAContainer new-project-wizzard-2
  • Optionally the target environments can be set on the MobileFirst Project wizard or it could be done at a later time new-project-wizzard-3

IBM MobileFirst environments

  • IBM MobileFirst Foundation provides a model for organizing the application project structure for each targeted environment (for example, Android, iPhone, iPad).
  • These targeted environments are selected through the MobileFirst Environment wizard.

environment-new environments

IBM MobileFirst Common environment

  • The simplest way to use IBM 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

  • Build the Android environment, and then deploy the application. Right-click the generated Android project and click Run As > Android Application.
  • You can see that is rendered in your Android emulator.



Running your Application on the iOS

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



Sample application

Click to download the Studio project.

Last modified on November 09, 2016