September 15, 2019
Hot Topics:

Using Javascript Components in Java Studio Creator

  • June 2, 2005
  • By Dick Wall
  • Send Email »
  • More Articles »

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.

As shown in my last article about using JSTL in Creator, other possibilities exist than just buying third-party JSF components, however. JSTL is a great way of creating completely custom HTML pages in Creator. Another option that you will explore in this article is drawing on the large number of JavaScript components and add-ins to help fill in some of the blanks in the Creator component and control library.

The inclusion of JavaScript into a Creator project is no big deal, but learning the rules of how to make these components interact with Creator code is the real target of this article. It is important to know the handles used for fields on the page so that the JavaScript can get and set values and so forth.

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.

Demonstration Components

For this article, I located an excellent example library of JavaScript components developed by Matt Kruse. He kindly agreed to let me use the components in writing this article. I am using the Calendar and Tree components in this article, but I would strongly recommend visiting his page and seeing what other components are available there, and please, if you use them, consider donating something to Matt.

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.

This article is only going to cover the basic usage of these Javascript components in Creator, and does not deal with the subject of making custom controls from them that can be added to the palette. I aim to cover that subject in a future article.

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.

Calendar popup

The first demo is the inclusion of a calendar popup for an ordinary text control on a page. The basic approach is this:

  1. Include the necessary JavaScript libraries into the project.
  2. Add a text field on a new page with a date time converter on it to interpret the string edited using the popup.
  3. Using the source view of the page, include the necessary JavaScript and link to attach the popup to the text field.
  4. Add other components to submit the page and echo back the date selected.

Adding the JavaScript libraries

The calendar popup can be downloaded from Matt's calendar page; the one linked here is the combined script. That means that the one file has all of the javascript necessary—I recommend this because it makes it easier to deploy the single file for the calendar popup.

Add the JavaScript to the Creator project as follows:

  1. In the project view, right-click on the Web Pages section and select new folder from the options.
  2. Create a folder called javascript.
  3. Find the new folder by using Windows Explorer (or Linux equivalent) and copy the JavaScript calendar file into that folder, and call the file CalendarPopup.js.

This same approach can be used for any JavaScript library you want to use. To include the script in Creator, you then can use the path javascript/MyScript.js to find it.

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:

  1. 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.
  2. Go to the page view.
  3. 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.
  4. Next, drop a new Text Field into the new group. It doesn't matter what it is called.
  5. Select the new Text Field, and in the properties choose new DateTimeConverter for the converter field.
  6. Now, in the Application outline panel (bottom left), find the new DateTimeConverter1 (or whatever it is called) and select it.
  7. 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).
  8. 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.
  9. Set the text in the new hyperlink to be Select.
  10. 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.

Page 1 of 3

Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Thanks for your registration, follow us on our social networks to keep up-to-date