Many people have been asking in the forum and in requests sent using our tutorial docs feedback form how to generate reports, such as PDF, from web apps built using Java Studio Creator IDE. I have been working on a JasperReports tutorial for quite some time, and have hopes to get it published in a couple of weeks. One of our customers Sander beat me to the punch. He wrote his own tutorial and he makes it available from his company's website. Thanks Sander!

I am working on a tutorial on how to use JasperReports in JSF web applications. At first, like most examples out there, I built a servlet and called the servlet from my web page. I eventually figured out that it is quicker and easier to use a managed bean, and took that route instead.

However, I do see a lot of posts in the forum asking how to use servlets in JSF web applications built using the IDE, so here is what I learned.

1. Make the servlet and put it in the web applications source package structure or add it to the library node. In this example, I called the servlet ReportGenerator.
   
   
2. Make a mapping for the servlet. To do so, go to the Files window, expand web, expand WEB-INF, and double-click web.xml to open the xml editor.
   
   
3. Click the Servlets button in the editing toolbar and click Add Servlet Element.
   
   
4. Set the Servlet Name to whatever you choose (I used ReportGenerator).
   
   
5. For the Servlet Class, browse to the source for your servlet (or type in the fully-qualified class name if using a library).
   
   
6. Type a URL Pattern. This is how you will invoke the servlet from your web page. I used /makeReport. One thing to notice is that you need to prepend a forward slash here but you don't include the forward slash when you use it in a redirect, as you will see later. Click OK.
   
   
7. Now you might think that you next bring up the Page Navigation editor to add a navigation mapping for makeReport. But that is not how you do it. From everything that I have read, JSF navigation entries are for navigation from a JSF view to a JSF view. So, what I did was to use a redirect, as shown in the following code:
   
   

   public String button1_action() { try { FacesContext facesContext = getFacesContext(); HttpServletResponse response = (HttpServletResponse) facesContext.getExternalContext().getResponse(); response.sendRedirect("makeReport"); facesContext.responseComplete(); } catch (Exception e) { log(e.getMessage()); error(e.getMessage()); } return null; }

   
   
   Note that after redirecting the request, I send a responseComplete. This is extremely important. It is like passing the baton and notifying that you are dropping out of the lifecycle. If you don't complete the response, then you will get this exception:
   
   Exception Details: java.lang.IllegalStateException Cannot forward after response has been committed
   
   
8. Alternatively, if you want a link instead of an action handler, you can add a link component and set it's url property to /faces + your pattern (this time include the forward slash). In my case, I set the url property to /faces/makeReport.
   
   

Here is a mini tutorial that teaches you how to dynamically build a tree structure from data in a database. You populate the first-level nodes in the Tree with names from a database and the second-level nodes with the trip dates for that person.

Notes: Due to cookie problems, it is hard to tell which node the user selects. See http://blogs.sun.com/divas/entry/workaround_for_dynamic_trees for a workaround

Events related to tree node selection do not work correctly in portlets because the Tree component uses cookies to pass the selected node id back and forth, and cookies are not correctly handled by the portlet container.

Designing the Home Page

You begin by building a home page that includes the Tree component and the TRIP database table. The following figure shows the page.

Figure 1: Page Design

1. Create a new project and name it DatabaseTree.
   
   
2. From the Basic section of the Palette, drag a Tree component onto the Page, type Travel Information, and press Enter. In the Properties window, set the id property to displayTree and the clientSide property to True.
   
   When clientSide is True, every child node (expanded or not) is sent to the client, but is not made visible unless the parent node is expanded. When clientSide is False, only the child nodes of the expanded parent nodes are rendered.
   
   
3. Select Tree Node 1, right-click, and choose Delete from the pop-up menu.
   
   For this application, you do not need the initial tree node that the IDE creates because you are populating the tree programmatically. If you do not remove the node, the values set in the JSP tag attributes take precedence over the runtime settings, and the page displays the node.
   
   
4. Drag a Message Group component from the Palette onto an out-of-the-way place on the page, such as the upper-right corner of the page.

Connecting to the Database

Next, you connect the page with a database table in the Travel data source. You then use the Query Editor to modify the SQL query used to retrieve the data so that the traveler names appear in alphabetical order and the travel dates appear in chronological order.

1. Open the Servers window and ensure that the Bundled Database Server is running.
   
   The node's status icon and tooltip indicate whether the server is running. If the Bundled Database Server is not running, right-click the Bundled Database Server node and choose Start Bundled Database from the pop-up menu.
   
   
2. In the Servers Window, expand Data Sources > Travel > Tables. Drag the TRIP node onto the Visual Designer.
   
   The Outline window shows a tripDataProvider node in the Page1 section and a tripRowSet node in the SessionBean1 section.
   
   
3. In the Outline window, right-click the tripRowSet node and choose Edit SQL Statement.
   
   The Query Editor appears in the editing area, with a a TRIP table diagram.
   
   
4. From the Servers window, drag the Travel > Tables > PERSON node and drop it next to the Trip table diagram in the Query Editor, as shown in Figure 2.
   
   Another table diagram appears with a link, or join, between the two table diagrams.
   
   
5. In the PERSON table, clear the checkbox for PERSONID.
   
   
6. In the Design Grid of the Query Editor, find the NAME row for the TRAVEL.PERSON table. Click in the Sort Type cell and choose Ascending from the drop-down list.
   
   This action sorts the names in the database table alphabetically by last name.
   
   
7. Find the DEPDATE row for the TRAVEL.TRIP table. Click in the Sort Type cell and choose Ascending from the drop-down list.
   
   This action sorts the trip dates from earliest date to latest date. The following figure shows the Query Editor.
    

   Figure 2 : Query Editor

Building the Tree From the Database Table

Now you add code to the prerender() method to dynamically build the Tree component from the TRIP and PERSON database tables.

1. Open Page1 in the Java Editor and scroll to the prerender method. Replace the body of the prerender method with the following code shown in bold.
    
   

   Code Sample 1: prerender method for Page1

   public void prerender() { try { // Set up the variables we will need Integer currentPersonId = new Integer(-1); // If nbrChildren is not 0 then this is a // postback and we have our tree already int nbrChildren = displayTree.getChildCount(); if (nbrChildren == 0) { // List of outer (person) nodes List outerChildren = displayTree.getChildren(); // Erase previous contents outerChildren.clear(); // List of inner (trip) nodes List innerChildren = null; // Execute the SQL query tripDataProvider.refresh(); // Iterate over the rows of the result set. // Every time we encounter a new person, add first level node. // Add second level trip nodes to the parent person node. boolean hasNext = tripDataProvider.cursorFirst(); while (hasNext) { Integer newPersonId = (Integer) tripDataProvider.getValue( "TRIP.PERSONID"); if (!newPersonId.equals(currentPersonId)) { currentPersonId = newPersonId; TreeNode personNode = new TreeNode(); personNode.setId("person" + newPersonId.toString()); personNode.setText( (String)tripDataProvider.getValue( "PERSON.NAME")); outerChildren.add(personNode); innerChildren = personNode.getChildren(); } // Create a new trip node TreeNode tripNode = new TreeNode(); tripNode.setId("trip" + tripDataProvider.getValue( "TRIP.TRIPID").toString()); tripNode.setText( tripDataProvider.getValue( "TRIP.DEPDATE").toString()); // Set "action" property to use for navigation tripNode.setAction( getApplication().createMethodBinding ("#{Page1.tripNode_action}", null)); innerChildren.add(tripNode); hasNext = tripDataProvider.cursorNext(); } } } catch (Exception ex) { log("Exception gathering tree data", ex); error("Exception gathering tree data: " + ex); } }

    
   This code reads the trip records, which are ordered by the personId. For every personId, the code creates a new level-one node in the Tree. The code then creates a level-two node (nested node) for every trip associated with that personId.
   
   
2. Place the cursor in the Java Editor and press Alt-Shift-F to fix the class not found errors. In the Fix Imports dialog box, ensure that java.util.List appears in the Fully Qualified Name field and click OK.
   
   
3. Run the project.
   
   The web browser opens and displays a Tree component with each first-level node showing the name of a person. The top-level node is expanded to show the travel dates for that person. Note that the names appear alphabetically by last name and the dates appear in chronological order, as shown in the following figure. Continue exploring the application by expanding and contracting the first-level nodes in the Tree.
    
   

   Figure 3: Dynamic Tree Node

Here is a mini-tutorial for creating a Popup window for the user to lookup values. One scenario that you might use this for is when the page visitor needs more information then can be displayed in a drop-down list.

Note: The original post of this blog entry had code that did not work in Internet Explorer. Escritorioooo posted a solution to the forum and I updated the code using Escritorioooo's solution. Thanks Escritorioooo!

1. Create a project or open an existing one.
   
   
2. Add a page named Popup.
   
   
3. Add a Table component to the page.
   
   
4. Drag VIR > Tables > State from the Servers window and drop it on the page.
   
   
5. Right-click the Table component and choose Table Layout from the pop-up menu.
   
   
6. In the column for the STATE.STATEID database field, set the Component Type to Hyperlink, and click OK.
   
   
7. Select the Hyperlink component so that its properties appear in the Properties window.
   
   
8. Set the value for the onClick property to doSave('#{currentRow.value['STATE.STATEID']}')
   
   (I got the value to pass to doSave() from the Value Expression in the Table Layout dialog).
   
   
9. Click JSP in the editing toolbar to view the JavaServer Pages script.
   
   
10. Add the following code shown in bold just under the opening tag for ui:body:
    
    

    <ui:body binding="#{Popup.body1}" id="body1" style="-rave-layout: grid"> <script><![CDATA[ function doSave(val) { window.opener.setVal(val); window.close(); }]]></script>

    
    
    The Popup page is now ready for use by another page.
    
    
11. Create a new page called Form1. Make it be the start page.
    
    
12. Drop a Hyperlink component on the page and set the text property to State Code.
    
    
13. Set the url property to /faces/Popup.jsp.
    
    
14. Set the onClick property to doPopup("form1:textField1")
    
    Note: Here you are passing the id of the field to fill with the selected value. Determining the id can be tricky. For example, if you set the label property of the Text Field component, the id changes to form1:textField1_field.
    
    To determine what to use for the id, right-click in the page and choose View in Browser. When the page displays in the browser, choose View Source from the appropriate browser menu and look for the id setting for the component's <input> tag.
    
    
15. Click the ... button for the target property to open the target property editor.
    
    
16. In the property editor, click New and set both the Display and Value to popup. Click in some field and check that both values stuck. Then click OK.
    
    Later you add script to open a window named popup, and this setting causes the Popup.jsp page to display in that window.
    
    
17. If the target property value is still blank, select popup from the combobox for that property.
    
    
18. Drag a Text Field component and drop it under the Hyperlink component. By default, the component's id should be textField1. If not, change the id passed to doPopup() in step 14 to match. Use the View in Browser trick mentioned in Step 14 to determine the value to pass.
    
    
19. Click JSP in the editing toolbar to view the JavaServer Pages script.
    
    
20. Add the following code shown in bold just under the opening tag for ui:body:
    
    

    <ui:body binding="#{Popup.body1}" id="body1" style="-rave-layout: grid"> <script><![CDATA[ function doPopup(destination) { popup = window.open("", "popup", "height=300,width=200,toolbar=no,menubar=no,scrollbars=yes"); destinationElement=document.getElementById(destination); popup.focus(); } function setVal(val){ destinationElement.value=val; }]]></script>

    
    
    This script adds an instance field name openerDestinationElement to the popup window. The script for the Popup page uses openerDestinationElement to get to the Text Field component on the Form1 page.
    
    
21. Run the project. Click State Code to open the popup window. Click a state code to select the code, close the popup window, and populate the text field.

As Java Studio Creator IDE users began building large web applications, we started hearing requests for better IDE performance. So the Creator team decided that the right thing to do was to give performance improvement a top priority and assigned a Performance Tiger team to produce results. As part of the effort, the Tiger team worked directly with customers to identify problems and to verify the performance improvements. The Quality Engineering team was an integral part of this effort, designing tests based on the customer applications, measuring results (see the above chart), and ensuring that that there were no regressions.

Most of the customer applications that were used for testing had over 50 pages. The Quality Engineers couldn't even open many of the applications in the IDE without first changing the default memory setting in the creator.conf file from -J-Xmx384m to -J-Xmx512m or more. One of the customer applications had over 175 pages.

I want to mention that the Performance Tiger team is not dumping and running. They want your feedback. If you are still having performance problems, please post your issues to the forum. Of course, if you are seeing significant improvements, they would probably like to hear about that too.

You can download today's hot fix release from the update center. To learn how to use the update center, go to the Updates web page.

I would like to say "well done" to the Performance Tiger Team, Quality Engineering, Release Engineering, and the customers who worked with us.

Note: for more improvement stats, see Sakthi's blog.

If you have submitted any comments using the Rate and Review Comment box at the bottom of our tutorials, please know that the submissions are not getting to us. Apparently, the mechanism has been broken for a few weeks.

We apologize to those of you who have written to us using the comment box and have not received a reply.

They have not told us when this will be fixed.

Last night we posted our newest tutorial, Using Hibernate With the Sun Java Studio Creator IDE. This tutorial shows the essential steps necessary for adding a Hibernate framework to your project, as well as shows now to display the query results in a DropDown List component and a Table component.

This tutorial is not only helpful for Hibernate users, it is also helpful for anyone who is using a database for which compliant JDBC drivers are not available. You can use the concepts shown here to learn how to use the ObjectListDataProvider and Option arrays to feed the data from your result sets to the web application.

Note: NetBeans has a plug-in to generate the Hibernate persistence classes. You can read about it here and here.

The Java Studio Creator File Upload tutorial shows how to upload a file to the web application's /resources/images folder. But, what if you want to save the uploaded files elsewhere? Here are some alternatives.

A different folder in the web application.You can put the images in any directory in the web application (that is, any directory under the web application's web directory). For example, you can create an upload/images subfolder under web and use the following code to store the images there:

           String realPath =
              theApplicationsServletContext.getRealPath
              ("/upload/images");
           File file = new File(realPath + File.separatorChar +
              justFileName);

One thing you need to be careful about when putting the uploaded files in the web application, is that anyone can access the files by URL, such as http://localhost:29080/MyWebApplication/faces/upload/images/myPicture.gif.

A known directory on the server. If you want to store the images somewhere else on the server, you can use code like the following:

           File file = new File("C:/upload/images" + File.separatorChar +
              justFileName);          
           uploadedFile.write(file);

If you plan to deploy the application to different servers, you might want to use code like the following to ensure that the upload directory exists:

                File dir = new File("C:/upload/images");
                if (! dir.exists()) dir.mkdirs();
                File file = new File(dir.getCanonicalPath() + File.separatorChar +
                        justFileName);
                uploadedFile.write(file);

For more information about the File class, see http://java.sun.com/j2se/1.3/docs/api/java/io/File.html.

An as yet unknown directory. An alternative is to put the directory path in the deployment descriptor, so that you can change the location dynamically.

1. In the Files window, expand web and expand WEB-INF. Double-click web.xml to open it.
   
   
2. Click the Context Parameter Add button, set the following values, and click OK.
   
   Param Name: uploadDirectory (or whatever you want to name it)
   Param Value: C:/upload/images (or whatever your path is)
   
   
   
3. Close and save the web.xml file.
   
   
4. Use the following code:

                   String uploadDirectory =
                           getExternalContext().getInitParameter("uploadDirectory");
                   File file = new File(uploadDirectory +
                           File.separatorChar +
                           justFileName);
                   uploadedFile.write(file);
   

After all these months, I am finally making progress on the tutorial for the Table component. It might be a long time before I document all the steps and get the tutorial through quality assurance, editorial, and production processes. So, for those who can learn by examining code, I have decided to post the project that you build by completing the tutorial.

Here are some of the project's features:

• Gets the data from an ObjectListDataProvider
• Has dropdown lists, checkboxes, and buttons in the table
• Has input fields that are not associated with the underlying data provider, so the input needs to be stored separately
• Calculates totals from the selected table rows
• Has dynamic footer information

Of course, everything I learned, I learned from Winston. He has posted lots of good Table component tips in his blog, so be sure to go there for advanced Table component information.

You can download the project zip from here.

Important Note: After you first open the project, build the project, then close and re-open the project. Otherwise you can get errors and the design-time mechanisms might not see the FoodListDataProvider.

You asked--we delivered. The PDF versions of the Java Studio Creator tutorials are here! Cindy Church converted all of the 44 published tutorials and compressed them into ZIP files that align with the categories on the tutorials index page. For example, the GetStarted.zip file contains: Getting Started With Sun Java Studio Creator, Developing a Web Application, and Using the Java Editor

The hyperlinks work within each PDF file. Cindy added page numbers and formatted the files with wide margins so you can add the printed document to a binder or write notes in the margins. We thank our PDF early reviewers for their comments on the early iterations of our PDF files. If you have any questions or comments about the PDF files, please use our Feedback Form

We have lots of good things going on with the Sun Java Studio Creator tutorials

Tutorials International

In addition to English, the Java Studio Creator tutorials are available in the following languages:

• Japanese
• Chinese
• Korean
• Spanish
• French

We also have the two new tutorials on how to create an internationalized applications in the Java Studio Creator IDE.

PDFs and Videos