Example : Create an Agenda with personalized days Fermer la fenêtre
Description

The purpose of this example is to illustrate the use of the  AgendaComponent.
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>

Graphical overview

IHM