This tutorial teaches you how to convert the DDS screens in an existing
5250 order entry application to a Web browser user interface. While
creating a browser user interface, you will learn how to use the IBM(R)
WebFacing Tool. You will also learn how to customize the output of the
conversion process using the IBM WebFacing Tool and the CODE Designer.
Next, you will learn how to run the WebFacing application in the
WebSphere(R) Test Environment that is part of the product. You will
also learn how to use Page Designer to customize the application start page
and you will learn how to publish and deploy your WebFacing application to a
remote WebSphere Application Server (this is an optional module).
Prerequisites
In order to complete this tutorial end to end, you should already have
working knowledge of the following:
- Basic Microsoft(R) Windows(R) operations such as working with the
desktop and basic mouse operations such as opening folders and performing
drag-and-drop operations
- How Web applications work
- How to use a browser to navigate the Internet
It is also useful, but not necessary, for you to have basic knowledge of
the following:
- DDS
- Servlets and Java(TM) Server Pages (to understand the generated output of
the WebFacing Tool)
Time required
To complete the modules of this tutorial, you will need approximately
3 hours.
Learning objectives
This tutorial is divided into twelve modules, each with its own learning
objectives. You can choose to complete one or all of the
modules. Each module contains several exercises that must be completed
in order for the tutorial to work properly.
Module 1. Reviewing the 5250 order entry application teaches you about the 5250 order entry application before
you start and use the WebFacing Tool to convert it. In this module, you
will:
- Start a 5250 emulation session
- Call the order entry application
- View the customer selection screen
- Display help for the customer number field
- Display help for selecting a customer
- Display help for specifying a valid customer number
- Display extended help for the customer number field
- Display the customer selection list
- Select a customer from the list
- Display the parts selection list
- Select a part from the list
- Specify the part quantity
- Accept the order
- Exit the application
Module 2. Creating the WebFacing project teaches you how to create a WebFacing project. In
this module, you will:
- Start the product
- Set the default workspace
- Access unique views and tools targeted towards the WebFacing tasks
- Specify a name for your WebFacing Web Project
- Connect to an iSeries(TM) server
- Select DDS source members to convert
- Select UIM source members to convert
- Specify the CL command to invoke the application
- Specify the application signon values
- Select a Web style for your converted application
- Create the WebFacing Web Project without converting files
Module 3. Converting selected source members teaches you how to convert one or more DDS and UIM
files. In this module, you will:
- Select members to convert
- Convert members
- Check reference keywords for errors
- Check the DSPF conversion log for errors
- Check the UIM conversion log for errors
Module 4. Running the WebFacing application teaches you how to run the Web application in the WebSphere
Test Environment. In this module, you will:
- Set the WebSphere Test Environment to test the application locally
- Launch the WebFacing application
- Prompt for a customer
- Select a customer from a list of customers
- Prompt for a part
- Select a part from a list of parts
- Enter a quantity for a part
- Display help for the customer selection list
Module 5. Changing the user interface teaches you how to change certain aspects of the user
interface related to the conversion process. In this module, you
will:
- Locate a DDS source member
- Open a DDS source member with CODE Designer
- Create a hyperlink action for the option field
- Hide the option field
- Hide the option heading for the option field
- Hide the select instruction
- Change the appearance of text
- Close CODE Designer
- Reconvert the DDS source member
- Launch the reconverted WebFacing application
- Prompt for a customer
- Verify the changes in the customer selection window
Module 6. Changing the style of the Web user interface teaches you how to create a new style, change style
settings, specify the new style to be used for the project and refresh the
project with the new style. In this module, you will:
- Start the Style Properties dialog
- Change the DDS Field Display Attributes
- Locate the cascading style sheet file
- Edit the cascading style sheet file
- Check the new styles
Module 7. Adding command key rules and labels teaches you how to add your own command key recognition
rules to the WebFacing conversion properties. In this module, you
will:
- Start the Properties dialog
- Select Command Key Recognition Patterns
- Add a new command key rule
- Reconvert the DDS members
- Test the applied new rule
- Change the text for the F12 command key
- Reconvert the DDS members
- Test the new command key label
Module 8. Working with more style properties teaches you how to apply changes to windows, the look of
push buttons, and subfiles. In this module, you will:
- Start the Properties dialog
- Change the window style
- Change the subfile style
- Change the command key style
- Test the changed properties
Module 9. Customizing the default style teaches you how to customize that style, updating the look
and feel for a fictional company. In this module, you will:
- Locate the existing style
- View the design of the existing style
- Import the company logo
- Edit the style sheet to include the company logo
- Edit PageBuilder.jsp to remove and resize fields for your logo
- Change the color
Module 10. Adding authentication teaches you how to secure your application by forcing
authentication before the application is called. In this module, you
will:
- Start the Properties dialog
- Open the project run-time properties
- Change the signon properties for the order entry application
- Test the signon dialog appears
Module 11. Enhancing index.jsp page teaches you how to take the plain index.jsp page
generated by the WebFacing Tool and add color and some pictures to make the
input page of the Web application more interesting. In this module, you
will:
- Open index.jsp in Page Designer
- Change the window title to Order Entry
- Add a style to the Order Entry Web page
- Start WebArt Designer
- Add a logo
- Resize the logo
- Save the logo as a WebArt object
- Save the logo for a Web page
- Place the logo on the Design page
- Insert a heading below the logo
- Add a picture to the Order Entry Web page
- Add a marquee to the Order Entry Web page
- Change the color of the window title
- Remove default text added by the WebFacing Tool
Module 12. (Optional) Exporting to iSeries WebSphere Application Server Express 6 teaches you how to export files created by the WebFacing
Tool to a remote WebSphere Application Server, to publish and deploy your
application as you would when your application is ready for production.
In this module, you will:
- Map a network drive
- Open the Export wizard
- Export the EAR file
- Start an existing HTTP server console
When you are ready, begin Module 1. Reviewing the 5250 order entry application.
(C) Copyright IBM Corporation 1992, 2005. All Rights Reserved.