Using this tutorial and its associated sample

This tutorial and its companion sample are intended for use with either the IBM MobileFirst Consumer Edition or the IBM MobileFirst Enterprise Edition.
You cannot use the sample that is associated with this tutorial as is with the free IBM MobileFirst Developer Edition. This sample provides a WAR file that demonstrates the remote load functionality in this tutorial. This WAR file requires a servlet container, such as Apache Tomcat, WebSphere Application Server Full profile, or WebSphere Application Server Liberty profile.

Background of IBM Mobile Conference application

Mobile web application

Server programming model

JavaServer™ Pages (JSP)

JavaServer Pages Standard Tag Library (JSTL)

JavaServer Pages Expression Language (EL)

Client programming model

Dojox Mobile

Dojo Mobile Device Theming

Security

Container managed

Java™ Enterprise Edition (Java EE) form-based login

Mobile views

Dojo provides mobile widgets that developers can use to quickly generate mobile views.

JSTL provides a simple API for iterating over lists to generate Dojox Mobile list items dynamically on the server.

Form-based authentication - client

IBM Mobile Conference application requires users to be registered and authenticated with the enterprise that is hosting the application. The application is protected by a form-based login, by using a mobile web form that is contained within a Dojox Mobile view.

<GlobalNamingResources><!-- Editable user database that can also be used by
UserDatabaseRealm to authenticate users
--><Resourceauth="Container"description="User database that can be updated and saved"factory="org.apache.catalina.users.MemoryUserDatabaseFactory"name="UserDatabase"pathname="conf/tomcat-users.xml"type="org.apache.catalina.UserDatabase"/></GlobalNamingResources>

Migrating applications to IBM MobileFirst Platform Foundation

By using mobile web technology, you can deploy applications to the widest variety of devices.
The presence of application stores (for example: Apple App Store and Google Play) adds a dimension where the hosting and marketing of these applications makes broader-reaching applications less relevant. IBM MobileFirst Platform Foundation provides the hybrid application programming model as the solution to building cross platform applications that can be distributed through the application stores.
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 tutorial, you see the remote loading of dynamic content capability, where the HTML, CSS, and JavaScript code is hosted externally from the natively packaged hybrid application.

Working with IBM MobileFirst projects and environments

This tutorial comes with a MobileFirst project called ContainerForAdvancedPages, which contains an AdvancedPages hybrid application. This application already has the iPhone and Android environments added to it.

Running the sample on an Android environment

Make the following changes to the AdvancedPages/android/nativeResources/src/com/AdvancedPages/AdvancedPages.java file:

If the application is running on a Tomcat application server, change the port to 8080.

If the application is running on an actual Android device, replace localhost with the public IP address of your computer. Make sure that the device and your server are on the same network.

Right-click the WAR file and select Run As > Run on Server, and then select the MobileFirst Development Server.

Right-click the hybrid application and select Run As > Run on MobileFirst Development Server.

Note: Due to some domain restrictions of the browser (web view), the remotely loaded application and MobileFirst Development Server must either be colocated on the same host and port, or have a common proxy host and port.

Right-click the Android project and select Run As > Android Application.

After the application is installed, authenticate with a username and password, such as admin / admin, or whatever credentials you specified in your server.xml file.
Each view for the IBM Mobile Conference app is loaded through Ajax XHR where each view is generated by the JSP responsible for each distinct view.

Running the sample on an iPhone environment

Make the following changes to the AdvancedPages/iphone/nativeResources/Classes/AdvancedPages.m file:

If the application is running on a Tomcat application server, change the port to 8080.

Right-click the WAR file and select Run As > Run on Server, and then select the MobileFirst Development Server.

Right-click the hybrid application and select Run As > Run on MobileFirst Development Server.

Note: Due to some domain restrictions of the browser (web view), the remotely loaded application and MobileFirst Development Server must either be colocated on the same host and port, or have a common proxy host and port.

Right-click the iPhone folder and select Run As > Xcode project.

Run the Xcode project on an iOS simulator or device running iOS 7 or later.

Integration with IBM MobileFirst Platform Foundation

IBM MobileFirst Platform provides client libraries for hybrid application development. Although the APIs are platform-neutral, they are often backed by platform-specific implementations. Because the conference app is served remotely, these client-side libraries must be packaged with the conference app (WAR). Each platform-specific implementation is in its own folder structure in the web application.

When the IBM Mobile Conference application completes the authentication process, the mobile device client initializes the device with the server by using WL.Client.init(). This provides a flexible model for application integrity validation, application updates, and other features.

Encrypted Cache

The Encrypted Offline Cache (EOC) API is used for securely storing data by using HTML5 local cache. The Conference app uses EOC to save a list of favorite sessions in a secure way.

function__writeEOC(mykey,mydata,callback){WL.EncryptedCache.write(mykey,mydata,function(){callback();},function(){alert('An error occurred writing to the encrypted cache');});}...functionsaveToCache(key,value){if(isEOCOpen==false){__openEOC(function(){__writeEOC(key,value,function(){});});}else{__writeEOC(key,value,function(){},function(){alert('Unable to write to encrypted cache');});}}

Camera support

Use the IBM MobileFirst Client API to extend the application to take photos of the conference. The application has a social aspect, where users can view photos from the other conference attendees.

Proxy considerations

IBM MobileFirst Platform Foundation is compatible with most known proxy solutions.

WebSphere HTTP Plug-in support: Requires a single shared plugin-cfg.xml file for routing requests to both the MobileFirst Development Server and the WebSphere Application Server instance that is hosting the IBM Mobile Conference App.

Apache Web Server support: Requires a mod_proxy module to be loaded by the web server.