When I discovered JavaServer Faces I knew it was the ideal UI design framework.
After ten years in the Web design industry, and five as a professional Java
developer, I realized that JavaServer Faces and Adobe Dreamweaver would make
an excellent set of tools for building next-generation Web applications. In
2006, my company Tarantula Consulting Inc. launched JSFToolbox for Dreamweaver,
a suite of design and coding extensions to simplify and enhance JSF development
on the Dreamweaver platform.
Discover a Winning Combination
I evaluated many Java open source Web frameworks, Portal solutions (JSR-168)
and Enterprise CMS Systems (JSR-170) before committing to JSF. The Web frameworks
I evaluated, which were based on the Model-View-Controller (MVC) paradigm, offered
the UI design freedom I was looking for, but most of them fell short of the
mark in terms of key infrastructure for data conversion, input validation and
event-handling. Conversely, Portal and Content Management Systems (CMS) had
more than enough out-of-the-box functionality, but suffered universally from
a lack of UI design flexibility when it came to customizing the look-and-feel
of the system. A glorified browser-based WYSIWYG editor is no substitute for
professional UI design tools.
I concluded that the JavaServer Faces framework strikes the best balance between
form and function. On the one hand, JSF is an MVC framework that provides a
loosely-coupled architecture emphasizing a clean separation of concerns that
gives Web designers—with the right skills and training—unlimited
freedom to create user interfaces. On the other hand, JSF's conversion, validation,
and event-handling framework—based on the very successful JavaBeans programming
model—gives Java developers a powerful infrastructure for dealing with
real world business problems.
Getting the UI Design and Technical Flexibility You Need
The real tipping point in my embrace of JavaServer Faces was discovering that
I could still use Dreamweaver, my Web authoring tool of choice, to design the
UI for my JSF applications. Dreamweaver is a top-notch visual HTML editor with
a broad array of Web development features and excellent support for W3C Web
standards, component-based paradigms, and innovative new technologies.
Since the user interface of a JSF application is most commonly HTML, and since
HTML is a visual markup language, it makes sense that the tools used to design
JSF user interfaces should support a visual workflow that includes drag-and-drop
toolbars, visual tags, graphical UI components, and so on. Furthermore, JSF
is based on the MVC pattern, which mandates a clean
separation of concerns between the presentation, business logic and data access
tiers, so having separate tools for UI design and Java programming only makes
“Professional web designers know about graphics design, but they typically
rely on tools that translate their vision into HTML,” write David Geary
and Cay Horstmann in Core JavaServer Faces.
“On the other hand, programmers are notoriously unqualified when it comes
to graphic design. (The example programs in this book bear ample evidence.)
Thus, for designing professional web applications, it is important to separate
the presentation from the business logic. This allows both web designers and
programmers to focus on their core competencies.”
Using the Right Tool for the Right Job
As Geary and Horstmann colorfully indicate, programmers are not always blessed
with a gift for designing attractive Web pages. Furthermore, our reliance on
imperative programming tools for editing a declarative markup language like
HTML is a paradigm mismatch that makes it even harder to design visually appealing
Web pages. Clearly, JSF developers need new tools and a new way of thinking
about UI design.
Let’s face it: Web development is changing rapidly. Building an AJAX-enabled
Web application today using JavaServer Faces has as much to do with component-based,
event-driven GUI programming (e.g., Swing, Visual Basic, etc.) as it does with
and graphics professionals, they use visual design tools, such as Dreamweaver
and Photoshop. JSF developers seeking to create effective Web-based UIs can
learn a lot from these individuals.
As a certified Web designer, I consider Dreamweaver to be an indispensable
tool for any serious UI work. Dreamweaver is the only tool I have evaluated
that truly supports the dominantly visual discipline of UI design for the Web.
JSFToolbox for Dreamweaver extends this visual design-time experience to the
domain of JavaServer Faces development.
As an experienced Java developer, on the other hand, I also use programming
IDEs on a regular basis. These tools are
great for programming, testing, debugging, refactoring and a wide range of development
tasks. I have consistently found, however, that the support for visual HTML
authoring in these tools is below the standards expected by today’s Web
In my experience, the use of two separate environments—one for visual
Web design and one for Java development—is the best solution. That’s
why my company created JSFToolbox for Dreamweaver. This product represents many
years of research and development in the fields of Web-based UI design and Enterprise
Java programming. It has a single purpose: to bridge the gap between these two
traditionally separate disciplines.
Using Dreamweaver for JSF Development
To successfully bridge the gap between visual Web authoring and server-side
Java programming, today's JSF developers need a more powerful set of tools.
The Web 2.0 ideal of the Internet as a rich, desktop-like environment for social
networking and user collaboration means that next-generation websites must incorporate
a new set of design principles and technologies. Next-generation Web developers
must also learn new skills, tools, and technologies to meet users’ increasingly
sophisticated needs and expectations.
This article presents JSFToolbox for Dreamweaver as an essential component
of the Web 2.0 toolset. JSFToolbox integrates JavaServer Faces support into
Dreamweaver with four key features:
1. Round-Trip Engineering with Java IDEs
2. Visual JSF Page Design in Dreamweaver
3. Design-Time Support for UI components
4. Syntax Checking for the JSF Expression Language
In the rest of this article we will discuss each of these features in detail.
Round-Trip Engineering with Java IDEs
Dreamweaver can be used effectively in a JSF environment through round-trip
engineering with a Java IDE. To use this technique, it is important to understand
how Dreamweaver’s workspace is organized.
Dreamweaver is based on the idea of sites. This is similar to the concept
of projects in other IDEs. The important
difference is that, since Dreamweaver is a dedicated Web authoring tool, your
Dreamweaver sites will not contain any Java source code. This is consistent
with the MVC principle of separation of concerns. In MVC terms, think of Dreamweaver
as your dedicated View editing tool and a Java IDE as a dedicated Controller
development tool. You design your JSF pages in Dreamweaver and you write your
JSF backing beans in a separate Java IDE. In terms of Java Web application packaging
and deployment conventions, a Dreamweaver site is logically the same as the
Web application root directory (i.e., the parent directory containing the WEB-INF
and META-INF directories). There are two ways to achieve this.
Map a Dreamweaver Site to a Web Application Project
One way to start using Dreamweaver for JSF development is to map a Dreamweaver
site to an existing Java Web application project (figure 1).
Figure 1. Mapping a Web Application to a Dreamweaver Site
With this approach, you create a new site and map the local root folder in
Dreamweaver to the Web application root directory in your Java IDE. Overall,
this approach enables the best round-trip engineering performance, since changes
made in either environment will be shared instantly.