1. ® IBM Software Group software © 2011 IBM Corporation Rational Business Developer v8 Services

2. IBM Software Group | Rational software EGL Services Workshop  Workshop 1 Workshop 1  Create a new service, test the service in a Rich UI, and Deploy to a Server.  Workshop 2 Workshop 2  Use an existing Service, test the Service in a Rich UI, and Deploy to a Server.  Workshop 3 Workshop 3  Create a new Service that accesses a database, test the Service in a Rich UI, and Deploy to a Server.

3. IBM Software Group | Rational software Workshop 1  In this workshop you will do the following  Create a simple Service that validates Zip Codes for the state of California. The code is provided in the Notes section of the slide.  Create a Rich UI to prompt the user for a Zip Code and then, upon return, display a Dojo Dialog with a message. Code is provided in the notes section  Test the Rich UI for both successful and unsuccessful situations.  Deploy the Rich UI Application to a Tomcat Server. This will allow you to configure your workspace for the Runtime environment in preparation for subsequent Services Workshops.

4. IBM Software Group | Rational software Create a Services Project  You will create two types of programs for this workshop  A service program that is reusable across multiple applications.  A Rich UI Handler that will allow the user to interact with data via a browser and use this service as part of that activity.  As mentioned in earlier lectures, the Project is one of the fundamental units of organization within the EGL development environment. Here you will group your Services in one Project and the Rich UIs in another type of project.  To create the EGL Services Project, Select File -> New -> EGL Project.  Enter the following in the New Project window:  EGLGeneralProj in the project name field  Select the General Project radio button.  Click Next >  In the next window, go with the defaults but verify that the target runtime is Java.  Click the Finish button

5. IBM Software Group | Rational software Associate the Services Project with the Rich UI Project  This is another fundamental capability in RBD: Linking Projects together  There may be the requirement to organize your code into Common Code that is used across multiple functional applications where each functional application is in its own project.  By setting the EGL Build Path you can link a common project with one or more functional application projects, i.e. the Rich UI Project.  So, to link the General Project to the Rich UI Project, Select the Rich UI Project, press ctrl + enter, then select the EGL Build Path.  Select the EGLGeneralProj as shown:

6. IBM Software Group | Rational software Create a new Service Right Mouse Click on EGLSource New -> Service Package: services EGL source file name: zipService Click Finish Copy paste source code from Notes below and overlay template code. Click Save

7. IBM Software Group | Rational software Create a New Rich UI In the EGLRichUIProj, Right Mouse Click on EGLSource New -> Rich UI Handler Package: handlers EGL source file name: ZipCheck2 Click Finish Copy paste source code from Notes below and overlay the template code. Click Save

8. IBM Software Group | Rational software Test The Rich UI Application At this point your workspace should look like this: Select the Preview Tab See the Notes section if you have any problems

9. IBM Software Group | Rational software Test the New Service Enter a valid zip code for California, i.e. 95764 Enter an invalid zip code for California, i.e. 85647

10. IBM Software Group | Rational software Deploy your Rich UI Application Select your Project, Right Mouse Click, Select Deploy EGL Project If this is the first time deploying a Rich UI application you will need to specify a Web project to deploy to. Click the New button, Project name: RichUIWebProj, Click the New button next to the Target Runtime field. Note: Remember to install your Server before starting this step.

11. IBM Software Group | Rational software Note: If you do not have Tomcat application server, click here to go to the appendix for instructions on downloading Apache Tomcat.here Deploy Select the Target Runtime environment of your Web Project, i.e. Apache Tomcat v6.0 Click Next > Click Finish Click the Browse… button to find the location of your Tomcat installation directory

12. IBM Software Group | Rational software Deploy Rich UI Application Click the Deployment Icon The application will now be deployed to your new Web Project When done, note the messages in the EGL Deploy Results view. There should be no errors. Note: You may have to restart the Server.

13. IBM Software Group | Rational software Run the Zip Check Application To test the deployed application, Expand the folders in the Web Project, Select ZipCheck2-en_US.html, right mouse click, Select Run As -> Run on Server.

14. IBM Software Group | Rational software Workshop 1 Summary  In this workshop you did the following:  Created a simple Service that validated Zip Codes for the state of California. The code was provided in the Notes section of the slide.  Created a Rich UI to prompt the user for a Zip Code and then displayed a Dojo Dialog with a message. Code was provided in the notes section  Tested the Rich UI for both successful and unsuccessful situations.  Deployed the Rich UI Application to a Tomcat Server. This allowed you to configure your workspace for the Runtime environment for the subsequent Services Workshops.

15. IBM Software Group | Rational software Workshop 2  In this workshop you will do the following  Use an existing Service that returns the current weather in the City and Country you specify. The WSDL code is provided in the Notes section of the slide.  Import the WSDL into RBD v8.  Create an EGL Client Interface using the WSDL.  Create a Rich UI to display the results of the Weather Service, prompt the user to enter a City and Country, and then, upon return, display the result. Code is provided in the notes section.  Test the Rich UI.  Deploy the Rich UI Application to a Tomcat Server.

16. IBM Software Group | Rational software 3 rd Party WSDL Files  www.xmethods.net is a website where you can get all kinds of 3 rd Party WSDL files. www.xmethods.net  For this workshop, to keep it simple, we will use the Global Weather Service. To download this WSDL file, copy/paste this into your Browser or click on the link:  http://www.xmethods.net/ve2/ViewListing.po?key=uui d:49AA3AC6-D7F4-2818-5C51-E0FDF35E55DB http://www.xmethods.net/ve2/ViewListing.po?key=uui d:49AA3AC6-D7F4-2818-5C51-E0FDF35E55DB  In case you can not get to this website the WSDL is in the Notes section below.

17. IBM Software Group | Rational software Download the WSDL file Click on the WSDL link shown in Red On the WSDL page, from the Browser Menu, File -> Save As Give the file a name of globalweather.wsdl. Click Save

18. IBM Software Group | Rational software Create the wsdl package  Note: It is important that the file downloaded has an extension of.wsdl  Create the wsdl package.  From RBD EGLRichUIProj, Select the EGLSource Folder.  Right Mouse Click, File -> New -> Package  Package name: wsdl  Finish

19. IBM Software Group | Rational software Import the wsdl file  Import the wsdl file  Select the wsdl package  Right Mouse Click, Select Import  General -> File System -> Next >  Use the Browse button to find the wsdl file, Select it.  Click Finish

20. IBM Software Group | Rational software Create the EGL Client Interface Select the globalweather.wsdl file Right Mouse Click, Select EGL Services -> Create EGL Client Interface You will be warned that the wsdl file contains SOAP 1.2 wsdl. This is ok. Click the OK button.

21. IBM Software Group | Rational software Create the EGL Client Interface (Continued)

22. IBM Software Group | Rational software Global Weather EGL interface Notice the resulting interface part created. There are two functions with parameters. Note the datatypes of the parameters. We’ll need to know that later when we create the call to the Service.

23. IBM Software Group | Rational software Code the Rich UI to “Consume” the Service Select handlers package Right Mouse Click Select New -> Rich UI Handler EGL source file name: GlobalWeather Click Finish.

24. IBM Software Group | Rational software Create the Rich UI  The UI Editor opens up with the default GridLayout.  In the Properties view, change the Rows and columns as shown

25. IBM Software Group | Rational software Code the Rich UI – Add the Button  Drag a Button to Row 2 column 2 of the GridLayout  Name it : GetWeatherBtn  Click on the Layout tab of the properties view and set as shown:

26. IBM Software Group | Rational software Code the Rich UI – Add the Title  Drag a TextLabel to Row 1 column 2 of the GridLayout  Name it : TitleLbl  Click on the Layout tab of the properties view and set as shown:

27. IBM Software Group | Rational software Code the Rich UI – Add the Input Fields and Labels Drag a TextField into row 3 column 3 Variable name : CityFld Repeat for row 4 column 3 Variable name : CountryFld Drag a TextLabel into row 3 column 2 Variable name : CityLbl Repeat for row 4 column 2 Variable name : CountryLbl

28. IBM Software Group | Rational software Code the Rich UI – Add a ResultsBox and Results Field Drag a Box widget to row 5 column 1. Box variable name: ResultsBox Drag a TextLabel into the ResultsBox Label variable name: ResultsFld Ctrl + S to Save

29. IBM Software Group | Rational software Enhance the Rich UI Edit the EGL Source or use the properties view to enhance your Rich UI screen. Here: -the background color was added - the text was added for -TitleLbl -WeatherBtn -CityLbl -CountryLbl -Width (400) was changed for the Results Box Feel Free to enhance your Rich UI even more. Code to this point is below in the notes section Remember to Preview!

30. IBM Software Group | Rational software Code Functions to call Weather Service Select the Design Tab Select the WeatherBtn In the Properties view, Select onClick and Click on the “plus” at the far right column. You will be prompted for a New Event Handler name. Accept the default and Click OK.

31. IBM Software Group | Rational software Code Functions to call Weather Service (Cont.) Type the functions above OR, better yet, copy/paste this code from the Notes section below

32. IBM Software Group | Rational software Test the Global Weather Rich UI  Start the Server  Select the Preview Tab.  Enter: Los Angeles  Enter: United States  Click the Get Weather button  Click OK if prompted for which Interface to use.

33. IBM Software Group | Rational software Deploy your Global Weather Rich UI Select your Rich UI Project, Right Mouse Click, Select Deploy EGL Project When done you will see (hopefully) the following message

34. IBM Software Group | Rational software Test the Deployed Rich UI

35. IBM Software Group | Rational software (Optional) Add Google Map to your Application  1. Add utils folder under WebContent of your Rich UI project. (i.e., File -> New -> Folder )  2. Copy GoogleMaps.js and GoogleMaps.html to the utils folder.  (Included with the workshops Zip file)  3. Create a package in the EGLSource folder and copy the MapSource.egl into it  (Included with the workshops Zip file)  4. Comment out ResultsFld, then Add: map GoogleMap{}; to the Rich UI Handler. Ctrl +Shift +o to resolve GoogleMap{}. Copy to here Rich UI Proj

36. IBM Software Group | Rational software Add Google Map  5a. Change the box code to add the GoogleMap as a child part to the Results Box and adjust the size of the box :  In the Source view:

37. IBM Software Group | Rational software (Optional) Add Google Map and show results on the Map  5b. Copy/Paste the following code (Record to format data) to the end of the handler code:  (make sure record is put AFTER the 'end' statement of the Handler)  (Code is in Slide Notes)  5c. Copy/Paste the following code to replace the returning to function statements:  (Code is in Slide Notes)  6. Press Ctrl + S to save.

38. IBM Software Group | Rational software Test the GoogleMap widget  Test!  Select the preview button  Enter :  City : Seattle  Country: United States  Bam!  Was that COOL or WHAT?!

39. IBM Software Group | Rational software Workshop 2 Summary  In this workshop you did the following:  Used an existing Service that returns the current weather in the City and Country you specify.  Imported the WSDL into RBD v8.  Created an EGL Client Interface using the WSDL.  Created a Rich UI to display the results of the Weather Service, by prompting the user to enter a City and Country, and then, upon return, display the result.  Tested the Rich UI.  Optionally Added a GoogleMap to your Rich UI Application

40. IBM Software Group | Rational software Workshop 3  In this workshop you will do the following:  Create a data access record.  Create a Service that Accesses a Derby Database. The Code is provided in the Notes section of the slide.  Create a Rich UI using a Grid widget that will prompt the user to push a button, and then, upon return, display the result. The Code is provided in the notes section.  Test the Rich UI.  Enhance the Rich UI Data Grid  Deploy the Rich UI Application to a Tomcat Server.

41. IBM Software Group | Rational software Verify the Database Connection  Before you can create a database access record, you need to make sure you have a connection defined to the database.  If you have already created a database connection to the Derby Database continue to the next slide.  Otherwise, skip down to the Appendix section of this workshop presentation file and follow the steps to create a Database connection. Then go to the next slide

42. IBM Software Group | Rational software  This workshop will show you an end-to-end process where you:  Create a Web Service that returns an array of customer records  Create a RUIHandler that:  Calls the service that accesses the database  Returning (in the Callback function) all of the rows found into the Rich UI Grid  The visual representation of the run-time architecture is shown in this picture… Create a Web Service to Populate a Rich UI DataGrid EGLDerbyR7 Call Service Function onClick Event RUIHandler TomcatService CallbackFunction Browser Server

43. IBM Software Group | Rational software Create a Library part Remember from Workshop 1, we put our Services in a separate Project : EGLGeneralProj. Create the Library and Services here. Put the Library in the package : data Name the Library part : CustomerServLib

44. IBM Software Group | Rational software Create the Data Access Record Erase the template code. Type the following OR Paste (from Notes) the code replacing everything. Place your Cursor here Right Mouse Click -> SQL Record Select Retrieve SQL RBD will retrieve and create all of this for you! Ctrl + S to Save

45. IBM Software Group | Rational software Create the Data Access Service

46. IBM Software Group | Rational software Code the Data Access Service Type: customerArray Customer[]; function getCustomerListAll (customerArray Customer[]) end Press Ctrl + Shift + o (oh, not zero) to resolve Customer[].

47. IBM Software Group | Rational software Code the Data Access Service (continued) Type: get customerArray; Place the cursor in between get and customerArray Press Ctrl + Shift + A. RBD “Adds” the SQL Code statement to the function. Note: this is completely customizable. Ctrl + S to Save

48. IBM Software Group | Rational software Create the Rich UI Screen Create the Rich UI Handler in the EGLRichUI project. Package : handlers EGL source file name: CustomerList

49. IBM Software Group | Rational software Create the Rich UI to Display the data  Switch to the Source view  Add: custList Customer[];  Press Ctrl + Shift + o to resolve the red x.

50. IBM Software Group | Rational software Create a DataGrid from the customer list record  Switch back to the Design mode.  Notice the custlist record is now a member in the EGL Data view.  Select it and drag to the third row, second column.

51. IBM Software Group | Rational software Select the Fields for the Data Grid to Display  You will be prompted with the following screen:  Since this will be a list, we will use the Read-only data radio button.  You can also choose the columns to be displayed and even change how the labels will look for each.  When ready, click the Finish button.

52. IBM Software Group | Rational software Create the Rich UI to Display the data  Your screen should now look similar to this.  Note: I adjusted the column widths to get a better screen shot

53. IBM Software Group | Rational software Code the Rich UI – Add the Title

54. IBM Software Group | Rational software Adjust the properties of the Title Label  Set the properties of the Title Label as follows:  Feel free to experiment and change any other properties

55. IBM Software Group | Rational software Code the Rich UI – Add the Button

56. IBM Software Group | Rational software Adjust the Button Properties  Set the text property and horizontal Alignment property as shown:

57. IBM Software Group | Rational software Code the Rich UI – Grid Preview Next step is to add Events and Service Call functions Click the preview tab to make sure everything looks as expected:

58. IBM Software Group | Rational software Code the Rich UI – Add onClick function Select the GetListBtn Select the Events Tab in the Properties view. Select the onClick event. A “plus” icon will appear You will be prompted to enter a name for the function you want to execute when the button is pressed. Accept the default. Click OK.

59. IBM Software Group | Rational software Code the Rich UI – Code the onClick function Slide Notes Ctrl + Shift +o will resolve the data record and services call. Next, we need to code the call back routines.

60. IBM Software Group | Rational software Code the Rich UI – Create Callback functions Place cursor in statement Right Mouse Click RBD creates the callback and exception function skeleton code for you! Select Create Callback Functions

61. IBM Software Group | Rational software Code the Rich UI – Code the Callback functions Code the functions with the code shown in red above or paste the code from the Notes section below. Ctrl + S to Save

62. IBM Software Group | Rational software Test your Rich UI Application Select the Preview tab Click the Get Customer List Button Click OK on the User ID and Password Prompt.

63. IBM Software Group | Rational software Enhancing the Customer List  At this point there are a number of additional enhancements you would want to make to the Customer List. For example,  Change the email column to be an email link  Column level alignment settings  Enhancing the visual appeal of the application  Etc.  The next several slides will show you how to do this.

64. IBM Software Group | Rational software Change the email column  DataGrid supports the capability of using column level behaviors. For example, you might want to change the email address column to be a Link.  To do this, you add a function to the Handler source, as shown (addEmailLinks) :  Then add the editorbehavior to the datagrid. (Note the comma)  Ctrl + s to save.

65. IBM Software Group | Rational software Preview the new email link

66. IBM Software Group | Rational software Deploy your Rich UI Application

67. IBM Software Group | Rational software Add Context.xml to WEB-INF/META-INF  Wait!  Before we can test we need to verify that Tomcat has the Context.xml file. This has the database connection information needed by the Database Access Service.  Select the RichUIWebProj, press Alt + Enter  Select the EGL Runtime Data Source  Select the Load values from Data Tools Connection radio button  Select your connection  Press OK RBD v8 now automates creating the Context.xml.

68. IBM Software Group | Rational software Verify that the Context.xml is there  Open the WebContent\META-INF folder in your Rich UI Web Project. Look for Context.xml.  If there, and there is an entry for the jdbc/EGLDerbyR7 in it, skip this and go to the next slide.  If it is not there. Click here to go to the Appendix – Create and add a Context.xml to your Rich UI Web Project.Click here

69. IBM Software Group | Rational software Run the Customer List Application

70. IBM Software Group | Rational software Workshop 3 Summary  In this workshop you did the following:  Created a data access record.  Created a Service that Accesses a Derby Database.  Created (step-by-step) a Rich UI using the data record. ( users will push a button, and then, upon return, display the result.  Tested the Rich UI.  Optionally, you can enhance the data grid with additional columns, different colors, etc…  Deployed the Rich UI Application to a Tomcat Server.

71. IBM Software Group | Rational software Additional Tutorial available  Included in the workshops zip file is a tutorial that will guide you through creating the following:  Lessons 1 – 5 reinforce the topics we have covered so far. Click here to go to the tutorial

72. ® IBM Software Group software © 2011 IBM Corporation Rational Business Developer v8 Appendix

73. IBM Software Group | Rational software Appendix Contents  Contents  Create a Database Connection  Download Apache Tomcat Instructions Download Apache Tomcat Instructions  Add Context.xml to your Tomcat Web Server Add Context.xml to your Tomcat Web Server  Install the Dojo Samples Project

74. IBM Software Group | Rational software Verify the Database Connection  Before you can create a database access record, you need to make sure you have a connection defined to the database.  Determine where your Derby.jar file is, i.e. C:\databases\driver\derby.jar  Select Window -> Preferences -> EGL -> SQL Database Connections  Click the New button

75. IBM Software Group | Rational software Create a Connection Profile

76. IBM Software Group | Rational software Add Derby.jar

77. IBM Software Group | Rational software Finish the Database Connection

78. IBM Software Group | Rational software Set the Build File to use this Connection In order for the generated code to use the Connection you just created, you need to update the Build File with the connection name. - Open the EGLRichUIProj.eglbld file and Click on the Combo Box arrow next to “Load DB options using Connection:” Field. - Select the DerbyDatabaseConn. RBD will automatically update the appropriate fields with the correct entries. - Save your changes (but don’t close the file yet, one more item to set)

79. IBM Software Group | Rational software Add the SQLJNDIName property  With the Build File still open, click on the Show only specified options check box to display all properties.  Scroll down to the sqlJNDIName property and enter the following:  jdbc/EGLDerbyR7  Save and close the Build File

80. IBM Software Group | Rational software Download Apache Tomcat  Before you can deploy your Rich UI application you need to have a Web Application Server to deploy to.  For these courses we use Apache Tomcat v6.0.29  The next slides show you how to download Apache Tomcat.

81. IBM Software Group | Rational software Apache Tomcat Website  Click here to go to the Apache Tomcat download site:  http://tomcat.apache.or g/download-55.cgi http://tomcat.apache.or g/download-55.cgi  Scroll down to Binary Distributions  Click on zip under the Core: section.  Save the zip file to a directory on your machine.

82. IBM Software Group | Rational software Unpack the Tomcat zip file. Unpack the Tomcat zip file into a Tomcat folder on your machine For example this was unpacked into the D:\Tomcat\ folder which resulted in a sub folder \apache-tomcat-6.0.29 with the following files and folders:

83. IBM Software Group | Rational software Add the Derby.jar file to Tomcat Common  Copy Derby.jar file to the Common\lib directory. Tomcat is now installed and ready to be used by RBD v8.

84. IBM Software Group | Rational software Create and add a Context.xml file  Application servers such as Apache Tomcat do not use EAR files. On those application servers, the association of resource identifiers and runtime locations is in the WAR file, in the compressed file context.xml.  We will Create and add a Context.xml to your Rich UI Web Project.

85. IBM Software Group | Rational software Create a new file in the META-INF folder Expand the folder structure of your Rich UI Web Project. This is the project you are deploying to (not the Rich UI Development project). Select META-INF, Right Mouse Click, select New -> File. Verify that META-INF is the Parent folder, Enter context.xml in the File name: Field. Click the Finish button.

86. IBM Software Group | Rational software Create the context.xml file The text editor will open. Click on the Source tab of the text editor. Copy/Paste the xml from the Notes section below. (Ctrl + S to save) Return to the Run your Deployed Application step in Workshop 3

87. IBM Software Group | Rational software Install the Dojo Samples Project  The Dojo Samples project contains some additional Sample applications you can use as models for ideas in your own applications.  For example:  GoogleMaps. Check out the GoogleMapSample.egl  Portal Example: Check out the PortalSample.egl

88. IBM Software Group | Rational software Install the Dojo Samples Project  In order to use the GoogleMap Widget you will need to install the Dojo Widgets Samples project.  To do this:  Select Help -> Welcome (from the main menu)  Select the Samples Icon  Select the EGL Dojo widgets  Select the Get the sample

89. IBM Software Group | Rational software Install the Dojo Samples Project  On the Import Projects screen, Click on the Finish button  When the import project has completed, you will have the dojo samples project in your workspace.  To verify that the Google Map widget is there, expand the project as shown:

90. IBM Software Group | Rational software Verify the contents of context.xml  Verify that the contents of the context.xml is correct for your workstation. For example, is the location of your database at C:\databases\EGLDerbyR7?  Modify as appropriate and Save your changes.  Restart the Server.  You are ready to test!