Librairie Javascript standard 

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
vargXtdBowser;
//---------------------------------------------
// Contexte client envoyés vers le navigateur
// gXtdDomOut!=null si un lien dynamique a été cliqué
vargXtdDomOut;
//---------------------------------------------
// Objet utilisé pour créer les contextes clients
vargXtdDOMFactory;
//---------------------------------------------
// Valeur des checkboxes non cochées
//->Mise à jour par xtdSetUnSelelectedValue
vargXtdCBUnSelelectedValue="";
//---------------------------------------------
//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
vargXtdEmptyNumFieldValue=null;
//---------------------------------------------
//Classe utilisée pour le contrôle paramètres web obligatoires
//->Mise à jour par xtdSetBadInputclass
vargXtdBadInputclass="xtdBadInput";
//---------------------------------------------
//Objet AJAX de base
varXTENDAJAX;
//---------------------------------------------
//Objet AJAX pour l'appel de scripts serveur
varXTENDSCRIPTS;
//---------------------------------------------
//Objet AJAX pour l'appel de web services (interfaces)
varXTENDWSVC;
//---------------------------------------------
//Objet AJAX pour l'appel des web services des composants Flash
varXTENDFLASH;
//---------------------------------------------
//Objet AJAX pour l'appel des web services messages
varXTENDMESS;
//---------------------------------------------
//Gestion d'un DOM XML
varXTENDDOM;

Strings

// ---------------------------------------------------------------
//Remplace aFind par aReplace dans aStr
//Paramètres optionnels:
// -> aCaseInsensitive - true par défaut
// -> aAll - true par défaut
functionxtdStrReplace(aStr,aFind,aReplace,aCaseInsensitive,aAll)
// ---------------------------------------------------------------
//Idem xtdStrReplace mais pour la suppression
functionxtdStrRemove(aStr,aFind,aCaseInsensitive,aAll)
// ---------------------------------------------------------------
//True si aStr1=aStr2
//Paramètres optionnels:
// -> aCaseInsensitive - true par défaut
functionxtdStrEquals(aStr1,aStr2,aCaseSensitive)
// ---------------------------------------------------------------      
//Supprime les blancs, tabulations et sauts de lignes
functionxtdFullTrim(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
functionxtdCheckNum(aStr,aInt)
// ---------------------------------------------------------------
//Renvoie null ou la valeur Integer correspondant à aStr
functionxtdCheckInt(aStr)
// ---------------------------------------------------------------
//Contrôle le contenu du champ input aFldName
functionxtdCheckNumInput(aFldName)
// ---------------------------------------------------------------
//Idem xtdCheckNumInput pour un Integer
functionxtdCheckIntInput(aFldName)

Contrôle emails

// ---------------------------------------------------------------
// Renvoie null ou aEmail formaté - nom@domaine.extension
// -> Applique xtdFullTrim
// -> Contrôle nom.lenght>0
// -> Contrôle domaine.length>0
// -> Contrôle extension.length>2
functionxtdCheckEmail(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
functionxtdCheckDateStr(aDate);
// ---------------------------------------------------------------
// aDate est une date au format X3 YYYYMMDD (String ou number)
// --> Renvoie null ou un objet CXtdDate qui représente la date
functionxtdCheckDateX3Fmt(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
functionxtdCheckDateYMD(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
functionxtdGetInputDate(aFieldName,aMaxDate,aSetField)
// ---------------------------------------------------------------
//Renvoie la valeur du champ aName du formulaire XTEND
//Renvoie aDefValue si champ non trouvé (null par défaut)
functionxtdInputValue(aName,aDefValue)
// ---------------------------------------------------------------
//Renvoie le formulaire <form> XTEND
functionxtdGetForm()
// ---------------------------------------------------------------
// Renvoie la valeur de l'élément aElmt
//->Utiliser de préférence xtdInputValue
functionxtdGetValue(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
functionxtdGetElmts(aName)
// ---------------------------------------------------------------
//Renvoie un Array qui contient la liste des éléments de nom aName
functionxtdGetValues(aName)
//---------------------------------------------------------------
//Sauvegarde la valeur du <select> de nom aName comme une variable utilisateur XTEND
functionxtdSelectSave(aName)
// ---------------------------------------------------------------
//Renvoie la valeur sélectionnées du <select> de nom aName
functionxtdSelectGetVal(aName)
// ---------------------------------------------------------------
//Sélectionne l'<option> aValue du <select> de nom aName
//->Renvoie true si sélection OK
functionxtdSelectSetVal(aName,aValue)
// ---------------------------------------------------------------
//Idem xtdSelectSetVal pour l'élément <select> aElmt
functionxtdSelectElmt(aElmt,aValue)

Classes css

// ---------------------------------------------------------------
// aElmt is either an Element or an ID
functionxtdSetClass(aElmt,aClassName)
// ---------------------------------------------------------------
functionxtdRemoveClass(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(),