HTML and CSS Reference
In-Depth Information
Creating the Composite Component
Based on the example in Listing 7-1, we need to create a composite component for the color input element, the datalist
element, and the option element. We will start by creating the basic version of the element that does not use datalists.
Listing 7-2. Composite Component for Basic Color Input Element (resources/projsfhtml5/inputColor.xhtml)
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" " >
<html xmlns=" "
xmlns:cc=" "
xmlns:jsf=" " >
<cc:attribute name="value" type="java.lang.String" default="#000000" />
<div id="#{cc.clientId}">
<input jsf:id="#{}" name="#{}"
jsf:value="#{cc.attrs.value}" type="color" />
In the interface, the component exposes a single attribute ( value ) where the color selected will be stored.
By default the color is set to black ( #000000 ). In the implementation the component is first wrapped by a plain <div>
with the client DOM ID as the identifier. By default the wrapper does nothing, but it may come in handy when a page
author needs to style the page using CSS. Inside the wrapper the actual color element is outputted. By using the jsf
attribute name space, we tell Facelets that the input element should be treated as a JSF component. The value of the
jsf:value attribute references the value attribute in the interface so that the selected color can be set and extracted.
Using the Composite Component
Using the composite component is easy, as seen in Listing 7-3. Import the namespace of the composite component
(i.e., the directory under /resources in which the component is stored). With the namespace imported the
component is accessible at <namespace:componentFileName /> .
Listing 7-3. Using the Color Input Composite Component
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" " >
<html xmlns=" "
xmlns:h=" "
xmlns:jsf=" "
xmlns:projsfhtml5=" " >
<title>Input Color Custom Component</title>
Search WWH ::

Custom Search