5518.workshop Step by Step Guide

A Sexy UI for Progress OpenEdge
using JSDO and Kendo UI
Ricardo Perdigao, Solutions Architect

Edsel Garcia, Principal Software Engineer
Jean Munro, Senior Systems Engineer
Dan Mitchell, Principal Systems Engineer
A Sexy UI for Progress OpenEdge
using JSDO and Kendo UI
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
2 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

© 2015 Progress Software Corporation. All rights reserved.
Section 1: Introduction to PAS for OE and JSDO
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.
You will need to have access to:
• 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.
A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 3

Section 2: Configuring PDSOE
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:
Google Chrome web browser.
Workshop Files containing workshop sample code.
11.5.1 Progress Developer Studio for OpenEdge (PDSOE) – Eclipse-based IDE.
11.5.1 Proenv – sets OpenEdge environment variables and starts a command-line session in the
OE working directory.

Configuring the Development Environment
Create Sports Database
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

Basic Configuration of PDSOE
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.
5. You MAY need to authorize Java by clicking Allow Access:
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.

Close the Welcome Screen, or click “Workbench”
7. Click Window -> Open Perspective and select OpenEdge Server:

If you don’t see the OpenEdge Server perspective in the list, select Other… to expand the list:

8. In the OpenEdge Server perspective, click on the Servers view at the bottom right. A list of links to
preconfigured servers will appear in the pane.

For the purposes of this workshop, you will need only the link to the oepas1 in the server list for your
project, so the others will be deleted in this step.
9. Right-click on each server (except oepas1) in the server list, select Delete and click on OK:

After you have completed the preceding steps, the Servers view should only contain the server named
oepas1 as shown below. Note that system name will be different reflecting your system name.

Add Database Connection
In this step you will configure a connection to the database you created earlier.
10. Select Window -> Preferences:
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:

12. You will see a dialog that asks you to enter information about the database. Next to Physical Name
click the Browse button:
13. Navigate to C:\OpenEdge\Wrk\db where you created the database earlier. Choose the sports
database and click Save:

14. Enter the Connection name Sports, Host name localhost and Service/Port 6060 (any available tcp
port could be used):
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.

16. You will now see the Sports database connection listed in the database connections screen. Click OK
to complete the operation.
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:

18. Select the Databases tab. Choose Show all and then select the Sports database connection.
Click Apply and then click OK.
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:

20. You are returned to the Developer Studio Servers perspective:

Section 3: Exposing OpenEdge Data as REST
with PAS for OE
Creating a Mobile Project

In this section you create a Mobile Project. Mobile projects are configured to use JavaScript Data Objects
(JSDO). The Mobile project type with its built-in JSDO simplifies the process of exposing OpenEdge
services as REST services. For in this workshop you will remove the option to create a mobile app in one
of the steps below. Later, you will use the Telerik Platform to create your mobile app.
Create the sports project

1. Click on File -> New -> OpenEdge Project.
Create the new project named Sports, select the Mobile Project type configuration.
2. Leave Express setup unchecked and click Next:

3. Accept the default settings for AVM and layout options, and click Next:
4. Select the oepas1 server if it is not checked, check the box to Publish changes immediately, then
click Next:

5. The Service name and relative URI are automatically generated. You are creating a Mobile service to
use REST, so make sure that Create a Mobile service is checked for the SportsService, and that
oepas1 is selected as the server. 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:

8. The project will be using the Sports database that you added to the Developer Studio environment.
Check the box on the Sports database connection line and click Next.
(You may need to check the Show all option to see the Sports database connection.)
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:

11. Start the oepas1 server by right-clicking on oepas1 in the Servers view and choosing Start:
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.

Creating a Business Entity to Expose Data
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:

14. Enter the Business entity name Customer. Accept all of the other suggested default settings and
click Next.

15. In the top section of the Select schema file screen, you decide which operations to make available to
the REST services. Select CRUD, which stands for “Create, Read, Update, and Delete”.
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.

Compile the Service Class File
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.

17. Compile the class code file: Right-click in the editor and choose Compile.

Select the Resources to Make Available
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:
19. Accept the default of /SportsService and click Next:

20. In the Resources section you can choose which procedures to make available to REST. Check
Customer.cls by clicking on the box next to it. Also on this screen, under Sample URI, you will see
the actual URI that will be used to call this REST service.
21. Click Finish.

Deploying the REST service
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.

Testing the Service in the Browser (JSDO Service)
25. Open the Google Chrome browser .
26. To view all customers:
• click on the Customer Service under the Basic Backend bookmark,

• Or enter this URL: http://localhost:8810/Sports/rest/SportsService/Customer
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.

27. In Developer Studio, publishing the REST service includes the creation of a JSDO catalog. This
catalog documents the service in JSON format. To view the catalog, expand the WebContent folder
in your project and open SportsService.json. The JSDO catalog provides the schema of the data that
is being passed during REST operations.
The catalog can be accessed by using this URL in a browser:

http://localhost:8810/Sports/static/mobile/SportsService.json
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.

Section 4: Using OpenEdge Data with Telerik
Platform Template
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.
Signing into the Telerik Platform
1. Open Chrome in your Demo machine window.
2. Go to http://platform.telerik.com or click on the Telerik Platform shortcut in the Chrome

bookmark bar:
3. If you already have a Telerik Platform user/password, simply login and skip to step 7.

4. If you don’t have a Telerik platform account, scroll the Chrome page down and click on Sign up now
to start a trial:
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:

Creating the Mobile App Workspace and Telerik Platform Project
7. Click on +Create App on the top left of the Chrome page. This will create a Workspace/App for your
Telerik Mobile Application:

8. Select Hybrid App, Start from a blank App and enter Sports as the App name. Then, click on the
Create app button.

9. Click on +Create project on the top left of the Chrome page. Select AppBuilder Hybrid project to
create the Telerik Mobile Project for your hybrid application.

10. Select the Progress Data Service template, enter Sports Sample as the name of your project, and
click on the Create Project button (you may need to scroll down to see all the options):

11. After the project has been created, double-click on the README.txt file at the bottom of the Project
Navigator to view the instructions for using the JSDO template:
12. Please take a moment to read the README.txt instructions.

In the following steps, you will replace the generic references in the template with the specific
references for the JSDO you created in earlier sections of this workshop.
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.

15. Select line 3 to line 9 (highlight) on the jsdoSettings.js script:
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",

18. Click on Save in the Telerik text editor to save the changes:
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:

20. Click on the List button on the bottom of the mobile app (you may need to expand the simulation
window):

21. You will see a simulation of how the mobile a will display the data from the JSDO datasource on an
iPhone screen:
22. Close the simulation window when you are finished viewing.

Section 5: Advanced JSDO - Paging, Filtering
and Sorting on the Backend
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.
Bringing the Advanced Sample Code into OpenEdge AppServer

To copy the class (.cls) and include files (.i) into the OpenEdge AppServer folder of your project:
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.

3. Using Developer Studio, in the Project Explorer view, expand the Sports project. Right-click the
AppServer menu and select Paste from the context menu to add the code to the project
directory:

4. Open the AdvCustomer.cls file in Developer Studio (double-click the file in the Project Explorer
view.) Compile the class file code by right-clicking within the editor pane and selecting
Compile:
The code republishes automatically.

(This takes a few seconds. Check the status in the Servers view to see the progress; wait until
you see [Synchronized] [Published]. )

Editing the app service
In this section you will edit the app service (in this case, the mobile SportsService) so that it uses the
AdvCustomer.cls code.
5. Under the Defined Services node, right-click the service (SportsService) and then click Edit:
6. The Edit Mobile Service window appears.

Retain the Service relative URI and click Next.

7. Uncheck the Customer.cls box and select the AdvCustomer.cls box, then click Finish:
The code republishes automatically.

(This takes a few seconds. Check the status in the Servers view to see the progress; wait until
you see [Synchronized] [Published]. )
After the code republishes, you can test your mobile app to see if it works as expected.
Testing the app

To test your app:
8. Open Chrome in the Demo session. Open the Advanced Backend bookmark folder.

9. Test the following:
i. Customer Filter
http://localhost:8810/Sports/rest/SportsService/Customer?filter={"ablFilter":"CustNum < 50"}
Returns customers with CustNum less than 50:

ii. Customer OrderBy:
http://localhost:8810/Sports/rest/SportsService/Customer?filter={"OrderBy":"Name"}
Returns and displays the data by Customer Name:

iii. Customer Paging:
http://localhost:8810/Sports/rest/SportsService/Customer?filter={"top": 5,"skip":5}
Returns at most 5 records (top), skipping the first 5 records (skip):

Section 6: Kendo UI Sample Consuming
Advanced JSDO
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.
Reviewing the Kendo UI HTML file

To review the Kendo UI HTML file:
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
2. Open the folder named Kendo UI Advanced Sample:
An HTML file named Kendo UI appears.

3. Right-click the KendoUI.html file and select Edit with Notepad++:
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.
5. Save the file.

Testing the KendoUI.html file
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.

7. Each page request results in a request to the backend service. You can check this using the
Grid’s Web Inspector feature. Right-click in the grid to access the context menu and select
Inspect element:
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:

8. In Web Inspector, select the Network tab:
9. Change the selected page of data to see the network activity:
10. You can observe the network activity when you change the Sort criteria as well.

Congratulations! You have now completed the Workshop.
During this session you:
• Created a Progress Developer Studio project

• Configured the project to use the Pacific AppServer for OpenEdge and an instance of the Sports
sample database
• Created a Developer Studio mobile project and JSDO to expose OpenEdge data as a REST service
• Deployed the REST service to the Pacific AppServer
• Tested your deployed service in a browser
• Created a mobile app using the Telerik Platform and Kendo UI components
• Configured the Kendo UI to utilize the OpenEdge Data Service you created
• Tested additional samples that demonstrated advanced features available when using the JSDO
For additional information:
Documentation online:
https://documentation.progress.com/output/oemobile1151
Downloadable documentation:
https://community.progress.com/community_groups/openedge_development/m/documents/2078.aspx
Thank you for attending!


5518.workshop Step by Step Guide

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

5518.workshop Step by Step Guide

Hochgeladen von

Copyright:

Verfügbare Formate

A Sexy UI for Progress OpenEdge

using JSDO and Kendo UI

Ricardo Perdigao, Solutions Architect

2 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

You will need to have access to:

A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 3

Google Chrome web browser.

Workshop Files containing workshop sample code.

11.5.1 Progress Developer Studio for OpenEdge (PDSOE) – Eclipse-based IDE.

4 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 5

5. You MAY need to authorize Java by clicking Allow Access:

6 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

7. Click Window -> Open Perspective and select OpenEdge Server:

A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 7

8 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 9

10 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 11

10. Select Window -> Preferences:

12 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 13

14 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 15

16 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 17

Creating a Mobile Project

Create the sports project

2. Leave Express setup unchecked and click Next:

18 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 19

20 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 21

22 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 23

24 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 25

26 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 27

19. Accept the default of /SportsService and click Next:

28 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

21. Click Finish.

A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 29

30 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

25. Open the Google Chrome browser .

26. To view all customers:

• click on the Customer Service under the Basic Backend bookmark,

A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 31

The catalog can be accessed by using this URL in a browser:

32 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

Signing into the Telerik Platform

1. Open Chrome in your Demo machine window.

2. Go to http://platform.telerik.com or click on the Telerik Platform shortcut in the Chrome

A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 33

34 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 35

36 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 37

38 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

12. Please take a moment to read the README.txt instructions.

A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 39

40 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 41