List of Figures | Understanding the IBM WebFacing Tool: A Guided Tour (IBM Illustrated Guide series)

Chapter 1: WebFacing Tool Introduction

Figure 1.1: Product packaging of Development Studio Client Version 5
Figure 1.2: Graphical representation of a three-tiered Web application
Figure 1.3: Interactive model
Figure 1.4: WebFacing model
Figure 1.5: How it all works
Figure 1.6: Dialog to reset workspace
Figure 1.7: Opening the Remote System Explorer perspective
Figure 1.8: Closing the J2EE perspective
Figure 1.9: Sample of Windows Explorer with workspace directory in Version 4.0
Figure 1.10: Windows Start menu with Development Studio Client shortcuts

Chapter 2: ExerciseA Look at the Green-Screen User Interface

Figure 2.1: Order Entry application first panel
Figure 2.2: UIM help panel for customer number
Figure 2.3: Help for requesting a customer list
Figure 2.4: Detailed help for specifying a valid customer number
Figure 2.5: Extended Help panel for customer number
Figure 2.6: Help for Order number
Figure 2.7: Customer list panel
Figure 2.8: Order entry panel with detailed customer data
Figure 2.9: Part selection list
Figure 2.10: Specify parts quantity
Figure 2.11: One item added to order

Chapter 3: ExerciseCreating a WebFacing Project

Figure 3.1: Starting WebSphere Development Studio Client Version 5
Figure 3.2: Dialog for workspace selection
Figure 3.3: Initial window of Development Studio Client
Figure 3.4: Workbench menu structure for opening a perspective
Figure 3.5: Select Perspective dialog
Figure 3.6: Menu structure to create a new WebFacing project
Figure 3.7: WebFacing project wizard, first page
Figure 3.8: Page to select J2EE level
Figure 3.9: Selecting DDS source members
Figure 3.10: New personal profile dialog
Figure 3.11: New connection dialog, second page
Figure 3.12: Log-on dialog to access iSeries server
Figure 3.13: WebFacing project wizard, showing expanded library WFLABXX
Figure 3.14: Selecting UIM source members
Figure 3.15: Specify CL commands page
Figure 3.16: WebFacing project wizard, style selection page
Figure 3.17: WebFacing project wizard, last page
Figure 3.18: WebFacing Projects view with wflabxx project icon
Figure 3.19: Tree view of new WebFacing project

Chapter 4: Converting Selected Source Members

Figure 4.1: Open perspectives on workbench sidebar
Figure 4.2: Navigator view active
Figure 4.3: WebFacing project ready to convert
Figure 4.4: Conversion progress dialog
Figure 4.5: Conversion log
Figure 4.6: The Overview page
Figure 4.7: The Referenced Keywords Page
Figure 4.8: The DSPF Conversion Log page
Figure 4.9: The Uim Help Conversion Log Page

Chapter 5: Running the Web-Enabled Application

Figure 5.1: Pop-up menu for WebFacing project icon with Run on Server selected
Figure 5.2: Server Selection dialog
Figure 5.3: Browser with index page
Figure 5.4: WebFacing Projects view with Navigator tab highlighted
Figure 5.5: Expanding the Servers folder
Figure 5.6: The WebSphere Version 4.0 properties dialog
Figure 5.7: The Environment Options page
Figure 5.8: Add System Property dialog
Figure 5.9: Saving the changes
Figure 5.10: Changing the Module visibility to MODULE
Figure 5.11: Module visibility
Figure 5.12: Closing the editor dialogs
Figure 5.13: The Servers page
Figure 5.14: Pop-up menu for application server
Figure 5.15: First application page in browser window
Figure 5.16: Help panel error message in built-in workbench browser
Figure 5.17: Customer selection list
Figure 5.18: Order Entry Application screen with customer details
Figure 5.19: Parts selection list
Figure 5.20: Order Entry Application screen with quantity specified
Figure 5.21: Internet Explorer with index.html page for wflabxx
Figure 5.22: Help panel in browser

Chapter 6: Changing the Web User Interface

Figure 6.1: Pop-up menu for DDS source member
Figure 6.2: CODE Designer select group SCREEN1
Figure 6.3: CODE Designer
Figure 6.4: Selecting the subfile's second column
Figure 6.5: Web settings list for CUSTOMER field
Figure 6.6: Web settings for the hyperlink
Figure 6.7: Web Settings Visibility page
Figure 6.8: Group SCREEN1 and list of record formats
Figure 6.9: CODE Designer switching record formats in a group
Figure 6.10: Subfile control record format in focus
Figure 6.11: Using the Visibility Web setting to hide a constant
Figure 6.12: Changing the instructions with Web settings
Figure 6.13: WebFacing Projects view, pop-up menu for DDS source member
Figure 6.14: Customer selection window with links

Chapter 7: Changing the Style of the Web User Interface

Figure 7.1: WebFacing project with pop-up menu
Figure 7.2: WebFacing project properties
Figure 7.3: DDS field display properties
Figure 7.4: Font dialog
Figure 7.5: New highlight attribute mapping and non-CUA command key description
Figure 7.6: The Navigator tab in the WebFacing perspective
Figure 7.7: Navigator view with apparea.css file
Figure 7.8: Editor dialog with apparea.css source located at the .wf_hi class
Figure 7.9: Highlighted class color changed
Figure 7.10: Style change example in Style sheet editor
Figure 7.11: Color tab example
Figure 7.12: New color attribute applied to highlighted style class

Chapter 8: Adding Command Key Rules and Labels

Figure 8.1: Function key description on customer selection panel
Figure 8.2: Pop-up menu for WebFacing project
Figure 8.3: WebFacing Properties dialog
Figure 8.4: Command key recognition patterns dialog
Figure 8.5: Customer selection window without command key label
Figure 8.6: Customer selection window with push button added
Figure 8.7: Missing label for command key CA12
Figure 8.8: The Properties menu option for the WebFacing project
Figure 8.9: Command key button labels
Figure 8.10: Push button with fixed label

Chapter 9: Working with Additional Style Properties

Figure 9.1: The WebFacing project properties dialog
Figure 9.2: Window properties page
Figure 9.3: Window properties page with Body selection
Figure 9.4: Subfile properties page
Figure 9.5: Color chooser for WebFacing properties
Figure 9.6: Properties page for subfile even rows
Figure 9.7: Command keys properties page
Figure 9.8: New window and subfile styles applied

Chapter 10: Adding Authentication

Figure 10.1: Project properties dialog
Figure 10.2: Application properties page
Figure 10.3: Restarting the WAS test environment
Figure 10.4: WebFacing Tool authentication dialog
Figure 10.5: WebFacing Projects view with logon.html file
Figure 10.6: Pop-up menu for logon.html file
Figure 10.7: Page Designer with WebFacing logon
Figure 10.8: Position cursor and click
Figure 10.9: Menu structure to add Heading2 tag to logon dialog
Figure 10.10: New logon dialog, with cursor shape changed to drag-enabled
Figure 10.11: Pop-up menu in Page Designer
Figure 10.12: Attributes editor in workbench
Figure 10.13: Selecting yellow for background color of logon dialog
Figure 10.14: Logon page in Preview mode
Figure 10.15: Source editor window in Page Designer
Figure 10.16: Save push button in workbench toolbar
Figure 10.17: Closing Page Designer
Figure 10.18: WebFacing project properties dialog
Figure 10.19: The new logon dialog

Chapter 11: Display File Mapping

Figure 11.1: WebFacing project folder structure
Figure 11.2: WebFacing project with .invocation file
Figure 11.3: Editor window with .invocation file
Figure 11.4: Workbench File menu structure
Figure 11.5: Servers tab and pop-up menu
Figure 11.6: Console view with server confirmation message
Figure 11.7: WebFacing run-time error message, when .jsp file cannot be found
Figure 11.8: WebFacing DDS object mappings dialog
Figure 11.9: Changed mapping rule for member SLTCUSTD

Chapter 12: Deleting WebFacing Projects

Figure 12.1: New project list to create new WebFacing project
Figure 12.2: Specify project name and EAR name
Figure 12.3: Selecting DDS source members
Figure 12.4: Specify CL commands page
Figure 12.5: Message dialog to repair server configuration
Figure 12.6: Servers view in workbench with Restart option on pop-up menu
Figure 12.7: Select Delete option from pop-up menu
Figure 12.8: Delete confirmation message box
Figure 12.9: Repair Server Configuration dialog
Figure 12.10: Navigator view with wflabxxEAR
Figure 12.11: Message dialog that server did not start correctly
Figure 12.12: Navigator view and Application Deployment Descriptor
Figure 12.13: Publishing error
Figure 12.14: Navigator view with defaultServer.wsi file
Figure 12.15: Warning that configuration problems exist
Figure 12.16: Save confirmation message
Figure 12.17: Servers view in workbench with pop-up menu

Chapter 13: Enhancing index.html using Web Tools

Figure 13.1: WebFacing project with index.html file
Figure 13.2: Page Designer displaying the design page
Figure 13.3: Adding some space in the upper half of the index.html page
Figure 13.4: Page Properties on pop-up menu in Page Designer
Figure 13.5: Page Properties dialog
Figure 13.6: Page Designer, linking a style to the Web page
Figure 13.7: Index.html page with style properties applied
Figure 13.8: Tools menu with WebArt Designer
Figure 13.9: WebArt Designer dialog
Figure 13.10: Logo Wizard dialog
Figure 13.11: Logo Wizard with Select Color page
Figure 13.12: Logo Wizard with Select Outline page
Figure 13.13: Logo Wizard with Select Text Effect page
Figure 13.14: WebArt Designer with new logo object
Figure 13.15: WebArt Designer save dialog
Figure 13.16: Save Wizard with Specify Objects page
Figure 13.17: Save Wizard with Select File Format page
Figure 13.18: Save Wizard with GIF Format page
Figure 13.19: Save As dialog
Figure 13.20: Directory structure showing default workspace location
Figure 13.21: Message dialog when saving object as GIF file format
Figure 13.22: GIF Attribute Settings dialog
Figure 13.23: View of Web Content directory with mylogo.gif.
Figure 13.24: Dragging the mylogo.gif file onto the design page
Figure 13.25: Selecting to insert a Heading 1 tag
Figure 13.26: Web page with logo and title
Figure 13.27: Dragging a picture onto the design page
Figure 13.28: Design window with picture added
Figure 13.29: Web page with Heading 3 frame
Figure 13.30: Selection of the Marquee option
Figure 13.31: Insert Marquee dialog
Figure 13.32: Design page with Header 3 text
Figure 13.33: Page Designer design page with completed page
Figure 13.34: Web page shown in browser, with text moving
Figure 13.35: Selecting color choice for selected text area
Figure 13.36: Text to be deleted from the Web page
Figure 13.37: Completed Web page in Preview window
Figure 13.38: Opening the Web perspective
Figure 13.39: Select Perspective dialog
Figure 13.40: Selecting the Copy action
Figure 13.41: Folder Selection dialog
Figure 13.42: Page Designer with three tabs, one of them the Design tab
Figure 13.43: Adding blank space to the Web page
Figure 13.44: Changing the text for the Web page
Figure 13.45: Linking a style to the Web page
Figure 13.46: index.html page with style properties
Figure 13.47: Starting Logo Wizard from Insert menu
Figure 13.48: Adding text for the logo
Figure 13.49: Logo Wizard Specify Text page
Figure 13.50: Logo Wizard Select Color page
Figure 13.51: Logo Wizard Select Outline page
Figure 13.52: Logo Wizard Select Text Effect page
Figure 13.53: Create Logo wizard, ready to Finish
Figure 13.54: Resizing the logo in Page Designer
Figure 13.55: Menu structure to insert a Heading 1 tag
Figure 13.56: Web page with logo and title
Figure 13.57: Dragging a picture onto the design page
Figure 13.58: Design window with picture added
Figure 13.59: Web page with Heading 3 frame
Figure 13.60: Selection of the Marquee option
Figure 13.61: Attributes dialog
Figure 13.62: Design page with Header 3 text
Figure 13.63: Page designer design page with completed page
Figure 13.64: Web page shown in browser, with text moving
Figure 13.65: Selecting color for selected text area
Figure 13.66: Text to be deleted from Web page
Figure 13.67: Completed Web page in Preview window
Figure 13.68: Loading file Copy of index.html
Figure 13.69: Editor with source of Copy of index.html
Figure 13.70: Page Designer with index.html file and copied string
Figure 13.71: Workbench side toolbar with open perspectives

Chapter 14: Tracing the WebFacing Run Time

Figure 14.1: Stopping the server
Figure 14.2: Location of WFRun files shown in Navigator view
Figure 14.3: Message that appears during rename of the WFRun.jar file
Figure 14.4: WFRun files renamed
Figure 14.5: Navigator view with tracing.properties file
Figure 14.6: Editor window with changed tracing flags
Figure 14.7: Log file in the Web Projects folder structure
Figure 14.8: .log file in editor window
Figure 14.9: WAS console with detailed trace information

Chapter 15: Debugging the Server Program

Figure 15.1: RSE icon on sidebar
Figure 15.2: Select perspective icon with menu
Figure 15.3: Command to start an interactive RSE session
Figure 15.4: RSE perspective with pop-up menus for debugging
Figure 15.5: Debug perspective
Figure 15.6: Add Service Entry Point dialog
Figure 15.7: RSE icon on sidebar
Figure 15.8: Select perspective icon with menu
Figure 15.9: RSE perspective with iSeries jobs
Figure 15.10: Debug message
Figure 15.11: Debug perspective
Figure 15.12: Debug perspective with source view and monitor view
Figure 15.13: Adding a breakpoint to a line
Figure 15.14: Selecting a variable to be added to the monitor
Figure 15.15: Monitors view with variable *IN03
Figure 15.16: Run the application
Figure 15.17: Debug window with current line highlighted
Figure 15.18: Step Into button on debug toolbar
Figure 15.19: Source of program SLTCUSTR shown in debugger window
Figure 15.20: Debugger Logon dialog
Figure 15.21: Error message that comes up if the debug server is not started
Figure 15.22: AS/400 page in Attach dialog
Figure 15.23: Debugger Settings dialog to enable the Update Production Files option
Figure 15.24: Message to start your program
Figure 15.25: Progress bar
Figure 15.26: Distributed Debugger with source
Figure 15.27: Debugger window with breakpoint and pop-up menu
Figure 15.28: Debugger window with Monitors pane
Figure 15.29: Debugger Run push button in toolbar
Figure 15.30: Debug menu options
Figure 15.31: Debugger window with current active statement highlighted
Figure 15.32: Source of program SLTCUSTR shown in debugger window

Chapter 16: Using the WebFacing Environment API

Figure 16.1: Switching to RSE by using its icon from the taskbar
Figure 16.2: Remote Systems tree view
Figure 16.3: CODE designer with ORDENTD member loaded
Figure 16.4: Customer name field extended to 40-character length
Figure 16.5: Web Settings for Customer name field
Figure 16.6: Creating the Display file in the Remote Systems view
Figure 16.7: Editor with added prototype
Figure 16.8: Editor with additional lines of logic
Figure 16.9: Creating a module from member ORDENTR
Figure 16.10: Remote Systems tree view with ORDENTR module
Figure 16.11: CRTPGM prompt with basic parameters
Figure 16.12: CRTPGM prompt with additional parameters
Figure 16.13: Completion message for CRTPGM command
Figure 16.14: WebFacing perspective icon on the workbench taskbar
Figure 16.15: Customer name with applied header style
Figure 16.16: Customer name displayed with normal font because customer location is not Markham

Chapter 17: More Tips for Web Settings

Figure 17.1: Code Designer with Web settings to display an image
Figure 17.2: Adding the bubble001ic.gif file to the Web project images directory
Figure 17.3: The Order Entry page with an additional graphic beside the customer number entry field
Figure 17.4: Browser after clicking on bubble001ic graphic
Figure 17.5: Adding HTML to submit request faking command key four
Figure 17.6: Customer selection list displays after clicking the graphic
Figure 17.7: Order entry page with graphic showing on output-only field
Figure 17.8: Order entry page, graphic is not visible
Figure 17.9: New page with delivery date input field
Figure 17.10: Added files for the pop-up calendar
Figure 17.11: Cascading style sheet information in PageBuilder jsp
Figure 17.12: CODE Designer with Web settings to invoke pop-up calendar
Figure 17.13: Sample of recordformat jsp and the IDs generated by WebFacing conversion
Figure 17.14: WebFaced application with added pop-up calendar
Figure 17.15: Specifying the User defined HTML Web Settings in CODE Designer
Figure 17.16: City text displays in bold font
Figure 17.17: Style sheet editor with new class order_number
Figure 17.18: CODE designer with Appearance and Text Web Settings applied
Figure 17.19: Order number formatted according to new style class definition
Figure 17.20: Specifying the 'Options for Values' Web settings in CODE designer
Figure 17.21: Radio button with text from Web settings
Figure 17.22: Code Designer with Web settings to display graphic
Figure 17.23: Customer list with graphic
Figure 17.24: Code Designer with Web settings to display dynamic graphic
Figure 17.25: Part list with pictures instead of part numbers
Figure 17.26: List with picture files not found
Figure 17.27: Relabeling a push button for the Web page
Figure 17.28: New label shown in Override labels in web setting list box
Figure 17.29: Application page with new push button label
Figure 17.30: Hiding command keys using Web settings
Figure 17.31: Application with Cancel push button hidden
Figure 17.32: Moving command key 3 up using Web settings
Figure 17.33: Web page with changed push button order
Figure 17.34: Subfile headings misaligned due to proportional font usage
Figure 17.35: Subfile heading with improved alignment using nonproportional fonts
Figure 17.36: Editor with split heading strings positioned at specific column number
Figure 17.37: Heading alignment after splitting the headings string
Figure 17.38: File my.js added to the ClientScript\usr template directory
Figure 17.39: New WebFacing project created from modified template with additional files

Chapter 18: Troubleshooting Tips

Figure 18.1: WebSphere application server console without the Pagebuilder.jsp being invoked
Figure 18.2: Using the RSE to display a job log
Figure 18.3: Browser with error message that WebFacing server is not started
Figure 18.4: Additional error information shown in browser
Figure 18.5: The NETSTAT *CNN list panel
Figure 18.6: Display of jobs using port 4004
Figure 18.7: Browser with error page
Figure 18.8: Browser with The page cannot be found error
Figure 18.9: Web.xml file content
Figure 18.10: Time out error
Figure 18.11: Error when application and WebFacing environment are out of sync
Figure 18.12: Error because UTF-8 setup is missing in the Version 4.0 application server
Figure 18.13: Level check exception message CPF4131 displayed in browser
Figure 18.14: Windows Task Manager with evf* processes
Figure 18.15: CODE Designer save dialog

Chapter 19: Exporting to iSeries WebSphere Application Server 5.0 or WebSphere Application Server Express 5.0

Figure 19.1: Map Network Drive dialog
Figure 19.2: Select page of Export wizard
Figure 19.3: The EAR file Export dialog
Figure 19.4: HTTP server administration menu
Figure 19.5: WAS Express control page
Figure 19.6: Install New Application page
Figure 19.7: Specifying option for application installation
Figure 19.8: Selecting the virtual host to be associated with the Web modules
Figure 19.9: Summary page for application installation
Figure 19.10: Manage Application Server page with configuration information
Figure 19.11: Selecting the application from the list
Figure 19.12: Enabling your application
Figure 19.13: Starting the application
Figure 19.14: Login dialog for Administrator Console
Figure 19.15: Selecting Install New Application
Figure 19.16: Creating a new application, selecting the EAR file
Figure 19.17: Selecting a virtual host
Figure 19.18: Specifying the application name
Figure 19.19: Selecting the virtual host for the wflabxx application
Figure 19.20: Specifying the application server for installation
Figure 19.21: Confirmation dialog
Figure 19.22: Final installation dialog in Administrative Console
Figure 19.23: Save dialog
Figure 19.24: Managing the installed application
Figure 19.25: List of installed applications
Figure 19.26: List with selected application to be started
Figure 19.27: Status of wflabxx application is changed to running
Figure 19.28: Page to update the plugin configuration
Figure 19.29: Confirmation message for plugin update
Figure 19.30: Local drive directory structure for a WebFacing project in the WDSC workspace
Figure 19.31: Sample WAS directory structure on iSeries IFS, shown in Remote Systems view

Chapter 20: Invocation of WebFaced Applications

Figure 20.1: Adding a program invocation with one parameter to index.html page
Figure 20.2: Customer number field prefilled by value of fixed parameter
Figure 20.3: Adding a program invocation with one parameter to index.html page
Figure 20.4: The index.html page with a parameter input field
Figure 20.5: Customer number field prefilled with input value from the index.html page
Figure 20.6: Create a Web Project dialog
Figure 20.7: The second page of the Create a Web Project wizard
Figure 20.8: Creating anew servlet
Figure 20.9: New Servlet wizard
Figure 20.10: Method invokeOrderEntry added to servlet
Figure 20.11: Method calls in doGet and DoPost methods
Figure 20.12: Code in invokeOrderEntry method
Figure 20.13: WAS console with messages from servlet
Figure 20.14: Java source editor with problem indicator showing error for nondefined variable
Figure 20.15: Invoking the HTML wizard
Figure 20.16: New HTML/XHTML File wizard
Figure 20.17: Creating the header
Figure 20.18: Page with form frame underneath the heading
Figure 20.19: Form attribute dialog
Figure 20.20: Changing font for heading text
Figure 20.21: Setting up the values for the combination box
Figure 20.22: Changing the rows attribute of the list box to one
Figure 20.23: Insert Submit Button dialog
Figure 20.24: The finished Server Selection page in preview mode
Figure 20.25: Selecting the ServerSelectionPage.html file

Chapter 21: Checking Your DDS for WebFacing Support

Figure 21.1: Command prompt for Survey Tool
Figure 21.2: Sample of DDS Keyword Survey Report

Appendix A: Exporting to iSeries WebSphere Application Server Version 4.0

Figure A.1: Map Network Drive dialog for Windows 2000.
Figure A.2: Select dialog.
Figure A.3: EAR file export dialog.
Figure A.4: WAS Version 4.0 Administrative Console.
Figure A.5: Expanded tree view in Administrative Console.
Figure A.6: Install Enterprise Application Wizard dialog.
Figure A.7: Completion message.
Figure A.8: Selecting Regenerate Webserver Plugin from the Administrative Console.
Figure A.9: Application details on Administrative Console.

Appendix B: Exporting to iSeries WebSphere Application Server 3.5

Figure B.1: Map Network Drive dialog for Windows 2000.
Figure B.2: Select dialog.
Figure B.3: WAR Export dialog.
Figure B.4: WAS Version 3.5 Administrative Console.
Figure B.5: Selecting the Convert WAR File option in the console.
Figure B.6: Selecting a Servlet Engine.
Figure B.7: Selecting a Virtual Host.
Figure B.8: Selecting WAR file to convert.
Figure B.9: Selecting destination directory for application.
Figure B.10: Entering Web path and application name.
Figure B.11: WAR file conversion completed message.
Figure B.12: Restarting the new application.
Figure B.13: Restart completion message.