Sources
Elements wrote in green show
the links between the sources, elements wrote
in red show the links into the sources.
projet.properties
build.HtmlMyPage=URL_HTML_HtmlMyPage
build.HtmlMyPage_url=/html/test/myPage.html
build.JsMyPage=URL_JS_JsMyPage
build.JsMyPage_url=/html/test/myPage.js
build.XmlMyDatas=URL_XML_XmlMyDatas
build.XmlMyDatas_url=/html/test/myDatas.xml
build.XmlMyContent=URL_XML_XmlMyContent
build.XmlMyContent_url=/html/test/myContent.xml
|
myPage.html
<html>
<head>
<title>CrossTabComponent example</title>
<!-- Inclusion of necessary css files to load the page -->
<link rel="stylesheet" type="text/css" href="@CONTEXT_WEB@/@FRAMEWORK_ERGO@/css/commun/globale.css" />
<link rel="stylesheet" type="text/css" href="@CONTEXT_WEB@/@FRAMEWORK_ERGO@/css/commun/cg_commun.css" />
<link rel="stylesheet" type="text/css" href="@CONTEXT_WEB@/@FRAMEWORK_ERGO@/css/couleur/cg_codeCouleur.css" />
<!-- Inclusion of necessary framework files to load the page -->
<script src="@CONTEXT_WEB@/@FRAMEWORK_ERGO@/jsclient/technique/fw_eventManager.js" type="text/javascript"></script>
<script src="@CONTEXT_WEB@/@FRAMEWORK_ERGO@/jsclient/technique/fw_xml.js" type="text/javascript"></script>
<script src="@CONTEXT_WEB@/@FRAMEWORK_ERGO@/jsclient/technique/fw_cookies.js" type="text/javascript"></script>
<!-- Inclusion of the AgendaComponent css file -->
<link rel="stylesheet" type="text/css" href="@CONTEXT_WEB@/@FRAMEWORK_ERGO@/css/commun/agenda.css"></link>
<!-- Inclusion of the AgendaComponent necessary framework files -->
<script src="@CONTEXT_WEB@/@FRAMEWORK_ERGO@/jsclient/ergonomique/fw_agenda.js" type="text/javascript"></script>
<!-- Include the specific js file of the page -->
<script src="@URL_JS_JsMyPage@" type="text/javascript"></script>
<!-- Define the personalized css class for stated days -->
<style type="text/css">
.cssClass_chome{ background-color: #AAAAAA !important; color: #777777; }
.cssClass_inaccessible{ background-color: #FF0000 !important; color: #FFFFFF; }
.cssClass_partiel{ background-color: #00FF00 !important; }
.cssClass_libre{ color: #33FF33; font-weight: bold; font-size: 12px; }
<style>
</head>
<body onload="preparePage()">
<div id="myAgenda" ></div>
</body>
</html>
|
myPage.js
// Declaration of an object which will content
// the xml configuration flow of the component.
var XMLParamAgenda = null;
var myAgendaComponent = null;
// Fonction preparePage (launched when the page is loaded)
function preparePage(){
// Creation of the XMLObject owning the xml configuration flow.
// The configuration is obtained via the url
myDatas.xml (XML flow).
// The function construirePage will be
launched when the configuration flow is received
XMLParamAgenda = new parent.XMLObject("CONTENU_WIN", null,"construirePage", "@URL_XML_XmlMyData@");
// Load the flow content into the XMLParamAgenda object
XMLParamAgenda.importXML();
}
// Function construirePage (launched when the configuration flow has been received)
function construirePage(){
// Check if the flow has been correctly received
var testErreur = XMLParamAgenda.parseErrorXML();
if(testErreur == 0){
// Create a XMLObjectSauvegarde object owning only the AGENDA
// node from the xml configuration flow
var XMLAgenda = new XMLObjectSauvegarde();
XMLAgenda.sauvegardeDOM(parent.getElements(XMLParamAgenda.xmlDoc,"AGENDA")[0]);
// Create the AgendaComponent, configure the defined states from the XMLAgenda object,
// and the xml content flow myContent.xml
myAgendaComponent = new AgendaComponent("myAgenda");
myAgendaComponent.configure(XMLAgenda);
myAgendaComponent.setDayClickCallBack(customClickCallBack);
myAgendaComponent.setProvideCallBack(customProvideCallBack);
// Write the html code of the component into the specified container
myAgendaComponent.render();
}
}
// Function setDayClickCallBack (launched when the user click on a day from the Agenda)
function setDayClickCallBack(date, state){
if(!state){
// do what you want for a not stated day
}else{
// do what you want for a stated day
var stateId = state.getId(); // the state id defined in myDatas.xml
var stateName = state.getName(); // ...
....
}
}
// Function setProvideCallBack (launched when the Agenda current month is outside the current period)
// in the callback the key-word 'this' refers to the instanciated AgendaComponent
function setProvideCallBack(date){
// date is the Date object which correspond to the month requested by the AgendaComponent
// (the first call to this callback will be requested with the current month ...)
// There are different ways to feed the AgendaComponent :
// - to cancel the providing process : this callback must return the boolean false (example 1)
// - Synchronous mode : this callback must return the XMLDocument containing the xml flow (example 2)
// - Asynchronous mode : this callback must return the boolean true, and when the asynchronous request has been received,
the AgendaComponent feed method must be called with the XMLDocument as parameter (example 3)
// Example 1 (cancel the provide process)
return false;
// Example 2 (synchronous providing)
var xmlO = new XMLObject(null, null, null, theProvidingUrl);
xmlO.initAsynchrone(false);
xmlO.importXML();
return xmlO.xmlDoc;
// Example 3 (asynchronous providing)
var xmlO = null; // must be a global variable
function onXmlReady(){ this.feed(xmlO.xmlDoc); } // the XMLObject Callback
var xmlO = new XMLObject(null, null, onXmlReady.bind(this), theProvidingUrl);
xmlO.initAsynchrone(true);
xmlO.importXML();
return true;
}
|
myDatas.xml
<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
<PAGE>
<AGENDA>
<STATES>
<STATE>
<ID>1</ID>
<NAME>chomé</NAME>
<CSS_CLASS>cssClass_chome</CSS_CLASS>
</STATE>
<STATE>
<ID>2</ID>
<NAME>inaccessible</NAME>
<CSS_CLASS>cssClass_inaccessible</CSS_CLASS>
</STATE>
<STATE>
<ID>3</ID>
<NAME>partiel</NAME>
<CSS_CLASS>cssClass_partiel</CSS_CLASS>
</STATE>
<STATE>
<ID>4</ID>
<NAME>libre</NAME>
<CSS_CLASS>cssClass_libre</CSS_CLASS>
</STATE>
</STATES>
</AGENDA>
</PAGE>
|
myContent.xml
<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
<AGENDA_DATA>
<PERIOD> <!-- equivalent to : from 01/03/2008 to 30/04/2008 -->
<FROM>
<YEAR>2008</YEAR>
<MONTH>03</MONTH>
</FROM>
<TO>
<YEAR>2008</YEAR>
<MONTH>04</MONTH>
</TO>
</PERIOD>
<DAYS>
<!-- for March -->
<DAY>
<DATE>03032008</DATE> <!-- date format must be : DDMMYYYY -->
<STATE>4</STATE> <!-- libre -->
</DAY>
<DAY>
<DATE>05032008</DATE>
<STATE>4</STATE> <!-- libre -->
</DAY>
<DAY>
<DATE>21032008</DATE>
<STATE>2</STATE> <!-- inaccessible -->
</DAY>
<DAY>
<DATE>27032008</DATE>
<STATE>3</STATE> <!-- partiel -->
</DAY>
<DAY>
<DATE>28032008</DATE>
<STATE>1</STATE> <!-- chomé -->
</DAY>
<!-- for April -->
<DAY>
<DATE>03042008</DATE>
<STATE>1</STATE> <!-- chomé -->
</DAY>
</DAYS>
</AGENDA_DATA>
|
|