Create and configure the Web page
Now it is time to create the Web UI.
It provides the input and output fields for the data that is sent to the RPG program and received from the program. It also provides a button to invoke the EGL function that calls the GETDATAE RPG program.
- Right-click the WebContent directory and select New > Web page, as shown in Figure 26.
Figure 26. Create a new Web page
In the New Web Page dialog shown in Figure 27:
Type a name for your Java™Server Pages (JSP) file. In this example, the File Name is
- Click Finish.
Figure 27. Select a name, location, and template
The Page designer opens. Perform the following steps, as shown in Figure 28.
- Make sure that the Design view is active (the tab at the bottom of the designer).
Customer inquiryin the white space in the page designer,
- Click the text that you just wrote to select it.
- Click the Properties tab at the bottom of the screen.
- Adjust the appearance of Heading 2.
- Save by clicking Ctrl+S.
Figure 28. The Page designer
Now you write some EGL code in the page handler file, as shown in Figure 29.
- Right-click anywhere in the white space on the Web page and Select Edit Page Code.
Figure 29. Write EGL code
The EGL Pagehandler appears. The pagehandler is a type of EGL program that controls interaction with a JSF Web page.
Since your RPG program contains three parameters, you must define some variables to hold the data when interacting with the program.
You will insert these variables immediately following the:
Note: The UIViewRoot is an EGL special record variable that provides access to the various parts of the Web page.
- Figure 30 illustrates what your code should look like after you have declared the three variables.
You are using the following variables
cinputfor the customer number that gets passed to the RPG program. It is of type
CUSTNO(which you got from the
Feedbackis a 20-character variable.
cdsis a structure of type
Customl3, (the basicrecord that you created previously).
Tip: Make use of content assist (Ctrl+Spacebar) to find the correct datatypes, as shown in Figure 30.
Figure 30. Using content assist
Figure 31 shows your variables (
Figure 31. Variables
Now you need to create a simple EGL function with a couple of statements to call your RPG program.
- Write the function as shown in Listing 2.
Here is a bit more information on the code that you see in the pagehandler program:
Figure 32 illustrates the completed pagehandler code required to call the RPG Program GETDATAE. As you can see, the code is very intuitive and simple.
Listing 2. Completed code
function callRPG() syslib.writeStdout("before call"); syslib.setRemoteUser("egl4rpg", "egl4you"); call "GETDATAE" (cinput, cds, feedback); syslib.writeStdout("after call"); end
Figure 32. Completed code
In this program, as in all EGL JSF Web programs, there are two functions automatically added when a new JSFhandler program gets created:
These functions are invoked when the page is loaded. You will not use these functions in this program, because you have no upfront processing to do when loading your Web page. Therefore, leave these functions empty.
In the UI, after a user enters data into the input field cinput, you will add a button that allows the user to invoke the
callRPG you added two statements that write to
Stdout to show in the IBM® WebSphere® Application Server console that the call is initiated, and that it has been finished. These statements are just there for informational purposes and can be removed in real code.
callRPG you use the
syslib.RemoteUser(“userid”, “password”) built-in EGL function to set constants for the User ID and Password for the logged in user. You would normally write a routine that stores user information in a session or other persistent area of storage, instead of using constants in your code. This routine is simplified for illustration purposes.
Note that the Java Toolbox used to access your System i5 requires that you authenticate prior to every call to IBM I, ensuring security and integrity of the system.
Finally, you have a simple call statement:
call “GETDATAE” (cinput, cds, feedback);
In this statement, you specify the program name that you had previously defined in the EGL build file’s Linkage options, as well as the parameters to pass.
You can now create the Web form to capture input from the user, call the RPG program, and display the result.
Click the Page Data tab in the lower left corner of the workbench to select it, as shown in Figure 33.
- Expand JSFHandler
- Expand Data
- Expand Actions
Figure 33. Page Data tab
Under the Data node, you can see the three variables that you created in the pagehandler.
Under the Actions node, you can see the
callRPG function that you created.
cinputvariable, as shown in Figure 34.
- Drag it on to the Web design area below the page title.
Figure 34. Drag the variable to the design area
A dialog displays, indicating that you are about to create a new control on the page, as shown in Figure 35.
- Be sure that the Updating an existing record radio button is selected. This will default the Control Type to Input field.
Click the label area and change the label to
Enter customer number:
- Click the Options button.
Figure 35. Insert Control dialog
- Clear both the Submitbutton and Deletebutton check boxes, as shown in Figure 36. You will create a call button in the next step.
- Click OK.
- Click Finish on the main dialog.
Figure 36. Do not create buttons
Now, you will add the button to invoke the
- Make some space beneath the input field: position the cursor before the error message control, and then press Enter a couple of times.
To create a button that, when a user clicks it, invokes your
callRPG function, in the data view:
callRPGfunction in the Page Data view.
- Drag it below the input field in the page designer, as shown in Figure 37.
Figure 37. Create a button to invoke the callRPG function
Now a button gets created on the Web page. This button is bound to the function in the page handler. One last step, and you are ready to run your application.
Drag the variable
cdsfrom the Page Data view to the Web page below the button, as shown in Figure 38.
Figure 38. Drag cds to the Web page
The Configure Data Controls dialog appears, as shown in Figure 39.
- Select the Displaying an existing record (read only) radio button.
This changes the control type for all fields to output.
- Click Finish.
Figure 39. Configure Data Controls dialog
Figure 40 shows the completed Web page.
- Save your page (Ctrl+S).
- Right-click the page and select Run on server.
Figure 40. Completed Web page
If a dialog comes up to select an application server, perform these steps:
- Select WebSphere Application Server v6.1.
- Select the Set server as project default check box.
- Click Finish.
You should see your Web page in the default browser, as shown in Figure 41.
Figure 41. Web page in browser
Now, enter a valid customer number (for example,
0010100) as shown in Figure 42.
- Click callRPG.
Figure 42. Enter a valid customer number
The data should appear on the page.