Can JSF speed up Web application development?

A test-drive of Java Studio Creator

JavaServer Faces was developed with IDEs and rapid development of Web applications in mind. But is JSF living up to its promise? Can an IDE built around JSF potentially improve our productivity? Can such a tool help us create and deploy functioning Web applications faster than currently available options? The best way to answer this question is to test-drive one of the current IDEs that support drag-and-drop JSF development and attempt to develop a real Web application, a task I describe in this article.

My experiment includes the following particulars:

  • The tool selected: Sun Microsystems' Java Studio Creator (JSC), a choice that, of course, is debatable. Reasons for this selection include fairly good reviews on the Web, its selection as runner-up for's 2005 Development Tool of the Year (behind Eclipse, so it's perfectly understandable why it was only a runner-up), and, price (9). There are a number of other tools in this space, many of which, based on a quick review, are worthy of deeper exploration. Some don't provide drag-and-drop functionality, but have other nice features. These IDEs include:
    • Borland JBuilder 2005 Enterprise
    • Eclipse with Exadel Studio Pro
    • Eclipse with Nitrox JSF IDE
    • IBM Rational with JSF support
    • Macromedia Dreamweaver with JSTL and JSF extensions
    • MyEclipse with JSF Developer
    • Oracle JDeveloper
  • The project: A simple Web application that searches an employee database.
  • The developer: I am a reasonably competent developer with infrequent flashes of astonishing brilliance balanced by equally infrequent flashes of profound stupidity; lots of Java development experience; quite a bit of experience developing Web applications with servlets, JavaServer Pages/JSP Standard Tag Library, and Struts; and a basic understanding of JSF. I'm fairly skeptical about using IDEs for real software development. Before starting this project, I spent a few hours playing around with JSC to get somewhat familiar with its capabilities.

Now that the particulars are out of the way, I'm ready to start developing.

Time: 8:00 a.m. I fire up JSC on my laptop at the coffee shop. The first screen looks like this (it may look a little different on your machine, depending upon how you've configured your panels):

Figure 1. Click on thumbnail to view full-sized image.

I select Create New Project. I type JSFExperiment for the project name and click the OK button. The initial design project comes up and looks like Figure 2.

The window resembles the NetBeans IDE, of course, because JSC is built on NetBeans. In the bottom left panel is the actual page I'm working on, with tabs for a visual layout and the page source.

To the left is a panel that allows me to navigate through the pieces of my Web application, including the pages, the session, and application beans. The top right panel has several tabs, which I explain in more detail below. By default, the project is created with a single JSP page.

The JSC download comes with the platform edition of Sun Java System Application Server, which eases the deployment and testing of JSF applications developed with the tool. Alternatively, we could install Tomcat and add/configure JSF support, but having a Web container included with the tool, with built-in JSF support is certainly helpful. There's also a SQL database server (PointBase) installed to support creation and testing of Java Database Connectivity (JDBC) functionality. In addition, a JDK is included along with plenty of documentation. All this makes for a large download, but the cost of a few (hundred) MBs is offset by convenience.

I want my simple application to have two pages: a search page that sets up my query and a results page. I go to the Project Navigator tab, right-click on Page1, and rename it search. Then I right-click on the Web Pages page, select New, then Page, and type results in the resulting dialog box. I now have a Web application with two pages. Now I add some components and set up basic navigation between the pages.

In the search page, I want some text, a dropdown list for selecting search criteria, and a Submit button. So, I select the Palette tab, then JSF Standard Components, and drag an Output Text, a Dropdown List, and a Button component to my search page. After placing the components, I select the Output Text and Button components, then select the Properties tab, and edit the Value property for each of the components to change the output text. After I complete these tasks, the page looks like this:

Figure 2. Click on thumbnail to view full-sized image.

For the results page, I drag an Output Text component and a Data Table component. For the Output Text component, I change the Value property in the Properties tab in the Palette window to edit the display text. You'll see how to customize the headers for the Data Table component below.

Now is a good time to set up basic page navigation. One approach is to right-click on the search page's design page anywhere outside one of the components and select the Page Navigation action. A graphical navigation editor then displays in the design panel. If I click on the search page, it will enlarge, and I can drag a navigation line from the Button component to the results page. Once I've done that, the name of the action is selected; this is a good time to rename it. I call it doSearch. The navigation editor now looks like this:

Figure 3. Click on thumbnail to view full-sized image.

If I click on the Source tab in the design panel, I'll see the faces-config file display with navigation rules defined that are consistent with what I just completed in the editor. JSC also supports dynamically controlling page navigation, which I do not cover in detail here.

This has all been pretty easy so far—almost too easy. Could it be possible that I've created something that actually works? All I need to do to find out is select Build Project from the Build menu in the top menu bar, then Run Project from that same menu. Running the project will start the Sun application server with my built and deployed Web application, and fire up the default browser with the URL pointing to the Web application. Sure enough—I see this page:

Figure 4

When I select the Do Search, button I see this page:

Figure 5

It worked!!! It's now 8:45 a.m. I haven't written a single line of code yet and I have a working (although simple and, admittedly, completely worthless, since I'm not accessing the database yet) Web application. If I had not documented each step in the process, I'm quite sure I could have done this a lot faster. Plus, I had to stand in line for a while to get a bagel.

Now things are going to get a little more interesting. I want my application to talk to a database. JSC comes with a PointBase database server installed, which is very cool. However, for this experiment, I want to connect to a different database. I want to use the Apache Derby open source embedded database. I also just want to connect to a database that's already been created. My database is simple and just contains one employees table. I won't debate the merits of this particular choice for this particular application; I just want to see how easy it is to use a relatively arbitrary database with JSC.

So, from the top menu bar, I select Data, then Add Data Source, and add the JARs I want to use and JDBC driver information (after a bit of refreshing on how to set up the Derby URL to point to a specific place in the filesystem):

Figure 6

Wow, that was easy. I wonder if I actually did anything. I hit the Test Connection dialog and receive:

Figure 7

That's encouraging. I attempt to view the tables in my database (I actually only have one) from the Server Navigator tab and I see the following—even more encouraging:

Figure 8. Click on thumbnail to view full-sized image.

Time: 9:00 a.m. I usually don't order the extra large black coffee—I usually just get wimpy mochas that don't have nearly the caffeine level. My head feels a little funny, but I am also feeling extremely productive. It's probably too early to tell yet whether that feeling is just an illusion.

I haven't covered (and won't in detail) support for page layout. However, JSC offers two options for page layout: grid layout, which places components at an absolute location on the page; and flow layout, which lays out components left to right on the page. I switch from the grid layout (the default, which uses absolute positioning on the page) to a flow layout, which seems a bit more adaptable and less Visual Basic-like. A couple of JSF components also support the laying out of subcomponents. This functionality and JSC's support for easily using stylesheets offer many options for controlling layout, a subject that could be the focus of a future article.

I start using the database by attempting to populate the dropdown list on the search page. When the page loads, I want the list to be populated with only those employees with a position equal to MANAGER. Then I want to allow searching by a particular manager and display attributes for those employees in that manager's department.

To do this, I select my results page, then go to the Server Navigator window, select the EMPLOYEE table, and select the Add to Page context action. Now I double-click on the employeeRowSet tab and get a panel that graphically displays the table rows. I can unselect the columns I don't care about (specifically, all except LNAME and DEPT). This creates a query that returns all the rows from the table with two columns in each row. I only want to return the employees that are managers, so in the query display panel, I add the following criteria:


Now the query editor looks like this:

Figure 9. Click on thumbnail to view full-sized image.

I right-click on my DropdownList in my JSP design page and select Fill List from Database. In the resulting dialog, I select EMPLOYEE.DEPT for the Value field and EMPLOYEE.LNAME for the Display field. If this works correctly, an abc should display in the dropdown list indicating that the data type is a string. This happens, and all seems to work properly.

OK, I can't wait. I haven't written a line of code yet, with the arguable exception of one WHERE clause. Have I produced anything that actually works? I select the File menu, then Save All to save my project; then, from the Build menu, I select Build Project. If there are no errors, a dist/ should appear under a directory matching the project name containing a war file—which occurs as expected.

Now things get a bit tricky only because of my experimentation with my database of choice. The embedded Derby JDBC driver I selected allows only one connection to a given database, which I've already made in the course of working with the database within JSC. So, if I run the project (which would work fine with a typical database by just firing up the default browser from within JSC with our Web application URL), I'll receive an exception indicating that the page couldn't establish the database connection because it's already been established. Alternatively, I could shut down JSC, copy the war file to Tomcat or some other Web container that has JSF support installed, and start the Web application. I may need to remove the db.lck file to successfully establish a new connection (before I send this Web application to production, I'll make sure I invoke the Derby shutdown URL to properly clean things up).

If you don't have another server configured with JSF support yet, a reasonable (and quicker) option is to just use the Sun application server that comes with the JSC installation (there's a reason why it's such a big download). On a Windows box, from the Start Menu, select the Run submenu, then Sun, then J2EE 1.4 SDK, then Start Default Server to start the server. For a project named JSFExperiment, the URL should be: http://localhost:18080/jsfexperiment/.

It works! I now have a Web application with a dropdown that's actually populated with real data from a real database!

Now I begin working on the page that gives the results. For the Data Table component in the results page, I select the EMPLOYEE table from the Server Navigator, and drop it on to the Data Table (note that the entire Data Table needs to be selected). In the query editor, I unselect all columns except for LNAME, MI, FNAME, and POSITION. Then, in the query string, I add WHERE APP.EMPLOYEE.DEPT=? as the criteria.

I want to customize this table a bit, similar to what I did earlier, by removing some of the rows and renaming the column headers. In the Application Outline panel on the left side of the screen, I right-click the Data Table component and select Table Layout. In this dialog I can customize the display strings for the column headings:

Figure 10. Click on thumbnail to view full-sized image.

I want to populate the Data Table based on the value of the dropdown selection. Finally, I'm at the point where I can write a bit of source code! But, it's not much.

I want to populate a value in the session bean (the current menu selection) to make it available in the next page. To do that, in the Project Navigator panel, I select Java Sources, then databoundcomponents, then SessionBean1, and then select Add, then Property from the Context Action menu. I name the new property department and give it a data type of string.

1 2 Page 1
Page 1 of 2