Insider Scoop From the Tutorial Divas

« May 2008
Sun	Mon	Tue	Wed	Thu	Fri	Sat
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

Today

Passing Data Between the Main Page and the Page Fragment

You can pass data to a page fragment through the a managed bean (request bean, session bean, application bean), or through function arguments as shown below

In the following snippit, the main page passes information to the page fragment by argument:

  public void prerender() {    
     Bike bike = getSessionBean1().getBike();
    ...
    PriceTable priceTable = (PriceTable) getBean("PriceTableFragment");
    totalsSubtotalPrice.setText(priceTable.subtotal(bike));
  }

Here, the main page sets the values in the request bean, which the page fragment then picks up and uses. This is from a web application where the user selects an item from a drop-down list in the main page, which, in turn, refreshes the trip data provider in the page fragment.

    // Page Fragment
    public void fragmentPrerender() {
        if (getRequestBean1().getPersonId() != null) {
            try {
                getSessionBean1().getTripRowSet().setObject(
                        1, getRequestBean1().getPersonId());
                tripDataProvider.refresh();
            } catch (Exception e) {
                error("Cannot switch to person " +
                        getRequestBean1().getPersonId().toString());
                log("Cannot switch to person " +
                        getRequestBean1().getPersonId().toString(), e);
            }
        }
    }

    // Main Page
    public void prerender() {
        // If not a postback, set the default person
        if (getRequestBean1().getPersonId() == null) {
            try {
                personDataProvider.cursorFirst();
                getRequestBean1().setPersonId(
                  (Integer)personDataProvider.getValue("PERSON.PERSONID"));
            } catch (Exception e) {
                error("Cannot switch to person " +
                        personDataProvider.getValue("PERSON.PERSONID"));
                log("Cannot switch to person " +
                        personDataProvider.getValue("PERSON.PERSONID"), e);
            }
        }
        Fragment1 fragment1 = (Fragment1) getBean("Fragment1");
        fragment1.fragmentPrerender();
    }

Changing Component Properties in a Page Fragment

The main page can access and modify components in the page fragment through the page fragment's bean object, as shown below:

  public void prerender() { 
    Navigation navigationFragmentBean = (    
    Navigation)getBean("Navigation");
    Hyperlink homeLink = navigationFragmentBean.getHomeLink();
    homeLink.setDisabled(true);
 }

Determining What Page the Page Fragment is Included In

In this code snippet, the page fragment changes its apperance based on what page it is being displayed in.

    public void fragmentPrerender() {
        // If they are done, show the checkout button
        String page;
        String viewId = getFacesContext().getViewRoot().getViewId();
        if (viewId == null || viewId.length() == 0 || "/".equals(viewId)) {
            page = "";
        } else {
            int pos = viewId.lastIndexOf('/');
            if (pos == viewId.length() - 1) { 
                // last char in viewId is '/'
                viewId = viewId.substring(0, pos);
                pos = viewId.lastIndexOf('/');
            }
            //ok if pos is -1, then pos+1 will be 0
            page = viewId.substring(pos+1);
        }
        checkoutButton.setRendered(FINAL_ORDER_PAGE.equals(page));
    }

Using a Tab Set in a Page Fragment for Navigation

Yossarian, a Creator/NetBeans IDE user, submitted this tutorial to the Creator Community Docs Site: Simple Page Fragment Menu Example.

Dynamically Rendering a Page Fragment Component From the Main Page

Here is a snippit where the main page dynamically renders a tree in a page fragment

    public void makeTree() {
        Fragment2 pgfrag = (Fragment2)getBean("Fragment2");
        List children = pgfrag.getDisplayTree().getChildren();
        TreeNode personNode = new TreeNode();
        personNode.setId("node1");
        personNode.setText("Shari Oln");
        children.add(personNode);
    }

Other Examples

In Winston's blog he points to Josh's web site, which uses VWP page fragments to do wonderous things. How about you? Do you have some super page fragment tips to share? If so, post them to the comments below to share with other VWP developers.

Posted at 02:17PM Jun 22, 2007 in Web UI Components | http://blogs.sun.com/divas/entry/page_fragment_tips | Permalink | Comments[13]

Thursday Jun 14, 2007

Using jMaki 9.3 With the NetBeans Visual Web Pack or the Sun Java Studio Creator IDE

We have been blogging about jMaki for over a year, and, during that time, the technology has gone through many iterations, making most of our posts obsolete. With the release of 9.3, there became enough changes that it was time to start reposting these mini tutorials. So, to start, here are new instructions for adding jMaki to a Visual Web Application project or a Sun Java Studio Creator project.

Note: To learn about the modifications, see Carla Mott's Big changes in jMaki blog entry.

Aug 6, 2007 Update: With the later versions, such as 9.6.1, they abstracted some of the functionalities into a separate JSF Compounds library ( jsfcompounds-0.0.2.jar), which you can download from https://ajax.dev.java.net/servlets/ProjectDocumentList?folderID=7871. You must add this jar file to your classpath, by right-clicking the Libraries node in the Projects window, choosing Add Jar/Folder, navigating to and selecting jsfcompounds-0.0.2.jar, and clicking Open. A symptom of this missing jar file is getting the following error in the JSP editor: java.lang.NoClassDefFoundError: com/truchsess/faces/compound/webapp/CompoundChildTagBase

Doing the Set Up

Get the 9.3 jMaki zip. You can download it from http://ajax.dev.java.net/download.html.

Note: There is also a NetBeans jMaki plug-in. In the past, we have written how to create a NetBeans jMaki project and copy the resources from that project into a Visual Web project. When I try it with the latest NBM, I get the following error: Unable to create an instance of jmaki.widgets.yahoo.tree.Widget. See the error log for more details. If I figure out what I am doing wrong, I will repost this with the added instrucitons.
Unzip it to a folder of your choice. I will refer to this folder as jmaki-dir.
Unzip the zip files in jmaki-dir/widgets for the desired widget libraries. In this mini tutorial, you will use the Tree widget from the Yahoo widget library, so, at a minimum, unzip the jmaki-yahoo zip so that you end up with jmaki-dir/widgets/resources/yahoo.
Create a project (if you are using the Visual Web Pack, create a Visual Web Application). In this example, I named mine Jmaki93Demo. I will refer to to the location of this project as project-dir.
Copy the supporting files to your project. You can use File > Add Existing Item to add files to your project. However, to cut down on the number of steps that I have to write up, I will explain up how to copy the files using the operating system instead of using the IDE.
1. Copy jmaki-dir/scripts/glue.js to project-dir/web.
2. Copy jmaki-dir/scripts/system-glue.js and jmaki-dir/scripts/jmaki.js to project-dir/web/resources.
3. Copy jmaki-dir/core/web/resources/config.json to project-dir/web/resources.
In the Projects window right-click Libraries and choose Add Jar/Folder. Then, navigate to and select jmaki-dir/lib/ajax-wrapper-comp.jar, and click OK.

This is the jMaki tag library.
Copy the desired widget resource libraries to jmaki-dir/widgets/resources. For this mini tutorial, you need to copy jmaki-dir/widgets/resources/yahoo to project-dir/web/resources.
In the IDE, click the JSP button in the editing toolbar to display the JSP tags for the page.
Add xmlns:a="http://jmaki/v1.0/jsf" to the <jsp:root> tag.

Adding the Yahoo Tree Widget

Now you are done setting up your project resources and you can add the Tree widget to your web page. One problem that you have to work around is that the jMaki widgets do not expose their features using the Design-Time API. What this means is that you will not be able to see the widgets in the Visual Designer. In addtion, with jMaki, you wrap the component in an <a:widget> tag. Even if you were to use a component from the Pallette, if you wrap the component in an <a:widget> tag, the Visual Designer won't see it. To make it easier to work with the widgets in the Visual Designer, I usually put them inside layout components, such as the Grid Panel. That way, I can position the widgets and be able to see in the Visual Designer where the jMaki widgets are on the page.

Note: Work is in progress to provide the jMaki widgets in component libraries that will work in the Visual Designer. We did a JavaOne Hands-On Lab that covered how this is done.

Click Design in the editing toolbar to return to the Visual Designer.
Drag a Grid Panel component from the Layout section of the Palette and drop it on the page.

While in the development stage, I like to set the border property to 1 to make it easier to visualize the location of the widget on the page. You can clear the border property when you are ready to deploy.

Click JSP in the editing toolbar to display the JSP tags for the page. Replace the <h:panelGrid> tag with the following (this assumes that the Grid Panel's id is gridPanel1. If not, change to match. It is OK if you change the style tag.

<h:panelGrid binding="#{Page1.gridPanel1}" border="1" id="gridPanel1" 
style="position: absolute; left: 48px; top: 48px">
<a:widget name="yahoo.tree"
value="{'root' : {
'title' : 'Food',
'expanded' : true,
'children' : [
{'title' : 'Nuts'},
{'title' : 'Fruit',
'children' : [
{'title' : 'Banana'}
]
}
]
}
}"/>
</h:panelGrid>

You now have added a jMaki tag for the Yahoo Tree widget.

Click the Run button. When the page displays in the browser, view the source from the browser to see how the jMaki tags are rendered.
In future blogs, we will further explore the jMaki features. To keep this blog short, we will just show how to subscribe to the Tree widget's onClick topic get the widget's value. If necessary, click Design in the editing toolbar to display the page in the Visual Designer. Drag a Script component from the Advanced section of the Palette and drop it on a blank spot on the page.

Click JSP to view the JSP tags.

If you are using the Sun Java Studio Creator IDE, replace the <ui:script> tag as follows:

<ui:script binding="#{Page1.script1}" id="script1">
var handler = function(message) {
alert('You selected ' + message.value.label);
}
jmaki.subscribe("/yahoo/tree/onClick", handler);
</ui:script>

If you are using the NetBeans Visual Web Pack, replace the <webuijsf:script> tag as follows:

<webuijsf:script binding="#{Page1.script1}" id="script1">
var handler = function(message) {
alert('You selected ' + message.value.label);
}
jmaki.subscribe("/yahoo/tree/onClick", handler);
</webuijsf:script>

If the script tag appears before the <a:widget> tag, cut the script tag and paste it below the <a:widget> tag, or else you might get a jMaki undefined error when you run the web application and click on a tree node..
Run the web application again. When you click on a tree node (not the expansion box), you get an Alert box that shows what you just clicked.

Posted at 05:04PM Jun 14, 2007 in AJAX | http://blogs.sun.com/divas/entry/using_jmaki_9_3_with | Permalink | Comments[5]

Wednesday Apr 04, 2007

Migrating Creator Apps to VWP and Tomcat

A customer recently sent email that he was having trouble migrating the Movie Administration Sample Application, originally written for Sun Java Studio Creator, into NetBeans Visual Web Pack. When he opened the project in VWP, he resolved the missing server error by setting the target server to the Bundled Tomcat server. Upon running the application, he received the following error message:

package javax.faces does not exist

This error indicates that the J2EE packages are not available to the Tomcat web server. The fix is to add the JSF 1.1 library to the project as follows:

In the Projects window, right-click the Project_Name > Libraries node and choose Add Library from the pop-up menu.

In the Add Library dialog box, select JSF 1.1 and click Add Library.

A second problem, an HTTP 500 Status error, occurred when deploying the application. The server log included this error:

java.lang.NoClassDefFoundError: javax/servlet/jsp/jstl/core/Config

This is because the standard.jar/jstl.jar are needed for deploying to the Tomcat server. Here's the fix:

In the Projects window, right-click the Project_Name > Libraries node and add in the JSTL 1.1 library.

For more information on migrating projects, see Importing a Sun Java Studio Creator 2 Project in NetBeans Visual Web Pack 5.5.

Posted at 04:16PM Apr 04, 2007 in NetBeans Visual Web Pack | http://blogs.sun.com/divas/entry/migrating_creator_apps_to_vwp | Permalink | Comments[1]

Wednesday Feb 07, 2007

Coordinated Drop-Down Lists

I have seen a lot of inquiries in the users alias and the forum about how to do coordinated drop-down lists. Coordinated drop-downs are basically a set of nested master-detail records that follow the same pattern that we show in Using Databound Components to Access a Database. With coordinated drop-downs, whenever the user selects a new item from the master drop-down, you need to refresh the list in the detail drop-down.

In the following example, I show how to coordinate drop-down lists that contain data from the Travel database. The first drop-down lists all the PERSON records. The second drop-down shows all the TRIP records for the selected PERSON, and the third drop-down shows all the FLIGHT records for the selected TRIP. Finally, the detail data shows data from the selected FLIGHT.

The trick with coordinating multiple drop-downs, is that you need to trickle down the refreshing of the lists. A change in the first drop-down's selection requires refreshing the second list, which in turn, requires refreshing the third list, and so on.

In this example, I took the easy route. When the user makes a new selection from the PERSON drop-down, I select the first record by default and coordinate the TRIP drop-down by showing all the trips for the first-person. Then, I show all the flights for the first TRIP record, and the detail data for the first FLIGHT record.

Create your Sun Java Studio Creator (JSC) or NetBeans Visual Web Pack (VWP) project.
Drop three Drop Down List components, a Property Sheet component, and a Message Group component onto the page in the Visual Designer. The Message Group component is to help diagnose problems if something goes wrong.
Select each component and, in the Properties window, change the id property as follows, from top to bottom:
1. personDD
2. tripDD
3. flightDD
Drag the PERSON table from the Travel database (in the Servers window for JSC, and in the Runtime window for VWP), and drop it on the personDD Drop Down List component in the Visual Designer.
Drop the TRIP table on the tripDD component, and drop the FLIGHT table on the flightDD component.
Right-click each Drop Down List component and choose Bind to Data. Make the following selections:
1. personDD. Value Field: PERSON.PERSONID, Display Field: PERSON.NAME
2. tripDD. Value Field: TRIP.TRIPID, Display Field: TRIP.DESTCITY
3. flightDD. Value Field: FLIGHT.FLIGHTID, Display Field: FLIGHT.DEPAIRPORT
Now, right-click each Drop Down List component and choose Auto-Submit on Change from the pop-up menu. This will cause the page to be submitted to the server each time a new selection is made from any list, and will cause the appropriate change event handlers to be called.
Drag the FLIGHT table again, but this time drop it on a blank spot on the page. A dialog box appears. Choose the radio button for creating a flightRowSet in the page bean, and click OK.

I chose to put the other queries in the session bean because I didn't want to lose the query data everytime the page is submitted. As the detail data pretty much changes on each submission, I am choosing to put this rowset in the page bean.
In the Outline window, double-click the SessionBean1 > tripRowSet node to open it in the Query Editor. In the Query Editor, right-click on the PERSONID cell in the first column and choose Add Query Criteria. Select the Parameter radio button, click OK and close the Query Editor.
Do the same for the flightRowSet, but add the query criteria for the TRIPID. Close the Query Editor.
Now, double-click the flightRowSet in the page bean, add query criteria for FLIGHTID, and close the Query Editor.

This query is for the detail data.
Display the page in the Visual Designer (it should be displayed already), and click Java to switch to the source editor.

Add the following code to the bottom, just before the final end brace:

public void initFlightDropDown() {
    try {
        tripDataProvider.cursorFirst();
        getSessionBean1().getFlightRowSet().setObject(
                1, tripDataProvider.getValue("TRIP.TRIPID"));
        flightDataProvider.refresh();
    } catch (Exception e) {
        error("Cannot switch to trip " +
                tripDataProvider.getValue("TRIP.TRIPID"));
        log("Cannot switch to person " +
                tripDataProvider.getValue("TRIP.TRIPID"), e);
    }
}

public void initFlightDetail() {
    try {
        flightDataProvider.cursorFirst();
        flightRowSet.setObject(
                1, flightDataProvider.getValue("FLIGHT.FLIGHTID"));
        flightDataProvider.refresh();
    } catch (Exception e) {
        error("Cannot switch to flight " +
                flightDataProvider.getValue("FLIGHT.FLIGHTID"));
        log("Cannot switch to flight " +
                flightDataProvider.getValue("FLIGHT.FLIGHTID"), e);
    }
}

Add the following code shown in bold to the prerender method:

public void prerender() {
    if ( personDD.getSelected() == null ) {
        try {
            personDataProvider.cursorFirst();
            getSessionBean1().getTripRowSet().setObject(
                    1, personDataProvider.getValue("PERSON.PERSONID"));
            tripDataProvider.refresh();
        } catch (Exception e) {
            error("Cannot switch to person " +
                    personDataProvider.getValue("PERSON.PERSONID"));
            log("Cannot switch to person " +
                    personDataProvider.getValue("PERSON.PERSONID"), e);
        }
        initFlightDropDown();
        initFlightDetail();
    } else {
        try {
            // Synchronize data providers with current selections
            personDataProvider.setCursorRow(
                    personDataProvider.findFirst(
                    "PERSON.PERSONID", personDD.getSelected()));
            tripDataProvider.setCursorRow(
                    tripDataProvider.findFirst(
                    "TRIP.TRIPID", tripDD.getSelected()));
            flightDataProvider.setCursorRow(
                    flightDataProvider.findFirst(
                    "FLIGHT.FLIGHTID", flightDD.getSelected()));

        } catch (Exception e) {
            error("Cannot switch to selections");
            log("Cannot switch to selections", e);
        }
    }
}

Click Design in the editing toolbar to switch to the In the Visual Designer.

Double-click the personDD Drop Down component (the top one) to cause the IDE to add a process value change handler for the component. The IDE switches to the added code. Add the following code shown in bold to the method:

public void personDD_processValueChange(ValueChangeEvent event) {
    try {
        getSessionBean1().getTripRowSet().setObject(
                1, personDD.getSelected());
        tripDataProvider.refresh();
    } catch (Exception e) {
        error("Cannot switch to person " +
                personDataProvider.getValue(
                "PERSON.PERSONID"));
        log("Cannot switch to person " +
                personDataProvider.getValue(
                "PERSON.PERSONID"), e);
    }
    initFlightDropDown();
    initFlightDetail();
}

Click Design to switch back to the Visual Designer, double-click the tripDD Drop Down List component (the middle one) to create its change event handler, and add Add the following code shown in bold to the method:

    public void tripDD_processValueChange(ValueChangeEvent event) {
        try {
            getSessionBean1().getFlightRowSet().setObject(
                    1, tripDD.getSelected());
            flightDataProvider.refresh();
        } catch (Exception e) {
            error("Cannot switch to trip " +
                    tripDataProvider.getValue(
                    "TRIP.TRIPID"));
            log("Cannot switch to trip " +
                    tripDataProvider.getValue(
                    "TRIP.TRIPID"), e);
        }
        initFlightDetail();        
    }

Click Design one more time and double-click the flightDD Drop Down List component (the bottom one). Add the following code shown in bold the change event handler:

public void flightDD_processValueChange(ValueChangeEvent event) {
    try {
        flightRowSet.setObject(
                1, flightDD.getSelected());
        flightDataProvider1.refresh();
    } catch (Exception e) {
        error("Cannot switch to flight " +
                flightDataProvider.getValue(
                "FLIGHT.FLIGHTID"));
        log("Cannot switch to flight " +
                flightDataProvider.getValue(
                "FLIGHT.FLIGHTID"), e);
    } 
}

Take a look at the code you have added. The code in the prerender method first handles the case where the user first lands on the page and nothing has been selected. It seeds the drop-down lists with the first record from the PERSON query and synchronizes queries for the nested detail drop-down lists and the detail data. If there is a selected person, it synchronizes the cursor positions in the queries with the drop-down list selections.

The change event handlers synchronize the appropriate detail queries. A change in PERSON selection refreshes the trip, flights, and flight detial queries. A change in TRIP selection refreshes the flights and flight detail queries, and a change in FLIGHT selection refreshes the flight detail query.
The last thing we need to do is to display some detail information. Click Design to display the page and, in the Outline window, expand propertySheet1, expand section1, and select property1 (you can also select the property1 in the Visual Designer, but I find it easier to work with the property sheet in the Outline window).
In the Properties window, change the label property to Airline:.
Drop a Static Text component on property1 in the Outline window.
Expand property1, right-click staticText1, and choose Bind to Data.
Choose flightDataProvider1 (not flightDataProvider) from the drop-down list, select FLIGHT.AIRLINENAME, and click OK.
If you want, you can add more Property components to the Property Sheet Section, add Static Text components to the Property components, and bind the Static Text components to other columns in the database table, as I did in the above screenshot.
Now you are ready to click Run Main Project and test your coordinated drop-downs.

Posted at 06:10PM Feb 07, 2007 in Web UI Components | http://blogs.sun.com/divas/entry/coordinated_drop_down_lists | Permalink | Comments[0]

Tuesday Jan 30, 2007

Missing Image Bug

I just finished writing a NetBeans Visual Web Pack version of the JasperReports tutorial Generating Reports and PDFs From a Web Application. The NetBeans version should appear on the portal sometime today.

While working on this tutorial, I came across a bug that prevented the company logo from appearing in the HTML output when the application is deployed to version 9 of the Sun Java System Application Server. The bug happens when you request binary data through the FacesServlet, and the fix is in for version 9.1. Ryan and Craig were the engineers who figured out why the problem was happening. They both pointed out to me that the following statement in my code sample, which sets a relative url, is not recommended:

  exporter.setParameter(JRHtmlExporterParameter.IMAGES_URI, "image?image=");

The above statement results in following HTML:

  http://localhost:8080/TravelReport/faces/image?image=img_0_0_0

By using the relative URL, I was needlessly incurring, for a non-JavaServer Faces entity, the extra overhead that is associated with a JavaServer Faces request. It is better to serve up the image directly, instead of going through the JavaServer Faces lifecycle.

I am pushing out a new version of the Java Studio Creator tutorial today, which shows the correct way to pass the url (which happens to work with Sun Java Application Server 9):

   exporter.setParameter(JRHtmlExporterParameter.IMAGES_URI,
     request.getContextPath() + "/image?image=");

While we are talking about server bugs, a customer wrote to me that they were getting a java.lang.NullPointerException from the javax.faces.component.UIComponentBase class's getRenderer method whenever they use the Table component in web applications deployed to JBoss. This is a known bug, and is documented in the Release Notes. What is happening is that when you create a Visual Web project, the classpath on the container is checked. If the IDE finds a MyFaces implementation, it gives the MyFaces implementation precedence over the JavaServer Faces Reference Implementation libraries. To prevent this problem from happening, delete or move the JBOSS_HOME/server/default/deploy/jbossweb-tomcat55.sar/jsf-lib directory before you create the Visual Web Pack project for that container. This forces the the IDE to bundle the JSF Reference Implementation with the project.

To go back to using the MyFaces run time for running non-Visual Web Pack based applications, follow these steps:

In the Projects window, right-click the Libraries node and choose Add Library.
In the Add Library dialog box, select the desired MyFaces binaries.
Click Add Library.
Make sure the JSF-RI libraries are not deployed.
Modify web.xml to include the following:

<listener>
  <listener-class>
    org.apache.myfaces.webapp.StartupServletContextListener
  </listener-class>
</listener>

Posted at 02:04PM Jan 30, 2007 in Web UI Components | http://blogs.sun.com/divas/entry/missing_image_bug | Permalink | Comments[0]

Monday Jan 08, 2007

JasperReports Tutorial: Missing Record Bug

A few customers have pointed out a bug in the Generating Reports and PDFs From a Web Application tutorial. I have to admit that I am somewhat embarrased that I never noticed that the first record is missing from the reports.

I am trying to get the fix pushed out this week. In the meantime, for those who are using code from the tutorial, you should know that you need to either call beforeFirst() or execute() on the rowset before passing the rowset to the JRResultSetDataSource constructor.

Posted at 03:20PM Jan 08, 2007 in Sun Java Studio Creator | http://blogs.sun.com/divas/entry/jasperreports_tutorial_missing_record_bug | Permalink | Comments[1]

Thursday Dec 21, 2006

The Server Encountered an Internal Error

Sometimes, when testing your Visual Web application, you might get a page with the following unhelpful error:

HTTP Status 500 -

type Status report

message

description The server encountered an internal error () that prevented it from fulfilling this request.

To find out what the real problem, go back to the NetBeans IDE and click the tab for the server's log (usually in the same area as the output window). There, you will find a more helpful description of the error. For example, you might see:

Dec 21, 2006 5:24:21 PM org.apache.catalina.core.ApplicationDispatcher invoke
SEVERE: Servlet.service() for servlet jsp threw exception
javax.faces.el.PropertyNotFoundException: java.lang.RuntimeException:
org.apache.tomcat.dbcp.dbcp.SQLNestedException: Cannot load JDBC driver class 
'org.apache.derby.jdbc.ClientDriver'

In this particular case, I had not made the database driver available to the server. I resolved the problem by copying my database's JDBC3 compliant driver to the server's common library folder. With the Tomcat server, this would be something like apache-tomcat-5.5.17\common\lib.

If the error is a programming error, such as a class cast error, you can search through the error output for the name of your page. If such line exists in the output, it will show the line number of the erroneous statement. Look for the names of your managed beans as well.

You can send diagnostic statements to the log from your page beans and managed beans by calling log("put your message here").

Posted at 05:52PM Dec 21, 2006 in NetBeans Visual Web Pack | http://blogs.sun.com/divas/entry/the_server_encountered_an_error | Permalink | Comments[3]

Tuesday Dec 19, 2006

Workaround for Button Component Viewed in IE7

When a web page that includes the Web UI Button component is viewed by the Internet Explorer 7 browser, the button component might be rendered with an incorrect width. This problem occurs when the Button component is placed on the page using absolute positioning.

You can use either of the following workarounds to solve this problem.

Specify the width property for the button, or resize the button in the Visual Designer to make the IDE assign a width to the button.
In the Visual Designer, nest the Button component inside a Group Panel component. By doing this, you move the absolute positioning from the button to the panel, outside the button.

Button

Posted at 11:55AM Dec 19, 2006 in Web UI Components | http://blogs.sun.com/divas/entry/workaround_for_button_component_viewed | Permalink | Comments[1]

Sunday Dec 17, 2006

Using the Object Array Data Provider

A forum poster recently asked for the following information:

I have a table with 5 columns, (week_no, objective, date1, date2 and add report). How do I get the date for date1( example, today's date)? How do I set the week number as auto increment by 1( example, row 1, the week_no is 1, row 2, the week_no is 2 and so on)? Lastly, how to I set the add report button to link to another JavaServer Pages file?

This scenario gives me an excellent opportunity to show how to use an Object Array Data Provider (OADP). I usually use the Object List Data Provider (OLDP), but OLDPs take a bit more work. (See the Using Hibernate tutorial for an OLDP example.) If you have a simple array of data, the OADP might be the better choice, as in this case. The following steps create a table similar to the one requested in the forum.

Create a web application named ArrayTableExample.

(If using the Visual Web Pack, be sure to create a Visual Web Application.)
Create a JavaBeans object for the array. In this example, I chose to put the week number, start date, and end date in the bean. In the Projects window, right-click Source Packages > arraytableexample, choose New > Java Class, name the class WeekBean, and click Finish.

Replace the class definition with the following code shown in bold.

/*
 * WeekBean.java
 *
 */

package arraytableexample;

public class WeekBean 
        extends Object implements Serializable {
    
    private int weekNumber;
    private Calendar startDate;
    private Calendar endDate;
    private int dayOfWeek; 
    
    public WeekBean(int weekNumber) {
        this.weekNumber = weekNumber;        
        Calendar workingDate = Calendar.getInstance();
        workingDate.set(java.util.Calendar.HOUR_OF_DAY, 0);
        int offset = weekNumber - 1; 
        workingDate.add(
            Calendar.DAY_OF_YEAR, 
            + (offset * 7));
        dayOfWeek = workingDate.get(Calendar.DAY_OF_WEEK);
        startDate = (Calendar) workingDate.clone();   
        startDate.add(
        Calendar.DAY_OF_YEAR, - (dayOfWeek - Calendar.SUNDAY));
        endDate = (Calendar) workingDate.clone();
        endDate.add(
            Calendar.DAY_OF_YEAR,
            + (Calendar.SATURDAY - dayOfWeek));
    }
    
    public WeekBean() {
        this(1);
    }
        
    public int getWeekNumber() {
        return this.weekNumber;
    }
    
    public void setWeekNumber(int weekNumber) {
        this.weekNumber = weekNumber;
    }
    
    public Calendar getStartDate() {
        return this.startDate;
    }
    
    public void setStartDate(Calendar startDate) {
        this.startDate = startDate;
    }
    
    public Calendar getEndDate() {
        return endDate;
    }
    
    public void setEndDate(Calendar endDate) {
        this.endDate = endDate;
    }
}

Right-click in the code and choose Fix Imports. Make sure the Fully Qualified Name for Calendar is java.util.Calendar, and click OK.
Close and save the file.
In this example, we want the table to show the same data throughout the session, so put the array property in the session bean. In the Projects window, double-click the Session Bean node to open SessionBean1.java in the source editor.

Add the following code to the bottom of the class defintion, just before the ending brace. This code also adds properties for passing the selected start and end dates to other pages.


    /**
     * Holds value of property weeks.
     */
        WeekBean[] weeks = {
            new WeekBean(1),
            new WeekBean(2),
            new WeekBean(3),
            new WeekBean(4)
        };

    /**
     * Getter for property weeks.
     * @return Value of property weeks.
     */
    public WeekBean[] getWeeks() {
        return this.weeks;
    }
    
    /**
     * Holds value of property reportStartDate.
     */
    private Calendar reportStartDate;

    /**
     * Getter for property reportStartDate.
     * @return Value of property reportStartDate.
     */
    public Calendar getReportStartDate() {

        return this.reportStartDate;
    }

    /**
     * Setter for property reportStartDate.
     * @param reportStartDate New value of property reportStartDate.
     */
    public void setReportStartDate(Calendar reportStartDate) {

        this.reportStartDate = reportStartDate;
    }

    /**
     * Holds value of property reportEndDate.
     */
    private Calendar reportEndDate;

    /**
     * Getter for property reportEndDate.
     * @return Value of property reportEndDate.
     */
    public Calendar getReportEndDate() {

        return this.reportEndDate;
    }

    /**
     * Setter for property reportEndDate.
     * @param reportEndDate New value of property reportEndDate.
     */
    public void setReportEndDate(Calendar reportEndDate) {

        this.reportEndDate = reportEndDate;
    }

Right-click in the code and choose Fix Imports. Make sure the Fully Qualified Name for Calendar is java.util.Calendar, and click OK.
Close and save SessionBean1.java.
View Page1 in the Visual Designer.
In the Palette, expand the Data Providers section.
Drag the Object Array Data Provider node and drop it on Page1.
If the properties for the OADP do not appear in the Properties window, select Page1 > objectArrayDataProvider1 in the Outline window to make its properties appear.
In the Properties window, change the id to weekDataProvider.
Here is where it starts getting kludgy. You should be able to choose weeks from the array drop-down list, but it propably is not appearing at this point. If weeks is not in the drop-down list, choose Clean and Build Main Project from the main menu. After the build completes, close and reopen the project.
In the Outline window, select Page1 > weekDataProvider.
In the Properties window, select weeks (SessionBean1) from the array drop-down list.
Drag a Table component from the Palette and drop it on Page1.
Right-click the Table component and choose Table Layout.
In the Table Layout dialog box, choose weekDataProvider from the Get Table From drop-down list.
Use the Up and Down buttons to put the values in the Selected list in the following order:
```
weekNumber
startDate
endDate
```
(Optional) Set the Header Text values for the columns to Week, Start Date, and End Date.
Click New to add another column.
In the new column, set the Header Text to blank, select Button from the Component Type drop-down list, and set the Value Expression to Show Me.
Click OK to dismiss the dialog box.

Again, it gets kludgy. Only one row appears, which says "No items found", and there is no button. Don't worry, it will work out in the end.
In the Outline window, expand table1 > tableRowGroup1 > tableColumn4, right-click button1, and choose Edit Action Event Handler.

Page1.java opens in the source editor and scrolls to the newly added button1_action method.

Add the code shown in bold to the method.

  public String button1_action() {
        getSessionBean1().setReportStartDate(
          (Calendar)getValue("#{currentRow.value['startDate']}"));
        getSessionBean1().setReportEndDate(
          (Calendar)getValue("#{currentRow.value['endDate']}"));        
        return null;
  }

Right-click in the code and choose Fix Imports. Make sure the Fully Qualified Name for Calendar is java.util.Calendar, and click OK.
Typically, you would set up page navigation to go to another page to display the report. For simplicity, click Design and drop a Static Text component on the page to display the selected start date.
Right-click the Static Text component and choose Bind to Data.
Click Bind to an Object, select SessionBean1 > reportStartDate, and click OK.
Click Run Main Project. When the page appears, click the button in each row to verify that the action method returns the right value.

Winston has many blog entries about the dataprovider. A good place to start is his blog titled What is this Data Provider in Sun Java Studio Creator anyway?. Another good resource is Joel Brown's Weblog.

Posted at 07:01PM Dec 17, 2006 in Web UI Components | http://blogs.sun.com/divas/entry/using_the_object_array_data | Permalink | Comments[5]

Thursday Sep 21, 2006

Using Servlets in the Java Studio Creator IDE

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.

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.
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.
Click the Servlets button in the editing toolbar and click Add Servlet Element.
Set the Servlet Name to whatever you choose (I used ReportGenerator).
For the Servlet Class, browse to the source for your servlet (or type in the fully-qualified class name if using a library).
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.

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: