JSF: PrimeFaces: Basic Custom Composite Component

The following describe how to create a basic custom composite component in JSF 2.0+ for Primefaces. The method of using rendering classes, back beans, type classes, and others are not included in this tutorial. Please note that the IDE used for programming is NetBeans 7.4


  1. Create a Folder
    Create a subfolder into the resources folder as show in the following image. In this case, we call this folder “utils”.
  2. Create a XHTML File
    Inside the folder utils, lets cretae a XHTML file. This file will contain our custom composite component.
    In this case, we call this file “displaySuperValue.xhtml”
  3. File “displaySuperValue.xhtml” Content
    Copy and Paste this code example:

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml"	  	 
    	<head><title>Show Super Value</title></head>
    	    <composite:attribute name="supervalue" required ="true" />
    	    <hShockutputText value="This is SuPeR: #{cc.attrs.supervalue}" />
  4. About Your Custom Component
    At the beginning of your file, you will need to include the composite namespace if the IDE did not include it automatically. Just add the following line:


    While the interface tag should hold all the attributes of your custom tag, the implementation tag should hold all your web interface script. In order use the attributes declared inside the interface tag, you need to use the “cc” bean provided by JSF. This bean is based on the UIComponent class.
    cc bean

  5. Implementing Your Custom Composite Component
    Go to the XHTML file which you wish to use your custom composite component.
    Start typing as you normally would do when writing a JSF tag by typing the name of the folder you created under the resources folder as show below:
    listWhile “utils” is the name of the folder, “displaySuperValue” is the name of the XHTML file you created.
    As you keep typing, when using the space, the NetBeans IDE will display a list of all the default attributes including those you created inside the interface tag. Normally, the NetBeans IDE should include the namespace that will allow you to access to your custom component; however, if the IDE doesn’t include the namespace, just add the following namespace and the problem should be solved: