Inside the JSDO: Mobile and Web
Shelley Chase, Senior Architect, Progress
schase@progress.com
November 2014
Inside The JSDO: Mobile and Web
JSDO
1
Deployment
Other Web UI
Frameworks
2
2
5
© 2014 Progress Software Corporation. All rights reserved.
4
3
JSDO
Services
Templates
Inside The JSDO: Mobile and Web
JSDO
1
3
© 2014 Progress Software Corporation. All rights reserved.
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”
4
© 2014 Progress Software Corporation. All rights reserved.
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”
• CRUD operations (Create, Read, Update, Delete)
• Invoke (gets View data)
5
© 2014 Progress Software Corporation. All rights reserved.
Runtime Architecture for OpenEdge Mobile
Mobile Device
Web Server
OpenEdge
AppServer
HTTP (REST / JSON)
Internet
*.js
*.html
JSDO
Header
Data
Business
Entity
JSDO-BE
Mapping
Detail
Data
Header PO ProDataSet
Data
Other
Data
6
Detail
Data
Client-side
Server-side
App resides on
device
n-tier architecture with
© 2014 Progress Software Corporation. All rights reserved.
ABL
OE DB
Business Logic and data
Other
Data
OpenEdge Mobile Services: Business Entity
Progress Developer Studio
Types
 Express Project Wizard
 Read-only
 Business Entity Wizard
 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)
7
© 2014 Progress Software Corporation. All rights reserved.
Express Project Wizard: Database Table
8
© 2014 Progress Software Corporation. All rights reserved.
Business Entity Wizard: Database Table or ProDataSet/ Temp-table
9
© 2014 Progress Software Corporation. All rights reserved.
Business Entity – Generated Class
10
© 2014 Progress Software Corporation. All rights reserved.
Business Entity – “Invoke” Methods
11
© 2014 Progress Software Corporation. All rights reserved.
Runtime Deployment – OpenEdge AppServer
12
© 2014 Progress Software Corporation. All rights reserved.
Runtime Deployment – OpenEdge Web Server (Tomcat)
13
© 2014 Progress Software Corporation. All rights reserved.
Create, Read, Update, Delete + INVOKE + SUBMIT
CRUD + I + S
path: “”
/method
POST GET PUT DELETE
PUT
/method
PUT
Works on a schema:
Array
[]
Temp-Table
{ ttCustomer: [
DataSet
{ dsCustomer: { ttCustomer: [ ] }
]}
DataSet (Complex) { dsCustomer: { ttCustomer: [ ], …
ttOrder: [ ] }
14
© 2014 Progress Software Corporation. All rights reserved.
JSDO Catalog
15
© 2014 Progress Software Corporation. All rights reserved.
JSDO Catalog
16
© 2014 Progress Software Corporation. All rights reserved.
JSDO Catalog
17
© 2014 Progress Software Corporation. All rights reserved.
JSDO Catalog
18
© 2014 Progress Software Corporation. All rights reserved.
JSDO Catalog
19
© 2014 Progress Software Corporation. All rights reserved.
JSDO – Progress JavaScript Data Object
 CRUD + Invoke + Submit
•
•
•
•
•
•
add( )
fill( )
assign( )
remove( )
method( )
saveChanges( )
(CREATE)
(READ)
(UPDATE)
(DELETE)
(INVOKE)
(SUBMIT)

Methods
• addRecords( )
• acceptChanges( ), rejectChanges( )
• find( )
• findById( )
• foreach( )
• getData( )
 Properties
•
•
•
•
•
•
20
autoSort
autoApplyChanges
caseSensitive
name
record
useRelationships
© 2014 Progress Software Corporation. All rights reserved.
• getId( )
• getSchema( )
• sort( )
• subscribe( )
• unsubscribe( )
JSDO
JSDO Operation Mapping
Customer
Order
21
Mobile App
OE Web Server
Customer JSDO
Customer Catalog
OpenEdge AppServer
Customers.cls
fill( )
Read operation
ReadCustomers( )
remove( )
save Changes( )
Delete operation
DeleteCustomers( )
add( )
saveChanges( )
Create operation
CreateCustomers( )
assign( )
saveChanges( )
Update operation
UpdateCustomers( )
saveChanges( )
Submit operation
Read/Delete/Create
Customers( )
getCreditHistory( )
Invoke operation
GetCreditHistory( )
getOrderHistory( )
Invoke operation
GetOrderHistory( )
© 2014 Progress Software Corporation. All rights reserved.
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
22
© 2014 Progress Software Corporation. All rights reserved.
Inside The JSDO: Mobile and Web
JSDO
1
Benefits
 Leverage Existing
Business Logic
24
© 2014 Progress Software Corporation. All rights reserved.
Inside The JSDO: Mobile and Web
JSDO
1
2
25
© 2014 Progress Software Corporation. All rights reserved.
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
26
© 2014 Progress Software Corporation. All rights reserved.
Use JSDO Service for Visual Data Mapping
27
© 2014 Progress Software Corporation. All rights reserved.
Create JSDO Service from Catalog
28
© 2014 Progress Software Corporation. All rights reserved.
Add JSDO Services to UI
29
© 2014 Progress Software Corporation. All rights reserved.
Drag-n-drop Data mapping
30
© 2014 Progress Software Corporation. All rights reserved.
Inside The JSDO: Mobile and Web
JSDO
1
Benefits

Leverage Existing
Business Logic
 Visual Mapping
32
© 2014 Progress Software Corporation. All rights reserved.
2
JSDO
Services
Inside The JSDO: Mobile and Web
JSDO
1
2
3
33
© 2014 Progress Software Corporation. All rights reserved.
JSDO
Services
Templates
Templates
 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
34
© 2014 Progress Software Corporation. All rights reserved.
UIHelper
 UI based on HTML (listviews built using <ul> + <li>)
 JQuery Mobile
 JQuery Mobile using the Mobile App Builder
 JavaScript + HTML
35
© 2014 Progress Software Corporation. All rights reserved.
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();
36
© 2014 Progress Software Corporation. All rights reserved.
Inside The JSDO: Mobile and Web
JSDO
1
Benefits

Leverage Existing
Business Logic

Visual Mapping
2
JSDO
Services
 Increase Productivity,
Quicker Time to
Market
3
38
© 2014 Progress Software Corporation. All rights reserved.
Templates
Inside The JSDO: Mobile and Web
JSDO
1
2
Other Web UI
Frameworks
39
© 2014 Progress Software Corporation. All rights reserved.
4
3
JSDO
Services
Templates
Other Web UI Frameworks
 Web
 Angular.js
 Sencha Touch
 Telerik Kendo UI
 Knockout.js
 Qooxdoo
 Dojo Toolkit
40
© 2014 Progress Software Corporation. All rights reserved.
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);
});
}
41
© 2014 Progress Software Corporation. All rights reserved.
Inside The JSDO: Mobile and Web
JSDO
1
Benefits

Leverage Existing
Business Logic


Visual Mapping
2
JSDO
Services
Increase Productivity,
Quicker Time to Market
 Flexible
Other Web UI
Frameworks
43
© 2014 Progress Software Corporation. All rights reserved.
4
3
Templates
Inside The JSDO: Mobile and Web
JSDO
1
Deployment
Other Web UI
Frameworks
44
2
5
© 2014 Progress Software Corporation. All rights reserved.
4
3
JSDO
Services
Templates
Deployment
45
© 2014 Progress Software Corporation. All rights reserved.
Deployment
46
© 2014 Progress Software Corporation. All rights reserved.
Deployment
47
© 2014 Progress Software Corporation. All rights reserved.
Deployment
48
© 2014 Progress Software Corporation. All rights reserved.
Deployment
49
© 2014 Progress Software Corporation. All rights reserved.
Inside The JSDO: Mobile and Web
JSDO
1
Benefits
Deployment
5
 Leverage Existing
Business Logic
2
 Visual Mapping
JSDO
Services
 Increase Productivity,
Quicker Time to Market
 Flexible
 Write Once, Deploy
Everywhere
Other Web UI
Frameworks
51
© 2014 Progress Software Corporation. All rights reserved.
4
3
Templates
Inside The JSDO: Mobile and Web
JSDO
1
Benefits
Deployment
5
 Leverage Existing
Business Logic
2
 Visual Mapping
JSDO
Services
 Increase Productivity,
Quicker Time to Market
 Flexible
 Write Once, Deploy
Everywhere
Other Web UI
Frameworks
52
© 2014 Progress Software Corporation. All rights reserved.
4
3
Templates
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-toend