...

Build Web 2.0 application using EGL Skill Level: Intermediate Executiv

by user

on
Category: Documents
1

views

Report

Comments

Transcript

Build Web 2.0 application using EGL Skill Level: Intermediate Executiv
Build Web 2.0 application using EGL
Build Web 2.0 application using EGL
Skill Level: Intermediate
Reginaldo Barosa Executive IT Specialist – IBM Boston
April, 2010
© 2010 IBM Corporation
1
Build Web 2.0 application using EGL
Abstract
IBM® Rational® Business Developer , IBM® Rational® Developer for Power Systems
Software or IBM® Rational® 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 continues 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/)
© 2010 IBM Corporation
2
Build Web 2.0 application using EGL
Before you start
Learn what to expect from this tutorial and how to get the most out of it.
Be sure that you have started the System z Sandbox and that IBM® Rational® Developer
for System z is running under the Windows in the system z Sandbox.
About this series
Walk through this scenario and others online as part of the Enterprise Modernization
Sandbox for System z
About this tutorial
This tutorial takes you through the steps of using the IBM Rational Developer for System z
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.
Objectives
You will learn how to
•
•
•
•
•
•
Build Rich UI components using the wizards available in IBM Rational Developer for System z
with EGL 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 access data bases using Web services also created
with EGL.
Prerequisites
You must have some basic programming concepts.
© 2010 IBM Corporation
3
Build Web 2.0 application using EGL
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 access 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.
Disconnect from z/OS System
When The VMWARE session is started you will be connected to z/OS system and you will see the
z/OS Projects perspective..
1. Because in this tutorial you will not use z/OS, you can disconnect to the z/OS system.
Right click on dallas and select disconnect
2. Select Window > Open Perspective > Other, as shown in Figure 2.
Figure 2. Using the Rich UI perspective
© 2010 IBM Corporation
4
Build Web 2.0 application using EGL
3. Select EGL Rich UI and click OK, as shown in Figure 3.
Figure 3. Selecting the EGL Rich UI perspective
4. The EGL Rich UI perspective will open. From this page, you will define a new EGL Rich UI
project. To create an EGL Rich UI project, select File > New > Project as shown in Figure 4.
Figure 4. Creating a Project..
5. Type egl select EGL Project and click Next as seen in Figure 5
Figure 5. Selecting the EGL project wizard
6. Type DEMO select Rich UI Project as seen in Figure 6 and click Next>.
Figure 6 Creating a project named DEMO
© 2010 IBM Corporation
5
Build Web 2.0 application using EGL
7. 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
Figure 7. Creating EGL Rich UI Project
8. The EGL Rich UI project named DEMO will be created. Note also that the wizard automatically
create another project named com.ibm.egl.rui_1.0.1.
This second project will be referred by your DEMO project.
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 showed in the first part you will have a simple Rich UI screen as shown in
Figure 1.
9. You will now create the EGL code that will include both the Rich UI components and the logic to
make a simple calculation.
Right click on EGLSource and select New > Rich UI Handler as shown in Figure 9.
Figure 9. Creating a Rich UI Handler
© 2010 IBM Corporation
6
Build Web 2.0 application using EGL
10. Type demo as Package name and Calculator as EGL source file name and click
Finish. As shown in Figure 10
Figure 10. Creating an EGL Handler named Calculator
11. The EGL Rich UI editor will open with a blank page.
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
12. 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
© 2010 IBM Corporation
7
Build Web 2.0 application using EGL
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 Developer for System z 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 property. 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 elements 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 dragand-drop operations, 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.
© 2010 IBM Corporation
8
Build Web 2.0 application using EGL
13. You will now add some Rich Ui controls to the blank page.
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 that 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.
14. Figure 13. Dragging TextLabel Widget
15. The New Variable window will pop up. 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.
16. 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.
As you have done before, 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
© 2010 IBM Corporation
9
Build Web 2.0 application using EGL
17. 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
18. .Note that a doted 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.
19.Click on the Source tab and you will see the EGL generated code as shown in Figure
17. Please spend few minutes to understand this code.
Some points to note:
- initialUI specifies which widgets are children of the initial, DOM tree document
element.
- 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 .
© 2010 IBM Corporation
10
Build Web 2.0 application using EGL
20. Since this probably is your first EGL Rich UI code, you can combine the EGL Rich UI
editor and the EGL editor. This way at any visual change you will see the EGL code
generated. This complements the features in the Rich UI editor by opening a single
file in both the EGL Rich UI editor and the EGL editor.
In our example, right click on Calculator.egl and select EGL Editor as shown in
Figure 18.
Figure 18. Opening EGL Editor .
21. Click on the Design tab in the EGL Rich UI editor view and using the mouse drag
and drop the second EGL editor view under this Design view.
Now you will have the Calculator.egl displayed in two ways as shown in Figure 19.
At the top is the Design tab of the Rich UI editor, along with a palette that lists the
available Widget types.
At the bottom is the EGL editor. Your work in either editor affects the same file and
is reflected in the content displayed in the other editor.
Figure 19. Combining EGL Rich UI editor and the EGL editor.
© 2010 IBM Corporation
11
Build Web 2.0 application using EGL
You will now start to add more EGL widgets.
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
22. 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
23. 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
© 2010 IBM Corporation
12
Build Web 2.0 application using EGL
24. 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.
25. 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
26. Accept TextLabel2 as default name clicking OK. Again, this will be just a text label,
you will not use this widget to set content. Note in the Calculator.egl TextLabel1 is
created as a child of MAINBox as shown in Figure 25
© 2010 IBM Corporation
13
Build Web 2.0 application using EGL
27. You will need now another entry field widget. Drag the widget TextField and drop
inside the MAINBox as shown in Figure 25. Again 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
28. 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..
29. 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. Its now time to start changing the Widgets properties.
Figure 27. The design page after adding four widgets.
© 2010 IBM Corporation
14
Build Web 2.0 application using EGL
30. You will now change the properties of each widget created.
Select the TextLabel on top of the page and click on the Properties view. Type ADD
Machine as text (in place of TextLabel) type 20 as fontSize, select bold as
fontWeight and press enter . The results are shown in Figure 28.
Figure 28. Changing the property for the title label.
31. Select the MAINBox (you will see a doted 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.
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
© 2010 IBM Corporation
15
Build Web 2.0 application using EGL
32. 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.
33. You still need to change the two TextLabel. 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.
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
34. You still need to add the labels for the results field. Since this field is not updatable you just need
to add two TextLabels.
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.
Accept TextLabel3 as variable name and click OK.
© 2010 IBM Corporation
16
Build Web 2.0 application using EGL
35. 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
36. Type RESULTTextLabel as Variable name and click OK. This must be a recognizable
name since you will store the results there.
37. 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
Accept Button as variable name and click OK.
38. You need to change the properties of those labels and the button and create an
event when the button is clicked.
Click on TextLabel3 (the first without name) and using the Properties view change
the text to Result… and press enter.
39. Click on RESULTTestLabel and using the properties view change the text to few
spaces.
© 2010 IBM Corporation
17
Build Web 2.0 application using EGL
40. 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.
41. 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.
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.
42. Having the button Add Fields selected, go to the Properties view click on Events tab, select
onClick and click the button with the + . 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
© 2010 IBM Corporation
18
Build Web 2.0 application using EGL
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
44. 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. Click on the Preview tab. This is shown in Figure 38.
45. Figure 38. Preview of Rich UI controls
© 2010 IBM Corporation
19
Build Web 2.0 application using EGL
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 second EGL editor and click on the Source Tab
46. 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
47. 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.
48. Figure 40. Using code assist to create the EGL business logic
© 2010 IBM Corporation
20
Build Web 2.0 application using EGL
49. 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
50. 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.
51. At this point you are ready to test the application.
© 2010 IBM Corporation
21
Build Web 2.0 application using EGL
Test the Rich Ui application
Now you can test the EGL Rich UI code.
52. Click on Preview tab and you will see what is shown in Figure 43.
Figure 43. Rich UI application Preview.
53. 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 and event associated with the Field1 that would verify if
there is no exceptions when the focus is lost or when this field is changed. Using the
Rational developer for System z with EGL 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 configuration 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
© 2010 IBM Corporation
22
Build Web 2.0 application using EGL
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
54. 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.
55.Click on Preview page again. Before starting the EGL Rich UI debug you need to refresh the
Web Page. This can be done clicking in the Refresh icon as shown in Figure 46.
Figure 46. Refreshing the Web Page before the debug.
56. 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.
57. When a debug session starts, the application runs in an external browser, and you can edit your
code, set breakpoints, and inspect variables.
In the Debug perspective, you perform the usual set of debug activities (Step Into, Step Over, and
so on), as described in the Rational developer for System z with EGL help under the topic EGL
debugger commands in the EGL Programmer's Guide.
When the browse 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.
© 2010 IBM Corporation
23
Build Web 2.0 application using EGL
58. 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.
You might also use the icons below:
Notice that an external browser is being used and this browser must support JavaScript.
Use F6 (Step Over) to follow the code being executed.
Figure 48. EGL Rich UI debug in action
59. You can end a debugging session by clicking the red icon
When terminated, close the Debug perspective.
in the Debug perspective.
60. After the debugging session ends and you closed the debug perspective, you are back to 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.
61. 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
previously generated JavaScript™ output.
Rich UI supports the following target environments:
1. WebSphere Application Server
2. Apache Tomcat
3. Local directory
© 2010 IBM Corporation
24
Build Web 2.0 application using EGL
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
immediately 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.
62. To prepare to use the Rich UI deployment wizard, do as follows:
Click Window -> Preferences. The Preferences dialog is displayed.
63. Expand EGL and click Rich UI
64. Set the dropdown list to Deployment.
65. Click OK. A message is displayed to indicate that regeneration is required.
66. Click OK. The effect is that all the generated JavaScript™ in your workspace will be available for
Deployment.
67. 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.
In the Project Explorer, right click on the Calculator.egl and select Deploy EGL Rich UI
Application as shown in Figure 49.
68. Figure 49. Deploying an EGL Rich UI Application
69. Be sure that Calculator.egl is specified. 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 configuration
© 2010 IBM Corporation
25
Build Web 2.0 application using EGL
70. Figure 50. EGL Rich UI Application for Local Deployment
71. The Deployment Details dialog is displayed.
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 create an output for the
English locale, the file will be named Calculator-en_US.html.
Click Finish.
Verify the name that will be created and click OK. Note that the directories along with its contents
will also be created.
Figure 51. EGL Rich UI Application for Local Deployment
© 2010 IBM Corporation
26
Build Web 2.0 application using EGL
72. Figure 52 show some of the components created by the deployment.
Figure 52. EGL Rich UI Application code deployed
73. Open the folder created and you will see the components created. Double click on Calculatoren_US.html created and you will see the application running on your favorite web browser Type
two valid values like 345.67 and 78.90 and click the button and you swill see the results as shown
in Figure 53.
74. Figure 53. EGL Rich UI Application working in the Internet Explorer browser
© 2010 IBM Corporation
27
Build Web 2.0 application using EGL
Extend the application to validate input fields.
The Application that you complete 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.
75. 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”?
76. Return the EGL Rich UI workspace to development mode.
Click Window -> Preferences. The Preferences dialog is displayed. Expand EGL and click Rich
UI . Set the dropdown list to Development and click OK. A message is displayed to indicate that
regeneration is required and you must click OK to have the Rich Ui applications regenerated in
development mode.
77. 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. 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 and event to FIELD1TextField.
78. 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.
© 2010 IBM Corporation
28
Build Web 2.0 application using EGL
Figure 55. EGL coded added to perform numeric validation.
79. Now using the Preview tab type an invalid data on Field1. When you move the cursor to Field2
(Field 1 loses focus) 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 and proceed to the second part if you want to see a
real application using Web 2.0 and EGL Services.
Figure 56. Typing an invalid data.
80. Close the external browser that was opened during the debug.
© 2010 IBM Corporation
29
Build Web 2.0 application using EGL
Solution location
If you could not complete the tutorial, do not get frustrated. If you missed one step or typed
a wrong name, you would have problems.
In that case, you can load the solution to your workspace by selecting File > Import >
Project Interchange and using the solution located at
C:\EGL_POT\RichUI_Add_fields\Demo_Add_complete.zip.
Resources
Learn
•
Get a more in-depth look at EGL visiting the EGL Café
•
Find out more about IBM Enterprise Modernization Solutions.
•
Learn more about IBM Rational Developer for System z.
•
Subscribe to the Rational Edge newsletter for articles on the concepts behind effective software
development.
•
Watch Rational developer for System z Demos.
Get products and technologies
•
Access an evaluation version of Rational Developer for System z .
•
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®.
Discuss
•
Participate in the Rational Developer for System z forum.
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. ten 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
© 2010 IBM Corporation
30
Fly UP