HTML and CSS Reference
In-Depth Information
Figure 8-1.
Example of progress indicators
The progress element has two simple attributes. Omitting the attributes will create an indeterminate progress bar.
By using the two attributes you can specify the max value of the progress bar and the current value (i.e., position) of
the progress bar. Details about the attributes can be seen in Table
8-3
.
Table 8-3.
List of Attributes for the Progress Element
Attribute
Type
Default Value
Description
max
Double
1.0
Describes the maximum number of the progress bar indicating that
the task has completed.
value
Double
Unspecified
Describes how much of the task has been completed.
The progress element is fairly simple and can quickly be transformed into a JSF component. To make the
component useful we will add an additional “for” attribute that can be pointed at another component such as the
video or audio component. The progress bar will automatically update its progress based on the playback of the video
or audio component.
The component has a composite component view, a JavaScript and a FacesComponent. The composite view is
displayed in Listing 8-14. Notice how the JavaScript for the component is separated into its own JavaScript file and
imported using the
outputScript
component.
outputScript
ensures that the JavaScript file is imported only once no
matter how many times the component is used on a single page.
Listing 8-14.
The Composite Progress Component resources/projsfhtml5/progress.xhtml
<?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
"
xmlns:jsf="
http://xmlns.jcp.org/jsf
"
xmlns:c="
http://xmlns.jcp.org/jsp/jstl/core
"
xmlns:f="
http://xmlns.jcp.org/jsf/core
"
xmlns:h="
http://xmlns.jcp.org/jsf/html
"
>
<cc:interface componentType="UIProgress">
<cc:attribute name="value" type="java.lang.String"
shortDescription="How much of the task has been completed" />
