Using Your Own Sign-On Dialog | Understanding the IBM WebFacing Tool: A Guided Tour (IBM Illustrated Guide series)

If you do not like the sign-on dialog that comes with the WebFacing Tool, you can use your own dialog and instruct the WebFacing run time to invoke yours instead of the default. A WebFacing project comes with a sample logon.html file, which you can modify to a style that you prefer in your environment. In this section I show you how to modify the dialog. Afterward, I show you how to specify that you want to use your own sign-on dialog.

Changing the logon.html File

In the WebFacing Projects view,

Expand the wflabxx project node, if it is not already expanded.

A logon.html file displays beneath the project, as shown in Figure 10.5. This file is a sample that displays how the default WebFacing logon dialog is built, but it is there for you to customize. The file comes with the HTML tags that you need if you want to incorporate the WebFacing logon function, but not the appearance, into your own environment. You can copy these HTML statements into your own HTML page.

Figure 10.5: WebFacing Projects view with logon.html file

Note	If you use the Struts run time, in the advanced edition of the product, the WebFacing Tool uses the logon.jsp file and not the logon.html file. Therefore, you would use logon.jsp during this exercise instead of logon.html.

Using Page Designer to Add a Heading to the Logon Page

You will use a different Development Studio Client workbench tool to make the dialog more attractive. This tool is called Page Designer.

To invoke Page Designer (refer to Figure 10.6),

Figure 10.6: Pop-up menu for logon.html file

Right-click logon.html in the WebFacing Projects view.
Select Open With from the pop-up menu.
Select Page Designer from the pop-up submenu.

Page Designer opens on the upper right-hand side of the workbench as shown in Figure 10.6.

First I want you to add your company name as a dialog heading. In the Page Designer window, click on the Design tab, as shown in Figure 10.7, to make sure you are on the Design page.

Figure 10.7: Page Designer with WebFacing logon

Click in the logon dialog just before the string Please type your user name and password , as shown in Figure 10.8.

Figure 10.8: Position cursor and click
Select Insert from the workbench menu bar.
Select Paragraph from the pull-down menu.
Select Heading2 from the submenu as shown in Figure 10.9.

Figure 10.9: Menu structure to add Heading2 tag to logon dialog

A box opens on top of the dialog.

In the box, enter your company name.

If you have a company name that takes up more than one line, you can widen the logon box:

Move the cursor on top of any of the black rectangles on the side of the logon frame. The cursor shape will change to a two-headed arrow, as shown in Figure 10.10.

Figure 10.10: New logon dialog, with cursor shape changed to drag-enabled
Drag the side of the frame to make it wider or narrower.

You might also want to change the color of your new logon dialog. In the next section, I will show you how to change the color and then test the new dialog.

Using Page Designer to Change the Background Color of the Logon Page

In Page Designer,

Right-click the background of the logon frame,
Select Attributes from the pop-up menu as shown in Figure 10.11.

Figure 10.11: Pop-up menu in Page Designer

You will see an Attributes editor display in the lower right area of the workbench, as shown in Figure 10.12.

Figure 10.12: Attributes editor in workbench

In the Attributes editor,

Scroll down to the bottom of the Table page, as shown in Figure 10.13.

Figure 10.13: Selecting yellow for background color of logon dialog
Select the arrow on the Color combination box to open the list.
From the list of colors, select Yellow, or whatever background color you like, for your logon page.

Tip	You could use the color picker push button to point to an area on your desktop that has a good color, and then click on that area to apply the color.

Now your logon frame has an attractive background color. Accordingly, the color in the Page Designer window has been adjusted.

To verify how the logon page will look in a browser, you can preview the change.

Select the Preview tab in Page Designer, as shown in Figure 10.14.

Figure 10.14: Logon page in Preview mode

Another view in Page Designer is the Source view, which displays the source for your page in an editor.

Click on the Source tab.

The HTML source editor displays the current page source, as shown in Figure 10.15.

Figure 10.15: Source editor window in Page Designer

If you wanted to invoke the WebFacing logon action from a different dialog, you would need to copy the source into your file.

The file name for your WebFacing logon page must be logon.html. This is the file the WebFacing run time sends to the browser.

In Chapter 20 I show some alternatives to control the invocation of your WebFaced applications.

You are ready to test the new logon page.

Save your Page Designer changes by clicking the Save push button on the work-bench toolbar as shown in Figure 10.16.

Figure 10.16: Save push button in workbench toolbar
Close Page Designer by clicking the X on its window bar as shown in Figure 10.17.

Figure 10.17: Closing Page Designer

Changing the WebFacing Properties to Use a Different Logon Page

In the WebFacing Projects view,

Right-click your wflabxx project.
Select Properties from the pop-up menu.

The project properties dialog displays, as shown in Figure 10.18.

Figure 10.18: WebFacing project properties dialog

In the project properties dialog,

Select the Use user-defined signon page check box.
Press the OK push button at the bottom of the properties page.

Now you can try out the new logon page.

Running the Web Application

As before, run your application in the WAS test environment.

Click the Order Entry link.

You will see the new authentication dialog (see Figure 10.19).

Figure 10.19: The new logon dialog

If the new authentication dialog does not appear, you need to restart the WebSphere test environment as described earlier in this chapter. Some of the files might be cached and therefore need to be reloaded in order to display updates.

Specify your User Name and Password.
Click the Logon push button on the authentication dialog.

The application will run as before, as long as the job environment for the user ID you specified is set up correct for this application.