Facelet fragment Tag

Facelet fragment Tag is used to insert the new UIcomponent to the component tree and the content outside of the tag is included to the tree.

Facelet fragment Tag

Facelet fragment Tag

        

This tag is used to insert the new UIcomponent to the component tree and the content outside of the tag is included to the tree. So this tag is same with component tag as decorate tag is with composition tag i.e. as decorate tag behaves same as composition tag except including content outside the tag, in the same way fragment tag behaves same as component tag except  including content outside the tag. In this example, the content within fragment tag in included in component tree and the code above fragment tag is also rendered. So "Content above fragment tag will be rendered." and "Content below fragment tag will be rendered." is rendered.

Code Description : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
   xmlns:ui="http://java.sun.com/jsf/facelets">
<head>
   <title>facelet example </title>
</head>
<body> 
  <h3>Content above fragment tag will be rendered.</h3>
  <ui:fragment >
   <h4>This is the content to be included in the page.</h4>
   </ui:fragment >
  <h3>Content below fragment tag will be rendered.</h3>
</body>
</html>

Rendered Output :

Html Source Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>facelet example </title>
</head>
<body> 
  <h3>Content above fragment tag will be rendered.</h3>
  <h4>This is the content to be included in the page.</h4>
  <h3>Content below fragment tag will be rendered.</h3>
</body>
</html>

This tag contains two attributes :

id : This attribute assigns unique identity to the component. Its not a required attribute. So if you don't give id then facelet provides it automacally.
binding :
This attribute is used to bind the component to the backing bean property.