* Thanks for Jason Novotny for pointing me to this.
* Download code from Yahoo's web site: http://developer.yahoo.com/yui/.
* To get started, you must first put the javascript libraries in an appropriate path on
your web server. Yahoo does not for some reason supply a global URL. I did this by copying
the YUI zip file into my Tomcat's ROOT webapp. More below.
* First trick: adding a caledar to a Web Form. Read the instructions. One variation on the
instructions is that the src attribute needs to be set correctly. If you unpacked the
YUI zip in ROOT as described above, then you should use the following minimal page.
<html>
<head>
<script type="text/javascript" src="/yui_0.12.2/build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="/yui_0.12.2/build/event/event.js"></script>
<script type="text/javascript" src="/yui_0.12.2/build/dom/dom.js"></script>
<script type="text/javascript" src="/yui_0.12.2/build/calendar/calendar.js"></script>
<link type="text/css" rel="stylesheet" href="/yui_0.12.2/build/calendar/assets/calendar.css">
<script>
YAHOO.namespace("example.calendar");
function init() {
YAHOO.example.calendar.cal1=new YAHOO.widget.Calendar("cal1","cal1Container");
YAHOO.example.calendar.cal1.render();
}
YAHOO.util.Event.addListener(window,"load",init);
</script>
</head>
<body>
Here is the caledar <p>
<div id="cal1Container"></div>
<p>
</body>
</html>
Note this code seems to work just fine in the HTML <body> so I will put it there henceforth.
* Let's look now how to get this value into a Web Form. We'll do the web form with JSF just
to make it more difficult. The particular example I'll use is a front end to a data
analysis service (RDAHMM) that will look for modes in selected GPS station over the selected
date range, but these details are not part of the web interface.
This will actually put the calendar right next to the form (ie not the way we would like it)
but that's fine for now.
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<html>
<head>
<title>RDAHMM Minimalist Input</title>
<script type="text/javascript" src="/yui_0.12.2/build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="/yui_0.12.2/build/event/event.js"></script>
<script type="text/javascript" src="/yui_0.12.2/build/dom/dom.js"></script>
<script type="text/javascript" src="/yui_0.12.2/build/calendar/calendar.js"></script>
<link type="text/css" rel="stylesheet" href="/yui_0.12.2/build/calendar/assets/calendar.css">
</head>
<body>
<script>
//Set up the object and add a listener.
YAHOO.namespace("example.calendar");
function init() {
YAHOO.example.calendar.cal1=new YAHOO.widget.Calendar("cal1","cal1Container");
YAHOO.example.calendar.cal1.render();
YAHOO.util.Event.addListener(window,"load",init);
//Add an alert window.
var mySelectHandler=function(type,args,obj) {
var dates=args[0];
var date=dates[0];
var year=date[0],month=date[1],day=date[2];
var startDate=year+"-"+month+"-"+day;
var newStartDateVal=document.getElementById("form1:beginDate");
newStartDateVal.setAttribute("value",startDate);
}
YAHOO.example.calendar.cal1.selectEvent.subscribe(mySelectHandler,YAHOO.example.calendar.cal1, true);
YAHOO.example.calendar.cal1.render();
}
YAHOO.util.Event.addListener(window,"load",init);
</script>
Here is the caledar <br>
<div id="cal1Container"></div>
The input data URL is obtained directly from the GRWS web service
as a return type.
<f:view>
<h:form id="form1">
<b>Input Parameters</b>
<h:panelGrid columns="3" border="1">
<h:outputText value="Site Code"/>
<h:inputText id="siteCode" value="#{simpleRdahmmClientBean.siteCode}"
required="true"/>
<h:message for="siteCode" showDetail="true" showSummary="true" errorStyle="color: red"/>
<h:outputText value="Begin Date"/>
<h:inputText id="beginDate" value="#{simpleRdahmmClientBean.beginDate}"
required="true"/>
<h:message for="beginDate" showDetail="true" showSummary="true" errorStyle="color: red"/>
<h:outputText value="End Date"/>
<h:inputText id="endDate" value="#{simpleRdahmmClientBean.endDate}"
required="true"/>
<h:message for="endDate" showDetail="true" showSummary="true" errorStyle="color: red"/>
<h:outputText value="Number of Model States"/>
<h:inputText id="nmodel" value="#{simpleRdahmmClientBean.numModelStates}"
required="true"/>
<h:message for="nmodel" showDetail="true" showSummary="true" errorStyle="color: red"/>
</h:panelGrid>
<h:commandButton value="Submit"
action="#{simpleRdahmmClientBean.runBlockingRDAHMM2}"/>
</h:form>
</f:view>
</body>
</html>
The basic thing to see is that the YUI event listener connects the "mySelectHandler" Javascript to
calendar mouse clicks, which then update the form item labeled "form1:beginDate".
Subscribe to:
Post Comments (Atom)
1 comment:
Thanks this was a very helpful example.
Post a Comment