Going Mobile with OpenEdge ® Basics Paul Guggenheim Paul Guggenheim & Associates.

Going Mobile with Going Mobile with OpenEdgeOpenEdge®® BasicsBasics

Paul GuggenheimPaul Guggenheim

Paul Guggenheim & AssociatesPaul Guggenheim & Associates

PUG ChallengePUG ChallengeJune 9-12th, 2013June 9-12th, 2013

Westford, MAWestford, MACopyright © 2013Copyright © 2013 Paul Guggenheim & AssociatesPaul Guggenheim & Associates Going Mobile with OpenEdge BasicsGoing Mobile with OpenEdge Basics

2

About PGAAbout PGA Working in Progress since 1984 and training Progress programmers Working in Progress since 1984 and training Progress programmers

since 1986since 1986 Designed seven comprehensive Progress courses covering all levels of Designed seven comprehensive Progress courses covering all levels of

expertise including - The Keys to OpenEdge® expertise including - The Keys to OpenEdge® Author of the Sharp Menu System, a database driven, GUI pull-down Author of the Sharp Menu System, a database driven, GUI pull-down

menu system.menu system. White Star White Star Software Strategic PartnerSoftware Strategic Partner TailorProTailorPro Consultant and Reseller Consultant and Reseller AppPro AppPro PartnerPartner Major consulting clients include Chicago Metal Rolled Products, Eastern Major consulting clients include Chicago Metal Rolled Products, Eastern

Municipal Water District, Eaton Corporation, Foxwoods Casino, JP Municipal Water District, Eaton Corporation, Foxwoods Casino, JP Morgan Chase, Montana Metal Products, National Safety Council and Morgan Chase, Montana Metal Products, National Safety Council and Stanley Tools Works.Stanley Tools Works.

Head of the Chicago Area Progress Users GroupHead of the Chicago Area Progress Users Group PUG Challenge Executive Committee MemberPUG Challenge Executive Committee Member



OverviewOverview OpenEdge Mobile ComponentsOpenEdge Mobile Components

Runtime ArchitectureRuntime Architecture Development EnvironmentDevelopment Environment

Create a Mobile OpenEdge ProjectCreate a Mobile OpenEdge Project Create a Business EntityCreate a Business Entity Create Mobile ApplicationCreate Mobile Application

Adding JSDO ServicesAdding JSDO Services Adding Mobile UI ComponentsAdding Mobile UI Components Adding EventsAdding Events Mapping DataMapping Data

DemonstrationDemonstration SearchSearch CRUD FunctionsCRUD Functions



OpenEdge Mobile ComponentsOpenEdge Mobile Components

Runtime ArchitechtureRuntime Architechture



OpenEdge Mobile ComponentsOpenEdge Mobile Components

Development EnvironmentDevelopment Environment

AppServer

Business Entity.cls and .r files

Services(Class methods)

WebServer

Tomcat

.war, .xml, .js, .jar,

.html, .css files

Mobile DeviceMobile Web Application

Web Browser or Native

OpenEdge JSDOHTML5 and JS



Create a Mobile OpenEdge ProjectCreate a Mobile OpenEdge Project

Select Project Type as MobileSelect Project Type as Mobile




Select AppServerSelect AppServer




Select a Mobile Service InstanceSelect a Mobile Service Instance




Create a Mobile AppCreate a Mobile App

““App” added to the end of the project nameApp” added to the end of the project name



Create a Mobile OpenEdge ProjectCreate a Mobile OpenEdge Project Skip over the Propath screenSkip over the Propath screen



Create a Mobile OpenEdge ProjectCreate a Mobile OpenEdge Project Select the desired source for database Select the desired source for database

connections.connections.



Create a Mobile OpenEdge ProjectCreate a Mobile OpenEdge Project Take the defaults for static web content.Take the defaults for static web content.



Mobile Project UpdatingMobile Project Updating

At the start of the project and when major At the start of the project and when major changes are made to the front end mobile changes are made to the front end mobile application, publish restmgr1.application, publish restmgr1.

Publishing restmgr1 can be time consuming, Publishing restmgr1 can be time consuming, especially if you have created multiple projects.especially if you have created multiple projects.

This creates/updates the .war files and This creates/updates the .war files and subdirectories related to the project located in subdirectories related to the project located in the %dlc%\servers\tomcat\webapps directory.the %dlc%\servers\tomcat\webapps directory.




When finished making changes to When finished making changes to business logic on the back end, then business logic on the back end, then start/restart restbroker1.start/restart restbroker1.



Create a Business EntityCreate a Business Entity



Connect BE to Mobile ServiceConnect BE to Mobile Service



Populate Read MethodPopulate Read Method Insert code below in readdsGMCustomer:Insert code below in readdsGMCustomer:

DEFINE DATA-SOURCE srcCustomer FOR Customer.DEFINE DATA-SOURCE srcCustomer FOR Customer.

BUFFER eCustomer:ATTACH-DATA-SOURCE(DATA-SOURCE BUFFER eCustomer:ATTACH-DATA-SOURCE(DATA-SOURCE srcCustomer:HANDLE).srcCustomer:HANDLE).

BUFFER eCustomer:HANDLE:BATCH-SIZE = 10.BUFFER eCustomer:HANDLE:BATCH-SIZE = 10.

DATASET dsCustomer:FILL().DATASET dsCustomer:FILL().

BUFFER eCustomer:DETACH-DATA-SOURCE().BUFFER eCustomer:DETACH-DATA-SOURCE().

dataset dsCustomer:write-jsondataset dsCustomer:write-json ('file', './dsGMCustomer.json', yes).('file', './dsGMCustomer.json', yes).



Create Mobile ApplicationCreate Mobile Application From the browser select the home pageFrom the browser select the home page



Create Mobile ApplicationCreate Mobile Application Click on Caption, then enter textClick on Caption, then enter text



Create Mobile ApplicationCreate Mobile Application Drag List control into body below captionDrag List control into body below caption



Create Mobile ApplicationCreate Mobile Application The list control is similar to a OE UI Browse.The list control is similar to a OE UI Browse. Set the items in list to 1 (rows per record).Set the items in list to 1 (rows per record). Name list CustListName list CustList Name Item CustItemName Item CustItem Add grid to list (sets the number of columns and Add grid to list (sets the number of columns and

rows). rows). Set to 3 columns and 1 row.Set to 3 columns and 1 row.

Add label to each grid cell (column in browse).Add label to each grid cell (column in browse). Name labels, CustNum, CustName and Phone.Name labels, CustNum, CustName and Phone.



Create Mobile ApplicationCreate Mobile Application



Adding JSDO Service to Client Adding JSDO Service to Client The JavaScript Data Object (JSDO) The JavaScript Data Object (JSDO)

provides access to ABL data to the Mobile provides access to ABL data to the Mobile Client. Client.

The JSDO service is selected for the The JSDO service is selected for the project containing 7 individual services to project containing 7 individual services to be used by a particular screen.be used by a particular screen.

The Customer Settings service must be The Customer Settings service must be setup first.setup first.



Adding JSDO Service to ClientAdding JSDO Service to Client Select Create a New Service, then upload Select Create a New Service, then upload

a file.a file.



Adding JSDO Service to ClientAdding JSDO Service to Client Select the JSON file to upload from the Select the JSON file to upload from the

Webcontent subdirectory, then click Select Webcontent subdirectory, then click Select Resouces, then Create Services.Resouces, then Create Services.



Adding JSDO Service to ClientAdding JSDO Service to Client The JSDO creates 7 services:The JSDO creates 7 services:



Setting the Catalog and ServiceURISetting the Catalog and ServiceURI In order for the OE Mobile app to reach In order for the OE Mobile app to reach

the development web server, change the the development web server, change the catalogURI and serviceURI:catalogURI and serviceURI:



Setting the Catalog and ServiceURISetting the Catalog and ServiceURI

catalogURI:catalogURI:

http://pgavos2:8980/GoingMobileService/stahttp://pgavos2:8980/GoingMobileService/static/mobile/GoingMobileService.jsontic/mobile/GoingMobileService.json serviceURI:serviceURI:

http://pgavos2:8980/GoingMobileServicehttp://pgavos2:8980/GoingMobileService



Add DataSource to Home ScreenAdd DataSource to Home Screen

Select Data Tab on Home ScreenSelect Data Tab on Home Screen Select JSDO Service, click AddSelect JSDO Service, click Add



Add DataSource to Home ScreenAdd DataSource to Home Screen Change “restservice1” name to a more Change “restservice1” name to a more

meaningful “Customer”.meaningful “Customer”.



Adding EventsAdding Events Each UI object in OE Mobile can be Each UI object in OE Mobile can be

instructed to execute various actions instructed to execute various actions based upon a particular event.based upon a particular event.

Here are some event types:Here are some event types: Load, Page Show, Page Hide, Click, Focus, Load, Page Show, Page Hide, Click, Focus,

Input and ValueChangeInput and ValueChange Actions may take various forms:Actions may take various forms:

Set property, Navigate to Page, Invoke Set property, Navigate to Page, Invoke Service, Run JavaScriptService, Run JavaScript



Adding EventsAdding Events In order to use the JSDO classes, an In order to use the JSDO classes, an

OpenEdge Data Session instance must be OpenEdge Data Session instance must be created. created.

Once created, the catalog json file may be Once created, the catalog json file may be referenced in the session.referenced in the session.

It is necessary to add some JavaScript It is necessary to add some JavaScript code to the Load of the Home screen to code to the Load of the Home screen to instantiate the session and add the instantiate the session and add the catalog.catalog.



Adding EventsAdding Events



Adding EventsAdding Events Invoke service “Customer” as second Invoke service “Customer” as second

action on Load of Home Screenaction on Load of Home Screen



Let’s Test IT!Let’s Test IT! If typed incorrectly, you may receive the If typed incorrectly, you may receive the

following:following:



Let’s Test IT!Let’s Test IT!

Look ma, Look ma, no data.no data.



Let’s Load DataLet’s Load Data

Three Steps:Three Steps:

1.1. Add datasource Read service to home Add datasource Read service to home screen.screen.

2.2. Map Data to UI Elements.Map Data to UI Elements.

3.3. Perform read service on page show Perform read service on page show event.event.



Add Read Service to Home ScreenAdd Read Service to Home Screen

Change Name to ReadChange Name to Read



Edit MappingEdit Mapping Edit Mapping for Read ServiceEdit Mapping for Read Service



Put Read Service on Page ShowPut Read Service on Page Show



Let’s Test IT!Let’s Test IT!



Search by NameSearch by Name Add input field and search buttonAdd input field and search button Change the Read Request mappingChange the Read Request mapping

Set local storage variable cnum2Set local storage variable cnum2 Set cnum2 to “ ” on initial valueSet cnum2 to “ ” on initial value

Change readdsGMCustomer methodChange readdsGMCustomer method On click of the searchbutton:On click of the searchbutton:

Store input data in a localStorage variableStore input data in a localStorage variable Invoke the read serviceInvoke the read service



Search by NameSearch by Name Add grid above custlist for formatting the Add grid above custlist for formatting the

input field and search button.input field and search button. Set rows to 1Set rows to 1



Search by NameSearch by Name Drag the input field control into the left grid Drag the input field control into the left grid

cell and call it begname.cell and call it begname. Drag button control into the right grid cell Drag button control into the right grid cell

and call it buttonsearch.and call it buttonsearch.



Create LocalStorage VariableCreate LocalStorage Variable On Load of the Home screen set local On Load of the Home screen set local

storage variable cnum2.storage variable cnum2.



Change Read Request MappingChange Read Request Mapping Map localStorage variable cnum2 to filter.Map localStorage variable cnum2 to filter.



Change read methodChange read method A query qcust is added for the customer record.A query qcust is added for the customer record. Conditional logic on the filter value is added.Conditional logic on the filter value is added.

define query qcust for Customer scrolling.define query qcust for Customer scrolling.DEFINE DATA-SOURCE srcCustomer FOR query qcust Customer DEFINE DATA-SOURCE srcCustomer FOR query qcust Customer

keys (custnum).keys (custnum).

if filter = “ ” thenif filter = “ ” thenquery qcust:QUERY-PREPARE ("for each customer query qcust:QUERY-PREPARE ("for each customer no-lock where name begins 'a' " ).no-lock where name begins 'a' " ).elseelsequery qcust:QUERY-PREPARE ("for each customer query qcust:QUERY-PREPARE ("for each customer no-lock where name begins '" + filter + "' " ).no-lock where name begins '" + filter + "' " ).



Store in LocalStorage VariableStore in LocalStorage Variable Add event Click on buttonsearch to run Add event Click on buttonsearch to run

JavaScript.JavaScript.

var vbegname = Tiggr(‘begname’).val();var vbegname = Tiggr(‘begname’).val();

alert(‘begname: ‘ + vbegname);alert(‘begname: ‘ + vbegname);

localStorage.setItem(‘cnum2’, vbegname);localStorage.setItem(‘cnum2’, vbegname);

alert(loaclStorage.getItem(‘cnum2’));alert(loaclStorage.getItem(‘cnum2’));

Documentation:Documentation:

Getting Started with HTML5 Local Storage:Getting Started with HTML5 Local Storage:http://blog.appery.io/2011/09/getting-started-with-html5-local-storage/http://blog.appery.io/2011/09/getting-started-with-html5-local-storage/



Search by NameSearch by Name Problem:Problem:



Search by NameSearch by Name Sorting is done on the client side not the server side in Sorting is done on the client side not the server side in

OpenEdgeOpenEdge Need to sort in the JSDO when it succeeds.Need to sort in the JSDO when it succeeds.



Search by NameSearch by Name



Update CustomerUpdate Customer Create a detail screen for updating name and Create a detail screen for updating name and

phone with update button and back button.phone with update button and back button. Perform actions on the click of CustItem, the Item Perform actions on the click of CustItem, the Item

of the List.of the List. Add read service to detail screen and map.Add read service to detail screen and map. Add update service to detail screen and map.Add update service to detail screen and map. Perform actions click of update button.Perform actions click of update button. Modify logic for the read customer method.Modify logic for the read customer method. Add logic for the update customer method.Add logic for the update customer method.



Create Detail ScreenCreate Detail Screen Create New Page:Create New Page:



Create Detail ScreenCreate Detail Screen Add two input fields for name and phone.Add two input fields for name and phone. Add update button.Add update button.



CustItem ActionsCustItem Actions On the home page, set local storage On the home page, set local storage

variable cnum and bind it to CustNum.variable cnum and bind it to CustNum. Navigate to page Detail.Navigate to page Detail.



Map Read Service on Detail ScreenMap Read Service on Detail Screen



Map Read Service on Detail ScreenMap Read Service on Detail Screen

Invoke read service on detail screen page Invoke read service on detail screen page show.show.



Map Update Service on Detail ScreenMap Update Service on Detail Screen



Add Update Button ActionsAdd Update Button Actions Invoke the update service.Invoke the update service. Navigate to the home screen.Navigate to the home screen.



Modify Read LogicModify Read Logic The filter will now have a dual purpose. It The filter will now have a dual purpose. It

needs to get the one customer for update needs to get the one customer for update in addition to searching by name. in addition to searching by name.

The filter will be comma delimited list with The filter will be comma delimited list with the first value being customer number and the first value being customer number and the second value being a name begins the second value being a name begins string.string.



Modify Read LogicModify Read Logic On the OpenEdge Mobile side, the search On the OpenEdge Mobile side, the search

button JavaScript logic is changed to:button JavaScript logic is changed to:

localStorage.setItem('cnum2', ',' + vbegname);localStorage.setItem('cnum2', ',' + vbegname);

Set localStorage on Load of home screen Set localStorage on Load of home screen for cnum2 is changed from “a” to “,a”.for cnum2 is changed from “a” to “,a”.



Modify Read LogicModify Read Logic On the business logic server side:On the business logic server side:

if num-entries(filter) = 1 thenif num-entries(filter) = 1 then

query qcust:QUERY-PREPARE ("for each customer no-lock query qcust:QUERY-PREPARE ("for each customer no-lock

where custnum = " + filter ).where custnum = " + filter ).

else else

query qcust:QUERY-PREPARE ("for each customer no-lock query qcust:QUERY-PREPARE ("for each customer no-lock

where name begins '" + entry(2,filter) + "'" ).where name begins '" + entry(2,filter) + "'" ).



Add Update LogicAdd Update Logic Even though we are only updating one record, a Even though we are only updating one record, a

for each on the ecustomer table is performed in for each on the ecustomer table is performed in case this logic is used in other Mobile programs.case this logic is used in other Mobile programs.

for each eCustomer:for each eCustomer:

find Customer exclusive-lockfind Customer exclusive-lock

where Customer.CustNum = eCustomer.CustNumwhere Customer.CustNum = eCustomer.CustNum

no-error.no-error.

if available Customer thenif available Customer then

buffer-copy eCustomer to Customer no-error.buffer-copy eCustomer to Customer no-error.

end. /* for each eCustomer */end. /* for each eCustomer */



Add New CustomerAdd New Customer Place add button on home screen.Place add button on home screen. Change update service response map to Change update service response map to

transfer sequence generated custnum.transfer sequence generated custnum. Add event for add button to set cnum = 0.Add event for add button to set cnum = 0. Change button text on detail screen to add.Change button text on detail screen to add. Modify read method in business entity to create Modify read method in business entity to create

empty ecustomer temp-table record.empty ecustomer temp-table record. Modify update method to include add logic.Modify update method to include add logic.



Add New CustomerAdd New Customer

Place add button on home screen.Place add button on home screen.



Add New CustomerAdd New Customer Change detail screen update service Change detail screen update service

response map to transfer sequence response map to transfer sequence generated custnum.generated custnum.



Add New CustomerAdd New Customer Add event for add button to set cnum = 0.Add event for add button to set cnum = 0. Add event to navigate to detail screen.Add event to navigate to detail screen.



Add New CustomerAdd New Customer Change button text on detail screen to add.Change button text on detail screen to add. Place in front of read2 service.Place in front of read2 service.var vcnum;var vcnum;

vcnum = localStorage.getItem('cnum');vcnum = localStorage.getItem('cnum');

if (vcnum == 0) Tiggzi('buttonupdate').text('Add'); if (vcnum == 0) Tiggzi('buttonupdate').text('Add'); else Tiggzi('buttonupdate').text('Update');else Tiggzi('buttonupdate').text('Update');



Add New CustomerAdd New Customer Create empty ecustomer temp-table record.Create empty ecustomer temp-table record. Required for mapping.Required for mapping.

if filter = "0" then create ecustomer.if filter = "0" then create ecustomer.else do:else do: if num-entries(filter) = 1 if num-entries(filter) = 1 or entry(2,filter) = "" thenor entry(2,filter) = "" then query qcust:QUERY-PREPARE ("for each customer no-lock query qcust:QUERY-PREPARE ("for each customer no-lock

where custnum = " + filter ).where custnum = " + filter ). else else query qcust:QUERY-PREPARE ("for each customer no-lock query qcust:QUERY-PREPARE ("for each customer no-lock

where name begins '" + entry(2,filter) + "'" ).where name begins '" + entry(2,filter) + "'" ). DATASET dsCustomer:FILL().DATASET dsCustomer:FILL(). BUFFER eCustomer:DETACH-DATA-SOURCE().BUFFER eCustomer:DETACH-DATA-SOURCE().end. /* filter ne '0' */end. /* filter ne '0' */



Add New CustomerAdd New Customer Modify update method to include add logic.Modify update method to include add logic.

for each eCustomer:for each eCustomer: find Customer exclusive-lock find Customer exclusive-lock where Customer.CustNum eq eCustomer.CustNumwhere Customer.CustNum eq eCustomer.CustNum no-error.no-error. if available Customer thenif available Customer then buffer-copy eCustomer to Customer no-error.buffer-copy eCustomer to Customer no-error. else if ecustomer.custnum = 0 then do:else if ecustomer.custnum = 0 then do: create Customer.create Customer. buffer-copy ecustomer except custnum to Customer.buffer-copy ecustomer except custnum to Customer. assign ecustomer.custnum = Customer.CustNum.assign ecustomer.custnum = Customer.CustNum. end. /* ecustomer.custnum = 0 */end. /* ecustomer.custnum = 0 */end.end.



Deleting a CustomerDeleting a Customer Add Delete service and field mapping to Add Delete service and field mapping to

Detail screen.Detail screen. Add Delete Button to Detail screen.Add Delete Button to Detail screen. Add Delete click event to invoke delete Add Delete click event to invoke delete

service.service. Add Delete click event to navigate to home Add Delete click event to navigate to home

screen.screen. Add logic to delete method.Add logic to delete method.



Deleting a CustomerDeleting a Customer Add Delete service to Detail screen.Add Delete service to Detail screen.



Deleting a CustomerDeleting a Customer Add Delete field mapping to Detail screen.Add Delete field mapping to Detail screen.



Deleting a CustomerDeleting a Customer Add Delete Button to Detail screen.Add Delete Button to Detail screen.



Deleting a CustomerDeleting a Customer Add Delete click events to invoke delete Add Delete click events to invoke delete

service and navigate to home screen.service and navigate to home screen.



Deleting a CustomerDeleting a Customer Add logic to delete method.Add logic to delete method.

find first ecustomer.find first ecustomer.find Customer exclusive-lockfind Customer exclusive-lock where Customer.CustNum eq eCustomer.CustNumwhere Customer.CustNum eq eCustomer.CustNumno-error.no-error.if available Customer then do:if available Customer then do: /* check if customer actually deleted or delete /* check if customer actually deleted or delete

trigger caused it to be backed out */ trigger caused it to be backed out */ delete Customer no-error.delete Customer no-error. if not error-status:error then delete ecustomer.if not error-status:error then delete ecustomer.end. /* available customer */end. /* available customer */



SummarySummary OpenEdge Mobile provides the ability to OpenEdge Mobile provides the ability to

search, add, modify and delete records on search, add, modify and delete records on any mobile device.any mobile device.

There are many steps in the process. There are many steps in the process. Adding Data ServicesAdding Data Services Performing data mapping for both requests Performing data mapping for both requests

and responses.and responses. Add the appropriate event in the right Add the appropriate event in the right

sequence.sequence.



QuestionsQuestions

Going Mobile with OpenEdge ® Basics Paul Guggenheim Paul Guggenheim & Associates.

Documents

Transcript of Going Mobile with OpenEdge ® Basics Paul Guggenheim Paul Guggenheim & Associates.