Using a Custom Component - The Java EE 6 Tutorial (original) (raw)
2. Using the Tutorial Examples
3. Getting Started with Web Applications
4. JavaServer Faces Technology
7. Using JavaServer Faces Technology in Web Pages
8. Using Converters, Listeners, and Validators
9. Developing with JavaServer Faces Technology
10. JavaServer Faces Technology: Advanced Concepts
11. Using Ajax with JavaServer Faces Technology
12. Composite Components: Advanced Topics and Example
13. Creating Custom UI Components and Other Custom Objects
Determining Whether You Need a Custom Component or Renderer
When to Use a Custom Component
Component, Renderer, and Tag Combinations
Understanding the Image Map Example
Why Use JavaServer Faces Technology to Implement an Image Map?
Understanding the Rendered HTML
Understanding the Facelets Page
Summary of the Image Map Application Classes
Steps for Creating a Custom Component
Creating Custom Component Classes
Specifying the Component Family
Enabling Component Properties to Accept Expressions
Delegating Rendering to a Renderer
Implementing an Event Listener
Implementing Value-Change Listeners
Handling Events for Custom Components
Defining the Custom Component Tag in a Tag Library Descriptor
Creating and Using a Custom Converter
Creating and Using a Custom Validator
Implementing the Validator Interface
Binding Component Values and Instances to Managed Bean Properties
Binding a Component Value to a Property
Binding a Component Value to an Implicit Object
Binding a Component Instance to a Bean Property
Binding Converters, Listeners, and Validators to Managed Bean Properties
14. Configuring JavaServer Faces Applications
16. Uploading Files with Java Servlet Technology
17. Internationalizing and Localizing Web Applications
18. Introduction to Web Services
19. Building Web Services with JAX-WS
20. Building RESTful Web Services with JAX-RS
21. JAX-RS: Advanced Topics and Example
23. Getting Started with Enterprise Beans
24. Running the Enterprise Bean Examples
25. A Message-Driven Bean Example
26. Using the Embedded Enterprise Bean Container
27. Using Asynchronous Method Invocation in Session Beans
Part V Contexts and Dependency Injection for the Java EE Platform
28. Introduction to Contexts and Dependency Injection for the Java EE Platform
29. Running the Basic Contexts and Dependency Injection Examples
30. Contexts and Dependency Injection for the Java EE Platform: Advanced Topics
31. Running the Advanced Contexts and Dependency Injection Examples
32. Introduction to the Java Persistence API
33. Running the Persistence Examples
34. The Java Persistence Query Language
35. Using the Criteria API to Create Queries
36. Creating and Using String-Based Criteria Queries
37. Controlling Concurrent Access to Entity Data with Locking
38. Using a Second-Level Cache with Java Persistence API Applications
39. Introduction to Security in the Java EE Platform
40. Getting Started Securing Web Applications
41. Getting Started Securing Enterprise Applications
42. Java EE Security: Advanced Topics
Part VIII Java EE Supporting Technologies
43. Introduction to Java EE Supporting Technologies
45. Resources and Resource Adapters
46. The Resource Adapter Example
47. Java Message Service Concepts
48. Java Message Service Examples
49. Bean Validation: Advanced Topics
50. Using Java EE Interceptors
51. Duke's Bookstore Case Study Example
52. Duke's Tutoring Case Study Example
53. Duke's Forest Case Study Example
To use a custom component in a page, you add the custom tag associated with the component to the page.
As explained in Defining the Custom Component Tag in a Tag Library Descriptor, you must ensure that the TLD that defines any custom tags is packaged in the application if you intend to use the tags in your pages. TLD files are stored in the WEB-INF/ directory or subdirectory of the WAR file or in the META-INF/ directory or subdirectory of a tag library packaged in a JAR file.
You also need to include a namespace declaration in the page so that the page has access to the tags. The custom tags for the Duke's Bookstore case study are defined in bookstore.taglib.xml. The ui:composition tag on theindex.xhtml page declares the namespace defined in the tag library:
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" **xmlns:bookstore="http://dukesbookstore"** template="./bookstoreTemplate.xhtml">
Finally, to use a custom component in a page, you add the component's tag to the page.
The Duke's Bookstore case study includes a custom image map component on theindex.xhtml page. This component allows you to select a book by clicking on a region of the image map:
... <h:graphicImage id="mapImage" name="book_all.jpg" library="images alt="#{bundle.chooseLocale}" usemap="#bookMap" /> <bookstore:map id="bookMap" current="map1" immediate="true" action="bookstore"> <f:actionListener type="dukesbookstore.listeners.MapBookChangeListener" /> <bookstore:area id="map1" value="#{Book201}" onmouseover="resources/images/book_201.jpg" onmouseout="resources/images/book_all.jpg" targetImage="mapImage" /> ... <bookstore:area id="map6" value="#{Book207}" onmouseover="resources/images/book_207.jpg" onmouseout="resources/images//book_all.jpg" targetImage="mapImage" />
The standard h:graphicImage tag associates an image (book_all.jpg) with an image map that is referenced in the usemap attribute value.
The custom bookstore:map tag that represents the custom component, MapComponent, specifies the image map, and contains a set of area tags. Each custom bookstore:area tag represents a custom AreaComponent and specifies a region of the image map.
On the page, the onmouseover and onmouseout attributes specify the image that is displayed when the user performs the actions described by the attributes. The custom renderer also renders an onclick attribute.
In the rendered HTML page, the onmouseover, onmouseout, and onclick attributes define which JavaScript code is executed when these events occur. When the user moves the mouse over a region, the onmouseover function associated with the region displays the map with that region highlighted. When the user moves the mouse out of a region, the onmouseout function redisplays the original image. When the user clicks a region, the onclick function sets the value of a hidden input tag to the ID of the selected area and submits the page.
When the custom renderer renders these attributes in HTML, it also renders the JavaScript code. The custom renderer also renders the entire onclick attribute rather than let the page author set it.
The custom renderer that renders the HTML map tag also renders a hiddeninput component that holds the current area. The server-side objects retrieve the value of the hidden input field and set the locale in the FacesContext instance according to which region was selected.
Copyright © 2013, Oracle and/or its affiliates. All rights reserved. Legal Notices