Libreria Javascript standard 

Introduzione

Questo documento descrive le principali utility della libreria XtendLib.js.

Si consiglia vivamente di utilizzare una libreria standard e cross-browser tipo prototype.js (http://www.prototypejs.org) per tutti gli sviluppi JavaScript:

  • programmazione oggetto in JS (classi e eredità)
  • operazioni di manipolazione del DOM HTML
  • manipolazione di riquadri e hash

prototype.js è caricato automaticamente tramite il token ALIBJS.

La libreria XtendLib.js è complementare a prototype.js per necessità specifiche a XTEND.

Globali

//---------------------------------------------
//Informazione sul browser
//-> Utilizzare Prototype.Browser
vargXtdBowser;
//---------------------------------------------
// Contesto client inviato al browser
// gXtdDomOut!=null se è stato cliccato un link dinamico
vargXtdDomOut;
//---------------------------------------------
// Oggetto usato per creare i contesti client
vargXtdDOMFactory;
//---------------------------------------------
// Valore dei checkbox non contrassegnati
//->Aggiornato da xtdSetUnSelelectedValue
vargXtdCBUnSelelectedValue="";
//---------------------------------------------
//Valore utilizzato per alimentare i parametri web numerici vuoti
//delle azioni X3 prima della chiamata del web service
//null di default: parametri a blank non inizializzati
//->Aggiornato da xtdSetEmptyNumFieldValue
vargXtdEmptyNumFieldValue=null;
//---------------------------------------------
//Classe utilizzata per il controllo parametri web obbligatori
//->Aggiornato da xtdSetBadInputclass
vargXtdBadInputclass="xtdBadInput";
//---------------------------------------------
//Oggetto AJAX di base
varXTENDAJAX;
//---------------------------------------------
//Oggetto AJAX per la chiamata di script server
varXTENDSCRIPTS;
//---------------------------------------------
//Oggetto AJAX per la chiamata di web service (interfaccia)
varXTENDWSVC;
//---------------------------------------------
//Oggetto AJAX per la chiamata di web service dei componenti Flash
varXTENDFLASH;
//---------------------------------------------
//Oggetto AJAX per la chiamata dei web service messaggi
varXTENDMESS;
//---------------------------------------------
//Gestione di un DOM XML
varXTENDDOM;

Strings

// ---------------------------------------------------------------
//Sostituisce aFind con aReplace in aStr
//Parametri opzionali:
// -> aCaseInsensitive - true di default
// -> aAll - true di default
functionxtdStrReplace(aStr,aFind,aReplace,aCaseInsensitive,aAll)
// ---------------------------------------------------------------
//Idem xtdStrReplace ma per la cancellazione
functionxtdStrRemove(aStr,aFind,aCaseInsensitive,aAll)
// ---------------------------------------------------------------
//True se aStr1=aStr2
//Parametri opzionali:
// -> aCaseInsensitive - true di default
functionxtdStrEquals(aStr1,aStr2,aCaseSensitive)
// ---------------------------------------------------------------      
//Elimina i blank, tabulazioni e salti di righe
functionxtdFullTrim(aStr)

Controllo numerico

// ---------------------------------------------------------------
//Restituisce zero o il valore numerico corrispondente a aStr
//Considera i 'RegionalSettings' dell'utente XTEND
// -> aInt : Opzionale
// -> True per forzare a restituire un Integer
functionxtdCheckNum(aStr,aInt)
// ---------------------------------------------------------------
//Restituisce null oppure il valore Integer corrispondente a aStr
functionxtdCheckInt(aStr)
// ---------------------------------------------------------------
//Controlla il contenuto del campo input aFldName
functionxtdCheckNumInput(aFldName)
// ---------------------------------------------------------------
//Idem xtdCheckNumInput per un Integer
functionxtdCheckIntInput(aFldName)

Controllo email

// ---------------------------------------------------------------
// Restituisce null o aEmail formattato - nome@dominio.estensione
// -> Applica xtdFullTrim
// -> Controllo nom.lenght>0
// -> Controllo domaine.length>0
// -> Controllo extension.length>2
functionxtdCheckEmail(aEmail)

Controlli date

Funzioni

// ---------------------------------------------------------------
// aDate è una data inserita (DD/MM/YY, MM/DD/YY...)
// --> Restituisce null o un oggetto CXtdDate che rappresenta la data
funzionextdCheckDateStr(aDate);
// ---------------------------------------------------------------
// aDate è una data in formato X3 YYYYMMDD (String o number)
// --> Restituisce null o un oggetto CXtdDate che rappresenta la date
functionxtdCheckDateX3Fmt(aDate)
// ---------------------------------------------------------------
//aYear, aMonth, aDay sono di tipo String o Integer
//Se aYear è su 2 caratteri
// --> la data completa è calcolata in funzione della data pivot X3
// --> Restituisce null o un oggetto CXtdDate che rappresenta la data
functionxtdCheckDateYMD(aYear,aMonth,aDay)

Classe CXtdDate

// ---------------------------------------------------------------
//Costruttore
//aYear, aMonth, aDay sono di tipo String o Integer
//Se aYear è su 2 caratteri
// --> la data completa è calcolata in funzione della data pivot X3
functionCXtdDate(aYear,aMonth,aDay){}
// ---------------------------------------------------------------
//Giorno
day,
// ---------------------------------------------------------------
//Mese
month,
// ---------------------------------------------------------------
//anno
year,
// ---------------------------------------------------------------
//True se la data è valida
isValid,
// ---------------------------------------------------------------
//Restituisce la data in formato x3 YYYYMMDD
toX3Format=function(),
// ---------------------------------------------------------------
//Restituisce la data nel formato utente
//Il formato è funzione dei ''Regional Settings' XTEND dell'utente
//-> Funzione del codice Lingua XTEND
//a2DigitMonthDay: true/false - Default=false
//->Giorno e Mese su 2 digit, con prefisso 0 se occorre
//a2DigitYear: true/false - Default=false
//->Anno su 2 digit
//aSep : Separatore - Default='/'
toUserFormat=function(a2DigitMonthDay,a2DigitYear,aSep),
// ---------------------------------------------------------------
//Restituisce il N° della settimana
getNumWeek=function(),
// ---------------------------------------------------------------
//Restituisce this.toUserFormat(true,true,aSep)
toShortDate=function(aSep),
// ---------------------------------------------------------------
//Restituisce this.toUserFormat(true,false,aSep)
toLongDate=function(aSep),
// ---------------------------------------------------------------
//Restituisce CXtdDate che rappresenta l'ultimo giorno del mese
getLastMonthDay=function()
// ---------------------------------------------------------------
//Restituisce CXtdDate che rappresenta il primo giorno del mese
getFirstMonthDay=function(),
// ---------------------------------------------------------------
//Restituisce CXtdDate che è uguale a this.day + aNumberOfDay
getAdjustDay=function(aNumberOfDay),
// ---------------------------------------------------------------
//Restituisce CXtdDate che è il giorno seguente
getNextDay=function(),
// ---------------------------------------------------------------
//Restituisce CXtdDate che è il giorno precedente
getPrevDay=function()
// ---------------------------------------------------------------
//1° giorno del mese in formato X3
getFirstMonthDayX3=function(),
// ---------------------------------------------------------------
//Ultimo giorno del mese in formato X3
getLastMonthDayX3=function(),
// ---------------------------------------------------------------
//Restituisce CXtdDate che è uguale a à this.month + aNumberOfMonth
getAdjustMonth=function(aNumberOfMonth),

Formulario

// ---------------------------------------------------------------
//Calcolo di una data inserita su 3 campi input (Giorno,Mese,Anno) diversi
//-> Funziona con i token data prefissati da _DD, _MM, _YY, _YYYY
//-> I campi input hanno come nome aName+_DD, aName_MM, aName+_YY o aName+_YYYY
//Il campo anno (aName+_YY o aName+_YYYY) è obbligatorio
//Se non vi è nessun campo mese:
//-> restituisce gennaio(aMaxDate==false) o dicembre(aMaxDate==true)
//Se non vi è nessun campo giorno:
//-> restituisce il 1°(aMaxDate==false) o l'ultimo (aMaxDate==true) giorno del mese
//Se aSetField=true aggiorna il campo input (hidden) di nome aFieldName
functionxtdGetInputDate(aFieldName,aMaxDate,aSetField)
// ---------------------------------------------------------------
//Restituisce il valore del campo aName del formulario XTEND
//Restituisce aDefValue se campo non trovato (null di default)
functionxtdInputValue(aName,aDefValue)
// ---------------------------------------------------------------
//Restituisce il formulario <form> XTEND
functionxtdGetForm()
// ---------------------------------------------------------------
// Restituisce il valore dell'elemento aElmt
//->Utilizzare preferibilmente xtdInputValue
functionxtdGetValue(aElmt)
// ---------------------------------------------------------------
//Restituisce un Array che contiene tutti gli elementi DOM col nome aName del formulario XTEND
//Se aName è un tag <select>
//->Restituisce l'elenco degli elementi <option> se un solo tag
//->Restituisce l'elenco degli elementi <select> se più tag
functionxtdGetElmts(aName)
// ---------------------------------------------------------------
//Restituisce un un Array che contiene l'elenco degli elementi di nome aName
functionxtdGetValues(aName)
//---------------------------------------------------------------
//Salva il valore del <select> di nome aName come una variabile utente XTEND
functionxtdSelectSave(aName)
// ---------------------------------------------------------------
//Restituisce il valore selezionato dal <select> di nome aName
functionxtdSelectGetVal(aName)
// ---------------------------------------------------------------
//Seleziona l'<opzione> aValue del <select> di nome aName
//->Restituisce true se selezione OK
functionxtdSelectSetVal(aName,aValue)
// ---------------------------------------------------------------
//Idem xtdSelectSetVal per l'elemento <select> aElmt
functionxtdSelectElmt(aElmt,aValue)

Classi css

// ---------------------------------------------------------------
// aElmt is either an Element or an ID
functionxtdSetClass(aElmt,aClassName)
// ---------------------------------------------------------------
functionxtdRemoveClass(aElmt,aClassName)

DOM XML

Le funzioni qui in basso permettono di gestire un DOM XML multi-browser.

Sono accessibili tramite la variabile globale XTENDDOM.

Vedere definizioni DOM XML, Oggetto documento XML, Oggetto elemento XML, Oggetto nodo XML su Wikipedia.

Metodi

// ---------------------------------------------------------------
//Restituisce un Oggetto documento XML creato a partire dalla String aXmlStr
xtdCreate: function(aXmlStr),
// ---------------------------------------------------------------
//Restituisce una String XML (serializzazione)
//aObj è sia un oggetto documento XML sia un oggetto elemento XML
xtdToXml:function(aObj,format),
// ---------------------------------------------------------------
//Restituisce un Array che contiene tutti i figli di aObj il cui nodeName=aTagName
//aObj è sia un oggetto documento XML sia un oggetto elemento XML
xtdElementsByTagName:function(aObj,aTagName),
// ---------------------------------------------------------------
//Restituisce un Hash (prototype.js) che contiene tutti gli attributi di aElmt
//aElmt è un oggetto elemento XML
xtdAttributes:function(aElmt),
// ---------------------------------------------------------------
//Restituisce un Array (prototype.js) di elementi XML che contiene tutti i figli di aElmt
//aElmt è un progetto elemento XML
//Restituisce l'elemento XML creato
xtdChildNodes:function(aElmt),
// ---------------------------------------------------------------
//Aggiunge un nodo testo a aElmt con il testo aText
//<elmt>TEXTE</elmt>
//Restituisce il nodo TEXT
xtdAppendTextNode:function (aElmt,aText),
// ---------------------------------------------------------------
//Aggiunge un figlio nodeName=aTagName a aElmt
//Restituisce l'elemento XML creato
xtdAppendChild:function (aElmt,aTagName),
// ---------------------------------------------------------------
//Elimina i figli aElmt
//aRecursive=true per sciogliere tutti i nodi figli
xtdRemoveChilds:function (aElmt,aRecursive),
// ---------------------------------------------------------------
//Restituisce il 1° figlio di aElmt
xtdFirstChild:function (aElmt),
// ---------------------------------------------------------------
//Restituisce il 1° figlio come il nodeName=aTagName di aElmt
xtdFirstChildByTag:function (aElmt,aTagName),
// ---------------------------------------------------------------
//Restituisce nextSibling di aElmt
xtdNextSibling:function (aElmt),
// ---------------------------------------------------------------
//Restituisce nextSibling come nodeName=aTagName de aElmt
xtdNextSiblingByTag:function (aElmt,aTagName),
// ---------------------------------------------------------------
//Restituisce il valore del nodo testo di aElmt o ""
xtdTextValue:function (aElmt),
// ---------------------------------------------------------------
//Inserisce un elemento nodeName==aTagName come 1° figlio di aElmt
xtdInsertFirst:function(aElmt,aTagName),
// ---------------------------------------------------------------
//Restituisce una rappresentazione JSON del documento XML aDom
xtdDomToJSON:function(aDom),
// ---------------------------------------------------------------
/*Restituisce una rappresentazione JSON dell'elemento XML aElmt
Esempio per l'XML qui in basso:
-> Struttura XML
<A ATTR1=\"AT1\" ATTR2=\"AT2\"><B>TestoB</B><C>TestoC</C></A>
-> Struttura oggetto JSON
{
    "name": "A",
    "val": "",
    "attrs": [{"ATTR1": "AT1"}, {"ATTR2": "AT2"}],
    "childs": [
        {"name": "B", "val": "TestoB", "attrs": [], "childs": []},
        {"name": "C", "val": "TestoC", "attrs": [], "childs": []}
    ]
}
*/
xtdElmtToJSON:function(aElmt),         
// ---------------------------------------------------------------
//Restituisce una rappresentazione JSON del riquadro di elementi XML aArray
xtdElmtArrayToJSON:function(aArray)

Esempio

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,"Testo aggiunto");
   alert(XTENDDOM.xtdToXml(wDOM,true));
   alert(XTENDDOM.xtdDomToJSON(wDOM));
}catch(e){
   alert(e);
}

Controllo delle azioni utenti

Vedere i link dinamici.

  • Controllo dell'inserimento dei campi web obbligatori
      • funzioni xtdDoDlk, xtdCallDlk, xDoMySubmit
      • Class CXtdDomOut
  • Accesso ai 'RegionalSettings' dell'utente XTEND
  • Visualizzare un messaggio proveniente dal server XTEND
  • Accesso alle variabili e criteri utente

Buffer HTML

Descrizione

La classe XTENDAJAX.classHTMLBuffer della libreria XtendAjaxUtils.js facilita la costruzione di una stringa di caratteri HTML.

Questa classe esiste anche nella libreria xtdWsvc.js per un utilizzo negli script server.

Attributi

Il parametro aAttibutes dei metodi della classe XTENDAJAX.classHTMLBuffer descritte qui in basso è un riquadro semplice di pari NomeAttributo/ValoreAttributo.

Esempi

var wHtml=new XTENDAJAX.classHTMLBuffer();
//Aggiunta di un campo input button
// -> <input type="text "class="inputBtn" value="Submit">
wHtml.input("button",["class","inputBtn","value","Submit"]);
//Aggiunta di una tabella
// -> <table class="classTab"><tr>
//    <td>Content1</td><td>Content2<></td>
//    </tr></table>
wHtml.table(["border","1","class","classTab"]);
//Crea una riga
wHtml.tr().td("Content1").endTd().td("Content2").endTd().endTr();
//Crea una riga con un riquadro di celle
wHtml.trFill(["Content1","Content2"]);
enTable();
alert(wHtml.html());

Libreria

//----------------------------------------------
//Aggiunge l'html aHtml
append:function(aHtml),
//----------------------------------------------
//Aggiunge il tag <img>
img:function(aSrc,aBorder,aAttibutes),
//----------------------------------------------
//Aggiunge il tag <input>
input:function(aType,aAttibutes),
//----------------------------------------------
//Aggiunge il tag <select>
select:function(aAttibutes),
//----------------------------------------------
//Aggiunge il tag <select>
//-> aArrayOpts è un Array che contiene le coppie valore/descrizione
//   delle opzioni come per gli attributi
//-> aKeySelected è il valore dell'opzione selezionata
selectFill:function(aAttibutes,aArrayOpts,aKeySelected),
//----------------------------------------------
//Fine tag <select>
endSelect:function(),
//----------------------------------------------
//Aggiunge una <option value="aValue">aText</option>
//->aSelected=true per selezionare l'opzione
option:function(aValue,aText,aSelected),
//----------------------------------------------
//Fine tag <option>
endOption:function(),
//----------------------------------------------
//Aggiunge un tag <textarea>
textarea:function(aValue,aAttibutes),
//----------------------------------------------
//Aggiunge un tag <label>
label:function(aAttibutes),
endLabel:function(),
//----------------------------------------------
//Aggiunge un tag <a>
a:function(aAttibutes),
endA:function(),
//----------------------------------------------
//Aggiunge un tag <form>
form:function(aAttibutes),
endForm:function(),
//----------------------------------------------
//Aggiunge un tag <table>
table:function(aAttibutes),
endTable:function(),
//----------------------------------------------
//Aggiunge un tag <tr>
tr:function(aAttibutes),
endTr:function(),
//----------------------------------------------
//Crea una riga
//->aCells : String o Array of String
//           Contenuto delle celle
//aRowAttib: Attributi della riga
//aCellsAttrib: Attributi delle celle <td> o titoli <th>
//aHeadings: false per creare una riga <tr><td></td>
//            true per creare una riga di titolo <tr><th></th>
trFill:function(aCells,aRowAttib,aCellsAttrib,aHeadings),
//----------------------------------------------
//Aggiunge un titolo <th>aContent</th>
thFill:function(aContent,aAttibutes),
th:function(aAttibutes),
endTh:function(),
//----------------------------------------------
//Crea una cella <td>aContent</td>
tdFill:function(aContent,aAttibutes),
td:function(aAttibutes),
endTd:function(),
//----------------------------------------------
//Restituisce l'HTML
html:function(),
//----------------------------------------------
//Aggiunge un tag <fieldset><legend>aLegend</legend>
//-> aAttibutes: Attributi del tag <fieldset>
//-> aLegendAttrs: Attributi del tag <legend>
fieldset:function(aAttibutes,aLegend,aLegendAttrs),
endFieldset:function(),
//----------------------------------------------
//Crea un fieldset con il contenuto aContent
fieldsetFill:function(aContent,aAttibutes,aLegend,aLegendAttrs),
//----------------------------------------------
//Aggiunge un tag <pre>
pre:function(aAttibutes),
endPre:function(),
//----------------------------------------------
//Crea un tag <pre> con il contenuto aContent
preFill:function(aContent,aAttibutes),
//----------------------------------------------
//Aggiunge un tag <span>
span:function(aAttibutes),
endSpan:function(),
//----------------------------------------------
//Crea un tag <span> con il contenuto aContent
spanFill:function(aContent,aAttibutes),
//----------------------------------------------
//Aggiunge un tag <div>
div:function(aAttibutes),
endDiv:function(),
//----------------------------------------------
//Crea un tag <div> con il contenuto aContent
divFill:function(aContent,aAttibutes),
update:function(aId),
//----------------------------------------------
//Idem metodo html
toString:function(),