Starting with something very easy – label. We’ll make it bold to separate from input/output text.

Usual directories in the web project:


<Web Pages>
<Web Pages>/WEB-INF
<Web Pages>/resources
<Web Pages>/resources/css
<Web Pages>/resources/images
<Web Pages>/resources/realsoft


In bold is the directory where I’ll put my custom components. Choose a suitable for you name. Below is label.xhtml file:

<?xml version='1.0' encoding='UTF-8' ?>
<!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:cc="http://java.sun.com/jsf/composite"
xmlns:h="http://java.sun.com/jsf/html">
<!-- INTERFACE -->
<cc:interface>
  <cc:attribute name="value" required="true" />
  <cc:attribute name="for" required="false" />
</cc:interface>
<!-- IMPLEMENTATION -->
<cc:implementation>
  <span id="#{cc.clientId}" class="label" >
    <h:outputLabel id="#{cc.clientId}label" value="#{cc.attrs.value}" for="#{cc.attrs.for}" />
  </span>
</cc:implementation>
</html>