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 sense.

“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 HTML, CSS and JavaScript. Since most Web designers tend to be visual artists 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 professionals.

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.

Page:  1   2   3