Chapter 8. Customizing the sample application 201
Figure 8-5 shows the result of these changes.
Figure 8-5 Refined logon panel
We have now completed the first change to a JSP file.
8.2 Working with record JSPs
This section discusses how you can enhance the application area of a WebFacing application
8.2.1 Understanding how WebFacing builds browser pages at run time
To explain how WebFacing forms run-time browser pages, we use the main menu
(FRSMAINX) from our sample application. When the JSPs are processed at run time, the
result is an HTML page that is sent to the browser.
The easiest way to analyze the page is to run the application first using a Web browser and
then to paste the HTML source of it into a new empty HTML file in Page Designer. Figure 8-6
shows the main menu in an Internet Explorer window.
202 Mastering the IBM WebFacing Tool
Figure 8-6 Run-time page in browser
From the browser window, you can see your run-time page in Page Designer, for example, by
following these steps:
1. Start your WebFacing application.
2. In Internet Explorer, right-click in the browser window and select View Source to move the
HTML source into a notepad.
3. In the notepad, complete these tasks:
a. Select Edit
b. Select Edit
→Copy to move the HTML source onto the system clipboard.
4. Open an existing HTML file in Page Designer.
5. In the Page Designer’s source view, complete these tasks:
a. Select Edit
b. Select Edit
Figure 8-7 shows the result of these operations. The comparison of the run-time browser
pages and the JSPs helps you to understand how the JSP tags are populated with data by
the servlets. This also helps you to find the relationship of the JSP tags and the actual display
record format fields that are used during run time.
Chapter 8. Customizing the sample application 203
Figure 8-7 Run-time page in the Design view of Page Designer
In a typical 5250 application the displays are quite often combinations of several display file
record formats. Therefore, more than one record JSP may be created by the IBM WebFacing
Tool shown in the browser window at the same time. In addition the IBM WebFacing Tool
actually adds a couple more JSPs to the JSPs that are generated through the conversion of
The basic layout of a browser page is formed by the PageBuilder.jsp. This brings the selected
style into the browser page. CmdKeys.jsp positions the buttons for the active command keys
on the browser page. The contents of CmdKeys.jsp does not depend on the DDS, since the
WebFacing style determines the size and position of the buttons.
In our examples, we use the avenue WebFacing style. You can see the command buttons in a
vertical bar visible on the left. The area that is visible in our example as upper horizontal bar
and left vertical bar is called the
chrome area. For more information about the chrome area
and how to change it, see 7.3.3, “Modifying the chrome area” on page 126.
The area that is highlighted by a frame in Figure 8-7 is called the
application area. This area
is populated during run time using JSPs generated from the 5250 display record formats.
The black area with one input field at the lower part of the application area is the menu’s
command and error message area. The area is not a part of the user-written menu DDS