Bambookit Home    Bambookit GUI Tutorial

Back    Next   

II. GUI Basics

Chapter 8. Prebuilt Widgets

Popup Calendar Control

Popup Calendar Control. Popup Calendar Control is composed of a Combobox and Calendar elements. The Calendar widget is described in the Chapter 7, Widgets.

XML Element Name

The popup calendar is calendar widget placed inside a Combobox widget. When the combobox is selected, the popup calendar appears

<Combobox> <Calendar/> </Combobox>

Examples - Popup Calendar

From the example above (a basic skeleton) you can see that it is quite simple to create a popup calendar control

A simple XML script for creating a Popup Calendar control
<Widget setSize="180,150"> <Combobox setLabel="yyyy-mm-dd" setShape="10,10,120,25"> <Calendar/> </Combobox> </Widget>

Calling the Calendar Control

There are 2 ways to get the calendar control to 'pop up'. One is to press and release the combobox control and the other is to rollover it

Here is a complete example (default behaviour). The calendar is popped up by pressing on the combobox button
<Widget setShape="0,0,200,200"> <Combobox setShape="10,10,90,25"> <Calendar/> </Combobox> </Widget>
As you note: the Combobox date is empty UNTIL a date is selected by the client. The format that is taken when displaying the date is yyyy-mm-dd (i.e. 2004-02-15)

The year can easily be changed by clicking on the year, an edit control pops up and the year can be entered. To change the month either use the arrow keys or select a new month by clicking on the current month displayed. A drop down list of the 12 months will be displayed.

To cancel a selection, just click outside the calendar control area on another part of the panel.

Rollover to popup the Calendar Control

As soon as the mouse enters the combobox, the calendar appears. All that is required is be set is an attribute. setPopupRollover="true". Below is the complete example, note that the only difference is the addition of the attribute setPopupRollover="true"

<Widget setShape="0,0,200,200"> <Combobox setShape="10,10,90,25" setPopupRollover="true"> <Calendar/> </Combobox> </Widget>

Back    Next