April 19, 2019
Hot Topics:

Using Javascript Components in Java Studio Creator

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


In the second JavaScript demo, I am going to combine some of the JSTL approach from my previous article with a very simple JavaScript tree implementation to make a tree "bound" to data from a map of lists within the page bean.

The steps involved are:

  1. Download and include the necessary files for the JavaScript tree into the demo project.
  2. Add JSTL support to the page, and use JSTL to populate the lists that will make up the tree (this is all done in the source view of the page).

Download and Include JavaScript Tree Files

The JavaScript tree available from Matt Kruse's DHTML Tree page is a study in what JavaScript and DHTML should be—as invisible and easy to use as possible.

In a nutshell, after including the necessary files in the project, it is only necessary to include the CSS and JavaScript files, and then create nested UL HTML lists with the top one having a particular mktree class; otherwise, the trees use completely standard HTML, very nice.

To prepare a project to use the tree:

  1. Download all the files for the above link.
  2. Place the mktree.js file into the javascript folder in the project.
  3. Place the mktree.css file into the Resources folder in the project.
  4. Place the three GIF files directly under the Web Pages folder in the project.

That's all you need to do to make the tree available to the app.

Add JSTL Support to the Page

Add the xmlns:c="http://java.sun.com/jstl/core" into the jsp:root tag. This imports the JSTL core tag library into the "c" namespace for the page. Refer to my previous article on JSTL for more details, and how to set up deployment of a JSTL project.

Populate the Tree Using JSTL

To populate the tree, you need to make nested UL and LI constructs in the page. For example:

<ul id="tree1" class="mktree">
   <li>Header 1
         <li>Sub 1</li>
         <li>Sub 2</li>
         <li>Sub 3</li>
   <li>Header 2
         <li>Sub 4</li>
         <li>Sub 5</li>

Using JSTL to do this means looping over some arbitrary structure from the page bean. In this case, I am using a Hashmap with the values being Lists; this results in a tree of only two levels, headers and sub lists. There is no reason this same principle could not be applied to arbitrarily deep tree data.

The JSTL code to loop over the data and create the tree is:

<ul class="mktree" id="tree1">
   <c:forEach items="${TreeDemo.tree}" var="treeEntry">
      <c:set var="sublinks" value="${treeEntry.value}"/>
      <li><c:out value="${treeEntry.key}"/>
          <c:forEach items="${sublinks}" var="sublink">
            <li><c:out value="${sublink}"/></li>

You will notice that the top-level UL tag is using the class="mktree". This is the piece of magic that turns this otherwise ordinary set of nested lists into a collapsible tree.

Much more information about this tree component can be found on the DHTML tree documentation page. I recommend reading this page if you want the tree to do more.


This article demonstrates an approach to including and using JavaScript components within Creator. Although not as easy as dragging and dropping JSF components onto a page, it does open up the possibility of using a large number of existing JavaScript components that are available now. The examples here are just the beginning. By using the approach outlined in this article, you should be able to harness any JavaScript libraries and components you want to use under Creator. In future articles, I may investigate constructing custom JSF controls that harness some of these third-party JavaScript libraries.


About the Author

Dick Wall is a Lead Software Engineer for NewEnergy Associates, A Siemens Company based in Atlanta, GA that provides energy IT and consulting solutions for decision support and energy operations. He can be reached for comment on this and other matters at dick.wall@newenergyassoc.com, or check out his blog at http://www.voiceoftheresistance.com.

Page 3 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