Hi, and my first post

Hi, my name is Al Rodriguez. Have been with IBM since 1989; proud member of WebFacing team since 2005.

I will try to contribute posts related to WebFacing, mainly in the areas of customization and configuration. Let the remaining of this post be my first customization tip: Enhancing date input fields with a calendar widget. This tip reflects my opinion, and is in no way:

• complete,
• recommended,
• supported,
• well written … sorry.

Introduction

WebFacing is not just another screen scraper. Webfacing converts display files into standard J2EE artifacts, that can be understood and molded by Web designers.

WebFacing supports a large subset of DSPF keywords, but not all. The list is largely driven by customer input and is maintained here: list. There are many reasons why not all keywords are supported; they range from complexity to them representing 5250 concepts not applicable to web applications. But, let this be the subject of a future post… My point here is that it is very likely that initial conversion of set of DSPF’s by WebFacing 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.

A strength of WebFacing lies in customization. But well designed web pages do not just happen; they are the result of creativity and web technology expertize.

This post illustrates several WebFacing customization techniques by adding calendar widgets to input date fields.

Background

Could create your own JavaScript calendar, or use one of the many available calendars on the web. Beware that some of these may be buggy / unsupported. In this post a calendar provided by Yahoo is used. Yahoo provides a library of consistent, widely used, open source UI Web controls; commonly known as the YUI library.

To use the calendar in a general web project, one would need to:

1. Download files to project folder(s) and include required .js files in your source. For calendars the following would be required. Please note that yahoo.js needs to be included first; the order of the rest is not important:
   
2. Add code to instantiate, handle events, initialize, and display calendar. Links of interest: YUI Library, YUI blog, YUI theater, Yahoo design patterns

Prerequisites

There exists a 5250 application that includes input field used to collect dates.

Application has been WebFaced.

Incorporating calendar to WebFacing.

Adding the calendar to the WebFaced application is as easy as 1, 2, 3:

1. Incorporate YUI files into project.
   
   Please note that ‘usr’ folder is special in WebFacing; any .js files in it are included automatically in every page at run-time. The order in which these are included is unpredictable. If order is important files should be included separately. YUI requires that yahoo.js be included first; this could be done by adding the following to PageBuilder.jsp:
   
2. Create your own JavaScript code.
   Create new .js file (arod.js in folder structure above). Place it in ‘usr’ folder for automatic inclusion in all pages.
   Below, function initCal() shows the calendar; it also instantiates, registers selection handler, and renders calendar if necessary. An array of calendars is used to support multiple calendar instances in a page. Function handleSelect() is registered as handler and is called by the calendar when a selection is made; this function sets the value of the field with the selected date, and hides the calendar.
   
3. Tie it all together with Web Settings. Web Settings allow developers to customize the way DSPF files, records, and fields are rendered in a WebFacing application. As the name implies, Web Settings affect the way data is presented on the Web; they have no effect on existing 5250 behaviour. Web settings are persisted as special comments in the DSPF source. To have Web Setting changes reflected in the application re-conversion and re-publishing is required.
   Web settings can be configured in the Web Settings view. Open DSPF, select field, and use Web Settings view; notice that selections in this view are reflected as comments in source view. Only two ‘HTML override’ web settings will be used in this example:
   One inside the input field description to add a onmouseover event handler
   
   The other one after to create a <div> area to contain the calendar.
   

Done! The end result is that a calendar will pop up below the text field as the cursor hovers over it. Selecting a date in the calendar updates the value in the text field, and hides the calendar.

---