<?xml version="1.0" encoding="UTF-8"?>
<section id="uicomponent" xreflabel="uicomponent">
    <?dbhtml filename="uicomponent.html"?>
    <sectioninfo>
        <keywordset>
            <keyword>ui</keyword>
            <keyword>component</keyword>
            <keyword>CDK</keyword>
    <keyword>Guide</keyword>
        </keywordset>
    </sectioninfo>
	<title>Extending a UIInput class</title>
	<para>
	The base class for all JSF components is <code>UIComponent</code>. 
	When you develop <emphasis role="bold"><property>&lt;inputDate&gt;</property></emphasis> component 
	you could see that you subclass <code>UIComponentBase</code> at first. 
	This class extends <code>UIComponent</code>, and provides default implementations of the all of the abstract methods of <code>UIComponent</code>.
	</para>
	<para>
		You could proceed to the <property>src/main/java/org/mycompany/component</property> directory 
		and find a <property>UIInputDate.java</property> there: 
	</para>
			<programlisting role="JAVA"><![CDATA[package org.mycompany.component;
import javax.faces.component.UIComponentBase;
/**
 * JSF component class
 *
 */
public abstract class UIInputDate extends UIComponentBase {
	public static final String COMPONENT_TYPE = "org.mycompany.InputDate";
	public static final String COMPONENT_FAMILY = "org.mycompany.InputDate";
}]]></programlisting>
	<para>
		The <emphasis role="bold"><property>&lt;inputDate&gt;</property></emphasis> is a simple
		input component therefore you should import <code>javax.faces.component.UIInput</code> class and extend it:
	</para>
				<programlisting role="JAVA"><![CDATA[package org.mycompany.component;
import javax.faces.component.UIInput;
/**
 * JSF component class
 *
 */
public abstract class UIInputDate extends UIInput {
	public static final String COMPONENT_TYPE = "org.mycompany.InputDate";
	public static final String COMPONENT_FAMILY = "org.mycompany.InputDate";
}]]></programlisting>
	<para>
		Each component is associated with a <property>component type</property>, 
		which is used as &quot;JSF recognized&quot; name of the <emphasis role="bold"><property>&lt;inputDate&gt;</property></emphasis> component.
		We will refer to this later in our tag handler.
	</para>
	<para>
		The <property>component class</property> is the actual class path address of our <emphasis role="bold"><property>&lt;inputDate&gt;</property></emphasis> component.
	</para>
	<para>
		As it was mentioned before, the <emphasis role="bold"><property>&lt;inputDate&gt;</property></emphasis> component has some attributes 
		that are bound to the properties in the <code>UIInputDate</code> class
		(for example <property>title</property>, <property>title</property>, <property>name</property>, <property>type</property>, etc.).
		The next thing to do is to save the component state 
		by overriding <code>saveState()</code> and <code>restoreState()</code> component methods. 
		But you do not have to do it in the <code>UIInputDate</code> class by hand!
	</para>
	<para>
		You should configure the <emphasis role="bold"><property>&lt;inputDate&gt;</property></emphasis> component 
		in the <property>inputDate.xml</property>, 
		and the <property>CDK</property> factory will generate the complete <code>UIInputDate</code> class.
		How to configure the component is explained in the <link linkend="ui_conf">&quot;Configuring component&quot;</link> chapter. 
	</para>
</section>

