Inside the JSDO: Mobile and Web Shelley Chase, Senior Architect, Progress schase@progress.com November 2014

Inside The JSDO: Mobile and Web 1 2 3 4 5 JSDO JSDO Services Templates Deployment Other Web UI Frameworks

Inside The JSDO: Mobile and Web 1

JSDO – Progress JavaScript Data Object Client-side object Manages session connections Dataset (ProDataSet-like) purposed for disconnected clients Communicates using REST in XMLHttpRequest Session management – Anonymous, Basic and Form Offline/ Online events in the Session object An instance of “Cloud Data Object” – Open source Generic specification and catalog definition “Any client, any datasource”

JSDO with OpenEdge and Rollbase (and node.js, …) Access to the OpenEdge AppServer Business Entity - Dataset or Temp-table CRUD operations (Create, Read, Update, Delete) Invoke Submit JSON Before-Image support Access to Rollbase Server Objects and Views Table “only” Invoke (gets View data)

Runtime Architecture for OpenEdge Mobile Client-side App resides on device OE DB *.html *.js Internet HTTP (REST / JSON) Business Entity JSDO-BE Mapping JSDO ABL Header Data Detail Data Other Data Mobile Device Web Server OpenEdge AppServer PO ProDataSet Server-side n-tier architecture with Business Logic and data

OpenEdge Mobile Services: Business Entity Progress Developer Studio Express Project Wizard Business Entity Wizard Types Read-only CRUD CRUD + Submit JSON Before-Image support Automatically adds mobile annotations Progress.BusinessLogic.Business Entity Dataset or Temp-table schema You can also annotate existing code (persistent procedure or class)

Express Project Wizard: Database Table

Business Entity Wizard: Database Table or ProDataSet/ Temp-table

Business Entity – Generated Class

Business Entity – “Invoke” Methods

Runtime Deployment – OpenEdge AppServer

Runtime Deployment – OpenEdge Web Server (Tomcat)

Create, Read, Update, Delete + INVOKE + SUBMIT CRUD + I + S path: “” /method /method POST GET PUT DELETE PUT PUT Works on a schema: Array [ ] Temp-Table { ttCustomer: [ ] } DataSet { dsCustomer: { ttCustomer: [ ] } DataSet (Complex) { dsCustomer: { ttCustomer: [ ], … ttOrder: [ ] }

JSDO Catalog

JSDO Catalog

JSDO Catalog

JSDO Catalog

JSDO Catalog

JSDO – Progress JavaScript Data Object CRUD + Invoke + Submit add( ) (CREATE) fill( ) (READ) assign( ) (UPDATE) remove( ) (DELETE) method( ) (INVOKE) saveChanges( ) (SUBMIT) Properties autoSort autoApplyChanges caseSensitive name record useRelationships Methods addRecords( ) acceptChanges( ), rejectChanges( ) getData( ) getId( ) getSchema( ) sort( ) subscribe( ) unsubscribe( )

JSDO Operation Mapping Customer Order JSDO Operation Mapping Mobile App OE Web Server OpenEdge AppServer Customer JSDO Customer Catalog Customers.cls fill( ) Read operation ReadCustomers( ) remove( ) save Changes( ) Delete operation DeleteCustomers( ) add( ) saveChanges( ) Create operation CreateCustomers( ) assign( ) saveChanges( ) UpdateCustomers( ) Update operation Now we’re going a little deeper to see the JSDO methods that are called in a Mobile App to do specific operations on the AppServer. We have the familiar architectural structure, but using Customers to give it a more realistic flavor dealing with a specific set of operations. Thus we have a Customers JSDO, an OrderEntry Mobile service, and an ABL Customers.cls. <CLICK> In this case we want get the data for a set of customers from the AppServer to the Mobile App. We are working with the Customers JSDO, and calling the JSDO fill( ) method, which is used to request data. OpenEdge Mobile provides a set of built-in definitions for a set of CRUD operations. One of these operations is the READ operation, and that is represent here as one of the methods that is available in the Customers Resource, of the OrderEntry Mobile service. The JSDO fill( ) operation causes an HTTP Request to be sent to the Customer Resource, Read operation. The Read operation on the Web server - calls the ReadCustomers( ) method - in the Customers.cls class on the AppServer. The ReadCustomers( ) method is an ABL method that was written by a developer to implement the Read operation. In the session on the AppServer business entities we’ll see how the ReadCustomers.cls class is coded. In our example the ReadCustomers( ) method reads the customers from an OpenEdge database, using any filter that may have been provided in the call from the Mobile App. This data is returned back travelling by the same route. The Mobile App handles the returned data in the HTTP Response that was sent by the Read operation. I’ve expanded the display to show all of the built-in operations. This work the same way. We can see the methods that are called in the JSDO for each one. We’ll go into more detail on these methods in the session on the JSDO. The CURD operations for remove( ), add( ) and assign( ) – all operate on the local store, client side only. The saveChanges( ) sends the updates to the server. This completes the set of operations that have been defined. The last two operations are called using Invoke, which provides support for calling all singleton ABL routines, that are not built-in operations. Although getOrderHistory is the same name on both sides, the INVOKE in the JSDO is done by calling the method name in JavaScript. The name of the method in JavaScript does not need to be the same as the business entity name, since the catalog is the one that does the mapping. Note: remove( ) was selected for the JSDO operation since delete is a reserve word in the JSDO. ----------- Summary: The Mobile resource maps to an ABL class singleton object, which provides the ABL routines (methods, in this case) that implement the Mobile operations of that resource. Read/Delete/Create Customers( ) saveChanges( ) Submit operation getCreditHistory( ) GetCreditHistory( ) Invoke operation getOrderHistory( ) GetOrderHistory( ) Invoke operation

Included in Mobile App projects JSDO – Using the JSDO session = new progress.data.Session(); session.login(<url-to-service>, "", ""); session.addCatalog(<url-to-jsdo-catalog>); jsdo = new progress.data.JSDO({ name: 'dsCustomer' }); jsdo.subscribe('AfterFill', onAfterFillCustomers, this); jsdo.fill(); progress.jsdo.3.0.js Progress.data.Session Progress.data.JSDO Included in Mobile App projects

JSDO

1 Inside The JSDO: Mobile and Web Benefits JSDO Leverage Existing Business Logic

Inside The JSDO: Mobile and Web 1 2 JSDO Services

JSDO Services – Generated from JSDO Catalog Access to the JSDO from the Mobile App Builder JSDO - create object CRUD operations Create Read Update Delete Row – like buffer in ABL Invoke operations Custom business logic

Use JSDO Service for Visual Data Mapping

Create JSDO Service from Catalog

Add JSDO Services to UI

Drag-n-drop Data mapping

JSDO Services

1 2 Inside The JSDO: Mobile and Web Benefits JSDO JSDO Services Leverage Existing Business Logic Visual Mapping JSDO Services

Inside The JSDO: Mobile and Web 1 2 JSDO Services 3 Templates

Screen Templates – Reusable UI, corporate look and feel, logos Project Templates Phone App / Tablet App Session-enabled Phone App / Tablet App Express Project UIHelper (dynamic data binding) JSDO Services (generated data mapping) Screen Templates – Reusable UI, corporate look and feel, logos Custom Components – Reusable UI and behavior

UIHelper UI based on HTML (listviews built using <ul> + <li>) JQuery Mobile JQuery Mobile using the Mobile App Builder JavaScript + HTML

UIHelper – Using the UIHelper session = new progress.data.Session(); session.login(<url-to-service>, "", ""); session.addCatalog(<url-to-jsdo-catalog>); jsdo = new progress.data.JSDO({ name: 'dsCustomer' }); jsdo.subscribe('AfterFill', onAfterFillCustomers, this); uihelper = new progress.ui.UIHelper({ jsdo: jsdo }); uihelper.setDetailPage({ name: "custdetail“ }); uihelper.setListView({ name: 'listview', format: '{CustNum}<br>{Name}<br>{State}<br>{Country}', autoLink: true } ); jsdo.fill();

Templates

1 2 3 Inside The JSDO: Mobile and Web Benefits JSDO JSDO Services Leverage Existing Business Logic Visual Mapping Increase Productivity, Quicker Time to Market JSDO Services 3 Templates

1 2 4 3 Inside The JSDO: Mobile and Web JSDO JSDO Services Other Web UI Frameworks Templates

Other Web UI Frameworks Angular.js Sencha Touch Telerik Kendo UI Knockout.js Qooxdoo Dojo Toolkit

Other Web Frameworks – Server side uses Node.js XMLHttpRequest = require("./XMLHttpRequest.js").XMLHttpRequest; require("./progress.jsdo.3.0.js"); session = new progress.data.Session(); session.login(<url-to-service>, "", ""); session.addCatalog(<url-to-jsdo-catalog>); jsdo = new progress.data.JSDO({ name: 'dsCustomer' }); jsdo.subscribe('AfterFill', onAfterFillCustomers, this); jsdo.fill(); function onAfterFillCustomers(jsdo, success, request) { jsdo.eCustomer.foreach(function(customer) { console.log(jsdo.eCustomer.Name); }); }

Other Web Frameworks

1 2 4 3 Inside The JSDO: Mobile and Web Benefits JSDO JSDO Services Leverage Existing Business Logic Visual Mapping Increase Productivity, Quicker Time to Market Flexible JSDO Services 4 3 Other Web UI Frameworks Templates

1 2 3 4 5 Inside The JSDO: Mobile and Web JSDO JSDO Services Templates Deployment Other Web UI Frameworks

Deployment

Deployment

Deployment

Deployment

Deployment

Deployment

Inside The JSDO: Mobile and Web 1 2 3 4 5 JSDO JSDO Services Templates Deployment Other Web UI Frameworks Benefits Leverage Existing Business Logic Visual Mapping Increase Productivity, Quicker Time to Market Flexible Write Once, Deploy Everywhere

Inside The JSDO: Mobile and Web 1 2 3 4 5 JSDO JSDO Services Templates Deployment Other Web UI Frameworks Benefits Leverage Existing Business Logic Visual Mapping Increase Productivity, Quicker Time to Market Flexible Write Once, Deploy Everywhere

Extra Resources Search Rollbase documentation: http://documentation.progress.com/output/Rollbase/index.html Search the Community: OpenEdge 11.4 Production Documentation Mobile App Builder documentation: http://docs.mobile.rollbase.com/ JSDO Examples: http://oemobiledemo.progress.com/jsdo/example001.html http://oemobiledemo.progress.com/jsdo/example007.html

Write Once, Run Anywhere Portability with the Benefits of Native Applications and Web The Easiest Way to Build OpenEdge and Rollbase Applications Supporting Mobile Devices, End-to-end