JSF Central - Designing User Interfaces with JSF, Dreamweaver, and the JSFToolbox
JSF Central

 Articles & Books 
Product Focus
Designing User Interfaces with JSF, Dreamweaver, and the JSFToolbox
by Ian Hlavats
03 Jun 2007 00:30 EDT

Standard JSF-enabled IDEs don't successfully bridge the gap between visual Web authoring and server-side Java programming. This article introduces JSFToolbox for Dreamweaver, a Web development tool that connects these two disciplines and promotes synergy between UI design and Java development teams.

JSF Validation Mode

JSFToolbox for Dreamweaver includes a powerful JSF validation mode (figure 5) that can be enabled or disabled as needed. When validation mode is enabled, invalid EL expressions will be highlighted in bright yellow in Dreamweaver's design view (figure 5).

Figure 5. JSF EL validation highlighting page with validation errors

Additionally, invalid expressions will also be decorated with a warning sign in Dreamweaver's Bindings Panel.

JSF EL Validation Report

JSFToolbox also adds a new Site Report to Dreamweaver. The JSF EL Validation Report, shown in figure 6, is tightly integrated with Dreamweaver's interactive reporting system.

Figure 6. JSF EL Validation Report in results panel

When you run this report, Dreamweaver's Results Panel will display a list of valid and invalid EL expressions along with line numbers and validation messages. This allows you to navigate to an individual EL expression nested deep inside your site by double-clicking the line in the reports panel. No expression is left unchecked! You can run a site-wide JSF EL validation report to quickly detect and resolve any invalid expressions across tens or even hundreds of pages. The report can be printed and sent by email as a PDF document to team members, clients, and managers, making Dreamweaver an acceptance testing tool for agile development teams.

JSF Expression Builder

The JSF Expression Builder is a sophisticated computational tool, included with JSFToolbox for Dreamweaver, for building and testing compound EL expressions. It can be launched in a number of ways: for example, by double-clicking an expression shown in the Bindings Panel, or by selecting an EL expression in Code View and then pressing CTRL+ALT+SHIFT+B.

The JSF EL is a language in its own right, with its own syntax and grammar, and therefore requires a tool with enough intelligence to interpret these expressions at development time. The JSF Expression Builder has a calculator-like interface that lets you create and validate EL expressions using a wide range of function keys and data-bound controls. It uses an advanced, real-time EL validation engine built on top of two separate EL parser implementations for maximum compatibility between JSP EL (J2EE 1.4) and Unified EL (Java EE 5) environments. Use the JSF Expression Builder to construct an EL expression. Once you have defined the expression you can click the Validate button to test it for correctness. Figure 7 shows the results for an invalid expression.

Figure 7. Displaying invalid EL expression in JSF Expression Builder

The JSF Expression Builder also shows you the branch of the UI component tree in your view that leads to the current EL expression. Therefore, EL expressions can be evaluated and tested for correctness in context. This is important because some expressions might be valid in one location within the UI component tree, but not in others. For example, subclasses of the UIData component typically bind to Java data structures, such as array, List, ResultSet, and DataModel objects. You then define an iterator variable to refer to the item in the data set currently being processed.

The JSF Expression Builder can test iterator variable expressions in context to determine if the value-binding expressions in the data component are valid against the current data model. (We strongly recommend that JSF developers use Java generics to expose parameterized collections of objects to JSF pages. This not only ensures type safety, but is necessary to support design-time JSF EL validation.)

Paving the Way to Web 2.0

As you can see, developing Web 2.0 applications with JavaServer Faces and Dreamweaver is significantly enhanced by using the JSFToolbox extension.

JavaServer Faces is an ideal framework for building sophisticated component-based websites using AJAX and Rich Internet Application (RIA) technologies. Dreamweaver’s award-winning Web authoring environment and exemplary support for Web standards such as XHTML, CSS, and HTML make it an excellent companion to this framework.

JSFToolbox for Dreamweaver bridges these two outstanding technologies and promotes collaboration between design and development teams.

RSS feed(all feeds)

The Editor's Desk
Inside Facelets
In the Trenches

Site version 1.83  Report web site problems

Copyright (C) 2003-2015 Virtua, Inc. All Rights Reserved. Java, JavaServer Faces, and all Java-based marks are trademarks or registered trademarks of Oracle Corporation. in the United States and other countries. Virtua, Inc. is independent of Oracle Corporation. All other trademarks are the sole property of their respective owners.