LinkedIn emplea cookies para mejorar la funcionalidad y el rendimiento de nuestro sitio web, así como para ofrecer publicidad relevante. Si continúas navegando por ese sitio web, aceptas el uso de cookies. Consulta nuestras Condiciones de uso y nuestra Política de privacidad para más información.
LinkedIn emplea cookies para mejorar la funcionalidad y el rendimiento de nuestro sitio web, así como para ofrecer publicidad relevante. Si continúas navegando por ese sitio web, aceptas el uso de cookies. Consulta nuestra Política de privacidad y nuestras Condiciones de uso para más información.
Contents Page 3
Page 4 MobileFirst Platform 7.0 Proof of Technology – Intro Lab
INTRO Lab - Getting Started with IBM MobileFirst Platform
In this lab, you will import a starting version of the IBMBank app that will be used in this Lab series,
examine the structure of this MobileFirst Platform Hybrid application, build it for multiple environments,
and preview it. You will learn what artifacts are generated by the MobileFirst Platform studio and how
you can utilize the tools available with MobileFirst Platform Studio to speed up the UI development. You
will also learn how you can leverage existing frameworks that are based on open standards, such as
jQuery mobile to build an application.
1 Working with VMWare Basics
You can skip this section if you have experience using VMWare images. These POT lab manuals are
written for the corresponding VMWare image, and make assumptions about the setup, but can be run
independently as well. The VMWare image is a virtualized Windows 7 OS with MobileFirst Platform
Studio and MobileFirst Platform server pre-installed. Lab imports are stored in
When running in a typical IBM-provided lab setting, the VM Image should have been started and running
in full screen mode.
The virtualized OS has a user name and password:
Administrator / passw0rd
Page 6 MobileFirst Platform 7.0 Proof of Technology – Intro Lab
2 Understanding MobileFirst Platform Studio
MobileFirst Platform Studio is designed to provide a comprehensive environment for advanced, rich,
cross-platform mobile app development. It installs as a set of plugins to Eclipse IDE. The plug-ins include
development tooling as well as a built-in application server for testing purposes (the MobileFirst Platform
Development Server). You can also choose to deploy and test to a remote MobileFirst Platform server.
MobileFirst Platform Studio supports:
• Native and web development – supports native and hybrid web development technologies such as
HTML5, Apache Cordova, Java and Objective C.
• Optimization Framework – allows the majority of hybrid application development to be done in a set
of common folders and shared across device-specific environments. These environments (iPhone,
iPad, Android Phones and Tablets, etc…) can inherit, replace or augment elements of the common
folders for best device-specific experience, with highly efficient handling of source code. Runtime
skinning offers another level of iterative differentiation based on minor device differences within an
environment, such as screen size, screen resolution, etc…
Simulator, an in-browser device simulator providing full access to HTML5-style debugging.
• Integration of device-specific SDKs – generates a project for each supported SDK, such as Xcode for
iOS development. Launch, test, package and even extend functionality with the native capabilities
provided by each platform.
• Third-party library integration – depending on your programming approach, your hybrid mobile
BootStrap, Polymer and many, many more.
• Mobile Testing - Mobile Test Workbench allows for creating, storing and running tests of MobileFirst
• Service Discovery and Adapter Development – the wizard lets you interrogate back end services -
specify the back-end services that you want to invoke from MobileFirst Platform project and generate
the adapters that connect to those services.
• And much more…
If you are familiar with Eclipse, it will be less of a learning curve to understand and locate the features
available through the MobileFirst Platform Studio IDE. For example, in order to develop an application
from scratch, you would start by creating a new MobileFirst Platform project and a new MobileFirst
Platform application. In this lab, we will start by importing an already-developed project. You can
optionally go through the steps of creating a simple application from scratch as part of this exercise.
The MobileFirst Platform Studio features and tasks that will be discussed in this lab are:
• Import a MobileFirst Platform hybrid application project
• Build and deploy the MobileFirst Platform application to the MobileFirst Platform Development Server
included in MobileFirst Platform Studio
• Invoke a MobileFirst Platform adapter procedure from MobileFirst Platform Studio
• Add an environment for Android
• Use Preview feature to preview and test application in the Mobile Browser Simulator
• Launch the application in an Android Virtual Device
• Use the MobileFirst Platform Operations Console for application lifecycle management
• Use the MobileFirst Platform Operational Analytics to gain insight on runtime usage
Page 8 MobileFirst Platform 7.0 Proof of Technology – Intro Lab
3 Lab Steps
The steps recorded in this lab assume that you have obtained and started the corresponding VMWare
image. In the image you will launch Eclipse with the MobileFirst Platform Studio tooling and locate the
application workspace. If running without the image, you may have to adjust some steps to account for
3.1 Start MobileFirst Platform Studio
Follow these steps to start the studio.
___ 1. On the Windows desktop, double-click the folder named MobileFirst Platform to open it.
___ 2. In the MobileFirst Platform folder, double-click the MobileFirst Platform Studio shortcut.
___ 3. If the Workspace Launcher dialog appears, verify that the Workspace path is
C:MobileFirst Labsworkspacesintro and click OK. (If a different workspace is auto-loaded,
use File->Switch Workspace to change to the correct workspace.)
NOTE: Eclipse settings are stored as part of your workspace. If you change the location of the
workspace, you will lose pre-configured values for default browser, perspectives, views, etc… It
is recommended to use the workspaces specified in the lab manuals.
___ 4. You should be already in the Design perspective. This is the perspective where you will
do all the mobile app development. If you do not see the Design perspective. You can switch to
the Design perspective by selecting the Design perspective option if visible, or use the Open
perspectives icon and selecting Other > Design.
3.2 IBM Bank Application – App Architecture and Environments
In the POT VMware image provided, we have successfully imported the project required for the
application to run. If you do not see the IBMBankProject listed under the Project Explorer of the Studio
workspace, see Appendix A for the import instructions for the project. In this lab, we will focus on the
content of the IBMBankProject.
Page 10 MobileFirst Platform 7.0 Proof of Technology – Intro Lab
3.2.1 Add Android Environment and inspect application structure
___ 1. Add a new environment by clicking on the drop down arrow next to the MobileFirst
Platform phone icon from the icon bar
___ 2. Select MobileFirst Environment. Select IBMBankApp as the application/component.
For this lab, we will choose the Android phones and tablets environment (feel free to choose
iPhone as well). Click Finish.
___ 3. Let’s examine the IBMBankProject project structure. The diagram below describes what
portions of the artifacts are for.
MobileFirst Platform enables cross-platform development through an optimization framework,
which provides a mechanism for cross-environment shared content and environment-specific
deltas. In the screenshot above, you see common folder under IBMBankApp. This is the default
environment. The common environment contains resources (css, js, etc.) that are shared
Page 12 MobileFirst Platform 7.0 Proof of Technology – Intro Lab
___ 4. Once we added our Android environment, MobileFirst Platform created an android folder
under IBMBankApp, representing the Android environment customizations for the IBMBank
application. The resources of the new environment have the following relationship with the
• images – override the common images when both have the same name
• css – extend or override css content in the common environment folders
Additionally, the wizard has created a new project called IBMBankProjectIBMBankAppAndroid.
This is an Android application project, automatically generated from the MobileFirst Platform
environment. It can be manipulated with standard Android SDK tooling and techniques.
3.3 IBM Bank Application – User Interface
The IBM Bank Application is implemented as a hybrid application. With the hybrid development
approach, you can create applications that use web development techniques but still access native
device capabilities. Your hybrid application runs inside a native container or “shell” and uses the browser
applications, such as the accelerometer, camera, and local storage on a smartphone.
3.3.1 HTML structure
Let’s first take a look at index.html file.
In the Project Explorer view, expand IBMBankProject > apps > IBMBankApp > common > open
index.html by double-clicking on the file.
The index.html is opened in the Rich Page Editor (RPE). If you receive a warning message “Some
pages may not render correctly when using Internet Explorer as the embedded browser”, just click OK
and ignore the warning. This MobileFirst Platform source editor allows you to switch between Design,
Source, or Split view, depending on your preference.
Page 14 MobileFirst Platform 7.0 Proof of Technology – Intro Lab
By default, the RPE design view renders apps in Standard format (generic device), but you can click on
the arrow drop down to switch the view to the characteristics of a specific device. Note the other controls
available on the top menu bar of the RPE - hover to get context help for icons that you don’t recognize.
Our IBMBank HTML file is divided into different <div data-role=”page…> sections, representing different
pages or screens of the application. By default the Rich Page Editor will display the first visible page in
the Design tab, but you can change the display using the Mobile Navigation Eclipse view (bottom left of
the screen shot above). Each “page” is represented in that view, along with an oval (eyelash) icon. Once
the icon is clicked, it will turn into an open eyed icon (like this - ), indicating the currently visible page in
the RPE Design tab. You can use this to easily display and edit your application screens inside the
On the right hand side, you can see the palette view. MobileFirst Platform Studio provides drag & drop
support for common HTML tags as well as frameworks jQuery Mobile or Dojo Mobile if those libraries are
included in the application. IBM Bank was built with jQuery Mobile, so the jQuery mobile widget palette is
available. You can drag/drop widgets from the palette during UI development and MobileFirst Platform
will generate the code for the widget. This is known as Rich Page Editing (RPE).
There are seven pages in this application:
splashPage – displayed while the application is starting, then dynamically switched to loginPage
loginPage – allows users to login. The Sign In button is initially greyed out. In this version of the app, the
user must enter any 3 characters in both the userid and password fields in order to enable the login
mainPage – contains the main menu of the application
mobilePanel – sliding panel (child of the mainPage)
accountPage – displays a list of accounts and balance information
accountDetailsPage – displays a list of detailed transactions for the selected account
signInHelp – provides sign-in instructions
In order to view each page, click on the Design tab of the RPE. Click each of the oval icons ( ) next to
the page names in the Mobile Navigation view and it will switch the RPE view to the selected page.
3.3.2 jQuery Mobile Flat UI Theme
The IBMBank application utilizes the jquery-mobile-flat-ui-theme which provides a “flat” design. Flat
design promotes a simplified, classically digital aesthetic UI design. To implement our flat design, we
have included the Flat-UI open source jQuery Mobile theme in the IBMBank app. For more information
on Flat-UI, you can download and view the demo of Flat-UI from the jquery-mobile-flat-ui-theme GitHub
In order to use the theme, we have included a copy of jquery.mobile.flatui.css under the common/css
directory, and linked it into index.html as shown below:
compliant content can be inserted into a MobileFirst Platform hybrid application in a normal and
Page 16 MobileFirst Platform 7.0 Proof of Technology – Intro Lab
Let’s examine mainPage by switching to that page in Source tab. Scroll the page until you find the <!--
main page --> comment area.
3.3.3 Displaying Accounts List
One of the options from the main menu is My Accounts which will give you a list of accounts retrieved
from the back-end system. In this lab, the back-end is simulated by implementing the adapters to return a
pre-defined set of data.
If you click on one of the accounts from the list, it will display the account details.
Let’s understand how this flow works by looking at main.js file under common/js folder. It contains
wlCommonInit() function that is invoked automatically after MobileFirst Platform framework initialization
MobileFirst Platform framework initialization
The initOptions.js contains MobileFirst Platform
framework initialization settings. It is also responsible
for initializing the MobileFirst Platform framework once
<body> element has finished loading. Refer to the
Info Center for more information.
The main.js is where you can add application initialization code. When IBM Bank application launches, it
will first attempt to connect to the MobileFirst Platform Server. On successful connection, it displays the
splashPage because it is the default page for the application. You can see from the code snippet below
that it transitions to loginPage after 2 seconds.
Page 18 MobileFirst Platform 7.0 Proof of Technology – Intro Lab
After users successfully logs in (by entering any 3 characters for both userid and password), they will be
presented with the mainPage where they have the option to click on the My Accounts button. You will
find the event handler for this button in mainPage.js file.
After the MyAccounts button “click” handler switches to accountPage the “pagebeforeshow” handler for
the accountPage (located in accounts.js) calls the doGetAccounts() function which invokes the
AccountAdapter adapter to populate the list on accountPage with account data. You will investigate
the adapters in more detail in the next section.
Similarly, you will find an event handler in accounts.js for the accountList (each of the dynamically
generated items in the list on the accountPage) to retrieve that account’s detailed account information.
At the moment, the handler calls the doGetAccountDetailsStatic function, which returns a static array
with 2 elements of placeholder data. In the subsequent steps, we will modify the source code to replace
the static list with a call to the AccountDetailsAdapter hosted on the MobileFirst Platform server.
Page 20 MobileFirst Platform 7.0 Proof of Technology – Intro Lab
3.4 IBM Bank Application – Adapters
In the previous section, we mentioned an example of adapter invocation within the doGetAccounts()
function. Let’s take a step back and understand what adapters are and how they work.
MobileFirst Platform Adapters provide a secure, mobile-optimized mechanism for retrieving data from
back-end systems. Adapters include server-side application logic deployed on and serviced by
MobileFirst Platform server and client APIs for invoking the Adapters. With MobileFirst Platform, you can
create and configure adapters manually, or you can also automatically generate SAP Netweaver
Gateway or SOAP Web Services adapters with the service discovery wizard.
3.4.1 The Adapter Framework
The adapter framework mediates between the mobile apps and the back-end services. A typical flow is
components in the MobileFirst Platform Server are supplied by the adapter or app developer. The
procedure and auto-conversions are part of MobileFirst Platform. Refer to the Info Center for additional
3.4.2 Anatomy of Adapters
• Exactly one XML file, describing the connectivity to the back-end system to which the adapter
connects, and listing the procedures that are exposed by the adapter to other adapters and to
• Zero or more XSL files, each containing a transformation to convert raw XML data retrieved by
the adapter to JSON returned by adapter procedures.
MobileFirst Platform provides for several types of adapters, including HTTP, SQL, CastIron, SAP
Netweaver Gateway, SAP JCo, Java and JMS. The IBM Bank Application utilizes the HTTP Adapter. A
MobileFirst Platform HTTP Adapter can be used to invoke RESTful services and SOAP-based services.
It can also be used to perform HTML scraping. In the IBMBank app, the adapters simulate service calls
to a backed by returning a pre-defined set of JSON data.
Let’s examine the AccountAdapter folder under the adapters folder. First, let’s take a look at the
AccountAdapter.xml file. Right click on the xml file and select Open With > Adapter Editor.
Alternatively, double-click on the xml file.
The Connectivity Policy tag defines the connection properties and load constraints of the back-end
system. In this case the protocol is http.
Page 22 MobileFirst Platform 7.0 Proof of Technology – Intro Lab
The Procedure tag declares a procedure that is exposed by the adapter. You can see that the
procedure exposed by this adapter is getAccounts.
Now, let’s take a look at the AccountAdapter-impl.js file. At the top of the file is a set of usage
comments, added by the New MobileFirst Adapter wizard when you create an adapter. We have left
them in the source. You can see here that the getAccounts() function returns a pre-defined account list
in JSON format. This adapter implementation simulates a backend service call.
Scroll down to view a commented section containing an example of the getAccounts() code if there is an
actual backend service available. The function would first make a call to the getPath() function to obtain
to access the back-end web service and return a JSON formatted result containing our list of accounts.
Page 24 MobileFirst Platform 7.0 Proof of Technology – Intro Lab
The full URL to the web service is assembled from the protocol, domain and port settings in the adapter
the getting a list of accounts, the backend Web Service should resolve to
3.4.3 Invoking adapter
To test the adapter, you must deploy it first. It is fairly easy to do by using the following steps:
___ 1. Right click on the adapter folder, in this case AccountAdapter. A menu will drop down
select Run As > Deploy MobileFirst Adapter. This will also start the server if you have not
already done so. Wait until the adapter is successfully built and deployed.
___ 2. To test the AccountAdapter, right click again on IBMBankProject > Adapters >
AccountAdapter and this time select, Run As > Call MobileFirst Adapter.
___ 3. The Call MobileFirst Procedure window opens and you can choose which procedure
name to run. In this case there is only one, getAccounts. In dialog window, ensure that
getAccounts is selected in the Procedure Name field and click the Run button.
Page 26 MobileFirst Platform 7.0 Proof of Technology – Intro Lab
___ 4. If the MobileFirst Platform Development Server has not been started yet, it will start and
the adapter will be deployed. You should see a browser window open with the results of the
procedure call in the adapter:
___ 5. Deploy the AccountDetailsAdapter. Expand IBMBankProject > adapters, then right-click
AccountDetailsAdapter > Run As and select Deploy MobileFirst Adapter.
3.5 Building and Running the IBM Bank Android Application
Building a MobileFirst Platform application for a specific environment (for example, iOS or Android) is the
into a mobile application for the specified target. The build processes produce several elements:
• A native project for the target platform that is stored in the native folder of the
environment. For Android, this project is also surfaced as an Android Project entry in the Eclipse
Project Explorer view.
• A MobileFirst Platform application file (.wlapp) that contains the application metadata and
Web resources that are used by MobileFirst Platform Server to identify and service the mobile
• .adapter files – adapter logic and metadata required on the MobileFirst Platform server.
After you have built and deployed the application files on the MobileFirst Platform server, you are ready
to preview the mobile app using the Mobile Browser Simulator, device and/or the device emulator.
3.5.1 Preview IBMBankApp in Mobile Browser Simulator (MBS)
The Mobile Browser Simulator will allow you to preview the application for the android environment.
Follow these steps to preview the application in the MBS.
___ 1. Deploy the MobileFirst application to the server. In the IBMBankProject > apps folder,
right click on IBMBankApp and select Run As > Build All Environments.
Page 28 MobileFirst Platform 7.0 Proof of Technology – Intro Lab
___ 2. Deploy the application to the server. Right click the application folder IBMBankProject >
apps > IBMBankApp and select the Run As > Run on MobileFirst Development Server option
to deploy the application metadata and Web resources e.g. the .wlapp file(s) to the internal
MobileFirst Platform Development Server.
___ 3. Right click on the android folder under IBMBankProject > apps > IBMBankApp and
select Run As > Preview.
The Mobile Browser Simulator should launch in a web browser and you should be able to use the
application. (if it opens within eclipse, check Window > preferences > General > Web Browser
from the Eclipse menu bar and select “Use external web browser” and choose Chrome).
If you encounter the following Java Security Warning click Allow.
Or any Security warning. Select I accept the risk and want to run this application checkbox.
___ 4. You should arrive at the login page for the IBMBankApp application, in a simulated
Android environment. Notice the Cordova controls on the left of the Mobile Browser Simulator.
You can use these to simulate device features like Accelerometer, Battery, Camera, Compass,
Geolocation, Network and even location scenario playback to test your application.
___ 5. In order to login, enter any 3 characters e.g. joe for both username and password and
click on the Log In button.
Page 30 MobileFirst Platform 7.0 Proof of Technology – Intro Lab
___ 6. It will bring you to the IBMBankApp home page with the menu of application features.
The only functioning menu option from the homepage at this point is the My Accounts button.
Click on My Accounts to activate the functionality.
___ 7. The My Accounts button will cause the AccountAdapter to be invoked on the
MobileFirst server, which will return the "enterprise data" from our back-end system - you should
recognize the data returned from the AccountAdapter in the Account List screen that appears.
Click the No-Fee Checking item to see account details.
___ 8. On the Account Details screen, notice at this point that the data appears to be
placeholders. While the Account list in the previous page was populated from our
AccountAdapter, this Account Details page has been rendered using a static array with 2
elements. In subsequent steps, we will modify the source code to replace the static list with a call
to the AccountDetailsAdapter hosted on our MobileFirst Platform server.
Note: Within the Mobile Browser Simulator, you are able to exercise and debug the Hybrid content of
your application (HTML, JS, CSS) as if it were a mobile web site. If interested, you can open the Chrome
function is available on Safari or from Firebug on Firefox.
Page 32 MobileFirst Platform 7.0 Proof of Technology – Intro Lab
3.5.2 Preview IBMBank on an Android Device or Virtual Device
Follow these steps to preview the app on an android device.
___ 1. If running with an android device, ensure that your device is connected via a USB and
visible in the devices view. If running with Android Virtual Devices (AVDs), Start the Virtual device
(named haxm2) from the Android Virtual Device Manager view in Eclipse (Window > Android
Virtual Device Manager) and ensure that it starts fully and allows user interaction. If the Android
Virtual Device Manager is not visible on the Eclipse window menu, see Appendix B for the setup
NOTE: In case you are unfamiliar with AVDs, they are notoriously slow – be prepared to wait.
Once the emulator for AVD haxm2 has started successfully, you can close the Starting Android
Emulator window by clicking Close.
Then close the Android Virtual Device (AVD) Manager window.
___ 2. Right click on the IBMBankProjectIBMBankAppAndroid project in the project explorer
and select Run As > Android Application.
Page 34 MobileFirst Platform 7.0 Proof of Technology – Intro Lab
___ 3. The Android Virtual Device haxm2 will automatically open.
___ 4. When you saw a popup asking if you want to turn on Logcat. Select Yes and click OK.
This will printout any messages from the Android Virtual Device to the LogCat Console.
___ 5. When the Android Virtual Device is opened, unlock it by sliding from the lock icon to the
right hand side.
Page 36 MobileFirst Platform 7.0 Proof of Technology – Intro Lab
___ 6. You will see the app launched on your device. Below is a screenshot of the IBMBank app
running on an Android phone. Navigate the application just like before.
As in the Mobile Browser Simulator, you should be able to login and navigate through the
Accounts pages. Explore the application on the device or virtual device.
3.5.3 Introduction to the MobileFirst Platform Console
The MobileFirst Platform Console serves as the dashboard for the MobileFirst Platform Server. It
provides graphical visual access to all of the server functionalities.
___ 1. To view the MobileFirst Platform Operations Console, right click on the IBMBankProject
folder and select Open MobileFirst Console.
___ 2. The Operations Console opens in a browser window. You can choose to save the user
ID admin and password admin if prompted by the browser by clicking Save password.
Page 38 MobileFirst Platform 7.0 Proof of Technology – Intro Lab
___ 3. Click on the Applications button.
___ 4. Click on the Phone icon or the IBMBankApp name.
___ 5. From this console you can lock out an app and manage upgrades. Select the Application
Access to “Access disabled”, enter the Default notification message, the URL of the latest
application version and click the Save button.
___ 6. That version of the application is now disabled from accessing the MobileFirst Platform
___ 7. Return to the Mobile Browser Simulator and click on the Go/Refresh button to Reload or
re-launch the app.
Page 40 MobileFirst Platform 7.0 Proof of Technology – Intro Lab
___ 8. The notification text appears and the MobileFirst Server is no longer accessible by the
application. This feature can be useful for required application upgrades, end-of-life
announcements or system maintenance windows. Click the Close button for now.
___ 9. You also have instant notification access to all your app users through the MobileFirst
Platform Console. Return to the Operations Console and click on the drop down menu next to the
___ 10. Change the Application Access from “Access disabled” to “Active, notifying”, and
change the Default notification message to set the text that users will see when the application on
their device tries to access the MobileFirst Server. Click the Save button.
___ 11. The status of the save operation is displayed accordingly.
Page 42 MobileFirst Platform 7.0 Proof of Technology – Intro Lab
___ 12. Return to the Mobile Browser Simulator and click on the Go/Refresh button to Reload or
re-launch the app.
___ 13. The user receives the Service Notification dialog when the app accesses the MobileFirst
Server. Click the Close button.
___ 14. To continue with the lab, we need to re-activate the application. Return to the MobileFirst
Platform Operations Console, change the Application Access to “Active” and click Save.
___ 15. The status of the save operation is displayed accordingly.
Page 44 MobileFirst Platform 7.0 Proof of Technology – Intro Lab
3.5.4 Introduction to Operational Analytics
The Analytics Dashboard is a powerful tool for tracking and finding issues in your applications
using a single console.
___ 1. To launch the Operational Analytics dashboard, click on the Go to Analytics Dashboard
icon located at the upper right corner of the MobileFirst Platform Operations Console.
___ 2. The login screen for the MobileFirst Platform Operational Analytics appears. Enter admin
for the user name and admin for the password. Click Log in.
___ 3. Once you have logged in you will see the main dashboard screen. The development
MobileFirst server is automatically instrumented for analytics collection and display. In this lab,
you will not see much data. The facilitator can show you what a data driven analytics dashboard
could look like using sample apps. One that we use for demonstration purposes.
___ 4. Scroll down to the pie charts. This view gives us a quick display of statistics for the app
usage, environment usage and adapter calls. We will revisit later it, after making some source
Page 46 MobileFirst Platform 7.0 Proof of Technology – Intro Lab
3.5.5 Add an Adapter invocation
We will now change the source code of the IBMBank app to invoke an adapter procedure and
display “live” Account Details content from the server.
___ 1. Return to the MobileFirst Studio and double-click on the accounts.js source file, located
in the folder IBMBankProject > apps > IBMBankApp > common > js.
___ 2. Review the source code in accounts.js. The My Accounts page is rendered using data
from the AccountAdapter,
___ 3. Scroll down the Editor of account.js until you see the comments “click handler for
Account List”. You see that the Account Details page is rendered using a static array instead of
an adapter invocation.
___ 4. Make the change to use the adapter for the Account Details page instead of the static
array by commenting out the call to doGetAccountDetailsStatic and uncommenting the call to
Page 48 MobileFirst Platform 7.0 Proof of Technology – Intro Lab
___ 5. Click the Save button or press Ctrl-s to save the changes.
___ 6. Return to the Mobile Browser Simulator and click the Go/Refresh button to Reload or re-
launch the app.
___ 7. Once the IBMBankApp login page appears, enter any 3 characters e.g. joe for both the
username and password. Click Log In.
___ 8. On the Home page, click My Accounts.
___ 9. On the Account List page, click No-Fee Checking.
Page 50 MobileFirst Platform 7.0 Proof of Technology – Intro Lab
___ 10. Account detail is now supplied through back-end connectivity in the MobileFirst server.
___ 11. Verify the new activity in the MobileFirst Platform Operational Analytics. Return to the
Operational Analytics Dashboard and verify changes in the app sessions and adapter usage
___ 12. Scroll down the dashboard to view the pie charts. We should see new data captured,
including the AccountDetailsAdapter now being used.
Page 52 MobileFirst Platform 7.0 Proof of Technology – Intro Lab
3.6 Clean up
___ 13. Close the Android Virtual Device.
___ 14. Close the Eclipse workbench.
In this lab, you have successfully examined and run a starter version of the IBM Bank Application. You
have also learned fundamental concepts of building and deploying a MobileFirst Platform application.
MobileFirst Platform 7.0 Proof of Technology – Intro Lab Page 53
Appendix A. Troubleshooting – Locate/Import the IBMBank
project if not already pre-loaded in the MobileFirst Platform Studio
NOTE: When using the supplied VMWare image, the IBMBank project should already be pre-loaded in
the C:MobileFirstLabsworkspacesintro workspace. Ignore this appendix, if you see the IBMBank
project listed in the project explorer window.
Follow these steps to import the project into the workspace.
___ 1. From the Eclipse menu, select File > Import and select Existing Projects into
Workspace from the General category of the Import window. Click Next.
___ 2. Choose the Select archive file option and use the Browse button to navigate to
C:MobileFirstLabsimportsSetup folder. Locate and select the IBMBank_intro_import.zip
file. Click Finish and the IBMBankProject will be added to your workspace.
Page 54 MobileFirst Platform 7.0 Proof of Technology – Intro Lab
Appendix B. Troubleshooting – Android Virtual Device Manager
is not visible on the Eclipse menu bar
Follow these steps to setup the Android Virtual Manager on the Eclipse window menu.
___ 1. On the Eclipse menu bar, select Window > Customize Perspective….
___ 2. In the Customize Perspective window, select the Command Groups Availability tab,
select Android SDK and AVD Manager checkbox under the “Available command groups”
column, and then click the OK button.
Appendix Page 55
Appendix C. Notices
This information was developed for products and services offered in the U.S.A.
IBM may not offer the products, services, or features discussed in this document in other countries.
Consult your local IBM representative for information on the products and services currently available in
your area. Any reference to an IBM product, program, or service is not intended to state or imply that
only that IBM product, program, or service may be used. Any functionally equivalent product, program, or
service that does not infringe any IBM intellectual property right may be used instead. However, it is the
user's responsibility to evaluate and verify the operation of any non-IBM product, program, or service.
IBM may have patents or pending patent applications covering subject matter described in this
document. The furnishing of this document does not grant you any license to these patents. You can
send license inquiries, in writing, to:
IBM Director of Licensing
North Castle Drive
Armonk, NY 10504-1785
For license inquiries regarding double-byte (DBCS) information, contact the IBM Intellectual Property
Department in your country or send inquiries, in writing, to:
IBM World Trade Asia Corporation
2-31 Roppongi 3-chome, Minato-ku
Tokyo 106-0032, Japan
The following paragraph does not apply to the United Kingdom or any other country where such
provisions are inconsistent with local law: INTERNATIONAL BUSINESS MACHINES
CORPORATION PROVIDES THIS PUBLICATION "AS IS" WITHOUT WARRANTY OF ANY KIND,
EITHER EXPRESS OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
OF NON-INFRINGEMENT, MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. Some
states do not allow disclaimer of express or implied warranties in certain transactions, therefore, this
statement may not apply to you.
This information could include technical inaccuracies or typographical errors. Changes are periodically
made to the information herein; these changes will be incorporated in new editions of the publication.
IBM may make improvements and/or changes in the product(s) and/or the program(s) described in this
publication at any time without notice.
Any references in this information to non-IBM Web sites are provided for convenience only and do not in
any manner serve as an endorsement of those Web sites. The materials at those Web sites are not part
of the materials for this IBM product and use of those Web sites is at your own risk.
IBM may use or distribute any of the information you supply in any way it believes appropriate without
incurring any obligation to you.
Any performance data contained herein was determined in a controlled environment. Therefore, the
results obtained in other operating environments may vary significantly. Some measurements may have
Page 56 MobileFirst Platform 7.0 Proof of Technology – Intro Lab
been made on development-level systems and there is no guarantee that these measurements will be
the same on generally available systems. Furthermore, some measurements may have been estimated
through extrapolation. Actual results may vary. Users of this document should verify the applicable data
for their specific environment.
Information concerning non-IBM products was obtained from the suppliers of those products, their
published announcements or other publicly available sources. IBM has not tested those products and
cannot confirm the accuracy of performance, compatibility or any other claims related to non-IBM
products. Questions on the capabilities of non-IBM products should be addressed to the suppliers of
All statements regarding IBM's future direction and intent are subject to change or withdrawal without
notice, and represent goals and objectives only.
This information contains examples of data and reports used in daily business operations. To illustrate
them as completely as possible, the examples include the names of individuals, companies, brands, and
products. All of these names are fictitious and any similarity to the names and addresses used by an
actual business enterprise is entirely coincidental. All references to fictitious companies or individuals are
used for illustration purposes only.
This information contains sample application programs in source language, which illustrate programming
techniques on various operating platforms. You may copy, modify, and distribute these sample programs
in any form without payment to IBM, for the purposes of developing, using, marketing or distributing
application programs conforming to the application programming interface for the operating platform for
which the sample programs are written. These examples have not been thoroughly tested under all
conditions. IBM, therefore, cannot guarantee or imply reliability, serviceability, or function of these
Appendix Page 57
Appendix D. Trademarks and copyrights
The following terms are trademarks of International Business Machines Corporation in the United States,
other countries, or both:
IBM AIX CICS ClearCase ClearQuest Cloudscape
Cube Views DB2 developerWorks DRDA IMS IMS/ESA
Informix Lotus Lotus Workflow MQSeries OmniFind
Rational Redbooks Red Brick RequisitePro System i
System z Tivoli WebSphere Workplace System p
Adobe, the Adobe logo, PostScript, and the PostScript logo are either registered trademarks or
trademarks of Adobe Systems Incorporated in the United States, and/or other countries.
IT Infrastructure Library is a registered trademark of the Central Computer and Telecommunications
Agency which is now part of the Office of Government Commerce.
Intel, Intel logo, Intel Inside, Intel Inside logo, Intel Centrino, Intel Centrino logo, Celeron, Intel Xeon, Intel
SpeedStep, Itanium, and Pentium are trademarks or registered trademarks of Intel Corporation or its
subsidiaries in the United States and other countries.
Linux is a registered trademark of Linus Torvalds in the United States, other countries, or both.
Microsoft, Windows, Windows NT, and the Windows logo are trademarks of Microsoft Corporation in the
United States, other countries, or both.
ITIL is a registered trademark, and a registered community trademark of The Minister for the Cabinet
Office, and is registered in the U.S. Patent and Trademark Office.
UNIX is a registered trademark of The Open Group in the United States and other countries.
Java and all Java-based trademarks and logos are trademarks or registered trademarks of Oracle and/or
Cell Broadband Engine is a trademark of Sony Computer Entertainment, Inc. in the United States, other
countries, or both and is used under license therefrom.
Linear Tape-Open, LTO, the LTO Logo, Ultrium, and the Ultrium logo are trademarks of HP, IBM Corp.
and Quantum in the U.S. and other countries.