ui component CDK Guide

# Configuring component

Well, it is almost the final step in the component creation process - component configuration.

Note that you should register all the classes and attributes of the <inputDate> component. If you will create the component dynamically on a page you should register the component in the faces context configuration file - faces-config.xml. If you use a custom tag on a JSP page you need a TLD file for registration. If you plan to use Facelets you need inputDate.taglib.xml descriptor.

The CDK factory uses the inputDate.xml file for generating not only the complete `UIInputDate` class, but also a JSP Tag Handler, faces-config.xml and descriptors for JSP and Facelets.

Please, proceed to the src/main/config/component directory, open the inputDate.xml in your favorite text editor and take a look at the skeleton: there is a root element <components> with the one nested <component> element.

Tip:

It is possible to create a number of components in the one project. For example <rich:dataTable> is a complex component that includes a <rich:column> and/or <rich:columns> components.

Application instance stores resources defined in the descriptors at application start-up, so it is necessary to register following classes:

- the `UIInputDate` class

      ...
      <name>org.mycompany.InputDate</name>
      <family>org.mycompany.InputDate</family>
      <classname>org.mycompany.component.html.HtmlInputDate</classname>
      <superclass>org.mycompany.component.UIInputDate</superclass>
      ...

- the `InputDateRenderer` class with the `htmlInputDate.jspx` template

      ...
      <renderer generate="true" override="true">
      	<name>org.mycompany.InputDateRenderer</name>
      	<template>org/mycompany/htmlInputDate.jspx</template>
      </renderer>
      ...

- the `InputDateTag` class (the JSP Tag Handler)

      ...
      <tag>
      	<name>inputDate</name>
      	<classname>org.mycompany.taglib.InputDateTag</classname>
      	<superclass>
      		org.ajax4jsf.webapp.taglib.HtmlComponentTagBase
      	</superclass>
      </tag>
      ...

Note that you have not closed the <component> element because you are still going to add more metadata for your new component. Lets to add attributes to the inputDate.xml configuration file as shown in the example below.

Example:

    ...
    <property>
    	<name>value</name>
    	<classname>java.lang.Object</classname>
    	<description>
    		The value of the component
    	</description>
    </property>
    <property>
    	<name>title</name>
    	<classname>java.lang.String</classname>
    	<description>
    		Defines a title of the component
    	</description>
    	<defaultvalue>&quot;inputDate&quot;</defaultvalue>
    </property>
    <property>
    	<name>name</name>
    	<classname>java.lang.String</classname>
    	<description>
    		Defines a name of the component
    	</description>
    </property>
    <property>
    	<name>styleClass</name>
    	<classname>java.lang.String</classname>
    	<description>
    		Corresponds to the HTML class attribute
    	</description>
    </property>
    <property>
    	<name>inputStyle</name>
    	<classname>java.lang.String</classname>
    	<description>
    		Style attribute for input field
    	</description>
    </property>
    <property>
    	<name>inputClass</name>
    	<classname>java.lang.String</classname>
    	<description>
    		Style Class attribute for the input field
    	</description>
    </property>
    <property>
    	<name>iconClass</name>
    	<classname>java.lang.String</classname>
    	<description>
    		Style Class attribute for the icon element
    	</description>
    </property>
    <property>
    	<name>iconStyle</name>
    	<classname>java.lang.String</classname>
    	<description>
    		Style attribute for the icon element
    	</description>
    </property>
    <property>
    	<name>captionClass</name>
    	<classname>java.lang.String</classname>
    	<description>
    		Style Class attribute for the Caption facet
    	</description>
    </property>
    ...

As you can see in the example above every attribute is defined with the help of the <property> element with the following nested elements:

- the <name> element that defines the name of the attribute

- the <classname> element that defines the class of the attribute's value

- the <description> element that defines the description of the attribute. This description appears in the TLD file.

- the <defaultvalue> element that defines the default value for the attribute

The last thing worth mentioning is the common attributes that are included through the named entities:

    ...
    &ui_component_attributes;
    ...

If you want to add `UIInput` components and HTML events common attributes for the <inputDate> component you should add the following entities:

    ...
    &ui_component_attributes;
    &html_events;
    &ui_input_attributes;
    ...

In inputDate.xml file there is a full example of the inputDate.xml for the <inputDate> component.

More information about the common attributes you could find in the Including common attributes section.

## Including common attributes

One of the useful features of the CDK is the possibility to include common attributes to the component. In order to facilitate development process, the CDK provides a set of entities that contain custom attributes sets for components (events, action attributes, etc.). This common attributes could be included with the predefined entities (for example &ui_component_attributes;, &html_events;, &ui_input_attributes;, etc.).

You could find all the entities inRichFaces repository.