Going Mobile with
OpenEdge® Basics
Paul Guggenheim
Paul Guggenheim & Associates
2
About PGA









Working in Progress since 1984 and training Progress
programmers since 1986
Designed seven comprehensive Progress courses covering all
levels of expertise including - The Keys to OpenEdge®
Author of the Sharp Menu System, a database driven, GUI pulldown menu system.
White Star Software Strategic Partner
TailorPro Consultant and Reseller
AppPro Partner
Major consulting clients include Chicago Metal Rolled Products,
Eastern Municipal Water District, Eaton Corporation, Foxwoods
Casino, JP Morgan Chase, Montana Metal Products, National
Safety Council and Stanley Tools Works.
Head of the Chicago Area Progress Users Group
PUG Challenge Executive Committee Member
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Overview

OpenEdge Mobile Components





Create a Mobile OpenEdge Project
Create a Business Entity
Create Mobile Application





Runtime Architecture
Development Environment
Adding JSDO Services
Adding Mobile UI Components
Adding Events
Mapping Data
Demonstration


Search
CRUD Functions
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
OpenEdge Mobile Components
Runtime Architechture
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
OpenEdge Mobile Components
 Development
Mobile Device
Mobile Web Application
Web Browser or
Native
OpenEdge JSDO
HTML5 and JS
Copyright © 2013
Paul Guggenheim & Associates
Environment
WebServer
Tomcat
.war, .xml, .js, .jar,
.html, .css files
Going Mobile with OpenEdge Basics
AppServer
Business Entity
.cls and .r files
Services
(Class methods)
PUG Challenge
June 9-12th, 2013
Westford, MA
Create a Mobile OpenEdge Project
Select Project Type as Mobile
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Create a Mobile OpenEdge Project
Select AppServer
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Create a Mobile OpenEdge Project
Select a Mobile Service Instance
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Create a Mobile OpenEdge Project
Create a Mobile App
“App” added to the end of the project name
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Create a Mobile OpenEdge Project
 Skip
over the Propath screen
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Create a Mobile OpenEdge Project
 Select
the desired source for database
connections.
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Create a Mobile OpenEdge Project
 Take
the defaults for static web content.
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Mobile Project Updating

At the start of the project and when major
changes are made to the front end mobile
application, publish restmgr1.
 Publishing restmgr1 can be time consuming,
especially if you have created multiple projects.
 This creates/updates the .war files and
subdirectories related to the project located in
the %dlc%\servers\tomcat\webapps directory.
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Mobile Project Updating
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Mobile Project Updating
 When
finished making changes to
business logic on the back end, then
start/restart restbroker1.
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Create a Business Entity
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Create a Business Entity
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Connect BE to Mobile Service
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Populate Read Method
 Insert
code below in readdsGMCustomer:
DEFINE DATA-SOURCE srcCustomer FOR Customer.
BUFFER eCustomer:ATTACH-DATA-SOURCE(DATA-SOURCE
srcCustomer:HANDLE).
BUFFER eCustomer:HANDLE:BATCH-SIZE = 10.
DATASET dsCustomer:FILL().
BUFFER eCustomer:DETACH-DATA-SOURCE().
dataset dsCustomer:write-json
('file', './dsGMCustomer.json', yes).
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Create Mobile Application
 From
the browser select the home page
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Create Mobile Application
 Click
on Caption, then enter text
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Create Mobile Application
 Drag
List control into body below caption
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Create Mobile Application





The list control is similar to a OE UI Browse.
Set the items in list to 1 (rows per record).
Name list CustList
Name Item CustItem
Add grid to list (sets the number of columns and
rows).


Set to 3 columns and 1 row.
Add label to each grid cell (column in browse).

Name labels, CustNum, CustName and Phone.
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Create Mobile Application
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Adding JSDO Service to Client
 The
JavaScript Data Object (JSDO)
provides access to ABL data to the Mobile
Client.
 The JSDO service is selected for the
project containing 7 individual services to
be used by a particular screen.
 The Customer Settings service must be
setup first.
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Adding JSDO Service to Client
 Select
Create a New Service, then upload
a file.
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Adding JSDO Service to Client
 Select
the JSON file to upload from the
Webcontent subdirectory, then click Select
Resouces, then Create Services.
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Adding JSDO Service to Client
 The
JSDO creates 7 services:
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Setting the Catalog and ServiceURI
 In
order for the OE Mobile app to reach
the development web server, change the
catalogURI and serviceURI:
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Setting the Catalog and ServiceURI
 catalogURI:
http://pgavos2:8980/GoingMobileService/sta
tic/mobile/GoingMobileService.json
 serviceURI:
http://pgavos2:8980/GoingMobileService
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Add DataSource to Home Screen
 Select
Data Tab on Home Screen
 Select JSDO Service, click Add
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Add DataSource to Home Screen
 Change
“restservice1” name to a more
meaningful “Customer”.
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Adding Events
 Each
UI object in OE Mobile can be
instructed to execute various actions
based upon a particular event.
 Here are some event types:

Load, Page Show, Page Hide, Click, Focus,
Input and ValueChange
 Actions

may take various forms:
Set property, Navigate to Page, Invoke
Service, Run JavaScript
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Adding Events
 In
order to use the JSDO classes, an
OpenEdge Data Session instance must be
created.
 Once created, the catalog json file may be
referenced in the session.
 It is necessary to add some JavaScript
code to the Load of the Home screen to
instantiate the session and add the
catalog.
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Adding Events
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Adding Events
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Adding Events
 Invoke
service “Customer” as second
action on Load of Home Screen
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Let’s Test IT!
 If
typed incorrectly, you may receive the
following:
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Let’s Test IT!
 Look
ma,
no data.
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Let’s Load Data
Three Steps:
1. Add datasource Read service to home
screen.
2. Map Data to UI Elements.
3. Perform read service on page show
event.
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Add Read Service to Home Screen
 Change
Name to Read
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Edit Mapping
 Edit
Mapping for Read Service
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Put Read Service on Page Show
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Let’s Test IT!
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Search by Name
 Add
input field and search button
 Change the Read Request mapping


Set local storage variable cnum2
Set cnum2 to “ ” on initial value
 Change
readdsGMCustomer method
 On click of the searchbutton:


Store input data in a localStorage variable
Invoke the read service
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Search by Name
 Add
grid above custlist for formatting the
input field and search button.
 Set rows to 1
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Search by Name
 Drag
the input field control into the left grid
cell and call it begname.
 Drag button control into the right grid cell
and call it buttonsearch.
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Create LocalStorage Variable
 On
Load of the Home screen set local
storage variable cnum2.
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Change Read Request Mapping
 Map
localStorage variable cnum2 to filter.
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Change read method

A query qcust is added for the customer record.
 Conditional logic on the filter value is added.
define query qcust for Customer scrolling.
DEFINE DATA-SOURCE srcCustomer FOR query qcust Customer
keys (custnum).
if filter = “ ” then
query qcust:QUERY-PREPARE ("for each customer
no-lock where name begins 'a' " ).
else
query qcust:QUERY-PREPARE ("for each customer
no-lock where name begins '" + filter + "' " ).
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Store in LocalStorage Variable
 Add
event Click on buttonsearch to run
JavaScript.
var vbegname = Tiggr(‘begname’).val();
alert(‘begname: ‘ + vbegname);
localStorage.setItem(‘cnum2’, vbegname);
alert(loaclStorage.getItem(‘cnum2’));
 Documentation:
Getting Started with HTML5 Local Storage:
http://blog.appery.io/2011/09/getting-started-with-html5-local-storage/
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Search by Name
 Problem:
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Search by Name

Sorting is done on the client side not the server side in
OpenEdge
 Need to sort in the JSDO when it succeeds.
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Search by Name
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Update Customer







Create a detail screen for updating name and
phone with update button and back button.
Perform actions on the click of CustItem, the Item
of the List.
Add read service to detail screen and map.
Add update service to detail screen and map.
Perform actions click of update button.
Modify logic for the read customer method.
Add logic for the update customer method.
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Create Detail Screen
 Create
New Page:
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Create Detail Screen
 Add
two input fields for name and phone.
 Add update button.
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
CustItem Actions
 On
the home page, set local storage
variable cnum and bind it to CustNum.
 Navigate to page Detail.
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Map Read Service on Detail Screen
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Map Read Service on Detail Screen
 Invoke
read service on detail screen page
show.
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Map Update Service on Detail Screen
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Add Update Button Actions
 Invoke
the update service.
 Navigate to the home screen.
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Modify Read Logic
 The
filter will now have a dual purpose. It
needs to get the one customer for update
in addition to searching by name.
 The filter will be comma delimited list with
the first value being customer number and
the second value being a name begins
string.
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Modify Read Logic
 On
the OpenEdge Mobile side, the search
button JavaScript logic is changed to:
localStorage.setItem('cnum2', ',' + vbegname);
 Set
localStorage on Load of home screen
for cnum2 is changed from “a” to “,a”.
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Modify Read Logic
 On
the business logic server side:
if num-entries(filter) = 1 then
query qcust:QUERY-PREPARE ("for each customer no-lock
where custnum = " + filter ).
else
query qcust:QUERY-PREPARE ("for each customer no-lock
where name begins '" + entry(2,filter) + "'" ).
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Add Update Logic

Even though we are only updating one record, a
for each on the ecustomer table is performed in
case this logic is used in other Mobile programs.
for each eCustomer:
find Customer exclusive-lock
where Customer.CustNum = eCustomer.CustNum
no-error.
if available Customer then
buffer-copy eCustomer to Customer no-error.
end. /* for each eCustomer */
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Add New Customer






Place add button on home screen.
Change update service response map to
transfer sequence generated custnum.
Add event for add button to set cnum = 0.
Change button text on detail screen to add.
Modify read method in business entity to create
empty ecustomer temp-table record.
Modify update method to include add logic.
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Add New Customer
 Place
add button on home screen.
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Add New Customer
 Change
detail screen update service
response map to transfer sequence
generated custnum.
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Add New Customer
 Add
event for add button to set cnum = 0.
 Add event to navigate to detail screen.
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Add New Customer
 Change
button text on detail screen to add.
 Place in front of read2 service.
var vcnum;
vcnum = localStorage.getItem('cnum');
if (vcnum == 0) Tiggzi('buttonupdate').text('Add');
else Tiggzi('buttonupdate').text('Update');
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Add New Customer


Create empty ecustomer temp-table record.
Required for mapping.
if filter = "0" then create ecustomer.
else do:
if num-entries(filter) = 1
or entry(2,filter) = "" then
query qcust:QUERY-PREPARE ("for each customer no-lock
where custnum = " + filter ).
else
query qcust:QUERY-PREPARE ("for each customer no-lock
where name begins '" + entry(2,filter) + "'" ).
DATASET dsCustomer:FILL().
BUFFER eCustomer:DETACH-DATA-SOURCE().
end. /* filter ne '0' */
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Add New Customer

Modify update method to include add logic.
for each eCustomer:
find Customer exclusive-lock
where Customer.CustNum eq eCustomer.CustNum
no-error.
if available Customer then
buffer-copy eCustomer to Customer no-error.
else if ecustomer.custnum = 0 then do:
create Customer.
buffer-copy ecustomer except custnum to Customer.
assign ecustomer.custnum = Customer.CustNum.
end. /* ecustomer.custnum = 0 */
end.
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Deleting a Customer
 Add
Delete service and field mapping to
Detail screen.
 Add Delete Button to Detail screen.
 Add Delete click event to invoke delete
service.
 Add Delete click event to navigate to home
screen.
 Add logic to delete method.
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Deleting a Customer
 Add
Delete service to Detail screen.
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Deleting a Customer
 Add
Delete field mapping to Detail screen.
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Deleting a Customer
 Add
Delete Button to Detail screen.
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Deleting a Customer
 Add
Delete click events to invoke delete
service and navigate to home screen.
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Deleting a Customer

Add logic to delete method.
find first ecustomer.
find Customer exclusive-lock
where Customer.CustNum eq eCustomer.CustNum
no-error.
if available Customer then do:
/* check if customer actually deleted or delete
trigger caused it to be backed out */
delete Customer no-error.
if not error-status:error then delete ecustomer.
end. /* available customer */
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Summary
 OpenEdge
Mobile provides the ability to
search, add, modify and delete records on
any mobile device.
 There are many steps in the process.



Adding Data Services
Performing data mapping for both requests
and responses.
Add the appropriate event in the right
sequence.
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA
Questions
Copyright © 2013
Paul Guggenheim & Associates
Going Mobile with OpenEdge Basics
PUG Challenge
June 9-12th, 2013
Westford, MA