Import a WAR File into Dreamweaver
Another approach is to import a Web Archive (WAR) file directly into Dreamweaver
for ongoing development and maintenance of an existing Web application. Since
a WAR file already contains the necessary JSF pages, XML configuration files,
Java classes, and library JARs needed to develop and deploy a JSF application,
it is an excellent starting point for a Dreamweaver site. This is where JSFToolbox
plays an invaluable role. JSFToolbox enables you to import the WAR file into
Dreamweaver (figure 2), making it easy for Java developers unfamiliar with the
platform to get up and running fast.
Figure 2. Importing a WAR file into Dreamweaver
Enabling easy sharing of Java Web application components is just one example
of a number of features that JSFToolbox adds to Dreamweaver to promote synergy
between Web design and Java development teams.
Once your Dreamweaver site is set up, it’s time to start thinking about
the View in your JSF application. JSFToolbox currently supports both JavaServer
Pages (JSP) and Facelets as JSF view handling frameworks. Essential to this
support is the ability to design JSF pages visually in Dreamweaver. Let’s
see how it works.
Visual Design of JSF Pages in Dreamweaver
Creating JSF pages for your Web application is easy. Dreamweaver supports
a large number of document types and tag libraries, and has second-to-none design
capabilities such as drag-and-drop, zoom, guides, snap-to-grid, Live Data mode,
and more. JSFToolbox for Dreamweaver extends these capabilities to JSF, making
it an ideal tool for UI development on the Java platform. Once it is installed,
you get comprehensive IDE support for the standard JSF Core and JSF HTML tag
libraries. This includes a wide range of Dreamweaver menu commands, server behaviors,
tag toolbars, reference panel documentation, new document types, new component
types, tag chooser dialogs, dynamic code hints, and much more. You can also
download specialized Dreamweaver extensions for other JSF technologies, such
as Seam and Facelets, from the JSFToolbox website.
JSF Document Types
JSFToolbox extends Dreamweaver's JavaServer Pages (JSP) support to enable
JSF tags to display visually at design time. FaceletsTools for Dreamweaver,
our extension product for the Facelets composite view definition framework,
adds two new JSF document types to Dreamweaver (*.jsf and *.xhtml). JSP and
Facelets pages now fully support visual JSF tag transformations, dynamic code
hints for the JSF Expression Language (JSF EL), drag-and-drop UI design, and
Drag-and-Drop UI Design
Since JSF is a component-based framework, it naturally supports the "drag-and-drop"
design idiom found in Visual Basic and other GUI development tools. In fact,
supporting this idiom is one of the key motivations behind the JSF specification.
Our tools include two separate Dreamweaver Insert toolbars for each supported
JSF tag library: one for Code View and another for Design View. The Code View
toolbar launches a data-bound tag chooser dialog with integrated help, while
the Design View toolbar allows you to drag-and-drop a visual tag into Dreamweaver's
Now that we've examined how to create JSF pages in Dreameweaver, let's look at working with with UI components.
Design-Time Support for UI Components
Since JSF views are composed of a tree of UI components, JSFToolbox provides
another powerful design tool to complement this technology. The UI Component
Tree floating panel in Dreamweaver shows you the JSF component tree for the
page or pages you are currently working on. Now you can see the internals of
your JSF views at design time, before running your Web application.
Navigating the UI Component Tree
This new Dreamweaver UI Component Tree panel displays an interactive hierarchy
of UI components that enables you to navigate from tag to tag, and document
to document. Figure 3 shows the window.
Figure 3. UI Component Tree (Vertical Orientation)
Additionally, you can toggle component information to display the component
family, component type, and line numbers for each tag shown in the UI Component
Accessing UI Components
JSF UI Components can be bound to backing beans in a number of ways. The most
common way is through value-binding and method-binding EL expressions in JSF
tag attributes. For example, the HtmlCommandButton component, instantiated by
the h:commandButton tag, accepts a method-binding expression in its action attribute.
This expression binds the component to a backing bean method that is invoked
when a user clicks on the button at runtime.
For programmers with a Swing GUI development background, this is known as
the publisher-subscriber event handling model. User interface components publish
events, and event-handling components subscribe to and handle these events.
By inserting a JSF EL expression in the tag's action attribute, you are registering
a backing bean as an event handler for the button component. JSFToolbox for
Dreamweaver supports the JSF EL extensively, enabling you to bind UI components
to JSF backing beans and other resources at design time.
And finally, JSFToolbox has one more trick up its sleeve: tools for working with the JSF EL.
Using the JSF Expression Language
JSFToolbox for Dreamweaver performs design-time introspection on your site’s
classpath, and updates data-bound controls and code hints whenever you make
changes to your Java code. This encourages refactoring and promotes rapid application
Dynamic JSF EL Code Hints
To help you bind UI components to the right properties and methods of your
backing beans, JSFToolbox for Dreamweaver provides dynamic code hints wherever
JSF EL expressions are allowed. A dynamic code hints menu will pop up to assist
you in constructing a valid EL expression, as shown in figure 4.
Figure 4. Managed Bean code hints in Dreamweaver
In some cases, a list of possible values is displayed in a data-bound combo
box control. In others, you can access these code hints simply by typing the
opening brace of a JSF EL expression.