Sun's Java Studio Creator is based around the use of easy, pre-defined controls and components. There is a useful set of these included with the product, but they only go so far; for example, some of the more obvious omissions are popup calendars, sortable grids, and tree components.
The idea is that in time, third parties will write and sell component add-ins, or they will be provided in future versions of Creator. Indeed, some companies, such as Software FX and Soft Aspects, have some pretty good components out there, and although it's early days, these can help fill in the gaps.
Please download the accompanying demo project for this from here.
Before running this project for the first time, be sure to do a full re-build (Build->Build Project from the menu) because I have removed various transitional build files to keep the zip file size small, and a full re-build will restore the missing files.
The Calendar component I am using is a perfect fit in Creator, which has no calendar pop-up of its own. The Calendar component is very slick, using a DHTML div to make the popup appear instantly, and good use of CSS to make it look nice.
The Tree component is similarly slick, working on a standard HTML list and making it collapsible. Combined with JSTL usage (see my previous article for more details on this), it will be possible to create a completely dynamic data-driven tree.
About the Demo Project
As with the previous article, I have provided an example project that demonstrates the ideas and principles described here. This is not a click-along article, but rather a coverage of the main points, for brevity.
The first demo is the inclusion of a calendar popup for an ordinary text control on a page. The basic approach is this:
- Add a text field on a new page with a date time converter on it to interpret the string edited using the popup.
- Add other components to submit the page and echo back the date selected.
- In the project view, right-click on the Web Pages section and select new folder from the options.
Add a Text Field with a Date Time Converter
Before you can enable the popup, you need a text field on the page that can be bound to a date field in the page bean. To bind a text field to a date, a Date Time converter is needed. This is done as follows:
- Create a java.util.Date field in the page bean first (find the page bean, open it to find the Bean Patterns view, then right-click and add a new property). I called the property startDate in my example project.
- Go to the page view.
- I recommend creating a group panel to hold the text area and popup link; this lets you keep the text area and popup together and move them around—see my demo project for an example. Call the group panel something like dateGroup.
- Next, drop a new Text Field into the new group. It doesn't matter what it is called.
- Select the new Text Field, and in the properties choose new DateTimeConverter for the converter field.
- Now, in the Application outline panel (bottom left), find the new DateTimeConverter1 (or whatever it is called) and select it.
- In the properties pane (top right), you need to enter a pattern for the date display/parsing that the popup and date time converter can agree on (this is crucial; the popup will put the date into the text field using this format, so the converter has to use the same standard form to correctly interpret the date). I used MM/dd/yyyy in my demo (month/day/4-digit year).
- You also need an HTML link to attach the popup to, so drag and drop a Hyperlink into the date group next to the text area.
- Set the text in the new hyperlink to be Select.
- In the application outline, find and select the new hyperlink (probably called hyperlink1; it has an icon of a chain link) and change the name to anchor1. This will form the anchor position for the popup.