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 much more.

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 WYSIWYG window.

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

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 development (RAD).

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.

Page:   1  2   3