| DatePicker

Building the DatePicker Component

The DatePicker JavaScript Bean opens up a convenient DatePicker window that allows a user to set the date (for example, in a textfield). It is launched from a JavaScript Bean that supports both firing and receiving events.

As a complete JavaScript Bean, it specifies icons, a Help URL, and uses good namespace-conflict avoidance practices. In addition, the DatePicker uses a custom visual for better control over the design time appearance of the component when dragged to an HTML page. The Custom Visual is stored in the file `netscape/samples/widgets/CalendarVisual.java` (for more information on providing visuals, see the Custom Display sample).

The JSB Descriptor for netscape/samples/widgets/Calendar.jsb looks like:

        <JSB_DESCRIPTOR NAME="netscape.samples.widgets.Calendar"
         DISPLAYNAME="Date Picker"
         HELP_URL="netscape/samples/widgets/Calendar_jsb.html"
         VISUAL="netscape.samples.widgets.CalendarVisual"
         EVENTMODEL="JS">

In addition to specifying an event model, the Calendar component must have setter / getter methods for the "value" property, and must declare an Event which is associated with changes in a Bound Property. The onChange event is actually fired by the JavaScript code in the file `netscape/samples/widgets/Calendar.html` when it calls (in the returnDate function):

    window.dateController.fireOnChange("value",month + "/" + day + "/" + year);

In this example, the dateController refers to the JSB component Calendar.jsb which is used simply to launch the Calendar.html file and to mediate onChange events. The dateController reference is the ID the instance of the Calendar class has been assigned, which is then attached to the window object.

In addition to firing events, the Calendar component also listens to `value` change events and delegates them to be handled by the JavaScript code in Calendar.html in the method `netscape_samples_widgets_Calendar_setValue` located in `Calendar.jsb`:

        /**
         * Receives property change events from the outside world
         * and allows this JSB to function as an event listener as
         * well as an event receiver.
         * @see fireOnChange
         * @see getValue
         */
        function netscape_samples_widgets_Calendar_setValue( sNewValue ) {
            // Don't fire a change event here... If you did,
            // you could potentially get an infinite loop.
            this.value = sNewValue;

            if(this.childWindow != null) {
                this.childWindow.setDate(this.value);
                this.childWindow.focus();

            }
        }

The HelpURL specifies that the JSBDoc for the Calendar JavaScript Bean will be used as the help file for the component. The line with the entry regarding the event model is needed in order for this component to send and receive events.

Note: Additional information on different event models (for example, AWT11 vs. JS), refer to the CDK Documentation which includes the JavaScript Bean File Structure Reference.

Running the appropriate script (either BuildDatePicker.bat or BuildDatePicker.sh) generates the JSBDocs and JavaDocs for the JavaScript Bean and Java portions of the component, and compiles the CalendarVisual classfile.

Building a Sample Web Application

Import the DatePicker into your favorite JavaScript Bean-supporting Web Application Builder. Add an instance of a textfield and a DatePicker to a page. Drag the connection point from the DatePicker to the textfield and create a two-way connection using the "value" property. When you preview the page, press the little "Calendar" icon that appears next to the date. Now pick a date from the window that comes up; notice the value of the textfield is changed as the window closes.

Also note that events go the other way, as well: Click on the Calendar icon again, and this time change the date in the textfield and hit the "tab" key... Notice that the value displayed in the popup window changes automatically; using the power of the JavaScript Bean event model.

A sample page is located here.

Note: This component may not work correctly on non-Windows browsers.

( return to the top of the page )