We a going to create the <inputDate> component that can take a value, process that value, and then push it back to the underlying model as a strongly typed Date object.
The <inputDate> component allows to attach a converter in order to set the desired date format such as mm/dd/yyyy. So the component could convert and validate the date entered by user.
At first we need to create a project for the component itself. In the library directory Sandbox you just created, launch the following command (all in one line):
...
mvn archetype:create -DarchetypeGroupId=org.richfaces.cdk -DarchetypeArtifactId=maven-archetype-jsf-component -DarchetypeVersion=3.2.1.GA -DartifactId=inputDate
...
As is easy to see a new directory with the name inputDate will be created. It does not have any components in it yet, but it has this predefined structure:
Here are main directories with descriptions:
Table 4.1. The project structure
| Directory | Description |
|---|---|
| src/main/config | Contains the metadata for the components |
| src/main/java | Contains Java code (both pre-generated and created by you) |
| src/main/resources | Used to store resource files, such as pictures, JavaScript and CSS files |
| src/main/templates | Used to contain the JSP-like templates that define the component layout |
Now you should add maven-compiler-plugin to the plugins section in the inputDate/pom.xml file:
...
<plugin>
<artifactId>maven-compiler-plugin</artifactId>
<inherited>true</inherited>
<configuration>
<source>1.5</source>
<target>1.5</target>
</configuration>
</plugin>
...
Finally your inputDate/pom.xml should look like this one:
...
<?xml version="1.0"?>
<project>
<parent>
<artifactId>sandbox</artifactId>
<groupId>org.mycompany</groupId>
<version>1.0-SNAPSHOT</version>
</parent>
<modelVersion>4.0.0</modelVersion>
<groupId>org.mycompany</groupId>
<artifactId>inputDate</artifactId>
<name>inputDate</name>
<version>1.0-SNAPSHOT</version>
<build>
<plugins>
<plugin>
<groupId>org.richfaces.cdk</groupId>
<artifactId>maven-cdk-plugin</artifactId>
<version>3.2.1.GA</version>
<executions>
<execution>
<phase>generate-sources</phase>
<goals>
<goal>generate</goal>
</goals>
</execution>
</executions>
<configuration>
<library>
<prefix>org.mycompany</prefix>
<taglib>
<shortName>inputDate</shortName>
</taglib>
</library>
</configuration>
</plugin>
<plugin>
<artifactId>maven-compiler-plugin</artifactId>
<inherited>true</inherited>
<configuration>
<source>1.5</source>
<target>1.5</target>
</configuration>
</plugin>
</plugins>
</build>
<dependencies>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>3.8.1</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.richfaces.framework</groupId>
<artifactId>richfaces-impl</artifactId>
<version>3.2.1.GA</version>
</dependency>
</dependencies>
</project>
...
Let's create a skeleton for the <inputDate> component.
You need to go to the inputDate directory and then launch the following command:
...
mvn cdk:create -Dname=inputDate
...
As a result three artifacts will be created:
An XML configuration file for the metadata
A UI class
A JSP-like template
In order to build the component you should stay in the inputDate directory and launch the following command:
...
mvn install
...
This command generates and compiles the library and then creates a result JAR file. A directory named target will be created along with a src directory. If you get a file named target/inputDate-1.0-SNAPSHOT.jar, everything is set up successfully.
If you want to rebuild the component you could use the following command:
...
mvn clean install
...
It is a good idea to create at first a prototype of the intended markup. You will find out which markup elements the component has to generate and also which renderer-specific attributes are needed in order to parameterize the generated markup.
The
<inputDate>
component consists of an HTML form <input> element, an
<img> element, and <div> element:
...
<div title="Date Field Component">
<input name="dateField" value="01 January 2008" />
<img class="overlay" src="inputDateOverlay.gif" />
</div>
...
As it is shown in the listing above there are three HTML attributes - "title" , "name" , and " value" - are needed to be parameterize the generated markup.
You map the HTML attributes to the corresponding UIComponent attributes:
...
<div title="[title]">
<input name="[clientID]" value="[converted value]" />
<img class="overlay" src="inputDateOverlay.gif" />
</div>
...
All information about styles applied to the <inputDate> component is considered in the following chapter.
This is the result of your prototype which shows a simple page with an input field and an icon indicating that this is a date field:
Renderer
How to write your renderer with the help of a template.
How to create a base class
Registering component resources