overview component CDK Guide

# Component usage overview

After the <inputDate> component has been created you could use it on a page. Create a simple JSF project, called myapp for example, with only one JSP page that has a form with our <inputDate> component.

## JSP Page

Here is the necessary page (index.jsp):

    <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
    <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
    <%@ taglib uri="http://mycompany.org/inputDate" prefix="my"%>
    <html>
    	<head>
    		<title>My inputDate</title>
    	</head>
    	<body>
    		<f:view>
    			<h:form>
    				<my:inputDate value="#{bean.text}">
    					<f:facet name="caption">
    						<f:verbatim>
    							Calendar:
    						</f:verbatim>
    					</f:facet>
    				</my:inputDate>
    				<h:commandButton value="Submit" />
    			</h:form>
    		</f:view>
    	</body>
    </html>

## Data Bean

In order to build this application, you should create a managed bean:

    package app;

    public class Bean {

    	private	String text = null;

    	public Bean() {

    	}

    	public String getText() {
    		return text;
    	}

    	public void setText(String text) {
    		this.text = text;
    	}
    }

## faces-config.xml

It is necessary to register your bean inside of the faces-config.xml file:

    <?xml version="1.0" encoding="UTF-8"?>
    <faces-config
        xmlns="http://java.sun.com/xml/ns/javaee"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"
        version="1.2">
        <managed-bean>
            <managed-bean-name>bean</managed-bean-name>
            <managed-bean-class>myapp.Bean</managed-bean-class>
            <managed-bean-scope>request</managed-bean-scope>
        </managed-bean>
    </faces-config>

## Web.xml

It is also necessary to take following steps:

- add necessary jar files (inputDate-1.0-SNAPSHOT.jar, jsf-api.jar, jsf-impl.jar, jstl-api-1.2.jar, richfaces-api-3.3.1.jar, richfaces-impl-3.3.1.jar, richfaces-ui-3.3.1.jar, commons-logging.jar, commons-digester.jar, commons-collections.jar, commons-beanutils.jar, common-annotations.jar) into the WEB-INF/lib folder

- modify the web.xml file:

      <?xml version="1.0" encoding="UTF-8"?>
      <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
      		 		xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
      	<display-name>app</display-name>
      	<context-param>
      		<param-name>javax.faces.CONFIG_FILES</param-name>
      		<param-value>/WEB-INF/faces-config.xml</param-value>
      	</context-param>
      	<context-param>
      		<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
      		<param-value>server</param-value>
      	</context-param>
      	<servlet>
      		<servlet-name>Faces Servlet</servlet-name>
      		<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
      		<load-on-startup>1</load-on-startup>
      	</servlet>
      	<servlet-mapping>
      		<servlet-name>Faces Servlet</servlet-name>
      		<url-pattern>*.jsf</url-pattern>
      	</servlet-mapping>
      	<login-config>
      		<auth-method>BASIC</auth-method>
      	</login-config>
      	<filter>
      		<display-name>RichFaces Filter</display-name>
      		<filter-name>richfaces</filter-name>
      		<filter-class>org.ajax4jsf.Filter</filter-class>
      	</filter>
      	<filter-mapping>
      		<filter-name>richfaces</filter-name>
      		<servlet-name>Faces Servlet</servlet-name>
      		<dispatcher>REQUEST</dispatcher>
      		<dispatcher>FORWARD</dispatcher>
      		<dispatcher>INCLUDE</dispatcher>
      	</filter-mapping>
      </web-app>

## Deployment

Finally, you should be able to place this application on your Web server. To start your project, point your browser at http://localhost:8080/myapp/index.jsf.