March 24, 2019
Hot Topics:

Using Javascript Components in Java Studio Creator

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

Use Source View to Include the JavaScript

That's about as far as you can take the popup with the WYSIWYG view of the page. You now have to use the source view to proceed:

  1. Switch to the source view of the page (JSP source tab at the bottom of the edit area).
  2. Inside the head section of the page, just after the line that says
  3. <link href="resources/stylesheet.css" rel="stylesheet"
  4. Add the lines:
  5. <link href="resources/stylesheet.css" rel="stylesheet"
    <script language="javascript" src="javascript/CalendarPopup.js">
       var fake=null;
    <script language="javascript">
  6. Some notes on this:
    1. Gotcha: The var fake=null line inside the first JavaScript include is to work around an apparent bug in Creator where a simple <script language="javascript" src="javascript/CalendarPopup.js"/> does not get parsed properly when the page is converted to HTML, and ends up with broken JavaScript on the page. This simple workaround makes it work just fine.
    2. The second line is a call to insert some default style definitions into the page to make the popup calendar look nice. It is a call to a method already defined in the included JavaScript, and is written in-line into the document.
  7. Next, inside the form definition of the page, you need to create a JavaScript method that will pop up the calendar. Add the following code just after the line that reads <h:form binding="#{DateDemo.form1}" id="form1">:
  8. <script language="javascript">
       function popupCalendar() {
          var myform      = document.forms[0];
          var myDateField = myform['form1:date1'];
          var cal1        = new CalendarPopup('testdiv1');

    Notes on this code:

    1. You have to look up the DOM element for the text area to attach the popup to it logically. Gotcha: Creator gives each DOM element the name of the control prepended by the name of the form the control is in and with a colon delimiter. Hence, the field date1 is actually called form1:date1 and must be looked up by using the array notation in JavaScript (the colon means it cannot be looked up with simple dot notation).
    2. The 'testdiv1' referenced in the CalendarPopup call is a DHTML DIV that we have yet to define. It is the actual popup DIV that will be revealed when the link is clicked.
    3. The form1:anchor attaches the popup to the anchor1 hyperlink on the page to give it the right position on the page.
    4. Finally, note the 'MM/dd/yyyy' format in the select call. This should match the DateTimeConverter format defined for the text area that the popup is attached to.
  9. Next, edit the hyperlink definition to call the JavaScript method when the link is clicked: <h:outputLink binding="#{DateDemo.anchor1}" id="anchor1" onclick="popupCalendar(); return false;" value="#">.
  10. The final step is to create the DIV that will be used for the popup, put this just before the closing body tag at the end of the document.

There is a lot to digest here. If you are confused about any of this, look at the demo project and satisfy yourself how everything goes together by looking at the page source there.

Add Other Components

As a finishing touch, I added a submit button and a text output field with another date time converter on it that was bound to the same date field. That way, after a date is selected, and the submit button clicked, the selected date will be output on the screen, confirming that the whole thing works.

Run the Demo

Okay; you have covered the basic steps to use the JavaScript calendar popup on the page. Run the demo project to see it in action. I think you will agree that the effect is very slick. To make life easier on yourself, you can use code clips to store the various pieces of code and make it quicker and easier to make new pages with these popups on. Don't forget, though, that the DOM element names must be correct in the JavaScript, so if you use different names on other pages for the controls, remember to update the JavaScript.

Page 2 of 3

Comment and Contribute


(Maximum characters: 1200). You have characters left.



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