Using a MobileFirst Hybrid application as a container for server-generated pages
improve this page | report issueThis tutorial covers the following topics:
- Migrating applications to IBM MobileFirst Platform Foundation
- Running your application on the Android emulator
- Running your application on the iOS emulator
- Sample application
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
CLI
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
Studio
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 themainFile
tag to point tohttp://m.ibm.com
.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<application xmlns="http://www.worklight.com/application-descriptor" id="UsingApplicationAsAContainer" platformVersion="6.3.0.00.20141003-1438">
<displayName>UsingApplicationAsAContainer</displayName>
<description>UsingApplicationAsAContainer</description>
<author>
<name>application's author</name>
<email>application author's e-mail</email>
<homepage>http://mycompany.com</homepage>
<copyright>Copyright My Company</copyright>
</author>
<mainFile>http://m.ibm.com</mainFile>
<features/>
<thumbnailImage>common/images/thumbnail.png</thumbnailImage>
<iphone bundleId="com.UsingApplicationAsAContainer" version="1.0">
<worklightSettings include="false"/>
<security>
<encryptWebResources enabled="false"/>
<testWebResourcesChecksum enabled="false" ignoreFileExtensions="png, jpg, jpeg, gif, mp4, mp3"/>
</security>
</iphone>
<android version="1.0">
<worklightSettings include="false"/>
<security>
<encryptWebResources enabled="false"/>
<testWebResourcesChecksum enabled="false" ignoreFileExtensions="png, jpg, jpeg, gif, mp4, mp3"/>
<publicSigningKey/>
<packageName/>
</security>
</android>
</application>
Running your application on the Android emulator
- Build the Android environment.
- Deploy the application.
- Right-click the generated Android project and click Run As > Android Application.
You can see that the http://m.ibm.com
URL is displayed in your Android emulator.
Running your application on the iOS emulator
- Deploy the application to your iOS emulator.
- Right-click the IOS environment and click Run As > Xcode project.
Sample application
Click to download the sample.
▲