Advanced JSF2 HTML5 Components - JSF and HTML5 - page 208

<cc:attribute name="max" type="java.lang.String"
shortDescription="The maximum number of the progress bar indicating that
the task has completed" />
<cc:attribute name="for" type="java.lang.String"
shortDescription="ID of the media component for which the progress bar
should automatically update" />
</cc:interface>
<cc:implementation >
<h:outputScript name="progress.js" library="projsfhtml5/progress" target="head"/>
<div id="#{cc.clientId}">
<progress jsf:id="progress">
<c:if test="#{cc.attrs.value != null}">
<f:passThroughAttribute name="value" value="#{cc.attrs.value}" />
</c:if>
<c:if test="#{cc.attrs.max != null}">
<f:passThroughAttribute name="max" value="#{cc.attrs.max}" />
</c:if>
<cc:insertChildren />
</progress>
<c:if test="#{cc.attrs.for != null}">
<script type="text/javascript">
progressBar.init("#{cc.clientId}", "#{cc.forClientId}");
</script>
</c:if>
</div>
</cc:implementation>
</html>
The component supports automatic updating of the progress bar through the for attribute. The automatic
updating is configured through the progress.js JavaScript in Listing 8-15 that contains a JavaScript closure that takes
two parameters. The first parameter is the identifier of the progress bar, and the second parameter is the identifier of
the source component that the progress bar should automatically update. In the following JavaScript only the audio
and video component is supported as a source of updating the progress bar.
Listing 8-15. resources/projsfhtml5/progress/progress.js JavaScript Supporting the Composite Component
if (!window["progressBar"]) {
var progressBar = {};
}
progressBar.init = function init(componentId, forId) {
var media = document.getElementById(forId + "\:media-player");
var bar = document.getElementById(componentId + "\:progress");