Introduction

Ce document décrit les principales fonctions utilitaires de la librairie XtendLib.js.

Nous recommandons fortement d'utiliser une librairie standard et cross-browsers type prototype.js (http://www.prototypejs.org) pour tous vos développements JavaScripts :

  • programmation objet en JS (classes et héritage)
  • opérations de manipulation du DOM HTML
  • manipulation des tableaux et hashs

prototype.js est chargée automatiquement via le token ALIBJS.

La librairie XtendLib.js est complémentaire à prototype.js pour des besoins spécifiques à XTEND.

Globales

//---------------------------------------------
//Information sur le navigateur
//-> Utiliser Prototype.Browser
var gXtdBowser;
//---------------------------------------------
// Contexte client envoyés vers le navigateur
// gXtdDomOut!=null si un lien dynamique a été cliqué
var gXtdDomOut;
//---------------------------------------------
// Objet utilisé pour créer les contextes clients
var gXtdDOMFactory;
//---------------------------------------------
// Valeur des checkboxes non cochées
//->Mise à jour par xtdSetUnSelelectedValue
var gXtdCBUnSelelectedValue="";
//---------------------------------------------
//Valeur utilisée pour remplir les paramètres web numériques vides
//des actions X3 avant appel du web service
//null par défaut : paramètres vides non initialisés
//->Mise à jour par xtdSetEmptyNumFieldValue
var gXtdEmptyNumFieldValue=null;
//---------------------------------------------
//Classe utilisée pour le contrôle paramètres web obligatoires
//->Mise à jour par xtdSetBadInputclass
var gXtdBadInputclass="xtdBadInput";
//---------------------------------------------
//Objet AJAX de base
var XTENDAJAX;
//---------------------------------------------
//Objet AJAX pour l'appel de scripts serveur
var XTENDSCRIPTS;
//---------------------------------------------
//Objet AJAX pour l'appel de web services (interfaces)
var XTENDWSVC;
//---------------------------------------------
//Objet AJAX pour l'appel des web services des composants Flash
var XTENDFLASH;
//---------------------------------------------
//Objet AJAX pour l'appel des web services messages
var XTENDMESS;
//---------------------------------------------
//Gestion d'un DOM XML
var XTENDDOM;

Strings

// ---------------------------------------------------------------
//Remplace aFind par aReplace dans aStr
//Paramètres optionnels:
// -> aCaseInsensitive - true par défaut
// -> aAll - true par défaut
function xtdStrReplace(aStr,aFind,aReplace,aCaseInsensitive,aAll)
// ---------------------------------------------------------------
//Idem xtdStrReplace mais pour la suppression
function xtdStrRemove(aStr,aFind,aCaseInsensitive,aAll)
// ---------------------------------------------------------------
//True si aStr1=aStr2
//Paramètres optionnels:
// -> aCaseInsensitive - true par défaut
function xtdStrEquals(aStr1,aStr2,aCaseSensitive)
// ---------------------------------------------------------------      
//Supprime les blancs, tabulations et sauts de lignes
function xtdFullTrim(aStr)

Contrôle numériques

// ---------------------------------------------------------------
//Renvoie null ou la valeur numérique correspondant à aStr
//Tient compte des 'RegionalSettings' de l'utilisateur XTEND
// -> aInt : Optionnel
// -> True pour forcer à renvoyer un Integer
function xtdCheckNum(aStr,aInt)
// ---------------------------------------------------------------
//Renvoie null ou la valeur Integer correspondant à aStr
function xtdCheckInt(aStr)
// ---------------------------------------------------------------
//Contrôle le contenu du champ input aFldName
function xtdCheckNumInput(aFldName)
// ---------------------------------------------------------------
//Idem xtdCheckNumInput pour un Integer
function xtdCheckIntInput(aFldName)

Contrôle emails

// ---------------------------------------------------------------
// Renvoie null ou aEmail formaté - [email protected]
// -> Applique xtdFullTrim
// -> Contrôle nom.lenght>0
// -> Contrôle domaine.length>0
// -> Contrôle extension.length>2
function xtdCheckEmail(aEmail)

Contrôle dates

Fonctions

// ---------------------------------------------------------------
// aDate est une date saisie (DD/MM/YY, MM/DD/YY...)
// --> Renvoie null ou un objet CXtdDate qui représente la date
function xtdCheckDateStr(aDate);
// ---------------------------------------------------------------
// aDate est une date au format X3 YYYYMMDD (String ou number)
// --> Renvoie null ou un objet CXtdDate qui représente la date
function xtdCheckDateX3Fmt(aDate)
// ---------------------------------------------------------------
//aYear, aMonth, aDay sont de type String ou Integer
//Si la aYear est sur 2 caractères
// --> la date complète est calculée en fonction de la date pivot X3
// --> Renvoie null ou un objet CXtdDate qui représente la date
function xtdCheckDateYMD(aYear,aMonth,aDay)

Classe CXtdDate

// ---------------------------------------------------------------
//Constructeur
//aYear, aMonth, aDay sont de type String ou Integer
//Si la aYear est sur 2 caractères
// --> la date complète est calculée en fonction de la date pivot X3
functionCXtdDate(aYear,aMonth,aDay){}
// ---------------------------------------------------------------
//Jour
day,
// ---------------------------------------------------------------
//Mois
month,
// ---------------------------------------------------------------
//année
year,
// ---------------------------------------------------------------
//True si la date est valide
isValid,
// ---------------------------------------------------------------
//Renvoie la date au format x3 YYYYMMDD
toX3Format=function(),
// ---------------------------------------------------------------
//Renvoie la date au format utilisateur
//Le format est fonction des ''Regional Settings' XTEND de l'utilisateur
//-> Fonction du code Langue XTEND
//a2DigitMonthDay : true/false - Défaut=false
//->Jour et Mois sur 2 digits, préfixé par 0 si nécessaire
//a2DigitYear : true/false - Défaut=false
//->Année sur 2 digits
//aSep : Séparateur - Défaut='/'
toUserFormat=function(a2DigitMonthDay,a2DigitYear,aSep),
// ---------------------------------------------------------------
//Renvoie le N° de la semaine
getNumWeek=function(),
// ---------------------------------------------------------------
//Renvoie this.toUserFormat(true,true,aSep)
toShortDate=function(aSep),
// ---------------------------------------------------------------
//Renvoie this.toUserFormat(true,false,aSep)
toLongDate=function(aSep),
// ---------------------------------------------------------------
//Renvoie un CXtdDate qui représente le dernier jour du mois
getLastMonthDay=function()
// ---------------------------------------------------------------
//Renvoie un CXtdDate qui représente le premier jour du mois
getFirstMonthDay=function(),
// ---------------------------------------------------------------
//Renvoie un CXtdDate qui est égal à this.day + aNumberOfDay
getAdjustDay=function(aNumberOfDay),
// ---------------------------------------------------------------
//Renvoie un CXtdDate qui est le jour suivant
getNextDay=function(),
// ---------------------------------------------------------------
//Renvoie un CXtdDate qui est le jour précédent
getPrevDay=function()
// ---------------------------------------------------------------
//1er jour du mois au format X3
getFirstMonthDayX3=function(),
// ---------------------------------------------------------------
//Dernier jour du mois au format X3
getLastMonthDayX3=function(),
// ---------------------------------------------------------------
//Renvoie un CXtdDate qui est égal à this.month + aNumberOfMonth
getAdjustMonth=function(aNumberOfMonth),

Formulaire

// ---------------------------------------------------------------
//Calcul d'une date saisie sur 3 champs input (Jour,Mois,Année) différents
//-> Elle fonctionne avec les tokens date préfixés par _DD, _MM, _YY, _YYYY
//-> Les champs input ont pour nom aName+_DD, aName_MM, aName+_YY ou aName+_YYYY
//Le champ année (aName+_YY ou aName+_YYYY) est obligatoire
//Si pas de champ mois :
//-> renvoie janvier(aMaxDate==false) ou décembre(aMaxDate==true)
//Si pas de champ jour :
//-> renvoie le 1er(aMaxDate==false) ou le dernier(aMaxDate==true) jour du mois
//Si aSetField=true met à jour le champ input (hidden) de nom aFieldName
function xtdGetInputDate(aFieldName,aMaxDate,aSetField)
// ---------------------------------------------------------------
//Renvoie la valeur du champ aName du formulaire XTEND
//Renvoie aDefValue si champ non trouvé (null par défaut)
function xtdInputValue(aName,aDefValue)
// ---------------------------------------------------------------
//Renvoie le formulaire <form> XTEND
function xtdGetForm()
// ---------------------------------------------------------------
// Renvoie la valeur de l'élément aElmt
//->Utiliser de préférence xtdInputValue
function xtdGetValue (aElmt)
// ---------------------------------------------------------------
//Renvoie un Array qui contient tous les éléments DOM de nom aName du formulaire XTEND
//Si aName est un tag <select>
//->Renvoie la liste des éléments <option> si un seul tag
//->Renvoie la liste des éléments <select> si plusieurs tags
function xtdGetElmts(aName)
// ---------------------------------------------------------------
//Renvoie un Array qui contient la liste des éléments de nom aName
function xtdGetValues(aName)
//---------------------------------------------------------------
//Sauvegarde la valeur du <select> de nom aName comme une variable utilisateur XTEND
function xtdSelectSave(aName)
// ---------------------------------------------------------------
//Renvoie la valeur sélectionnées du <select> de nom aName
function xtdSelectGetVal(aName)
// ---------------------------------------------------------------
//Sélectionne l'<option> aValue du <select> de nom aName
//->Renvoie true si sélection OK
function xtdSelectSetVal(aName,aValue)
// ---------------------------------------------------------------
//Idem xtdSelectSetVal pour l'élément <select> aElmt
function xtdSelectElmt(aElmt,aValue)

Classes css

// ---------------------------------------------------------------
// aElmt is either an Element or an ID
function xtdSetClass(aElmt,aClassName)
// ---------------------------------------------------------------
function xtdRemoveClass(aElmt,aClassName)

DOM XML

Les fonctions ci-dessous permettent de gérer un DOM XML multi-navigateurs.

Elles sont accessibles via la variable globale XTENDDOM.

Voir définitions DOM XML, Objet document XML, Objet élément XML, Objet noeud XML sur Wikipedia.

Methods

// ---------------------------------------------------------------
//Renvoie un Objet document XML créé à partir de la String aXmlStr
xtdCreate: function(aXmlStr),
// ---------------------------------------------------------------
//Renvoie une String XML (sérialisation)
//aObj est soit un objet document XML soit un objet élément XML
xtdToXml:function(aObj,format),
// ---------------------------------------------------------------
//Renvoie un Array qui contient tous les fils de aObj dont nodeName=aTagName
//aObj est soit un objet document XML soit un objet élément XML
xtdElementsByTagName:function(aObj,aTagName),
// ---------------------------------------------------------------
//Renvoie un Hash (prototype.js) qui contient tous les attributs de aElmt
//aElmt est un objet élément XML
xtdAttributes:function(aElmt),
// ---------------------------------------------------------------
//Renvoie un Array (prototype.js) d'éléments XML qui contient tous les fils de aElmt
//aElmt est un objet élément XML
//Renvoie l'élément XML créé
xtdChildNodes:function(aElmt),
// ---------------------------------------------------------------
//Ajoute un noeud texte à aElmt avec le texte aText
//<elmt>TEXTE</elmt>
//Renvoie le noeud TEXT
xtdAppendTextNode:function (aElmt,aText),
// ---------------------------------------------------------------
//Ajoute un fils nodeName=aTagName à aElmt
//Renvoie l'élément XML créé
xtdAppendChild:function (aElmt,aTagName),
// ---------------------------------------------------------------
//Supprime les fils aElmt
//aRecursive=true pour délier tous les noeuds fils
xtdRemoveChilds:function (aElmt,aRecursive),
// ---------------------------------------------------------------
//Renvoie le 1er fils de aElmt
xtdFirstChild:function (aElmt),
// ---------------------------------------------------------------
//Renvoie le 1er fils tel que nodeName=aTagName de aElmt
xtdFirstChildByTag:function (aElmt,aTagName),
// ---------------------------------------------------------------
//Renvoie nextSibling de aElmt
xtdNextSibling:function (aElmt),
// ---------------------------------------------------------------
//Renvoie nextSibling tel que nodeName=aTagName de aElmt
xtdNextSiblingByTag:function (aElmt,aTagName),
// ---------------------------------------------------------------
//Renvoie la valeur du noeud texte de aElmt ou ""
xtdTextValue:function (aElmt),
// ---------------------------------------------------------------
//Insère un élément nodeName==aTagName comme 1er fils de aElmt
xtdInsertFirst:function(aElmt,aTagName),
// ---------------------------------------------------------------
//Renvoie une représentation JSON du document XML aDom
xtdDomToJSON:function(aDom),
// ---------------------------------------------------------------
/*Renvoie une représentation JSON de l'élement XML aElmt
Exemple pour le XMLci-dessous:
-> Structure XML
<A ATTR1=\"AT1\" ATTR2=\"AT2\"><B>TexteB</B><C>TexteC</C></A>
-> Structure objet JSON
{
    "name": "A",
    "val": "",
    "attrs": [{"ATTR1": "AT1"}, {"ATTR2": "AT2"}],
    "childs": [
        {"name": "B", "val": "TexteB", "attrs": [], "childs": []},
        {"name": "C", "val": "TexteC", "attrs": [], "childs": []}
    ]
}
*/
xtdElmtToJSON:function(aElmt),         
// ---------------------------------------------------------------
//Renvoie une représentation JSON du tableau d'élements XML aArray
xtdElmtArrayToJSON:function(aArray)

Exemple

try{
   var wXML="<ROOT A1=\"1\"  A2=\"2\">";
   wXML+="<A><AA>Val_AA</AA><AB>Val_AB</AB></A>";
   wXML+="<B><BA>Val_BA</BA><BB>Val_BB</BB></B>";
   wXML+="</ROOT>";
   var wDOM=XTENDDOM.xtdCreate(wXML);
   alert(XTENDDOM.xtdToXml(wDOM,true));
   alert(XTENDDOM.xtdToXml(XTENDDOM.xtdElementsByTagName(wDOM,"BA")[0],true));
   alert(XTENDDOM.xtdAttributes(wDOM.documentElement).toJSON());
   var wFirst=XTENDDOM.xtdFirstChildByTag(wDOM.documentElement,"A");
   XTENDDOM.xtdAppendTextNode(wFirst,"Texte ajouté");
   alert(XTENDDOM.xtdToXml(wDOM,true));
   alert(XTENDDOM.xtdDomToJSON(wDOM));
}catch(e){
   alert(e);
}

Contrôle des action utilisateurs

Voir les liens dynamiques.

  • Contrôle de saisie des champs web obligatoires
      • fonctions xtdDoDlk, xtdCallDlk, xDoMySubmit
      • Class CXtdDomOut
  • Accès aux 'RégionalSettings' de l'utilisateur XTEND
  • Afficher un message issu du serveur XTEND
  • Accès aux variables et critères utilisateur

Buffer HTML

Description

La classe XTENDAJAX.classHTMLBuffer de la librairie XtendAjaxUtils.js facilite la construction d'une chaine de caractères HTML.

Cette classe existe aussi dans la librairie xtdWsvc.js pour une utilisation dans les scripts serveur.

Attributs

Le paramètre aAttibutes des méthodes de la classe XTENDAJAX.classHTMLBuffer décrites ci-dessous est une tableau simple de paires NomAttribut/ValeurAtribut.

Exemples

var wHtml=new XTENDAJAX.classHTMLBuffer();
//Ajout d'un champ input button
// -> <input type="text "class="inputBtn" value="Submit">
wHtml.input("button",["class","inputBtn","value","Submit"]);
//Ajout d'une table
// -> <table class="classTab"><tr>
//    <td>Content1</td><td>Content2<></td>
//    </tr></table>
wHtml.table(["border","1","class","classTab"]);
//Crée un ligne
wHtml.tr().td("Content1").endTd().td("Content2").endTd().endTr();
//Crée un ligne avec un tableau de cellules
wHtml.trFill(["Content1","Content2"]);
enTable();
alert(wHtml.html());

Librairie

//----------------------------------------------
//Ajoute le html aHtml
append:function(aHtml),
//----------------------------------------------
//Ajoute le tag <img>
img:function(aSrc,aBorder,aAttibutes),
//----------------------------------------------
//Ajoute le tag <input>
input:function(aType,aAttibutes),
//----------------------------------------------
//Ajoute le tag <select>
select:function(aAttibutes),
//----------------------------------------------
//Ajoute le tag <select>
//-> aArrayOpts est un Array qui contient les couples valeur/libellé
//   des options comme pour les attributs
//-> aKeySelected est la valeur de l'option sélectionnée
selectFill:function(aAttibutes,aArrayOpts,aKeySelected),
//----------------------------------------------
//Fin tag <select>
endSelect:function(),
//----------------------------------------------
//Ajoute une <option value="aValue">aText</option>
//->aSelected=true pour sélectionner l'option
option:function(aValue,aText,aSelected),
//----------------------------------------------
//Fin tag <option>
endOption:function(),
//----------------------------------------------
//Ajoute un tag <textarea>
textarea:function(aValue,aAttibutes),
//----------------------------------------------
//Ajoute un tag <label>
label:function(aAttibutes),
endLabel:function(),
//----------------------------------------------
//Ajoute un tag <a>
a:function(aAttibutes),
endA:function(),
//----------------------------------------------
//Ajoute un tag <form>
form:function(aAttibutes),
endForm:function(),
//----------------------------------------------
//Ajoute un tag <table>
table:function(aAttibutes),
endTable:function(),
//----------------------------------------------
//Ajoute un tag <tr>
tr:function(aAttibutes),
endTr:function(),
//----------------------------------------------
//Crée une ligne
//->aCells : String ou Array of String
//           Contenu des cellules
//aRowAttib : Attributs de la ligne
//aCellsAttrib : Attributs des cellules <td> ou titres <th>
//aHeadings : false pour créer une ligne <tr><td></td>
//            true pour créer une ligne de titre <tr><th></th>
trFill:function(aCells,aRowAttib,aCellsAttrib,aHeadings),
//----------------------------------------------
//Ajoute un titre <th>aContent</th>
thFill:function(aContent,aAttibutes),
th:function(aAttibutes),
endTh:function(),
//----------------------------------------------
//Crée une cellule <td>aContent</td>
tdFill:function(aContent,aAttibutes),
td:function(aAttibutes),
endTd:function(),
//----------------------------------------------
//Renvoie le HTML
html:function(),
//----------------------------------------------
//Ajoute un tag <fieldset><legend>aLegend</legend>
//-> aAttibutes: Attributs du tag <fieldset>
//-> aLegendAttrs : Attributs du tag <legend>
fieldset:function(aAttibutes,aLegend,aLegendAttrs),
endFieldset:function(),
//----------------------------------------------
//Crée un fieldset avec le contenu aContent
fieldsetFill:function(aContent,aAttibutes,aLegend,aLegendAttrs),
//----------------------------------------------
//Ajoute un tag <pre>
pre:function(aAttibutes),
endPre:function(),
//----------------------------------------------
//Crée un tag <pre> avec le contenu aContent
preFill:function(aContent,aAttibutes),
//----------------------------------------------
//Ajoute un tag <span>
span:function(aAttibutes),
endSpan:function(),
//----------------------------------------------
//Crée un tag <span> avec le contenu aContent
spanFill:function(aContent,aAttibutes),
//----------------------------------------------
//Ajoute un tag <div>
div:function(aAttibutes),
endDiv:function(),
//----------------------------------------------
//Crée un tag <div> avec le contenu aContent
divFill:function(aContent,aAttibutes),
update:function(aId),
//----------------------------------------------
//Idem méthode html
toString:function(),