Build Web 2.0 application using EGL

Build Web 2.0 applications using EGL, of 35

Build Web 2.0 application using EGL

By Reginaldo W. Barosa Executive IT Specialist

IBM Corporation April 2010

Skill Level: Intermediate

Copyright © 2009, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.


Abstract IBM® Rational® Business Developer , IBM® Rational® Developer for Power Systems Software or IBM® Ra-tional® Developer for System z with EGL helps you to create applications that can be deployed as COBOL or Java™ using Enterprise Generation Language (EGL).

Using EGL version 7.5.1 you now have the capability to generate JavaScript™ that takes advantage of Web 2.0 technology. This tutorial shows you how to build a simple Rich User Interface (Rich UI) application using EGL. You will then test, debug and deploy it. EGL Rich UI is a new technology for writing applications that will be deployed on Web servers. The technology builds on an idea central to EGL: write simple code, which is converted automatically to output that is useful for running a business. The output in this case is client-side JavaScript™, called client-side because the JavaScript runs in the browser, not on the remote machine that serves the Web page.

Client-side JavaScript is important because it makes the Web page more responsive, providing greater flexibility so that the user's experience can go beyond receiving and submitting a page. After the user clicks a radio button, for example, the logic might respond by changing the content of a text box. The change occurs quickly because the JavaScript runs locally and, in most cases, redraws only one area of the page.

An extension of client-side JavaScript is Ajax (Asynchronous JavaScript and XML), a technology that permits the runtime invocation of remote code and the subsequent update of a portion of a Web page, even as the user contin-ues working elsewhere on the page. After the user selects a purchase order from a list box, for example, the JavaScript logic might request transmission of order-item details from the remote Web server and then place those details in a table displayed to the user. In this way, the application can access content from the server but can save time by selecting, at run time, which content is transmitted.

A developer writes Rich UI applications using EGL syntax. For advanced purposes, however, a developer can write custom JavaScript or use JavaScript libraries instead of relying on the default behavior provided by EGL. For example, you can use Rich UI to access the following software:

• The Dojo Toolkit (http://dojotoolkit.org/)

• Microsoft® Silverlight (http://silverlight.net/)

Before you start Learn what to expect from this tutorial and how to get the most out of it.

About this series Walk through this scenario and others online as part of the Enterprise Modernization Sandbox for i

About this tutorial This tutorial takes you through the steps of using the IBM Rational Developer for i for SOA Construction (with EGL) to create a Rich User Interface (Rich UI) application that adds two fields. You will create it from scratch, test and debug the code and later deploy it to be executed in a browser using JavaScript. Also you will be able to explore a more sophisticated Rich UI application that invokes Web Services that have been created with EGL and deployed to WebSphere Application Server.


http://www-01.ibm.com/software/awdtools/developer/business/index.html

http://www-01.ibm.com/software/awdtools/developer/rdisoa/

http://www-01.ibm.com/software/awdtools/rdz/enhancements.html#bo

http://www-01.ibm.com/software/awdtools/rdz/enhancements.html#bo

http://www-949.ibm.com/software/rational/cafe/community/egl

http://www.ibm.com/developerworks/downloads/emsandbox/systemi.html?S_TACT=105AGX28&S_CMP=EMSAND


Objectives You will learn how to

• Build Rich UI components using the wizards available in IBM Rational Developer for i for SOA Con-struction wizards.

• Write EGL code to perform simple logic to be invoked by the Rich UI

• Test and debug the code that generates Java script

• Deploy the Rich UI application to a local directory.

• Improve the application.

• Test a more sophisticated application that accesses data bases using Web services also created with EGL.

Prerequisites You must have some basic programming concepts. These are the main tasks that you will perform:

1. Part 1 – Create the calculator.

a. Create a project to hold the assets to be created

b. Create the Rich UI components.

c. Create the EGL business logic used by the Rich UI components.

d. Test the Rich UI application

e. Debug the EGL application

f. Deploying a Rich UI application to a local directory.

g. Extend the application to validate input fields.

2. Part 2 - Test a more sophisticated application that accesses data bases using Web services also created with EGL.



Part 1 – Create the calculator. When you complete this part you will have an EGL Rich UI widget that adds two fields as shown in Figure 1. Figure 1. Rich UI screen to be created

Create a project to hold the assets to be created After completing the steps showed in the first part you will have a simple Rich UI screen as shown in Figure 2.

1. __ Select Window > Open Perspective > Other, as shown in Figure 2. Figure 2. Using the Rich UI perspective



2. __ Select EGL Rich UI and click OK, as shown in Figure 3. The EGL Rich UI perspective will open. From this page, you will define a new EGL Rich UI project. Figure 3. Selecting the EGL Rich UI perspective

3. __ To create a EGL Rich UI project, select File > New > Project as shown in Figure 4.

Figure 4. Creating a Project..

4. __ Type egl select EGL Project and click Next as seen in Figure 5 Figure 5. Selecting the EGL project wizard

5. __ Type DEMO select Rich UI Project as seen in Figure 6 and click Next>. Figure 6 Creating a project named DEMO



6. __ Clear Create an EGL service deployment descriptor, since you are not dealing with services in this project as seen in Figure 7 and click Finish The EGL Rich UI project named DEMO will be created. Note also that the wizard automatically created another project named com.ibm.egl.rui_1.0.0. This second project will be referred by your DEMO project. Figure 7. Creating EGL Rich UI Project

7. __ Expand Demo project to visualize what has been created as shown in Figure 8.

Figure 8. Results of DEMO project creation

Create the Rich UI components After completing the steps shown in the first part you will have a simple Rich UI Calculator screen as shown in Figure 1. You will now create the EGL code that will include both the Rich UI components and the logic to make a simple calculation.

8. __ Right click on EGLSource and select New > Rich UI Handler as shown in Figure 9.



Figure 9. Creating a Rich UI Handler

9. __ Type demo as Package name and Calculator as EGL source file name and click Finish. As shown

in Figure 10 The EGL Rich UI editor will open with a blank page. Figure 10. Creating an EGL Handler named Calculator



10. __ Expand EGLSource and demo package to see the Calculator.egl code created as shown in Figure 11. Figure 11. The file Calculator.egl is created

11. __ Click on the tab Source to see the EGL code generated as shown in Figure 12.

Note that the type RUIhandler is the EGL code where you will add the Rich UI controls and if desired the business logic or web services invocations. Figure 12. EGL source code generated

Understanding how browsers handle a Rich UI application The internal data areas used by the browser are represented as an inverted tree. The tree is composed of a root -- named document -- and a set of elements, which are units of information. The top most element that is available to you is named body. The elements subordinate to body are specific to your application. A set of rules describes both the tree and how to access the data that the tree represents. That set of rules is called the Document Object Model (DOM). We refer to the tree as the DOM tree. Refer to the Rational Devel-oper for i for SOA Construction help for better explanation and examples of these definitions. Using the Design surface to create a DOM tree When you drag a widget from the palette to the Design surface, the areas that can receive the widget are called potential drop locations, and the color of those areas is yellow by default. When you hover over a potential drop location, the area is called a selected drop location, and the color of that area is green by default. You can customize the colors in the Workbench preferences. When you first drag a widget to the Design surface, the entire surface is a selected drop location, and the effect of the drop is to declare the widget and to identify it as the first element in the Rich UI handler's initialUI prop-erty. That property accepts an array of widgets at development time. The array is ultimately used to create a DOM tree, which is a runtime data structure. Specifically, the elements in the Rich UI handler's initialUI array become children of the document element, with the order of initialUI array elements at development time equivalent to the order of sibling DOM ele-ments at run time.



When you drag another widget to the Design surface, you have the following choices:

1. You can place the widget adjacent to the initially placed widget. The effect on your source code is to declare the second widget and to identify it as another element in the initialUI array. Your placement of the new widget is either before or after the first widget and indicates where the widget is placed in the array.

2. If the initially placed widget was a container—for example, a box—you can place the second widget inside the first. The effect on your source code is to add an element to the children property of the container. The effect is ultimately to add a child element to the DOM tree; specifically, to add a child element to the element that represents the container.

Your subsequent work continues to build the DOM tree. You can repeatedly perform drag-and-drop opera-tions, with the placement of a widget determining what array is affected and where the widget is placed in the array. The drag-and-drop operation is an alternative to writing a widget declaration and array assignment in the code itself, whether in the Source tab of the Rich UI editor or in the EGL editor.

You will now add some Rich UI controls to the blank page.

12. __ Click on Design tab and using the mouse, drag and drop TextLabel located in the Palette view under EGL Widgets as shown in Figure 13. Note: you must click on TextLabel, hold the mouse button two and drag it at the top of the screen. This control will be the title of the Calculator to be created.

Figure 13. Dragging TextLabel Widget

The New Variable window will pop up.



13. __ Click OK to assume the default, since you don’t need special names for this title. Usually you change the variable names when they will be used in the EGL code with names that you will recognize later. Also for now all text displayed on the Design view will not be changed, you will do that later.

Now you will need to create an EGL widget named Box. A Rich UI box widget defines a box that embeds other widgets that you will create.

14. __ Drag and drop Box under the label TextLabel already in the view. Note that a picture shows the location of this control and the green color indicates where this widget will be added. Note that it must be under TextLabel as shown in Figure 14. Figure 14. Dragging Box Widget

15. __ Type MAINBox as Variable name and click OK as shown in Figure 15.

It is a good practice to start giving names to the widgets to be created now, this way you can easily identify those in the EGL code that you will see soon. Figure 15. Main Box variable

.Note: that a dotted area is created under the TextLabel as shown in Figure 16. You will add the controls inside of this area. Figure 16. Box widget created, but empty.



• __ Click on the Source tab and you will see the EGL generated code as shown in Figure 17. Please spend a few minutes to understand this code. Some points to note:

a. initialUI specifies which widgets are children of the initial, DOM tree document element.

b. onConstructionFunction specifies the on-construction EGL function, which is a handler function that is invoked when the handler starts running. Figure 17. EGL source code generated .

You will now start to add more EGL widgets.

16. __ Drag aTextLabel and drop it inside the box created before (MAINBox) . Note that it is important that the green color is showing inside the MAINBox as shown in Figure 20. Figure 20. Dragging TextLabel and dropping inside the MAINBox for Field1

17. __ Accept TextLabel1 as default name clicking OK. This will be just the title and you will not use this widget to set content. Note in the Calculator.egl that TextLabel1 is created as a child of MAINBox as shown in Figure 21. Figure 21. EGL code generated after the drag and drop



18. You will need now a widget that will be an entry field. Drag the widget TextField and drop inside the MAINBox as shown in Figure 22. Again be sure that the green color is inside the MAIN Box and note the picture displayed. Figure 22. Dragging TextField and drooping inside the MAINBox for Field1

19. __ Type FIELD1TextField as Variable name and click OK as shown in Figure 23. It is a best practice to name widgets that the EGL code will use. This will be where the user will type the first field to be added. Figure 23. FIELD1TextField variable

Note that in the Calculator.egl editor the FIELD1TextField is added as a child of MAINBox also. At this point you have created one label and one field. This will be the first operand. You will need to repeat this for the second operand.



20. __ Drag aTextLabel and drop it inside the box (MAINBox) after the FIELD1TxtField just created above. Again it is important that the green color is showing inside the MAINBox as shown in Figure 24. Figure 24. Dragging TextLabel and dropping inside the MAINBox for Field2

21. __ Accept TextLabel2 as default name clicking OK. This will be just a text label, you will not use this widget to set content. Note in the Calculator.egl TextLabel2 is created as a child of MAINBox as shown in Figure 25

You will need now another entry field widget.

1. __ Drag the widget TextField and drop inside the MAINBox as shown in Figure 25. Be sure that the green color is inside the MAINBox and note the picture displayed. Figure 25. Dragging TextField and drooping inside the MAINBox for Field2



22. __ Type FIELD2TextField as Variable name and click OK as shown in Figure 26. As you did it before, it is a best practice to name widgets that the EGL code will use. This will be where the user will type the second field to be added. Figure 26. FIELD2TextField variable

Note that in the Calculator.egl editor the FIELD2TextField is also added as a child of MAINBox..

At this point you have created two labels and two fields that will be the first and the second operand. After this drop the picture will be as shown in Figure 27. Note that you have all widgets in one unique row. It’s now time to start changing the Widgets’ properties.

Figure 27. The design page after adding four widgets.

You will now change the properties of each widget created.

23. __ Select the TextLabel on top of the page and click on the Properties view tab on the left.

24. __ Type ADD Machine as text (in place of TextLabel) type 20 as fontSize,

25. __ Select bold as fontWeight and press enter . The results are shown in Figure 28.



26. Figure 28. Changing the property for the title label.

27. __ Select the MAINBox (you will see a dotted line when it is selected) and using the properties type 2

as columns, since you want to have two columns of widgets. You want that each column includes both the TextLabel and the TextField.

28. __ To add a background color, click on the button near the backgroundColor click on Name format, select a color like AntiqueWhite, press OK and then press enter. The final result is shown in Figure 29. Figure 29. Changing the property for the MAINBox

Take few minutes to understand the EGL code that is being displayed at each change you make it. If you are an experienced EGL Rich UI developer you could just type the code and verify the controls created.

You still need to change the two TextLabels.

29. __ Click on the first TextLabel and using the properties change the text to Field1…. and press enter. Repeat this for the second label and change the TextLabel to Field2… The result is shown in Figure 30.



If you do a mistake, you can use the undo (Edit > undo) to return the previous state.

30. __ Use Ctrl + S to save what you have done so far. Note the EGL code that was generated. Figure 30. Results after changing the Properties

You still need to add the labels for the results field. Since this field is not updatable you just need to add two TextLabels.

31. __ Drag the widget TextLabel and drop inside the MAINBox to the right of Field2 (not UNDER Field2) as shown in Figure 31. Always be sure that the green color is under (inside) the MAINBox and note the picture displayed to help on this. Figure 31. Dragging TextLabel and dropping after Field2

As you had defined 2 columns, this label will be under Field2 as you want.

32. __ Accept TextLabel3 as variable name and click OK.

33. __ Repeat this operation for another TextLabel, dropping it after the previous label. The result is shown in Figure 32.



Figure 32. Results after adding two more labels

34. __ Type RESULTTextLabel as Variable name and click OK. This must be a recognizable name

since you will store the results there.



35. __ Finally add a Button widget after RESULTTextLabel. Again since the number of columns is 2 this button will be under the results. Figure 33 shows this action. Figure 33. Dragging a Button to the MAINBox

36. __Accept Button as variable name and click OK. You need to change the properties of those labels and the button and create an event when the but-ton is clicked.

37. __ Click on TextLabel3 (the first without name) and using the Properties view change the text to Re-sult… and press enter.

38. __ Click on TextLabel4 and using the properties view replace text with a few empty spaces (blanks).

39. __ Click on Button and using the properties view change the text to Add Fields and press enter. The figure 34 show the results of all controls created. Figure 34. Design view with all controls created.

See in the EGL code that now MAINBox has 7 widgets as children. You now need to create an event when the button is clicked. This event will trigger the EGL function that does the logic. In our example the logic is a simple add operation.

40. __ Click button Add Fields (be sure that the dotted marks are around the Button and NOT the MAINBox) as shown in Figure 35.



Figure 35. Selecting the button Add Fields to create an event.

41. __ Having the button Add Fields selected, go to the Properties view and click on Events tab, select on-

Click and double click it.

42. __ Type AddFieldsonClick as Function name and click OK. This function will be executed when the button is clicked. This is shown in Figure 36. Figure 36. Adding an event Handler when the button is clicked

43. __ Save the EGL code generated using Ctrl + S.

Figure 37 shows part of the EGL code generated. Note that the onClick event will execute the function AddFieldsonClick. Also remember that when you resize your views the command Window > Reset perspective will return the perspective to the default.



Figure 37. EGL code and the event Handler when Add Fields is clicked

The hardest part is done. Note that all could be done just by typing EGL code and this is probably what skilled EGL developers will do. But the drag and drop capabilities provide a nice way to learn EGL Rich UI coding. You can test the widgets control created.

44. __ Click on the Preview tab. This is shown in Figure 38.

Figure 38. Preview of Rich UI controls

Create the EGL business logic used by the Rich UI components. At this point you will work with EGL code since you don’t need any visual components. So you can close the sec-ond EGL editor and click on the Source Tab

45. __ Using the EGL code assist create 3 fields that will be used to hold the two input fields and the results. They will be defined as float. For example type the field name like field1, press Ctrl + Space and choose the value as shown in Figure 39. Figure 39. Using code assist to create EGL code



When the button is clicked, the Function AddFieldsonClick will be executed. You need to get the fields that you typed, add them and store the result back into the result label. Again the EGL Code assist can be used as shown in Figure 40. For example you type “.te” and press the Ctrl + Space to show possible values. In this example it is text.

Figure 40. Using code assist to create the EGL business logic

46. All the EGL code that is generated by the wizards plus the code that you must enter is shown in Figure 41.

The red rectangle is the code that you have to add.



Figure 41. All EGL source, generated and manually coded

You cannot have any error in the EGL code. By default the EGL editor will capture errors as soon as you type the code and these errors are identified by a red mark as shown in Figure 42. In this example the user typed floats instead of float. If you move the mouse to this red mark it will indicate that type floats cannot be resolved. Also be sure that your EGL code is saved on your workspace and that there is no asterisk before the title (*Calculator.egl ) as shown in Figure 42. The asterisk here indicates that this file has not been saved. Figure 42. An example of error in the EGL code.

At this point you are ready to test the application.

Test the Rich Ui application

Now you can test the EGL Rich UI code.

47. __ Click on Preview tab and you will see what is shown in Figure 43. Figure 43. Rich UI application Preview.



48. __ Type two valid numeric fields, like 34.67 and 61.88 and click the Add Fields button. The results should be as shown in Figure 44. Figure 44. Rich UI application Preview with data typed and results. .

You can see that this logic needs lots of improvement however you don’t have time here to work on that. But if you type a data that EGL code cannot transform into float it will fail. When you have time you may add more logic on this code to avoid this problem. One interesting aspect of Rich UI code (that in fact is a JavaScript™ capability) is the fact that you can have many events for the widgets that you create. For example you could add an event associated with the Field1 that would verify if there are no exceptions when the focus is lost or when this field is changed. Using the Rational developer for i for SOA Construc-tion and the Help page, make a search on onFocusLost and you will have the description of the many events that might be used here.

Debug the EGL application You do not need to explicitly create a runtime configuration to start a debugging session. If you click the Debug icon on the toolbar of the Rich UI Preview view (not the Debug icon on the toolbar of the Workbench), a configu-ration is created for you. Similarly, a configuration is created for you if you do as follows:

1. Right-click the EGL file that contains the Rich UI handler 2. Click Debug EGL Rich UI application

You might also change the EGL Debug preferences of your workspace to Stop at the first line of a program, as well make breakpoints. You will see here an example of making a breakpoint

49. __ Click on Source tab to visualize the EGL code and double click in the gray area on left of “field1 = FIELD1TextField.text as float; “ as shown in Figure 45. A blue icon indicates a breakpoint. Figure 45. Adding a breakpoint for the debug.



50. ___ Click on Preview page again. Before starting the EGL Rich UI debug you need to refresh the Web Page.

51. __ Click the Refresh icon as shown in Figure 46. Figure 46. Refreshing the Web Page before the debug.

52. __ Click the Debug icon on the toolbar of the Rich UI Preview view (not the Debug icon on the toolbar of the Workbench) as shown in Figure 47. Figure 47. Initiating the EGL Rich UI debug

This operation will take a while since the browser must be loaded.

When a debug session starts, the application runs in an external browser, and you can edit your code, set break-points, and inspect variables. In the Debug perspective, you perform the usual set of debug activities (Step Into, Step Over, and so on), as de-scribed in the Rational developer for i for SOA Construction help under the topic EGL debugger commands in the EGL Programmer's Guide.

53. __ When the browser is ready, type two valid numeric fields, like 123.45 and 67.89 and click the Add Fields button The Confirm Perspective Switch screen will be displayed. Click Yes to have the EGL Debug perspective opened. The execution will be stopped in the breakpoint. You can expand the fields using the Variables view to see the values that you typed. Figure 48 shows an example of this code being debugged after a Step Over (F6) is pressed. Note also that an external browser is being used and this browser must support JavaScript.

54. __ Use F6 (Step Over) to follow the code being executed. Figure 48. EGL Rich UI debug in action



55. __ End the debugging session by clicking the red icon in the Debug perspective. You also can close the Debug perspective. When the debugging session ends, you are in the EGL Rich UI perspective, with your source code open in the EGL editor (not the Rich UI editor) and with your source code also available in the Preview view of the Rich UI editor.

56. __ You can close all views by using Ctrl + Shift + F4.

Deploying a Rich UI application to a local directory. In relation to EGL Rich UI, the word deploy refers primarily to the creation of an HTML file that embeds previ-ously generated JavaScript™ output. Rich UI supports the following target environments: 1. WebSphere Application Server 2. Apache Tomcat 3. Local directory To simplify the process here you will deploy your EGL Rich UI to a local directory. When you generate an EGL Rich UI handler or library, the output is a JavaScript™ file with no embedding HTML. Two generation modes are available, as specified in the preferences for Rich UI: Development mode The output has information required by the EGL debugger and the EGL Rich UI editor. Deployment mode The output lacks the extra information but is smaller and more efficient. Deployment mode is appropriate immedi-ately before you add fully tested code to a production environment. Since you want the best performance, you need first to make some changes in the workspace to specify deployment mode. To prepare to use the Rich UI deployment wizard, do as follows:



1. __ Click Window -> Preferences. __ The Preferences dialog is displayed.

2. __ Expand EGL and click Rich UI

3. __ Set the dropdown list to Deployment.

4. __ Click OK. A message is displayed to indicate that regeneration is required.

5. __ Click OK. The effect is that all the generated JavaScript™ in your workspace will be available for Deployment.

To deploy your Rich UI application, when the deployment target is a local directory, as is especially useful when you intend to install the application on a simple HTTP server.

6. __ In the Project Explorer, right click on the Calculator.egl and select Deploy EGL Rich UI Application as shown in Figure 49.

Figure 49. Deploying an EGL Rich UI Application

Be sure that Calculator.egl is specified.

7. __ Select Local Deployment and click Next as shown in Figure 50. If you wish to retain the details of this operation you should specify Save deployment configuration checkbox. If you save a deployment configuration, you can use the Redeploy Rich UI application option later, to quickly deploy the same Rich UI application in a way that reflects the most recently saved con-figuration



Figure 50. EGL Rich UI Application for Local Deployment

The Deployment Details dialog is displayed.

8. __ Specify C:\temp\EGLRichUI as directory name in Deployment Directory, specify Calculator as the name of the HTML file you are deploying. Also keep the default c:\temp\EGLRichUI as Application context root. Note that the deployment wizard adds locale detail to the name, along with the file extension .html. In our example if you used the default as shown in Figure 51, it will be to create an output for the Eng-lish locale, the file will be named Calculator-en_US.html.

9. __ Click Finish. Verify the name that will be created

10. __ Click OK. Note that the directories along with its contents will also be created. Figure 51. EGL Rich UI Application for Local Deployment



Figure 52 show some of the components created by the deployment. Figure 52. EGL Rich UI Application code deployed

11. __ Open the folder created and you will see the components created. Double click on Calculator-en_US.html created and you will see the application running on your favorite web browser

12. __ Type two valid values like 345.67 and 78.90 and click the button and you will see the results as shown in Figure 53.



13. Figure 53. EGL Rich UI Application working in the Internet Explorer browser



Extend the application to validate input fields. The Application that you completed has no input field validations. If the user types a letter instead of a numeric value the execution will fail. You will see here how to perform a very simple validation.

14. __ Type an invalid value like xxx and click Add Fields button. Nothing happens? Would it not be nice to have a message that would inform the user that “xxx is an invalid value”?

15. __ Return the EGL Rich UI workspace to development mode.

16. __ Click Window -> Preferences. The Preferences dialog is displayed. Expand EGL and click Rich UI .

17. __ Set the dropdown list to Development and click OK. A message is displayed to indicate that regenera-tion is required and you must click OK to have the Rich Ui applications regenerated in development mode.

To do field validations, you will need to add events for each data field when the cursor leaves the fields. If the value is invalid a message will be displayed informing the user that the value must be numeric. The event that you may use for this would be onFocusLost. Double click on the onFoucsLost event to add an Event Handler, Figure 54 shows how to add an event for the first field. You will need to repeat this for the second field. Figure 54. Adding an event to FIELD1TextField.

Figure 55 shows all the code added to do a basic validation. You could add more sophisticated validations, change messages colors, etc.. But the code here is the minimum needed to accomplish our basic validation. Figure 55. EGL coded added to perform numeric validation.



Now using the Preview tab type an invalid data on Field1. When you move the cursor to Field2 (Field 1 loses fo-cus) you would have a message as shown in Figure 56. Cool? You can do much more…This is just the beginning of the wonders of Web 2.0 with EGL. User Ctrl + Shift + F4 to close all opened editors. Figure 56. Typing an invalid data.

18. __ Close the external browser that was opened during the debug.

Summary: You have learned how to build Rich UI components using the wizards available in IBM Ra-tional Developer for i for SOA Construction, write EGL code to perform simple logic that was invoked by the Rich UI, tested and debugged the code that generated Java script, and deployed the Rich UI application to a local directory.



Resources

Learn

• Get a more in-depth look at EGL visiting the EGL Café

• Find out more about IBM Rational Developer for i for SOA Construction.

• Learn more about Enterprise Modernization for IBM i.

• Subscribe to the Rational Edge newsletter for articles on the concepts behind effec-tive software development.

• Watch Software Innovation for IBM i Demos.

Get products and technologies

• Access an evaluation version of Rational Developer for i for SOA Construction .

• Download trial versions of IBM Rational software.

• Download these IBM product evaluation versions and get your hands on application development tools and middleware products from DB2®, Lotus®, Tivoli®, and WebSphere®.

Author

Reginaldo W. Barosa is an IBM Executive IT Specialist. He provides sales support, helping customers with enterprise modernization solutions and development tools, such as Rational Developer for System z. Before joining IBM U.S. almost nine years ago, Reginaldo worked 27 years for IBM Brazil. He has co-authored IBM Redbooks and has written two books, as well as other articles and tutorials for IBM developerWorks. He holds a degree in electrical engineering from Instituto Maua de Tecnologia, Sao Paulo, Brazil


http://www-949.ibm.com/software/rational/cafe/community/egl

http://www.ibm.com/software/awdtools/developer/rdisoa

http://www-01.ibm.com/software/rational/solutions/em/systems/i/

http://www.ibm.com/developerworks/rational/rationaledge/

http://rational.dfw.ibm.com/atdemo/?S_CMP=rnav

http://www-01.ibm.com/software/awdtools/developer/rdisoa

http://www.ibm.com/developerworks/downloads/?S_TACT=105AGX15&S_CMP=EMDOC%20

http://www.ibm.com/developerworks/downloads/?S_TACT=105AGX15&S_CMP=EMDOC



Notices © Copyright IBM Corporation 1992, 2009. All rights reserved.

U.S. Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.

This information was developed for products and services offered in the U.S.A. IBM may not offer the products, services, or features discussed in this documentation in other countries. Consult your local IBM representative for information on the products and services currently available in your area. Any reference to an IBM product, program, or service is not intended to state or imply that only that IBM product, program, or service may be used. Any functionally equivalent product, program, or service that does not infringe any IBM intellectual property right may be used instead. However, it is the user’s responsibility to evaluate and verify the operation of any non-IBM product, program, or service.

IBM may have patents or pending patent applications covering subject matter described in this documentation. The furnishing of this documentation does not give you any license to these pat-ents. You can send license inquiries, in writing, to:

IBM Director of Licensing IBM Corporation North Castle Drive Armonk, NY 10504-1785 U.S.A.

For license inquiries regarding double-byte (DBCS) information, contact the IBM Intellectual Property Department in your country or send inquiries, in writing, to:

IBM World Trade Asia Corporation Licensing 2-31 Roppongi 3-chome, Minato-ku Tokyo 106, Japan


The following paragraph does not apply to the United Kingdom or any other country where such provisions are inconsistent with local law: INTERNATIONAL BUSINESS MACHINES CORPORA-TION PROVIDES THIS PUBLICATION ″AS IS″ WITHOUT WARRANTY OF ANY KIND, EITHER

EXPRESS OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OR CONDITIONS OF NON-INFRINGEMENT, MERCHANTABILITY OR FITNESS FOR A PARTICU-LAR PURPOSE. Some states do not allow disclaimer of express or implied warranties in certain transac-tions, therefore, this statement may not apply to you.

This information could include technical inaccuracies or typographical errors. Changes are periodically made to the information herein; these changes will be incorporated in new editions of the publication. IBM may make improvements and/or changes in the product(s) and/or the program(s) described in this publication at any time without notice.

Any references in this information to non-IBM Web sites are provided for convenience only and do not in any manner serve as an endorsement of those Web sites. The materials at those Web sites are not part of the materials for this IBM product and use of those Web sites is at your own risk.

Licensees of this program who wish to have information about it for the purpose of enabling: (i) the exchange of information between independently created programs and other programs (including this one) and (ii) the mutual use of the information which has been exchanged, should contact:

Intellectual Property Dept. for WebSphere Software IBM Corporation 3600 Steeles Ave. East Markham, Ontario Canada L3R 9Z7

Such information may be available, subject to appropriate terms and conditions, including in some cases, payment of a fee.

The licensed program described in this documentation and all licensed material available for it are pro-vided by IBM under terms of the IBM Customer Agreement, IBM International Program License Agreement or any equivalent agreement between us.

Any performance data contained herein was determined in a controlled environment. Therefore, the results obtained in other operating environments may vary significantly. Some measurements may have been made on development-level systems and there is no guarantee that these measurements will be the same on generally available systems. Furthermore, some measurements may have been estimated through extrapolation. Actual results may vary. Users of this document should verify the applicable data for their specific environment.

Information concerning non-IBM products was obtained from the suppliers of those products, their published announcements or other publicly available sources. IBM has not tested those products and cannot confirm the accuracy of performance, compatibility or any other claims related to non-IBM products. Questions on the capabilities of non-IBM products should be addressed to the suppliers of those products.

34 Maintain an ILE RPG application using Remote System Explorer


All statements regarding IBM’s future direction or intent are subject to change or withdrawal without notice, and represent goals and objectives only.

Copyright license

This information contains sample application programs in source language, which illustrates program-ming techniques on various operating platforms. You may copy, modify, and distribute these sample programs in any form without payment to IBM, for the purposes of developing, using, marketing or distributing application programs conforming to the application programming interface for the operat-ing platform for which the sample programs are written. These examples have not been thoroughly tested under all conditions. IBM, therefore, cannot guarantee or imply reliability, serviceability, or function of these programs.

Each copy or any portion of these sample programs or any derivative work, must include a copyright notice as follows:

© (your company name) (year). Portions of this code are derived from IBM Corp. Sample Programs. © Copyright IBM Corp. 1992, 2009. All rights reserved

Trademarks and service marks

The following terms are trademarks or registered trademarks of International

Business Machines Corporation in the United States, other countries, or both. • IBM

• iSeries

• Rational

• RPG/400

• System i

Intel® and Pentium® are trademarks of Intel Corporation in the United States, other countries, or both.

Microsoft, Windows, Windows NT® and the Windows logo are trademarks of Microsoft Corpora-tion in the United States, other countries, or both.

Java and all Java-based trademarks are trademarks of Sun Microsystems, Inc. in the United States, other countries, or both.

UNIX is a registered trademark of The Open Group in the United States and other countries.

Linux is a registered trademark of Linus Torvalds in the United States, other countries, or both.

Other company, product or service names may be trademarks or service marks of others.

35

Build Web 2.0 application using EGL

Documents

Transcript of Build Web 2.0 application using EGL