Standard JavaScript Library

Introduction

This document is describing the main utility functions of the library XtendLib.js.

We strongly recommend the use of a standard and cross-browsers type library prototype.js (http://www.prototypejs.org) for all your JavaScripts developments:

• object programming in JS (classes and inheritance)
• manipulation operations of the HTML DOM.
• Tables and hashes manipulation

prototype.js is systematically loaded via the token ALIBJS.

The XtendLib.js library is additional to the prototype.js for specific requirements to XTEND.

Global

//---------------------------------------------
//Information on the browser
//-> Use Prototype.Browser
vargXtdBowser;
//---------------------------------------------
//Context customer sent towards the browser
// gXtdDomOut!=null if a dynamic link has been clicked on
vargXtdDomOut;
//---------------------------------------------
// Object used to create the customer contexts
vargXtdDOMFactory;
//---------------------------------------------
//Value of the unchecked checkboxes
//->Update by xtdSetUnSelelectedValue
vargXtdCBUnSelelectedValue="";
//---------------------------------------------
//Value used to enter the empty numeric web setups
//of the X3 actions before the call of the web service
//null by default: empty setups non initialized
//->Update via xtdSetEmptyNumFieldValue
vargXtdEmptyNumFieldValue=null;
//---------------------------------------------
//Class used for the mandatory web setups control
//-> Update via xtdSetBadInputclass
vargXtdBadInputclass="xtdBadInput";
//---------------------------------------------
//Basic AJAX Object
varXTENDAJAX;
//---------------------------------------------
//AJAX Object for calling the server scripts
varXTENDSCRIPTS;
//---------------------------------------------
//AJAX Object for calling web services (interfaces)
varXTENDWSVC;
//---------------------------------------------
//AJAX Object for calling the web services of the Flash components
varXTENDFLASH;
//---------------------------------------------
//AJAX Object for calling the web services messages
varXTENDMESS;
//---------------------------------------------
//Management of a DOM XML
varXTENDDOM;

Strings

// ---------------------------------------------------------------
//Replaces aFind by aReplace in aStr
//Optional setups:
// -> aCaseInsensitive - true by default
// -> aAll - true by default
functionxtdStrReplace(aStr,aFind,aReplace,aCaseInsensitive,aAll)
// ---------------------------------------------------------------
//Identical xtdStrReplace but for the deletion
functionxtdStrRemove(aStr,aFind,aCaseInsensitive,aAll)
// ---------------------------------------------------------------
//True if aStr1=aStr2
//Optional setups:
// -> aCaseInsensitive - true by default
functionxtdStrEquals(aStr1,aStr2,aCaseSensitive)
// ---------------------------------------------------------------      
//Deletes the empty spaces, tabulations and line breaks
functionxtdFullTrim(aStr)

Numeric controls

// ---------------------------------------------------------------
//Returns null or the numeric value corresponding to aStr
//Takes into account the 'RegionalSettings' of the XTEND user
// -> aInt: Optional
// -> True to force to return an Integer
functionxtdCheckNum(aStr,aInt)
// ---------------------------------------------------------------
//Returns null or the value Integer corresponding to aStr
functionxtdCheckInt(aStr)
// ---------------------------------------------------------------
//Controls the content of the field input aFldName
functionxtdCheckNumInput(aFldName)
// ---------------------------------------------------------------
//Same thing for xtdCheckNumInput for an Integer
functionxtdCheckIntInput(aFldName)

Controls the emails

// ---------------------------------------------------------------
//Returns null or a formatted Email- name@domain.extension
// -> Applies to xtdFullTrim
// -> Controls name.lenght>0
// -> Controls domain.length>0
// -> Controls extension.length>2
functionxtdCheckEmail(anEmail)

Controls the dates

Functions

// ---------------------------------------------------------------
// aDate is an entered date (DD/MM/YY, MM/DD/YY...)
// -->Returns null or an object CXtdDate that represents the date
functionxtdCheckDateStr(aDate);
// ---------------------------------------------------------------
// aDate is a date whose format is X3 YYYYMMDD (String or number)
// -->Returns null or an object CXtdDate that represents the date
functionxtdCheckDateX3Fmt(aDate)
// ---------------------------------------------------------------
//aYear, aMonth, aDay are of the String or Integer type
//If the Year is over 2 characters
// -->the full date is calculated according to the X3 pivot date
// --> Returns null or a CXtdDate Object that represents the date
functionxtdCheckDateYMD(aYear,aMonth,aDay)

CXtdDate Class

// ---------------------------------------------------------------
//Constructor
//aYear, aMonth, aDay are of the String or Integer type
//If the Year is over 2 characters
// -->the full date is calculated according to the X3 pivot date
functionCXtdDate(aYear,aMonth,aDay){}
// ---------------------------------------------------------------
//Day
day,
// ---------------------------------------------------------------
//Month
month,
// ---------------------------------------------------------------
//year
year,
// ---------------------------------------------------------------
//True if the date is valid
isValid,
// ---------------------------------------------------------------
//Returns the date to the x3 YYYYMMDD format
toX3Format=function(),
// ---------------------------------------------------------------
//Returns the date to the user format
//The format depends on the ''Regional Settings' XTEND of the user
//->Function of the XTEND language code
//a2DigitMonthDay: true/false - Default=false
//->Day and Month over 2 digits, prefixed by 0 if necessary
//a2DigitYear: true/false - Default=false
//->Year over 2 digits
//aSep: Separator - Default='/'
toUserFormat=function(a2DigitMonthDay,a2DigitYear,aSep),
// ---------------------------------------------------------------
//Returns the no. of the week
getNumWeek=function(),
// ---------------------------------------------------------------
//Returns this.toUserFormat(true,true,aSep)
toShortDate=function(aSep),
// ---------------------------------------------------------------
//Returns this.toUserFormat(true,false,aSep)
toLongDate=function(aSep),
// ---------------------------------------------------------------
//Returns a CXtdDate that represents the last day of the month
getLastMonthDay=function()
// ---------------------------------------------------------------
//Returns a CXtdDate that represents the first day of the month
getFirstMonthDay=function(),
// ---------------------------------------------------------------
//Returns a CXtdDate equal to this.day + aNumberOfDay
getAdjustDay=function(aNumberOfDay),
// ---------------------------------------------------------------
//Returns a CXtdDate that
getNextDay=function(),
// ---------------------------------------------------------------
//Returns a CXtdDate that is the previous day
getPrevDay=function()
// ---------------------------------------------------------------
//1st day of the month with X3 format
getFirstMonthDayX3=function(),
// ---------------------------------------------------------------
//Last day of the month with X3 format
getLastMonthDayX3=function(),
// ---------------------------------------------------------------
//Returns a CXtdDate equal to this.month + aNumberOfMonth
getAdjustMonth=function(aNumberOfMonth),

Form

// ---------------------------------------------------------------
//Calculation of a date entered over 3 different input fields (Day,Month,Year)
//->It is working with the tokens date prefixed by _DD, _MM, _YY, _YYYY
//-> The input fields have the following name: aName+_DD, aName_MM, aName+_YY or aName+_YYYY
//The field year (aName+_YY or aName+_YYYY) is mandatory
//If no month field:
//-> returns January(aMaxDate==false) or December(aMaxDate==true)
//If no field day:
//->returns the 1st(aMaxDate==false) or the last(aMaxDate==true) day of the month
//If aSetField=true updates the input field (hidden) with the name aFieldName
functionxtdGetInputDate(aFieldName,aMaxDate,aSetField)
// ---------------------------------------------------------------
//Returns the value of the field aName of the XTEND form
//Returns aDefValue if field not found (null by default)
functionxtdInputValue(aName,aDefValue)
// ---------------------------------------------------------------
//Returns the form <form> XTEND
functionxtdGetForm()
// ---------------------------------------------------------------
// Returns the value of the element aElmt
//->Use preferably xtdInputValue
functionxtdGetValue(aElmt)
// ---------------------------------------------------------------
//Returns an Array that contains all the DOM elements of aName name of the XTEND form
//If aName is a tag <select>
//->Returns the list of the elements <option> if only one tag
//->Returns the list of the elements <select> if several tags
functionxtdGetElmts(aName)
// ---------------------------------------------------------------
//Returns an Array that contains the list of the elements whose name is aName
functionxtdGetValues(aName)
//---------------------------------------------------------------
//Saves the value of <select> whose name is aName like an XTEND user variable
functionxtdSelectSave(aName)
// ---------------------------------------------------------------
//Returns the value selected of the <select> whose name is aName
functionxtdSelectGetVal(aName)
// ---------------------------------------------------------------
//Select the <option> aValue of <select> whose name is aName
//->Returns true if the selection is OK
functionxtdSelectSetVal(aName,aValue)
// ---------------------------------------------------------------
//Same thing for xtdSelectSetVal for the <select> element aElmt
functionxtdSelectElmt(aElmt,aValue)

Css Classes

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

DOM XML

The functions below are used to manage a multi-browser XML DOM.

They are available via the global variable XTENDDOM.

See definitions XML DOM, XML document object, XML element object, XML node object on Wikipedia.

Methods

// ---------------------------------------------------------------
//Returns an Object XML created from the String aXmlStr
xtdCreate: function(aXmlStr),
// ---------------------------------------------------------------
//Returns to one String XML (licence file)
//aObj is either an XML document object or an XML element object
xtdToXml:function(aObj,format),
// ---------------------------------------------------------------
//Returns an Array that contains all the children of aObj whose nodeName=aTagName
//aObj is either an XML document object or an XML element object
xtdElementsByTagName:function(aObj,aTagName),
// ---------------------------------------------------------------
//Returns an Hash (prototype.js) that contains all the attributes of aElmt
//aElmt is an XML object element
xtdAttributes:function(aElmt),
// ---------------------------------------------------------------
//Returns an Array (prototype.js) of XML elements that contain all the children of aElmt
//aElmt is an XML object element
//Returns the XML element created
xtdChildNodes:function(aElmt),
// ---------------------------------------------------------------
//Adds a text node to aElmt with the aText text
//<elmt>TEXTE</elmt>
//Returns the TEXT node
xtdAppendTextNode:function (aElmt,aText),
// ---------------------------------------------------------------
//Adds a child nodeName=aTagName to aElmt
//Returns the element XML created
xtdAppendChild:function (aElmt,aTagName),
// ---------------------------------------------------------------
//Deletes the children aElmt
//aRecursive=true to release all the children nodes
xtdRemoveChilds:function (aElmt,aRecursive),
// ---------------------------------------------------------------
//Returns the 1st child of aElmt
xtdFirstChild:function (aElmt),
// ---------------------------------------------------------------
//Returns the 1st child such as nodeName=aTagName de aElmt
xtdFirstChildByTag:function (aElmt,aTagName),
// ---------------------------------------------------------------
//Returns the nextSibling of aElmt
xtdNextSibling:function (aElmt),
// ---------------------------------------------------------------
//Returns nextSibling such as nodeName=aTagName of aElmt
xtdNextSiblingByTag:function (aElmt,aTagName),
// ---------------------------------------------------------------
//Returns the value of the text node of aElmt or ""
xtdTextValue:function (aElmt),
// ---------------------------------------------------------------
//Inserts an element nodeName==aTagName such as 1st child of aElmt
xtdInsertFirst:function(aElmt,aTagName),
// ---------------------------------------------------------------
//Returns a JSON representation of the XML document aDom
xtdDomToJSON:function(aDom),
// ---------------------------------------------------------------
/*Retruns a JSON representation of the XML element aElmt
Example for the XML below:
-> Structure XML
<A ATTR1=\"AT1\" ATTR2=\"AT2\"><B>TexteB</B><C>TexteC</C></A>
-> JSON object Structure
{
    "name": "A",
    "val": "",
    "attrs": [{"ATTR1": "AT1"}, {"ATTR2": "AT2"}],
    "children": [
        {"name": "B", "val": "TextB", "attrs": [], "children": []},
        {"name": "C", "val": "TextC", "attrs": [], "children": []}
    ]
}
*/
xtdElmtToJSON:function(aElmt),         
// ---------------------------------------------------------------
//Returns a JSON representation of the XML aArray elements table
xtdElmtArrayToJSON:function(aArray)

For instance

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

Control of the user actions

See the dynamic links.

• Control of the mandatory Web fields entry
• functions xtdDoDlk, xtdCallDlk, xDoMySubmit
• CXtdDomOut class
• Access to the 'RégionalSettings' of the XTEND user
• Display a message coming from the XTEND server
• Access to the variables and user criteria

HTML buffer

Description

The XTENDAJAX.classHTMLBufferclass of the library XtendAjaxUtils.js facilitates the construction of an HTML characters chain.

This class is also present in the library xtdWsvc.js to be used in the server scripts.

Attributes

The aAttibutessetup of the class methods XTENDAJAX.classHTMLBuffer described below is a simple table entered with the following pairs: Name/Attribute/ValueAtribute.

Examples

var wHtml=new XTENDAJAX.classHTMLBuffer();
//Addition of an input button field
// -> <input type="text "class="inputBtn" value="Submit">
wHtml.input("button",["class","inputBtn","value","Submit"]);
//Addition of a table
// -> <table class="classTab"><tr>
//    <td>Content1</td><td>Content2<></td>
//    </tr></table>
wHtml.table(["border","1","class","classTab"]);
//Creates a line
wHtml.tr().td("Content1").endTd().td("Content2").endTd().endTr();
//Creates a line with a cell grid
wHtml.trFill(["Content1","Content2"]);
inTable();
alert(wHtml.html());

Library

//----------------------------------------------
//Adds the html aHtml
append:function(aHtml),
//----------------------------------------------
//Adds the tag <img>
img:function(aSrc,aBorder,aAttibutes),
//----------------------------------------------
//Adds the tag <input>
input:function(aType,aAttibutes),
//----------------------------------------------
//Adds the tag <select>
select:function(aAttibutes),
//----------------------------------------------
//Adds the tag <select>
//-> aArrayOpts is an Array that contains the pairs value/description
//  options such as for the attributes
//-> aKeySelected is the value of the option selected
selectFill:function(aAttibutes,aArrayOpts,aKeySelected),
//----------------------------------------------
//End tag <select>
endSelect:function(),
//----------------------------------------------
//Adds an <option value="aValue">aText</option>
//->aSelected=true to select the option
option:function(aValue,aText,aSelected),
//----------------------------------------------
//End tag <option>
endOption:function(),
//----------------------------------------------
//Adds a tag <textarea>
textarea:function(aValue,aAttibutes),
//----------------------------------------------
//Adds a tag <label>
label:function(aAttibutes),
endLabel:function(),
//----------------------------------------------
//Adds a tag <a>
a:function(aAttibutes),
endA:function(),
//----------------------------------------------
//Adds a tag <form>
form:function(aAttibutes),
endForm:function(),
//----------------------------------------------
//Adds a tag <table>
table:function(aAttibutes),
endTable:function(),
//----------------------------------------------
//Adds a tag <tr>
tr:function(aAttibutes),
endTr:function(),
//----------------------------------------------
//Creates a line
//->aCells : String or Array of String
//           Cell content
//aRowAttib: Line attributes
//aCellsAttrib: Cell attributes <td> or headings <th>
//aHeadings: false to create a line <tr><td></td>
//            true to create a heading line <tr><th></th>
trFill:function(aCells,aRowAttib,aCellsAttrib,aHeadings),
//----------------------------------------------
//Adds a heading <th>aContent</th>
thFill:function(aContent,aAttibutes),
th:function(aAttibutes),
endTh:function(),
//----------------------------------------------
//Creates a cell <td>aContent</td>
tdFill:function(aContent,aAttibutes),
td:function(aAttibutes),
endTd:function(),
//----------------------------------------------
//Returns the HTML
html:function(),
//----------------------------------------------
//Adds a tag <fieldset><legend>aLegend</legend>
//-> aAttibutes: Tag attributes <fieldset>
//-> aLegendAttrs: Tag attributes<legend>
fieldset:function(aAttibutes,aLegend,aLegendAttrs),
endFieldset:function(),
//----------------------------------------------
//Creates a fieldset with the content aContent
fieldsetFill:function(aContent,aAttibutes,aLegend,aLegendAttrs),
//----------------------------------------------
//Adds a tag <pre>
pre:function(aAttibutes),
endPre:function(),
//----------------------------------------------
//Creates a tag <pre> with the content aContent
preFill:function(aContent,aAttibutes),
//----------------------------------------------
//Adds the tag <span>
span:function(aAttibutes),
endSpan:function(),
//----------------------------------------------
//Creates a tag <span> with the content aContent
spanFill:function(aContent,aAttibutes),
//----------------------------------------------
//Adds a tag <div>
div:function(aAttibutes),
endDiv:function(),
//----------------------------------------------
//Creates a tag <div> with the content aContent
divFill:function(aContent,aAttibutes),
update:function(aId),
//----------------------------------------------
//Same html method
toString:function(),