1. Inside the JSDO: Mobile and Web
Shelley Chase, Senior Architect, Progress
November 2014

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

3. Inside The JSDO: Mobile and Web1

4. 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”

5. 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)

6. 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

7. 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)

8. Express Project Wizard: Database Table

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

10. Business Entity – Generated Class

11. Business Entity – “Invoke” Methods

12. Runtime Deployment – OpenEdge AppServer

13. Runtime Deployment – OpenEdge Web Server (Tomcat)

14. 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: [ ] }

15. JSDO Catalog

16. JSDO Catalog

17. JSDO Catalog

18. JSDO Catalog

19. JSDO Catalog

20. 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( )

21. 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

22. 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

23. JSDO

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

25. Inside The JSDO: Mobile and Web1 2
JSDO Services

26. 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

27. Use JSDO Service for Visual Data Mapping

28. Create JSDO Service from Catalog

29. Add JSDO Services to UI

30. Drag-n-drop Data mapping

31. JSDO Services

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

33. Inside The JSDO: Mobile and Web1 2
JSDO Services 3
Templates

34. 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

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

36. 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();

37. Templates

38. 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

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

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

41. 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);
}); }

42. Other Web Frameworks

43. 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

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

45. Deployment

46. Deployment

47. Deployment

48. Deployment

49. Deployment

50. Deployment

51. Inside The JSDO: Mobile and Web1 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

52. Inside The JSDO: Mobile and Web1 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

53. Extra Resources
Search Rollbase documentation:
Search the Community: OpenEdge 11.4 Production Documentation
Mobile App Builder documentation:
JSDO Examples:

54. 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