Creating a Mobile Phone Application

From the Session-Enabled Phone Template

Mobile App Builder Release 11

Author:Steve Boucher

TABLE OF CONTENTS

Section Page

1Overview

1.1Prerequisites

1.1.1Catalog and Service URIs

2Create a Mobile Phone App from the Session-Enabled Phone App Template

2.1Create the project

2.2Complete the Configuration of the Session Service

2.3Add the JSDO Service

2.4Add a List to the AppDetailPage

2.5Add a JSDO Instance to the AppDetailPage

2.6Add the Events

DOCUMENT HISTORY

Version / Date / Author / Change Description
0.1 / March 5,
2014 / Steve Boucher / Initial version
1.0 / March 13,
2014 / Steve Boucher / Doc review updates

1Overview

The session-enabled phone template is composed of pre-built pages that are preconfigured with session and login/logout services. To complete you must configure the session service, add a JSDO service and then complete the UI configuration.

1.1Prerequisites

A mobile application is dependent upon connecting to a running mobile service. In order to successfully run the mobile application the following must be available.

  • A running web server.
  • A running AppServerwith access to the ABLroutines that support the business operations on the data and isconnected to a database.
  • The Progress Developer Studio (OpenEdge version 11.2 or higher).
  • A mobile service deployed and running within a web server.
  • The name and location for the JSDO catalog (.JSON file). (During the creation of the mobile service a JSDO catalog is generated. The catalog defines the schema of the data and the operations the mobile service supports.)
  • The URIs for accessing the mobile web application, services and resources.

This document is focused on creating the UI and does not provide the instructions for creating and deploying a mobile service using the Progress Developer Studio. To fulfill the prerequisites, the instructions use an already deployed mobile service running on the Progress demo site: oemobiledemo.progress.com. For information on creating the mobile service, refer to the OpenEdge Development: Mobile Applications documentation and the section entitled “Creating Mobile Services”.

1.1.1Catalog and Service URIs

The sample app uses the following catalogURIsand serviceURI to access the resources provided by CustomerService mobile service.

  • serviceURI:
  • catalogURIs:

2Create a Mobile Phone App from the Session-Enabled Phone App Template

2.1Create the project

  1. Login into the Mobile App Builder at
  2. Click “Apps” and after the Apps page is displayed, click “More create options”.
  3. Enter the project name: MyMobPhoneApp.
  4. Select the “Session-enabled Phone App” radio button and click the “Create” button.

Note: Selecting a project template is also available within the Progress Developer Studio.

Upon completing these steps, the project will be opened into the Mobile App Builder designer.

2.2Complete the Configuration of the Session Service

  1. Expand Services -> SessionService -> SessionService_Settingsand the properties for the session service will be displayed.

2. Enter the serviceURI:

3. Enter the catalogURIs:

4. Click the “Save” button to save the new property values.

Note: In this sample app, the default value for the “authenticationModel” is Anonymous. Anonymous authentication allows all users access to the app and therefore no username or password will be required at runtime.

2.3Addthe JSDO Service

  1. Click on the Create New button and from the dropdown select Service.

The “Create new service” dialog is displayed.

  1. For “Progress services”, select the “JSDO Service” radio button.

The dialog will alter after selecting the “JSDO Service” and will prompt you to load the JSDO catalog.

Click the “Upload a file” button. In “File name:” enter the value for the “catalogURIs” and click the “Open” button.

3. The “CustomerService.json” appears in “Create new service” dialog just under the “Upload a file” button. At the bottom of the dialog, click the “Select resources” button.

The “Select resources” dialog appears. Check the “File name” checkbox and then click the “Create services” button.

Note: If you are unable to download the JSDO catalog and load it as described above, then try using a browser and entering the catalogURIs into the address bar. The catalog contents will be displayed and you can then save the page locally to a file: “CustomerService.json”. Then when prompted for the “File name” above, enter the path to your local copy.

A message “Created 9 services” will appear, click the “Close” button.

The result of these steps will be the creation of a new service: CustomerService.Customer.

2.4Add a List to the AppDetailPage

  1. Expand pages and select the AppDetailPage and click the “Design” tab (default).

  1. From the “Components” pane, locate “List” and drag it over into the Detail Page under “Place content here!” and into its own box.
  1. In the Properties panel, find“Items” and change the value from 3 to 1 and apply.
  1. In the Properties panel, find “Name” and enter “CustList”.
  1. Click on the “Item 1” box (under “Place content here!”) and change Name in the properties panel to “CustItem”.
  1. From the “Components” pane, locate Label and drag it on top of “Item 1”.
  1. ChangeName in the properties panel to “CustName” and Save.

2.5Add a JSDO Instance to the AppDetailPage

  1. Click on the “Data” tab.
  1. In the “Add datasource” drop-down, select “Service” and then in the next drop-down, select“CustomerService_Customer_JSDO” and then click the “Add” button. This will add a “restservice1” to the list of services. Change the name “restservice1” to “Customer”.
  1. To add another datasource, select “Service”, “CustomerService_Customer_Read” and then click the “Add” button. Set the name to “Read”.
  1. On the new “Read”service just created, click on the “Edit Mapping” button and then click the “Response” tab.
  1. Expand dsCustomer -> eCustomer
  1. On the right side of the screen, under “Create variable”, expand AppDetailPage -> detailLayout -> CustList -> CustItem -> CustName.
  1. Drag from “eCustomer” to “CustItem” and then drag Name to the text field under “CustName”

2.6Add the Events

  1. Click on “Events” at the bottom of the page.
  1. Under “Component”, select “Customer” from the drop-down. Select “Success” as the “Event”, “Invoke service” for the “Action”, and then select “Read” as the “Datasource”. Click “Add event”.

  1. Switch to the “Design” tab with the “Events” still listed.
  1. Under “Component”, select “AppDetailPage”, select “Load” as the “Event”, “Invoke service” for the “Action” and then “Customer” as the Datasource. Click the “Add event” button.
  1. Save the project.

The project is finished and ready to run. Use the Mobile App Builder emulator (“Test” button) and run the application.

Progress Software Corporation ConfidentialPage 1 of 9Copyright 2014