Wednesday 3 July 2013

Calendar using JSF

1). JSF Calendar Example Structure:

 

Note: Download below js and css files

1) CalendarControl.css

2) CalendarControl.js

 

2). index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
   <link href="css/CalendarControl.css" rel="stylesheet" type="text/css">
    <script src="js/CalendarControl.js" language="javascript"></script>
  </head>
  <body>
    <f:view>
        <h:form>
         <h:messages style="color: red;"></h:messages>
            <table>
&                <h:outputText value="Enter following Information"></h:outputText>
                <tr>
                    <td>
                        <h:outputText value="Date:-"></h:outputText>
                   
                        <h:inputText id="name" value="#{Bean.name}" required="true" onclick="showCalendarControl(this);">
                            <f:validateLength minimum="2" maximum="25"></f:validateLength>
nbsp;                       </h:inputText>
                    </td>
                </tr>
                <tr>
                    <td>
                        <h:commandButton id="button" action="result" value="Submit"></h:commandButton>
                       </td>
                </tr>
            </table>     
        </h:form>
    </f:view>
  </body>
</html> 

3). display.jsp

<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
   <title>Calendar</title>
  </head>
  <body>
    <f:view>
        <table>
            <tr>
                <td><b>
                    <h:outputText value=" Selected date is:- #{Bean.name}"></h:outputText></b>
                </td>
            </tr>
            <tr>
                <td>
                    <a href="/JSF_Calendar/faces/index.jsp">Back</a>
                </td>
            </tr>
        </table>
    </f:view>
  </body>
</html>

 

4). faces-config.xml

<?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">
    <navigation-rule>
        <from-view-id>/index.jsp</from-view-id>
        <navigation-case>
        <from-outcome>result</from-outcome>
        <to-view-id>/display.jsp</to-view-id>
        </navigation-case>
    </navigation-rule>
    <managed-bean>
        <managed-bean-name>Bean</managed-bean-name>
        <managed-bean-class>com.satyamsoft.in.Bean</managed-bean-class>
        <managed-bean-scope>request</managed-bean-scope>
    </managed-bean>
</faces-config>
 

5). Bean.java

package com.satyamsoft.in;

public class Bean {
    private String name;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }  
  
}

6). OutPut






No comments:

Post a Comment