Ricardo Perdigao, Solutions Architect Edsel Garcia, Principal Software Engineer Jean Munro, Senior Systems Engineer Dan Mitchell, Principal Systems

Transcription

1 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

2 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 Demo Machine on Progress Arcade... 4 Launching your PDSOE Demo machine... 4 Configuring the Development Environment... 6 Create Sports Database... 6 Basic Configuration of PDSOE... 7 Add Database Connection Section 3: Exposing OpenEdge Data as REST with PAS for OE Creating a Mobile Project Create the sports project Creating a Business Entity to Expose Data Compile the Service Class File Select the Resources to Make Available Deploying the REST service Testing the Service in the Browser (JSDO Service) Section 4: Using OpenEdge Data with Telerik Platform Template Signing into the Telerik Platform Creating the Mobile App Workspace and Telerik Platform Project Section 5: Advanced JSDO - Paging, Filtering and Sorting on the Backend Bringing the Advanced Sample Code into OpenEdge AppServer Editing the app service Testing the app Section 6: Kendo UI Sample Consuming Advanced JSDO Reviewing the Kendo UI HTML file Testing the KendoUI.html file A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

3 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 batching with the backend data, and consume that data using Kendo UI controls and the Telerik Platform. You will need to have access to: Progress Arcade. Each workshop participant will be provided a unique IP address for use during the session. You will be using an image of OpenEdge (OpenEdge 11.5 PDSOE complete install with Service Pack 01 added.) In order to save time, certain workshop elements will be provided within the work environment as pre-built components. 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: A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 3

4 Section 2: Configuring PDSOE Demo Machine on Progress Arcade Virtual machines have been started for this workshop. Each of you will have been provided a unique DNS address by the workshop host that points to a virtual windows server running on Progress Arcade. Launching your PDSOE Demo machine On your laptop, choose Start Accessories Remote Desktop Connection and paste your unique DNS into the Computer field. Click the Connect button. Note: You may need to click the button to the left of Options to change (erase) the domain name. Choose the option to Use another account: Enter \Administrator as the Username, and 2015EmeaPug as the Password, then click OK: 4 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

5 Click the Yes button to say you trust this remote connection: You should now be connected to your personal workshop labs machine running in Progress Arcade. A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 5

6 Configuring the Development Environment Create Sports Database 1. Open Proenv usingthe 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 6 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

7 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 Progress offers participation in the Customer Experience Improvement Program. For this workshop session, clear (uncheck) the Sign up option and click OK to continue. A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 7

8 Close the Welcome Screen, or click Workbench 7. Click Window -> Open Perspective and select OpenEdge Server: 8 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

9 If you don t see the OpenEdge Server perspective in the list, select Other to expand the list: A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 9

10 8. In the OpenEdge Server perspective, click on the Servers view at the bottom right. A list of preconfigured servers will appear in the pane. 10 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

11 For the purposes of this workshop, you will need only oepas1 in the server list for this 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: A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 11

12 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. 12 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

13 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: A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 13

14 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 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

15 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. A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 15

16 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: 16 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

17 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: A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 17

18 20. You are returned to the Developer Studio Servers perspective: 18 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

19 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. The Mobile Project can also be used to create Mobile apps but since this workshop does not cover Mobile app creation, you will remove the option to create an app in one of the steps below. Create the sports project 1. Right-click in Project Explorer and select New->OpenEdge Project. Create the new project named Sports, select the Mobile Project type configuration. 2. Leave Express setup unchecked and click Next: A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 19

20 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: 20 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

21 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: A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 21

22 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. 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: 22 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

23 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. A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 23

24 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: 24 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

25 14. Enter the Business entity name Customer. Accept all of the other suggested default settings and click Next. A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 25

26 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. 26 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

27 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. A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 27

28 17. Compile the class code file: Right-click in the editor and choose Compile. 28 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

29 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: A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 29

30 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. 30 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

31 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, rightclick on oepas1 and choose Clean to clean the environment and re-deploy the services. This process will take a little while to complete. A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 31

32 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: 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. 32 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

33 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: 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. A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 33

34 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 multiscreen 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 remote Demo machine window. 2. Go to 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 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

35 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: A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 35

36 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: 36 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

37 8. Select Hybrid App, Start from a blank App and enter Sports as the App name. Then, click on the Create app button. A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 37

38 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. 38 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

39 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): A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 39

40 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. 40 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

41 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 35 to 41) of README.txt illustrated below: 14. Navigate to the jsdosettings.js file within the scripts node on the Project Navigator area and doubleclick on the jsdosettings.js file. A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 41

42 15. Select line 1 to line 10 (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 (line 3 and 4) to read exactly as follows: "serviceuri": " "cataloguris": " 42 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

43 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: A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 43

44 20. Click on the List button on the bottom of the mobile app (you may need to expand the simulation window): 44 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

45 21. You will see a simulation of how the mobile app will display the data from the JSDO datasource on an iphone screen: 22. Close the simulation window when you are finished viewing. A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 45

46 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 remote Demo desktop, open the folder named Workshop Files. 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 batching. ii. AdvCustomer.i This file contains the dataset definition. 46 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

47 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: A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 47

48 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 tab of the Console pane to see the progress; wait until you see [Synchronized] [Published]. ) 48 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

49 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. A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 49

50 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 remote Demo session. Open the Advanced Backend bookmark folder. 50 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

51 9. Test the following: i. Customer Filter < 50"} Returns customers with CustNum less than 50: A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 51

52 ii. Customer OrderBy: Returns and displays the data by Customer Name: 52 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

53 iii. Customer Paging: 5,"skip":5} Returns at most 5 records (top), skipping the first 5 records (skip): A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 53

54 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 remote 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. 54 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

55 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 Notice the variables named serviceuri and cataloguri in lines 128 to 132. Notice that the serverpaging, serverfiltering, serversorting, and batch features are enabled because they are set to true in lines 47 to Save the file. A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 55

56 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 batching (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. 56 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

57 7. Each batch request results in a request to the backend service. You can check this using the Grid s Inspect element feature. Right-click in the grid to access the context menu: A Sexy UI for Progress OpenEdge using JSDO and Kendo UI 57

58 8. Using Inspect Element, 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: 58 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI

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

60 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 You have now completed the Workshop. Thank you for attending! 60 A Sexy UI for Progress OpenEdge using JSDO and Kendo UI