Developer > WebSphere

WebFacing Customization Techniques

Discover the flexibility of the WebFacing Tool with this quick calendar widget tip.

The IBM WebFacing Tool isn’t just another screen scraper. It converts display files (DSPF) into standard Java EE artifacts that can be understood and molded by Web designers. The WebFacing Tool supports a large subset of DSPF keywords, but not all. The list is largely driven by customer input and is maintained on the IBM Information Center Web site.

There are many reasons why not all keywords are supported, ranging from complexity to the fact that some keywords represent 5250 concepts that don’t apply to Web applications. The point here is that it’s very likely that initial conversion of a set of DSPFs by the WebFacing Tool will result in a working Web application. But to generate a best-of-breed Web application, some DSPF rework (not requiring logic changes) and Web design work is likely required.

Customization is a strength of the WebFacing Tool. But well-designed Web pages don’t just happen; they’re the result of creativity and Web technology expertise. This article illustrates several IBM WebFacing Tool customization techniques using the simple customization scenario of enhancing date input fields with calendar widgets. While the example here makes use of a specific third-party calendar Web control, the techniques should be generally applicable to other calendar widgets.

Background

You can, of course, create your own JavaScript calendar, or use one of the many calendars available on the Web. Beware that some of these may be buggy or unsupported, or both. I’ll use a calendar provided by Yahoo for illustrative purposes. Yahoo provides a library of consistent, widely used, open-source UI Web controls commonly known as the YUI library.

Prerequisites for this project include Version 6 (or later) of the IBM WebSphere Development Studio Client for iSeries and a 5250 application that includes input fields used to collect dates. You’ll also need to ensure that the application has been enabled for the Web with the WebFacing Tool.

I encourage you, especially if you’re a novice to JavaServer Pages, to first learn to use the selected widget outside of the WebFacing Tool. To use the YUI calendar in such a Web project:

Download files to project folders and include required .js and .css files in your source. For calendars, see Figure 1 for a list of required files. Note that yahoo.js must be included first; the order of the rest isn’t important.

Add code to instantiate. Then handle the events, initialize and display the calendar.

Next page: >>