Beruflich Dokumente
Kultur Dokumente
Contents
Section 1: Introduction to PAS for OE and JSDO................................................................................................. 3
Section 2: Configuring PDSOE ............................................................................................................................ 4
Configuring the Development Environment ..........................................................................................................5
Create Sports Database .........................................................................................................................................5
Basic Configuration of PDSOE ...............................................................................................................................6
Add Database Connection...................................................................................................................................12
Section 3: Exposing OpenEdge Data as REST with PAS for OE .......................................................................... 18
Creating a Mobile Project ...................................................................................................................................18
Create the sports project .....................................................................................................................................18
Creating a Business Entity to Expose Data ..........................................................................................................23
Compile the Service Class File .............................................................................................................................26
Select the Resources to Make Available..............................................................................................................28
Deploying the REST service .................................................................................................................................30
Testing the Service in the Browser (JSDO Service)...............................................................................................31
Section 4: Using OpenEdge Data with Telerik Platform Template .................................................................... 33
Signing into the Telerik Platform ........................................................................................................................33
Creating the Mobile App Workspace and Telerik Platform Project ....................................................................35
Section 5: Advanced JSDO - Paging, Filtering and Sorting on the Backend ....................................................... 45
Bringing the Advanced Sample Code into OpenEdge AppServer ........................................................................45
Editing the app service ........................................................................................................................................48
Testing the app ...................................................................................................................................................49
Section 6: Kendo UI Sample Consuming Advanced JSDO ................................................................................. 53
Reviewing the Kendo UI HTML file ......................................................................................................................53
Testing the KendoUI.html file..............................................................................................................................55
In this hands-on workshop, you will use the recently released open source version of the JSDO library to
integrate Pacific Application Server for OpenEdge with the Telerik Kendo UI in mobile/web hybrid apps.
Using Progress Developer Studio for OpenEdge (PDSOE), you will expose OpenEdge data as REST
services using the new JSDO. You will implement sorting, filtering and paging with the backend data, and
consume that data using Kendo UI controls and the Telerik Platform.
• Install of OpenEdge 11.5.1 First, you will need to make sure that you have OE11.5 PDSOE
installed on your system with Service Pack 1. If you take the default options during installation,
the developer version of the Pacific Application Server for OpenEdge (PASOE) will be installed
for you automatically.
• Workshop files on the Desktop Please copy the “Workshop files” folder to your Desktop.
• Google Chrome and Bookmarks Please install Google Chrome (available online) and import the
bookmark files provided inside the “Workshop files” folder.
• Telerik Platform. Part 3 of this workshop requires use of the Telerik Platform. You will use your
existing Telerik Platform account, or create a trial account here: http://platform.telerik.com.
After installing OE 11.5.1, copy the “Developer Studio” link and the “Proenv” link from the Progress
Menu and paste the shortcuts on your desktop:
You Desktop should have the following items before you proceed:
11.5.1 Proenv – sets OpenEdge environment variables and starts a command-line session in the
OE working directory.
1. Open Proenv using the shortcut on your desktop . You can also open Proenv using the Start
menu: Start -> All Programs -> Progress -> OpenEdge 11.5 (64-bit) -> Proenv
2. Create a database named sports (from sports2000). At the proenv prompt, enter the commands
shown below:
- mkdir db - create the “db” subdirectory
- cd db - change directory into the new C:\OpenEdge\WRK\db
- prodb sports sports2000 – create a new database named “sports” as a copy of the
sports2000 database provided with OpenEdge.
- exit – close the proenv session
3. Open Developer Studio using the desktop shortcut or the Start menu:
Start->All Programs->Progress->OpenEdge 11.5 (64-bit)>Developer Studio
4. Input the path for the workspace (C:\workspace) and check the option to Use this as the default.
6. Starting with OpenEdge 11.5.1 Progress offers participation in the Customer Experience
Improvement Program. For this workshop session, clear (uncheck) the Sign up option and click OK
to continue.
9. Right-click on each server (except oepas1) in the server list, select Delete and click on OK:
11. Click on the Progress OpenEdge node in the tree view to expand it, choose Database Connections,
then click the New… button in the upper right:
13. Navigate to C:\OpenEdge\Wrk\db where you created the database earlier. Choose the sports
database and click Save:
15. Click Next to take the default values on the remaining configuration dialogs until you reach the
screen shown below, and make sure that the Auto-start database server box is checked. Then click
Finish.
17. The last step is to configure the oepas1 app server to use the sports database.
Double-click on the oepas1 app server in the servers view (or right-click on the oepas1 app server
line and choose Open).
You will see the Overview configuration screen. Click on the Open launch configuration link:
19. You will return to the configuration Overview screen, still in the Server perspective. The
development environment is now configured and ready to use. Close the configuration Overview
pane:
Create the new project named Sports, select the Mobile Project type configuration.
4. Select the oepas1 server if it is not checked, check the box to Publish changes immediately, then
click Next:
6. You are not creating a mobile app with this project, just the REST service, so uncheck the box for
that option. Then click Next:
7. You do not need to change the PROPATH. Accept the default settings and click Next:
9. The last screen configures the way that services will be stored and part of how they will be called.
Click Finish without making any changes to this screen.
10. Developer Studio creates your Sports project with everything you will need to create and deploy
REST services on the Pacific Application Server for OpenEdge:
12. At the bottom right corner of the PAS for OE screen, you will see that the app server is being started.
Do not wait for publish to complete. We will verify if the oepas1 application server started
properly.
In this section you will create a Business Entity for the Customer table of the Sports database. Later you
will expose this Business Entity via your REST service.
13. Right-click on the AppServer folder in the Sports project and select New and then Business Entity:
In the second section, you select either a database table or an include file that represents the
ProDataSet that you wish to enable for REST. For this workshop example, check Select database table
and choose the table named Customer.
Click Finish.
16. Developer Studio creates a new class file called Customer.cls in the AppServer node. This file
includes methods for the CRUD operations that will be available to REST. These methods can be
modified by inserting custom ABL code if desired but for this workshop, just accept the default code.
18. In the next steps, you will make the new class file available to the REST server in PAS for OE. In the
Project Explorer, expand the Defined Services node. Right-click on SportsService and choose Edit:
22. A few seconds after pressing Finish on the last step, you will see a message that the oepas1 server is
publishing.
23. Wait until the oepas1 server status is Started and Synchronized and the services have been
Published:
24. NOTE: If your system has trouble completing the synchronization/publish after a few minutes, right-
click on oepas1 and choose Clean to clean the environment and re-deploy the services. This process
will take a little while to complete.
If you see the above screen after you press enter on the URL, you have successfully made the
Customer table available as a REST service.
The JSDO catalog will need to be retrieved by the calling services. You will reference the catalog URI
when you create Telerik samples later in this workshop.
In this section you will use the exposed REST data as the datasource for a Telerik Mobile Application.
Telerik has just released a new Progress Data Service template that allows you to quickly create a multi-
screen application using Kendo UI components to access OpenEdge data. The template utilizes the JSDO
catalog and includes navigation, multiple pages, security (if enabled at the backend), and a list view to
display REST data.
3. If you already have a Telerik Platform user/password, simply login and skip to step 7.
5. Enter the information on Create an Account OR link to a supported existing account (Google,
Facebook, Microsoft LiveID, and Yahoo).
6. After the Telerik Platform completes loading the introductory tutorial, please click on your name on
the top left of the Chrome Page:
7. Click on +Create App on the top left of the Chrome page. This will create a Workspace/App for your
Telerik Mobile Application:
13. Select and Copy (CTRL-C) the highlighted area (line 39 to 43) of README.txt illustrated below:
14. Navigate to the jsdoSettings.js file within the scripts node on the Project Navigator area and double-
click on the jsdoSettings.js file.
16. Paste the clipboard content (Step 13) on top of the area we selected (Step 15) using CTRL-V. This
will replace the original lines in jsdoSettings.js with the lines you copied from the README.txt file:
17. Edit the serviceURI and catalogURIs variables on lines 3 and 4 to read exactly as follows:
"serviceURI": "http://localhost:8810/Sports",
"catalogURIs": "http://localhost:8810/Sports/static/mobile/SportsService.json",
19. Click the down-arrow on the Run menu and select iPhone from the drop-down list to see the
application executing using the iOS simulator:
22. Close the simulation window when you are finished viewing.
To implement the advanced JSDO code so that your apps can take advantage of the paging, filtering and
sorting features, you must copy the advanced source code files into the AppServer folder in your
Developer Studio project. Then you should compile the class file. You also need to edit the app service
so that it uses the advanced code, and test the app to see that it works as expected.
1. In your Demo desktop, open the folder named Workshop Files using the shortcut: .
Two sub-folders appear:
i. JSDO Advanced backend
ii. Kendo UI Advanced Sample
2. Open the folder named JSDO Advanced backend and copy the class (.cls) and include (.i) files
that appear in it:
i. AdvCustomer.cls
This file defines a customized Business Entity class for sorting, filtering and paging.
ii. AdvCustomer.i
This file contains the dataset definition.
5. Under the Defined Services node, right-click the service (SportsService) and then click Edit:
After the code republishes, you can test your mobile app to see if it works as expected.
8. Open Chrome in the Demo session. Open the Advanced Backend bookmark folder.
i. Customer Filter
http://localhost:8810/Sports/rest/SportsService/Customer?filter={"OrderBy":"Name"}
In this part of the workshop, you will edit the Kendo UI HTML file to take advantage of the advanced
JSDO code for paging, filtering and sorting. You will modify the Kendo UI code so that the service and
catalog URI variables point to the service you created (Sports/SportsService). Then you can perform
CRUD (create, read, update, and delete) operations on your data.
1. Open the folder named Workshop Files located on your Demo desktop.
Two sub-folders appear:
i. JSDO Advanced backend
ii. Kendo UI Advanced Sample
Note: you could use any HTML editor, including Developer Studio, in place of Notepad++.
4. Notice the jsdoSettings variables named serviceURI and catalogURI on lines 130 and 131:
Notice that the serverPaging, serverFiltering, serverSorting, and batch update features are
enabled because they are set to “true” in lines 51 to 54.
6. In Notepad++, click on Run from the menu and select Launch in Chrome. Chrome will open and
the Kendo UI Grid appears.
Notice that you can modify the sorting (by clicking the column headings) or paging (by clicking the page
numbers.) You can also navigate to the beginning or end of the result set, and modify the number of
records to display per page.
If your Web Inspector pane is positioned on the right half of the window, click on the docking icon in the
upper right corner and relocate it to the bottom of the window:
10. You can observe the network activity when you change the Sort criteria as well.
Documentation online:
https://documentation.progress.com/output/oemobile1151
Downloadable documentation:
https://community.progress.com/community_groups/openedge_development/m/documents/2078.aspx