JavaScript-Standardbibliothek 

Einführung

Im vorliegenden Dokument werden die wichtigsten Funktionen der Bibliothek XtendLib.jsbeschrieben.

Bei JavaScript-Entwicklungen ist es sehr zu empfehlen, eine Standardbibliothek und Cross-Browser-Funktionalitäten vom Typ prototype.js (http://www.prototypejs.org) zu verwenden:

  • Objektorientierte Programmierung in JS (Klassen und Vererbung)
  • Funktionalitäten der HTML-DOM
  • Tabellen und Hashes

Prototype.js wird automatisch über das Token ALIBJSgeladen

. Die Bibliothek XtendLib.js ergänztprototype.js um XTEND-spezifische Funktionalitäten.

Globales

//---------------------------------------------
// Auskunft über den Browser
//-> Prototype.Browser verwenden
vargXtdBowser;
//---------------------------------------------
// Der Client-Kontext wird an den Browser gesendet
// gXtdDomOut!=null, wenn ein dynamischer Link angeklickt wurde
vargXtdDomOut;
//---------------------------------------------
// Das Objekt wird verwendet, um Client-Kontexte anzulegen
vargXtdDOMFactory;
//---------------------------------------------
// Die Kontrollkästchen sind nicht aktiviert
//-> Aktualisierung durch xtdSetUnSelelectedValue
vargXtdCBUnSelelectedValue="";
//---------------------------------------------
// Der Wert wird verwendet, um die leeren numerischen Webparameter
// der X3-Aktionen vor dem Webservice-Aufruf zu belegen
// standardmäßig null: leere Parameter werden nicht initialisiert
//-> Aktualisierung durch xtdSetEmptyNumFieldValue
vargXtdEmptyNumFieldValue=null;
//---------------------------------------------
// Die Klasse wird verwendet, um die obligatorischen Webparameter zu prüfen
//-> Aktualisierung durch xtdSetBadInputclass
vargXtdBadInputclass="xtdBadInput";
//---------------------------------------------
//AJAX-Datenbankobjekt
varXTENDAJAX;
//---------------------------------------------
// AJAX-Objekt für den Skriptserver-Aufruf
varXTENDSCRIPTS;
//---------------------------------------------
// AJAX-Objekt für den Webservice-Aufruf (Schnittstellen)
varXTENDWSVC;
//---------------------------------------------
// AJAX-Objekt für den Webservice-Aufruf der Flash-Komponenten
varXTENDFLASH;
//---------------------------------------------
// AJAX-Objekt für den Webservice-Aufruf (Meldungen)
varXTENDMESS;
//---------------------------------------------
// Verwaltung einer XML-DOM
varXTENDDOM;

Strings

// ---------------------------------------------------------------
// Ersetze aFind durch aReplace in aStr
// Fakultative Parameter:
// -> aCaseInsensitive - Default = true
// -> aAll - Default = true
functionxtdStrReplace(aStr,aFind,aReplace,aCaseInsensitive,aAll)
// ---------------------------------------------------------------
// Analog für das Löschen: xtdStrReplace
functionxtdStrRemove(aStr,aFind,aCaseInsensitive,aAll)
// ---------------------------------------------------------------
// True, wenn aStr1 = aStr2
// Fakultative Parameter:
// -> aCaseInsensitive - Default = true
functionxtdStrEquals(aStr1,aStr2,aCaseSensitive)
// ---------------------------------------------------------------      
// Lösche Leerzeichen, Tabs und Leerzeilen
functionxtdFullTrim(aStr)

Prüfung der berechneten Werte

// ---------------------------------------------------------------
// Gibt null oder den aStr entsprechenden numerischen Wert zurück
// Berücksichtigt die "RegionalSettings" des XTEND-Benutzers
// -> aInt: Optional
// -> True, um die Rückgabe eines Integers zu erzwingen
functionxtdCheckNum(aStr,aInt)
// ---------------------------------------------------------------
// Gibt null oder den aStr entsprechenden Integer-Wert zurück
functionxtdCheckInt(aStr)
// ---------------------------------------------------------------
// Der Inhalt des Eingabefeldes aFldName wird geprüft
functionxtdCheckNumInput(aFldName)
// ---------------------------------------------------------------
// Analog bei Integer: xtdCheckNumInput
functionxtdCheckIntInput(aFldName)

Prüfung E-Mails

// ---------------------------------------------------------------
// Gibt null oder eine formatierte E-Mail zurück - name@domaine.extension
// -> Anwendung xtdFullTrim
// -> Prüfung nom.lenght > 0
// -> Prüfung domaine.length > 0
// -> Prüfung extension.length > 2
functionxtdCheckEmail(aEmail)

Prüfung Daten

Funktionen

// ---------------------------------------------------------------
// aDate ist ein erfasstes Datum (TT/MM/JJ, MM/TT/JJ etc.)
// --> Gibt null oder ein CXtdDate für das Datum zurück
functionxtdCheckDateStr(aDate);
// ---------------------------------------------------------------
// aDate ist ein Datum im X3-Format JJJJMMTT (String oder Zahl)
// --> Für das Datum wird null oder ein CXtdDate zurückgegeben
functionxtdCheckDateX3Fmt(aDate)
// ---------------------------------------------------------------
// aYear, aMonth, aDay sind vom Typ String oder Integer
// Wenn aYear zweistellig ist
// --> Es wird das vollständige Datum in Abhängigkeit des X3-Pivot-Datums berechnet
// --> Für das Datum wird null oder ein CXtdDate zurückgegeben
functionxtdCheckDateYMD(aYear,aMonth,aDay)

Klasse CXtdDate

// ---------------------------------------------------------------
// Konstruktor
// aYear, aMonth, aDay sind vom Typ String oder Integer
// Wenn aYear zweistellig ist
// --> Es wird das vollständige Datum in Abhängigkeit des X3-Pivot-Datums berechnet
functionCXtdDate(aYear,aMonth,aDay){}
// ---------------------------------------------------------------
// Tag
day,
// ---------------------------------------------------------------
// Monat
month,
// ---------------------------------------------------------------
// Jahr
year,
// ---------------------------------------------------------------
// True, wenn das Datum gültig ist
isValid,
// ---------------------------------------------------------------
// Gibt das Datum im X3-Format JJJJMMTT zurück
toX3Format=function(),
// ---------------------------------------------------------------
// Gibt das Datum im Benutzerformat zurück
// Das Format richtet sich nach den XTEND-"RegionalSettings" des Benutzers
//-> Richtet sich nach dem XTEND-Sprachcode
// a2DigitMonthDay: true/false - Default = false
//-> Tag und Monat zweistellig, ggf. mit Präfix 0
// a2DigitYea: true/false - Default = false
//-> Jahr zweistellig
// aSep: Trennzeichen - Default = '/'
toUserFormat=function(a2DigitMonthDay,a2DigitYear,aSep),
// ---------------------------------------------------------------
// Gibt die Nummer der Woche zurück
getNumWeek=function(),
// ---------------------------------------------------------------
// Gibt this.toUserFormat(true,true,aSep) zurück
toShortDate=function(aSep),
// ---------------------------------------------------------------
// Gibt this.toUserFormat(true,false,aSep) zurück
toLongDate=function(aSep),
// ---------------------------------------------------------------
// Gibt ein CXtdDate für den Monatsletzten zurück
getLastMonthDay=function()
// ---------------------------------------------------------------
// Gibt ein CXtdDate für den Monatsersten zurück
getFirstMonthDay=function(),
// ---------------------------------------------------------------
// Gibt ein CXtdDate zurück, das this.day + aNumerOfDay entspricht
getAdjustDay=function(aNumberOfDay),
// ---------------------------------------------------------------
// Gibt ein CXtdDate für den folgenden Tag zurück
getNextDay=function(),
// ---------------------------------------------------------------
// Gibt ein CXtdDate für den vorherigen Tag zurück
getPrevDay=function()
// ---------------------------------------------------------------
// 1. Tag des Monats im X3-Format
getFirstMonthDayX3=function(),
// ---------------------------------------------------------------
// Letzter Tag des Monats im X3-Format
getLastMonthDayX3=function(),
// ---------------------------------------------------------------
// Gibt ein CXtdDate zurück, das this.day + aNumerOfMonth entspricht
getAdjustMonth=function(aNumberOfMonth),

Formular

// ---------------------------------------------------------------
// Berechnung eines in drei verschiedenen Eingabefeldern erfassten Datums (Tag, Monat, Jahr)
//-> Das Datum wird mit Datumstoken mit Präfix _TT, _MM, _JJ, _JJJJ interpretiert
//-> Die Eingabefelder heißen aName+_DD, aName_MM, aName+_YY und aName+_YYYY
// Das Feld Jahr (aName+_YY oder aName+_YYYY) ist obligatorisch
// Wenn kein Monatsfeld vorhanden ist:
// Es wird Januar(aMaxDate == false) oder Dezember(aMaxDate == true) zurückgegeben
// Wenn kein Tagesfeld vorhanden ist:
// Es wird der Erste (aMaxDate == false) oder der Letzte (aMaxDate == true) des Monats zurückgegeben
// Wenn aSetField = true, wird das (verborgene) Namenseingabefeld aFieldName aktualisiert
functionxtdGetInputDate(aFieldName,aMaxDate,aSetField)
// ---------------------------------------------------------------
// Gibt den Wert des Feldes aName im XTEND-Formular zurück
// Gibt aDefValue zurück, wenn das Feld nicht gefunden wurde (Default = null)
functionxtdInputValue(aName,aDefValue)
// ---------------------------------------------------------------
// Gibt das XTEND-Formular <form> zurück
functionxtdGetForm()
// ---------------------------------------------------------------
// Gib den Wert des Elementes aElmt zurück
//-> Verwendung von xtdInputValue wird empfohlen
functionxtdGetValue(aElmt)
// ---------------------------------------------------------------
// Gibt einen Array mit sämtlichen DOM-Namenselementen aName im XTEND-Formular zurück.
// Wenn aName ein <select>-Tag ist,
//-> wird die Liste der <option>-Elemente zurückgegeben, sofern es ein einzelnes Tag ist
//-> wird die Liste der <select>-Elemente zurückgegeben, sofern es mehrere Tags sind
functionxtdGetElmts(aName)
// ---------------------------------------------------------------
// Gibt einen Array mit sämtlichen Namenselementen aName zurück.
functionxtdGetValues(aName)
//---------------------------------------------------------------
// Speichern des Wertes des aName-<select> in einer XTEND-Benutzervariable
functionxtdSelectSave(aName)
// ---------------------------------------------------------------
// Gibt den Wert des selektierten aName-<select> zurück
functionxtdSelectGetVal(aName)
// ---------------------------------------------------------------
// Gibt die aValue-<option> des aName-<select> zurück
// Gibt bei korrekter Selektion 'true' zurück
functionxtdSelectSetVal(aName,aValue)
// ---------------------------------------------------------------
// analog xtdSelectSetVal für das <select>-Element aElmt
functionxtdSelectElmt(aElmt,aValue)

CSS-Klassen

// ---------------------------------------------------------------
// aElmt ist entweder ein Element oder eine Id
functionxtdSetClass(aElmt,aClassName)
// ---------------------------------------------------------------
functionxtdRemoveClass(aElmt,aClassName)

XML-DOM

Nachstehend beschriebene Funktionen dienen der Verwaltung einer XML-DOM mit Multi-Browser-Funktionalitäten

Die Funktionen sind verfügbar über die globale Variable XTENDDOM.

Siehe Definitionen in Wikipedia: XML-DOM, XML-Dokumentobjekt, XML-Elementobjekt, XML-Objektknoten

Methoden

// ---------------------------------------------------------------
// Gibt ein aus dem String aXmlStr angelegtes XML-Dokumentobjekt zurück
xtdCreate: function(aXmlStr),
// ---------------------------------------------------------------
// Gibt einen XML-String zurück (Serialisierung)
// aObj ist entweder ein XML-Dokumentobjekt oder ein XML-Elementobjekt
xtdToXml:function(aObj,format),
// ---------------------------------------------------------------
// Gibt einen Array mit sämtlichen abgeleiteten aObj-Objekten mit nodeName = aTagName zurück.
// aObj ist entweder ein XML-Dokumentobjekt oder ein XML-Elementobjekt
xtdElementsByTagName:function(aObj,aTagName),
// ---------------------------------------------------------------
// Gibt einen Hash (prototype.js) mit sämtlichen Attributen von aElmt zurück.
// aElmt ist ein XML-Elementobjekt
xtdAttributes:function(aElmt),
// ---------------------------------------------------------------
// Gibt einen XML-Element-Array (prototype.js) mit sämtlichen abgeleiteten aElmt-Elementen zurück.
// aElmt ist ein XML-Elementobjekt
// Gibt das angelegte XML-Element zurück
xtdChildNodes:function(aElmt),
// ---------------------------------------------------------------
// Fügt aElmt einen Textknoten mit dem Text aText hinzu
//<elmt>TEXTE</elmt>
// Gibt den TEXT-Knoten zurück
xtdAppendTextNode:function (aElmt,aText),
// ---------------------------------------------------------------
// Fügt aElmt einen abgeleiteten nodeName = aTagName hinzu
// Gibt das angelegte XML-Element zurück
xtdAppendChild:function (aElmt,aTagName),
// ---------------------------------------------------------------
// Löscht die abgeleiteten aElmt-Elemente
// aRecursive = true, um die abgeleiteten Knoten abzulösen
xtdRemoveChilds:function (aElmt,aRecursive),
// ---------------------------------------------------------------
// Gibt das erste von aElmt abgeleitete Element zurück
xtdFirstChild:function (aElmt),
// ---------------------------------------------------------------
// Gibt das erste von abgeleitete aElmt-Element zurück, bei dem nodeName = aTagName gilt
xtdFirstChildByTag:function (aElmt,aTagName),
// ---------------------------------------------------------------
// Gibt nextSibling von aElmt zurück
xtdNextSibling:function (aElmt),
// ---------------------------------------------------------------
// Gibt nextSibling zurück, bei dem nodeName = aTagName gilt
xtdNextSiblingByTag:function (aElmt,aTagName),
// ---------------------------------------------------------------
// Gibt den Wert des Textknotens von aElmt oder "" zurück
xtdTextValue:function (aElmt),
// ---------------------------------------------------------------
// Fügt ein Element mit nodeName == aTagName als erstes abgeleitetes Element von aElmt ein
xtdInsertFirst:function(aElmt,aTagName),
// ---------------------------------------------------------------
// Gibt eine JSON-Darstellung des XML-Dokuments aDom zurück
xtdDomToJSON:function(aDom),
// ---------------------------------------------------------------
// *Gibt eine JSON-Darstellung des XML-Elementes aElmt zurück
Beispiel für den XML-Code:
-> XML-Struktur
<A ATTR1=\"AT1\" ATTR2=\"AT2\"><B>TexteB</B><C>TexteC</C></A>
-> JSON-Objektstruktur
{
    "name": "A",
    "val": "",
    "attrs": [{"ATTR1": "AT1"}, {"ATTR2": "AT2"}],
    "childs": [
        {"name": "B", "val": "TexteB", "attrs": [], "childs": []},
        {"name": "C", "val": "TexteC", "attrs": [], "childs": []}
    ]
}
*/
xtdElmtToJSON:function(aElmt),         
// ---------------------------------------------------------------
// Gibt eine JSON-Darstellung der XML-Elementtabelle aArray zurück
xtdElmtArrayToJSON:function(aArray)

Beispiel

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

Prüfung der Benutzeraktionen

Siehe dynamische Links.

  • Eingabeprüfung für die obligatorischen Webfelder
      • fonctions xtdDoDlk, xtdCallDlk, xDoMySubmit
      • Class CXtdDomOut
  • Zugriff auf die 'RegionalSettings' des XTEND-Benutzers
  • Anzeige einer XTEND-Servermeldung
  • Zugriff auf Benutzervariablen und -kriterien

HTML-Buffer

Beschreibung

Mit der Klasse XTENDAJAX.classHTMLBuffer der Bibliothek XtendAjaxUtils.js wird der Aufbau einer HTML-Zeichenkette erleichtert.

Diese Klasse ist für die Verwendung in den Serverskripten auch in der Bibliothek xtdWsvc.js vorhanden.

Attribute

Der Parameter aAttibutes der nachstehend beschriebenen Methoden der Klasse XTENDAJAX.classHTMLBuffer ist eine einfache Tabelle von Tupeln AttributName / Attributwert.

Beispiele

var wHtml=new XTENDAJAX.classHTMLBuffer();
// Es wird ein Eingabebutton hinzugefügt
// -> <input type="text "class="inputBtn" value="Submit">
wHtml.input("button",["class","inputBtn","value","Submit"]);
// Es wird eine Tabelle hinzugefügt
// -> <table class="classTab"><tr>
//    <td>Content1</td><td>Content2<></td>
//    </tr></table>
wHtml.table(["border","1","class","classTab"]);
// Es wird eine Zeile angelegt
wHtml.tr().td("Content1").endTd().td("Content2").endTd().endTr();
// Es wird eine Zeile in einer Tabelle mit Zellen angelegt
wHtml.trFill(["Content1","Content2"]);
enTable();
alert(wHtml.html());

Bibliothek

//----------------------------------------------
// Fügt das HTML-Element aHtml hinzu
append:function(aHtml),
//----------------------------------------------
// Fügt das Tag <img> hinzu
img:function(aSrc,aBorder,aAttibutes),
//----------------------------------------------
// Fügt das Tag <input> hinzu
input:function(aType,aAttibutes),
//----------------------------------------------
// Fügt das Tag <select> hinzu
select:function(aAttibutes),
//----------------------------------------------
// Fügt das Tag <select> hinzu
//-> aArrayOpts ist ein Array, das die Tupel (Wert, Bezeichnung) enthält
//
//-> aKeySelected ist der Wert der selektierten Option
selectFill:function(aAttibutes,aArrayOpts,aKeySelected),
//----------------------------------------------
// Ende Tag <select>
endSelect:function(),
//----------------------------------------------
// Fügt ein Option <option value="aValue">aText</option> hinzu
//->aSelected = true, um die Option auszuwählen
option:function(aValue,aText,aSelected),
//----------------------------------------------
// Ende Tag <option>
endOption:function(),
//----------------------------------------------
// Fügt das Tag <textarea> hinzu
textarea:function(aValue,aAttibutes),
//----------------------------------------------
// Fügt das Tag <label> hinzu
label:function(aAttibutes),
endLabel:function(),
//----------------------------------------------
// Fügt das Tag <al> hinzu
a:function(aAttibutes),
endA:function(),
//----------------------------------------------
// Fügt das Tag <form> hinzu
form:function(aAttibutes),
endForm:function(),
//----------------------------------------------
// Fügt das Tag <table> hinzu
table:function(aAttibutes),
endTable:function(),
//----------------------------------------------
// Fügt das Tag <tr> hinzu
tr:function(aAttibutes),
endTr:function(),
//----------------------------------------------
// Es wird eine Zeile angelegt
//->aCells : String oder Array of String
//           Zelleninhalt
//aRowAttib : Zeilenattribute
//aCellsAttrib: Zellenattribute <td> oder Titelattribute <th>
// aHeadings: false, wenn eine Zeile angelegt werden soll <tr><td></td>
// true, wenn eine Titelzeile angelegt werden soll <tr><th></th>
trFill:function(aCells,aRowAttib,aCellsAttrib,aHeadings),
//----------------------------------------------
// Fügt einen Titel hinzu <th>aContent</th>
thFill:function(aContent,aAttibutes),
th:function(aAttibutes),
endTh:function(),
//----------------------------------------------
// Legt eine Zelle an <td>aContent</td>
tdFill:function(aContent,aAttibutes),
td:function(aAttibutes),
endTd:function(),
//----------------------------------------------
// Gibt den HTML-Code zurück
html:function(),
//----------------------------------------------
// Fügt ein <fieldset><legend>aLegend</legend>-Tag hinzu
//-> aAttibutes: Attribute des Tags <fieldset>
//-> aLegendAttrs: Attribute des Tags <legend>
fieldset:function(aAttibutes,aLegend,aLegendAttrs),
endFieldset:function(),
//----------------------------------------------
// Es wird ein Fieldset mit dem Inhalt von aContent angelegt
fieldsetFill:function(aContent,aAttibutes,aLegend,aLegendAttrs),
//----------------------------------------------
// Fügt das Tag <pre> hinzu
pre:function(aAttibutes),
endPre:function(),
//----------------------------------------------
// Es wird ein Tag <pre> mit dem Inhalt von aContent angelegt
preFill:function(aContent,aAttibutes),
//----------------------------------------------
// Fügt das Tag <span> hinzu
span:function(aAttibutes),
endSpan:function(),
//----------------------------------------------
// Es wird ein Tag <span> mit dem Inhalt von aContent angelegt
spanFill:function(aContent,aAttibutes),
//----------------------------------------------
// Fügt das Tag <div> hinzu
div:function(aAttibutes),
endDiv:function(),
//----------------------------------------------
// Es wird ein Tag <div> mit dem Inhalt von aContent angelegt
divFill:function(aContent,aAttibutes),
update:function(aId),
//----------------------------------------------
// Analog: HTML-Methode
toString:function(),