HTML and CSS Reference
In-Depth Information
<h2>Progress bar (determinate)</h2>
<projsfhtml5:progress id="determinate" value="56" max="100"/>
<h2>Progress bar (using for)</h2>
<projsfhtml5:video id="video" value="media/trailer.mp4"
autoplay="true"
controls="true">
</projsfhtml5:video>
<projsfhtml5:progress id="video-progress"
value="0" max="100"
for=":video" />
</ui:define>
</ui:composition>
</html>
Summary
In this chapter we have looked at creating advanced HTML5 components. The examples have demonstrated how to
support your composite component views with
FacesComponent
s where you can implement advanced logic that is
otherwise difficult or not possible in the Facelets view. It should be clear that creating JSF 2.x component has become
significantly easier than earlier versions of JSF. However, it still requires significant effort to create components
that can be reused and extended for multiple purposes. As a component developer you will be faced with choices
while specifying interfaces and implementing the components. It is worth noting that simply converting an HTML5
element directly to a JSF component may not be very useful if you do not consider how the page author will use the
component. While developing the video and audio components we were faced with the choice of specifying tracks as
embedded subelements just like HTML5, but in most cases a JSF page author will already have tracks and sources in a
collection in a managed bean; hence, we included tracks and sources in the interface as attributes taking collections.
