HTML and CSS Reference
In-Depth Information
In this scenario we are facing a new challenge. Boolean attributes in HTML5 are not simply expressed as
attribute="true"
and
attribute="false"
. The HTML5 specification states that
“The presence of a Boolean attribute on an element represents the true value, and the absence of the
attribute value represents the false value.”
This means that we cannot take an attribute like autoplay and output as
autoplay="true"
or
autoplay="false"
as the browser will evaluate both versions as if
autoplay
is
true
. The challenge is that we must read the value
passed to the component and evaluate if it should be inserted in the output of the custom component. There are
two ways of doing this. Either you can include conditional
<f:passThroughAttribute />
tags below the tag or you
can manipulate the outputted element in composite component root, which is a kind of managed bean for the
component. We will show both methods, but first we will define the interface of the composite component.
In the definition of the component interface in Listing 8-5 there is also a minimal implementation of component.
The attributes that we are adding to the video tag are only interesting on the client side. That is, they do not add
any value on the server side. We do not need to keep track of the state of the HTML5 attributes. Therefore we can
use the pass-through functionality added to JSF 2.2 to output the necessary HTML5 attributes. In the minimal
implementation in Listing 8-1 the video tags have two attributes. These attributes are prefixed
jsf:
and that tells the
Facelets
TagDecorator
that these attributes are not pass-through attributes and that they should be matched to the
id
and
value
attribute of the component. The
TagDecorator
is responsible for mapping the component to a known JSF
component. For example, the input components created in the previous chapter all mapped to the
<h:inputText />
or
HtmlInputText
component. The
TagDecorator
is not familiar with the HTML5
<video />
element and maps it to a
fallback class called
PassThroughElement
.
Listing 8-5.
Composite Component Interface That Can Be Used for Both the Video and Audio Components
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="
http://www.w3.org/1999/xhtml
"
xmlns:cc="
http://xmlns.jcp.org/jsf/composite
">
<cc:interface componentType="UIMediaComponent">
<cc:attribute name="value" type="java.lang.String"
shortDescription="URL of the video file to display" />
<cc:attribute name="crossorigin" type="java.lang.String" default="anonymous"
shortDescription="Specifying how to deal with cross origin requests.
anonymous (default) or use-credentials." />
<cc:attribute name="preload" type="java.lang.String" default="auto"
shortDescription="Preload the video file. none, metadata or auto" />
<cc:attribute name="autoplay" type="java.lang.Boolean" default="false"
shortDescription="Start playback as soon as the page has loaded" />
<cc:attribute name="mediagroup" type="java.lang.String" default=""
shortDescription="Media group for which the video file belong" />
<cc:attribute name="loop" type="java.lang.Boolean" default="false"
shortDescription="Restart the video once it reaches the end" />
<cc:attribute name="muted" type="java.lang.Boolean" default="false"
shortDescription="Mute the audio of the video" />
<cc:attribute name="controls" type="java.lang.Boolean" default="false"
shortDescription="Display user controls" />
<cc:attribute name="poster" type="java.lang.String"
shortDescription="URL of a poster (image) to display before playback" />
