When moving applications to the Web, one of the challenges facing developers is how to migrate rich client features to a browser environment.

Two features that can give your Web applications a boost in both appearance and functionality are popup calendars and lookup (search) windows. They both apply the same concept - create a mapping between an HTML DataWindow column on a parent window and a selection made in a child window. In this article I provide an overview of how to leverage this mapping and incorporate these two common features into a Web-based application.

Popup Calendar
The Internet is rife with popup calendars. We've all encountered this functionality when making a flight or hotel reservation. Click an icon and a calendar pops up in its own window; choose a date and your selection appears in the input field of the parent form. What are the inner workings of such a feature and how do we create a common calendar object that we can associate with a date or datetime column in an HTML DataWindow?

Figure 1 shows a simple DataWindow containing two date fields, beg_dt and end_dt.

We return the date selected from the popup calendar to these fields. Two things need to occur to make the popup calendar feature work. First, the JavaScript that displays the calendar needs to be triggered; second, the user's date selection needs to be returned to the corresponding date field on the parent page. Let's start by diving into the JavaScript.

calendar.js will contain three functions (see Listing 1). The openCalendar function receives a column (fieldname) and row parameter. This allows the popup window to return the selected date to the correct column and row in the parent window. This function also calls the HTML page that's used to construct the calendar (see Listing 2). The setDate function sets the selected date back into the proper field on the parent window.

Once the JavaScript is written, the next task is to figure out how to trigger it. One way is to add a computed expression to our DataWindow and then code that expression to render as HTML in the PB NVO calendar object. Referring back to Figure 1, the computed expression associated with the beg_dt field is:

'<img border="0" src="images/popcalendar.gif" width="20" height="15"
style="cursor:hand"onClick="openCalendar( ~'beg_dt~', event, ~'1~' );" >'

This expression will create an image that, when clicked, calls the JavaScript and passes the required parameters.

Assuming a PB NVO has been created, we now need to code the of_html function for this object. This is the code that will force the above computed expression to render as HTML using the modify statement as shown:

datastore ds
string sz_html
ds = create datastore
ds.dataobject = "d_calendar"
ds.InsertRow(0)

ds.Modify
("c_beg_dt.HTML.ValueIsHTML='YES'")
ds.Modify ("c_end_dt.HTML.ValueIsHTML='YES'")
sz_html =
ds.object.datawindow.data.html
destroy ds
return sz_html

After the calendar object and its associated HTML DataWindow have been coded, the object needs to be published to EAServer. Once published, we can export Java stubs so that a JavaServer Page (see Listing 3) can use those stubs to call the back-end component, in this case the calendar object. The JSP will import calendar.js so it knows how to display the popup calendar. Remember, calendar.js calls calendar.html (see Listing 2).

HTML Lookup Windows
Most rich clients use lookup windows of some type to look up and select values. What happens when we try to migrate this functionality to the Web? Consider an HTML client sales order form in which a user selects an item from a dropdown list of products. For a big company, this product list would be unreasonably large. Then consider that for a 10-line order form, the same list of items will be retrieved 10 times. You can see the problem: massive amounts of redundant data flowing over the network, consuming bandwidth and server resources. Add to this dysfunction the inability to display multiple columns (i.e., product description, size, and price) in a dropdown ListBox and it becomes apparent that it's time to search for a better, more efficient solution.

Consider an approach in which a user can create a product list based on some search criteria. For example, show me products under $10, or size medium and color red. The benefits would be twofold: no list of products would be generated until a search criteria was entered and only products matching the search criteria would be retrieved. Sounds ideal, doesn't it? Well, it's a reality. And it takes place in an HTML lookup window.

The HTML lookup window is implemented much the same way as the popup calendar. We place an icon next to an input field, the user clicks the icon, and a child window is spawned. After the user makes a selection, it's sent back to the parent window. As with the popup, we create a mapping between the lookup window and its parent window. This mapping is the point of departure from the popup's functionality. Unlike the popup, when we implement an HTML lookup window we need to map both a data and a display value. This approach is derived from the DDDW attribute that allows for the selection of a column for data and a column for display. The advantage to this approach is that we can display multiple columns. When a user selects a given row or multiple rows, we're able to distinguish the data value from the display value.

The lookup window can also be coded to prompt the user for criteria on which to base its display list.