Developing Web 2.0 applications
with JavaServerFaces
and Dreamweaver
>> Just Became Easier
1. Introduction
2. Getting Started
3. Developing Web Sites
Selected 4. Using Components
5. Internationalization
6. Code View Support
7. Design View Support
8. Keyboard Shortcuts
9. Tag Object Toolbars
10. JSF Server Behaviors
11. Property Inspectors
12. JSF Tag Reference

4. JavaServer Faces Components

Documentation > JSF > Using Components > JavaServer Faces Components

JavaServer Faces is a component technology for building Web applications on the Java platform. It provides a framework that application developers can extend to build complex user interfaces for the Web using standard and custom components.

The JavaServer Faces framework uses the Model-View-Controller (MVC) pattern to separate the model, or the data, of the application from the user interface. This allows you to create multiple views of the same data. The controller element (the Faces servlet) handles user events, updating the model and displaying views as needed.

The views in a JSF application are typically JSP pages (or XHTML pages if you are using Facelets) and these views are enhanced through the use of special tags. These tags encapsulate user interface (UI) components that you can use to implement the logic of your application. The two standard JSF tag libraries are the JSF Core and the JSF HTML tags.

The JSF Core tags allow you to use the main features of the JSF framework, such as conversion, validation, and event handling, while the JSF HTML tags represent HTML user interface components such as text fields, radio buttons, tables, and forms. JSF also includes many other types of components, including:

JSFToolbox fully supports JSF managed beans and provides drag-and-drop functionality for generating JSF expression language (EL) statements from bean properties and methods. Managed beans provide an excellent way to connect your JSF pages to server-side components that contain the business logic of your application.

JSFToolbox automatically detects any managed beans available to your Dreamweaver site and populates a tree of components in Dreamweaver's components palette. You can drag-and-drop beans, properties, and methods to create value-binding and method-binding expressions using the JSF Expression Language (JSF-EL) in your pages.

You can also import managed beans from an existing JSF applications into Dreamweaver and JSFToolbox will populate the Managed Bean components palette automatically. See the Imported Jar feature for details.

Dreamweaver's Components Palette

Drag-and-Drop JSF Expressions

Once JSFToolbox has added your managed beans to Dreamweaver's components palette, you can drag-and-drop managed bean properties and methods into Dreamweaver's code view to add JSF expressions to your tags. When you work with managed bean code hints in Dreamweaver's code view, you can expand these JSF expressions

Bean Drag and Drop

Drag-and-Drop In Action!

JavaServer Faces (JSF) uses message bundles for internationalizing your Web applications. JSFToolbox extends Dreamweaver by add a Message Bundle component and with drag-and-drop functionality for adding localized messages to your JSF pages.

JSFToolbox will find any message bundle components available to your site. These will automatically appear in the Message Bundles components palette. You can drag-and-drop message bundle properties onto your JSF pages to display localized messages to your users. Simple configure a message bundle in your Faces configuration file and JSFToolbox will automatically detect it. The Message Bundle will appear in the components palette, along with property and supported locale information.

Message Bundle Components

Loading your Message Bundle

Before you can use your message bundle in a JSF page, you must declare a JSF Core tag to enable the message bundle for that page. You could do this in a Dreamweaver template and allow the tag to propagate to all your template-controlled Web pages. You can use the JSF Core tags toolbar to add a bundle to your page. (The green arrow indicates the f:loadBundle tag object in the toolbar.)

Message Bundle Toolbar

Using the Message Bundle Toolbar

Use the JSF Expression Language (EL)

Once you have added the f:loadBundle tag to your template, simply drag and drop message bundle properties into Dreamweaver's code view to add localized messages to your pages.

Adding the LoadBundle Tag to your Template

Adding the LoadBundle Tag to your Dreamweaver Template

The JavaServer Faces framework includes a powerful set of user interface components. You can create bindings between your tags and this component model to provide fine-grained control of user interface events. JSFToolbox detects these components and displays them in Dreamweaver's components palette.

JSFToolbox automatically detects any action listener classes and action methods available to your site and populates property inspector controls with these options to help you develop your JSF pages. Converters, validators, value change listeners, and many other JSF component types are also supported in this way.

JSF Tag Property Inspector

Standard Java Components

JSFToolbox significantly extends Dreamweaver's JSP server model. This includes an upgrade to Dreamweaver's JavaBeans support that enables you to import JAR files containing classes that were compiled with Java 1.4 and later for use in traditional JSP sites that do not use JavaServer Faces technology. This enhancement of Dreamweaver's Java support also includes Java Standard Tag Library (JSTL) auto-completion in code view. JSFToolbox also adds JSP Expression Language (JSP-EL) support to Dreamweaver.