Example : Create a cross tab Fermer la fenêtre
Description

The purpose of this example is to illustrate the use of the  CrossTabComponent.
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/fiche.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_xml.js" type="text/javascript"></script>    
   <script src="@CONTEXT_WEB@/@FRAMEWORK_ERGO@/jsclient/technique/fw_cookies.js" type="text/javascript"></script>

   <!-- Inclusion of the CrossTabComponent css file -->
   <link rel="stylesheet" type="text/css" href="@CONTEXT_WEB@/@FRAMEWORK_ERGO@/css/commun/tableau.css"></link>

   <!-- Inclusion of the CrossTabComponent necessary framework files -->
   <script src="@CONTEXT_WEB@/@FRAMEWORK_ERGO@/jsclient/technique/fw_outils.js" type="text/javascript"></script>
   <script src="@CONTEXT_WEB@/@FRAMEWORK_ERGO@/jsclient/technique/fw_popup.js" type="text/javascript"></script>
   <script src="@CONTEXT_WEB@/@FRAMEWORK_ERGO@/jsclient/technique/fw_popupinline.js" type="text/javascript"></script>
   <script src="@CONTEXT_WEB@/@FRAMEWORK_ERGO@/jsclient/technique/fw_cs.js" type="text/javascript"></script>
   <script src="@CONTEXT_WEB@/@FRAMEWORK_ERGO@/jsclient/technique/fw_format.js" type="text/javascript"></script>
   <script src="@CONTEXT_WEB@/@FRAMEWORK_ERGO@/jsclient/ergonomique/fw_tableau.js" type="text/javascript"></script>
   <script src="@CONTEXT_WEB@/@FRAMEWORK_ERGO@/jsclient/ergonomique/fw_crossTab.js" type="text/javascript"></script>

   <!-- Include the specific js file of the page -->
   <script src="@URL_JS_JsMyPage@" type="text/javascript"></script>
</head>
<body onload="preparePage()">
   <div class="tableau" id="Position_monTableauCroise" style="display:none"></div>
</body>
</html>



myPage.js
// Declaration of an object which will content
// the xml configuration flow of the component.

var XMLParamTableauCroise = null;
var monTableauCroise = 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
  XMLParamTableauCroise = new parent.XMLObject("CONTENU_WIN", null,"construirePage""@URL_XML_XmlMyData@", true);

  // Load the flow content into the XMLParamTableauCroise object
  XMLParamTableauCroise.importXML();
}


// Function construirePage (launched when the configuration flow has been received)
function construirePage(){

  // Check if the flow has been correctly received
  var testErreur = XMLParamTableauCroise.parseErrorXML();
  if(testErreur == 0){

   // Create a XMLObjectSauvegarde object owning only the TABLEAU_CROISE
   // node from the xml configuration flow

     var XMLTableauCroise = new XMLObjectSauvegarde();
     XMLTableauCroise.sauvegardeDOM(parent.getElements(XMLParamTableauCroise.xmlDoc,"TABLEAU_CROISE")[0]);

   // Create the CrossTabComponent from the XMLTableauCroise object
   // and the xml content flow myContent.xml

     monTableauCroise = new CrossTabComponent("monTableauCroise"XMLTableauCroise, "@URL_XML_XmlMyContent@",true, false);

   // Write the html code of the component into the specified container
   monTableauCroise.importData();
  }
}



myDatas.xml
<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
<PAGE>
  <TABLEAU_CROISE>
     <TITRE>Tableau croisé des articles</TITRE>
     <PIED>Pied du tableau croisé</PIED>
     <LARGEUR_TAB>98%</LARGEUR_TAB>
     <HAUTEUR_TAB>300</HAUTEUR_TAB>
     <DATA_LISTE>LISTE_ARTICLE</DATA_LISTE>
     <DATA_LIGNE>ARTICLE</DATA_LIGNE>
     <TYPE_TRI>TRI_MULTIPLE</TYPE_TRI>
     <COLONNES>
        <COLONNE>
           <LIBELLE>Désignation</LIBELLE>
           <TYPE>STRING</TYPE>
           <DATA>DESIGNATION</DATA>
           <LARGEUR>*</LARGEUR>
           <ALIGNEMENT>left</ALIGNEMENT>
           <TRI>CROISSANT</TRI>
           <CACHE>NON</CACHE>
           <SOMMABLE>NON</SOMMABLE>
        </COLONNE>
        <COLONNE>
           <LIBELLE>Unité</LIBELLE>
           <TYPE>STRING</TYPE>
           <DATA>UNITE</DATA>
           <LARGEUR>80</LARGEUR>
           <ALIGNEMENT>left</ALIGNEMENT>
           <TRI>NON</TRI>
           <CACHE>NON</CACHE>
           <SOMMABLE>NON</SOMMABLE>
        </COLONNE>
        <COLONNE>
           <LIBELLE>Prix 1</LIBELLE>
           <TYPE>NUMBER</TYPE>
           <DATA>PRIX1</DATA>
           <LARGEUR>80</LARGEUR>
           <ALIGNEMENT>center</ALIGNEMENT>
           <TRI>NON</TRI>
           <CACHE>NON</CACHE>
           <SOMMABLE>OUI</SOMMABLE>
        </COLONNE>
        <COLONNE>
           <LIBELLE>Prix 2</LIBELLE>
           <TYPE>NUMBER</TYPE>
           <DATA>PRIX2</DATA>
           <LARGEUR>80</LARGEUR>
           <ALIGNEMENT>center</ALIGNEMENT>
           <TRI>NON</TRI>
           <CACHE>NON</CACHE>
           <SOMMABLE>OUI</SOMMABLE>
        </COLONNE>
        <COLONNE>
           <LIBELLE>Prix 3</LIBELLE>
           <TYPE>NUMBER</TYPE>
           <DATA>PRIX3</DATA>
           <LARGEUR>80</LARGEUR>
           <ALIGNEMENT>center</ALIGNEMENT>
           <TRI>NON</TRI>
           <CACHE>NON</CACHE>
           <SOMMABLE>OUI</SOMMABLE>
        </COLONNE>
        <COLONNE>
           <LIBELLE>Prix 4</LIBELLE>
           <TYPE>NUMBER</TYPE>
           <DATA>PRIX4</DATA>
           <LARGEUR>80</LARGEUR>
           <ALIGNEMENT>center</ALIGNEMENT>
           <TRI>NON</TRI>
           <CACHE>NON</CACHE>
           <SOMMABLE>OUI</SOMMABLE>
        </COLONNE>
    </COLONNES>
    <!-- The node PAGER allows the cross tab to be paginated -->
    <PAGER>
        <MAX_LIGNES>15</MAX_LIGNES>
        <SIDE>right</SIDE>
        <POST_NUMBER_REC>true</POST_NUMBER_REC>
        <SHOW_TOTAL_PER_PAGE>true</SHOW_TOTAL_PER_PAGE>
        <SHOW_SUB_TOTAL>true</SHOW_SUB_TOTAL>
    </PAGER>
    <!-- -------- -->
  </TABLEAU_CROISE>
</PAGE>


myContent.xml
<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
<LISTE_ARTICLE>
    <ARTICLE>
        <DESIGNATION>Article 1</DESIGNATION>
        <UNITE>F</UNITE>
        <PRIX1>0,02</PRIX1>
        <PRIX2>10,00</PRIX2>
        <PRIX3>5,89</PRIX3>
        <PRIX4>0,00</PRIX4>
    </ARTICLE>
    <ARTICLE>
        <DESIGNATION>Article 2</DESIGNATION>
        <UNITE>F</UNITE>
        <PRIX1>0,02</PRIX1>
        <PRIX2>17,41</PRIX2>
        <PRIX3>2,11</PRIX3>
        <PRIX4>0,99</PRIX4>
    </ARTICLE>
    <ARTICLE>
        <DESIGNATION>Article 3</DESIGNATION>
        <UNITE>F</UNITE>
        <PRIX1>0,02</PRIX1>
        <PRIX2>110,00</PRIX2>
        <PRIX3>47,08</PRIX3>
        <PRIX4>0,02</PRIX4>
    </ARTICLE>
    <ARTICLE>
        <DESIGNATION>Article 4</DESIGNATION>
        <UNITE>F</UNITE>
        <PRIX1>189,10</PRIX1>
        <PRIX2>18,14</PRIX2>
        <PRIX3>99,00</PRIX3>
        <PRIX4>0,02</PRIX4>
    </ARTICLE>
    <ARTICLE>
        <DESIGNATION>Article 5</DESIGNATION>
        <UNITE>F</UNITE>
        <PRIX1>123,45</PRIX1>
        <PRIX2>543,21</PRIX2>
        <PRIX3>100,00</PRIX3>
        <PRIX4>0,02</PRIX4>
    </ARTICLE>
    <ARTICLE>
        <DESIGNATION>Article 6</DESIGNATION>
        <UNITE>F</UNITE>
        <PRIX1>54,00</PRIX1>
        <PRIX2>0,00</PRIX2>
        <PRIX3>0,00</PRIX3>
        <PRIX4>0,09</PRIX4>
    </ARTICLE>
    <ARTICLE>
        <DESIGNATION>Article 7</DESIGNATION>
        <UNITE>F</UNITE>
        <PRIX1>0,02</PRIX1>
        <PRIX2>0,02</PRIX2>
        <PRIX3>0,02</PRIX3>
        <PRIX4>0,02</PRIX4>
    </ARTICLE>
    <ARTICLE>
        <DESIGNATION>Article 8</DESIGNATION>
        <UNITE>F</UNITE>
        <PRIX1>0,02</PRIX1>
        <PRIX2>0,02</PRIX2>
        <PRIX3>0,02</PRIX3>
        <PRIX4>0,02</PRIX4>
    </ARTICLE>
    <ARTICLE>
        <DESIGNATION>Article 9</DESIGNATION>
        <UNITE>F</UNITE>
        <PRIX1>0,02</PRIX1>
        <PRIX2>0,02</PRIX2>
        <PRIX3>0,02</PRIX3>
        <PRIX4>0,02</PRIX4>
    </ARTICLE>
    <ARTICLE>
        <DESIGNATION>Article 10</DESIGNATION>
        <UNITE>F</UNITE>
        <PRIX1>0,02</PRIX1>
        <PRIX2>0,02</PRIX2>
        <PRIX3>0,02</PRIX3>
        <PRIX4>0,02</PRIX4>
    </ARTICLE>
</LISTE_ARTICLE>

Graphical overview

Without pagination :
IHM

With pagination and more articles :
IHM