SABON
Simple Access Business Object Network

SABON –is a JavaScript codes that contains of client side functions that helps programmers to keep code simple, and concise. The SABON library is designed to keep the things very simple and reusable. This library saves a lot of time in terms of creating websites especially AJAX based application. This has been tested by many browsers such as IE, Firefox, and Safari. SABON can be applied in HTML, Classic ASP, ASP.Net, PHP, JSP, Python and Etc.

Here are the features of SABON:

addMethod arrToDelimitedString checkAllBoxes cBit checkInputs
checkOneByObject clearControls collection createCookie createDocClass
debug detectBrowser divPopUp emailCheck fileString
findObjectsByAttr formatDate formatGrid formatSkin getCenterByHeightWidth
getCheckObjectsToArray getChildById getChilds getChildsById getE
getEByAttrName getEName getHttpResponse getQuery getObjectValue
getWindowHeightWidth getURLParamsVal inherits isAllowedFile isEmpty
IsNumeric isValidDate listBox listURL makeObjectOnTop
msgbox parseVal parseValByTagName readCookie refresh
refreshContent requestStatusBox resetControls



addMethod. This method allows you to define different versions of a method in class, and the script compiler will automatically select the most appropriate one based on the parameters supplied.
//Example:
//first method contains only 2 parameters

 	function parseVal(strSource,strKey){
		var pos=strSource.indexOf(strKey + ":=");
		if (pos<0) return "";
		var strArr1 		= strSource.substr(pos).split("::")
		var strArr2 		= strArr1[0].split(":="); 
		return strArr2[1].strTrim();
	}
	
	
//second  method are now using addMethod and this is contains 3 parameters, but the function name are still “parseVal”

	addMethod(this, "parseVal", function(strSource,strKey,format){
		var arr = arguments[2].split("and");
		
		if(arr[0]=="" || arr[1]=="" || arr.length!=2){
			return "Invalid format";
		}
		var pos=strSource.indexOf(strKey + arr[0]);
		if (pos<0) return "";
		var strArr1 		= strSource.substr(pos).split(arr[1])
		var strArr2 		= strArr1[0].split(arr[0]); 
		return strArr2[1].strTrim();
	  });




arrToDelimitedString . This method converts the array objects’ value to a delimited string.
//example:
var objs = document.getElementByNames(“txtFirstName”);
 
//  1)  var str = sabon.arrToDelimitedString(objs); //default delimiter is ","
//  2)  var str = sabon.arrToDelimitedString(objs,":"); //with customized delimiter ":"



checkAllBoxes. This method is used to (check/uncheck) all boxes once the header box is checked/unchecked, this will work on onmousedown event.
//Example:
  1. <input type="checkbox" Id="chkSelect" onmousedown="sabon.checkAllBoxes(this);"  />
  2. <asp:CheckBox ID="chkSelect" runat="server"  onmousedown="sabon.checkAllBoxes(this);"  />



cBit. This method is used convert string value and returns to 0 or 1 value.
//Example:
var x=  sabon.CBit(“true”);
//result is 1.



checkInputs. This method is used to validate the value input html element.
[1st parameter]
	* optional-array = check only the index/member of an array object 
                          that having with the same id/name) 
	* blank = check for blank
	* email = verifiy for email
 [2nd paramters]
		- any input objects
Examples:

1. sabon.checkInputs("blank",input1,input2,input3,input4,input5 <,...you can add more objects here.>)

2. sabon.checkInputs("numeric,optional-array",input1[1],input2)
3. sabon.checkInputs("email,",input1[1],input2[3])	 
4. sabon.checkInputs("optional-array,blank,numeric",form1.plname,form1.pfname)



checkOneByObject. This method checks only one item of all check boxes elements
//Example:

Var obj = document.getElementBy(“CheckedLocation”);
CheckOneByObject(obj);
		



clearControls. This method clears all the values of the controls.
//Example:

1. sabon.clearControls(document);
2. sabon.clearControls(document.getElementById(“divObject”);



collection. This is a class object that handles collections/arrays of data.
// Example:
 var c = sabon.collection;


c.add("SId",s.id.value);
c.add("FName",s.fname.value);
c.add("LName",s.lname.value);
		


createCookie. This method creates a cookie in a client side session.
// Example:
 var name=”mycokie”;
 var value=”hello world”;
 var NoOfDays=3; 
 sabon.createCookie(name,values,NoOfDays);


createDocClass. This method creates a document class based on the parent object/id.
Example:
 
1. var d =  sabon.CreateDocClass("DataEntry");
2. var d =  sabon.CreateDocClass("DataEntry",document);
	
 


debug. This method shows how to debug error.
Example:
 
1. var d =  sabon.debug(“hello world”);
2. var d =  sabon.debug(“hello world”,true); 


detectBrowser. This method shows on how to detect browser’s name, version and OS.
Example:
 
 var dbr =sabon.detectBrowser;
 alert("browser :" + dbr.browser + " , Version :" + dbr.version +  " , OS :" + dbr.OS)	



divPopUp. This method creates div element for pop up .
Example:
 
var _html = "";
var divDataPanel = sabon.getE(“DataPanel")
if(divDataPanel) {
  _html = divDataPanel.innerHTML;
  var objWidth =  700;
  var objHeight = 300;
  var divPopUp = sabon.divPopUp;
  divPopUp.load("width:" + objWidth + ";height:" + objHeight);
}



emailCheck. This method is for validating email.
Example:
 
var isValid= emailCheck(parseElementVal(objArr[y]),objArr[y]);

if(isValid==false){
 alert(“Email is invalid”);
}



fileString. This method is used to get a string value from a file name by extension, filename, directory and format directory.
Example:
 
	//Example:
	 var fi = sabon.fileString;
	 var filename = fi.fileName(sFile);
	 var ext = fi.extension(sFile);
	 var path = fi.path(sFile);
	 var formatpath = fi.formatPath(sFile);


findObjectsByAttr .This method is used to get elements by attribute name and value.
Example:
 
var tables = sabon.findObjectsByAttr(gridId,"Stripe");
formatDate.This method  is used to format a date from string value to JavaScript data type value.
Example:
var mydate =sabon.formatDate("October 11, 1981");


formatGrid. This method is used to format a table element with two alternate colors.
Example:
 
	// make sure to add any attribute name and a value in an html table.
--html--------------------------------
<div id="DataGrid">
      <table id="grid" GridStyle="stripe" width="100%" >
         <-- write your tr and td elements here
      </table>
</div>	 
--javascript--------------------------
var tables = sabon.findObjectsByAttr(“RowStyle”,"Stripe");


/*--CSS for Grid-------------------------------------------------------------*/
div#DataGrid table{
	background:#FFFFFF; border-collapse:collapse; border:0;
	font-family:lucida grande, verdana, sans-serif;
	font-size:8pt; border-left:#E9E9EF 1pt solid; border-bottom:#E9E9EF 1pt solid;
	border-top:#E9E9EF 1pt solid; border-right:#E9E9EF 1pt solid;
	background-color:#FFFFFF;
}
div#DataGrid table tr  th{
	color: #FFFFFF; background-color: #9F807F; font-weight: bold; height:25px;
	border-left:solid #FFFFFF 1pt; border-top:solid #FFFFFF 1pt;
	border-bottom:solid #FFFFFF 1pt;
}
div#DataGrid table  tr  td { border:solid 1pt #999999; padding-left:10px; }
div#DataGrid table  tr  td a{ color:#0000FF; font-weight:bold; }
div#DataGrid table tr.even { background: #eee; }
div#DataGrid table tr.odd {grid:#fff; }
div#DataGrid table tr.hover { background:#FFDDAF;}
div#DataGrid table tr.click{background: #FFDD68; color: #000; }
div#DataGrid table tr.selected{background: #0099FF; color: #ffffff; }




formatSkin. This method is used to Format skin of an html element which has innerHTML property like (div, label and td) element.
Example:
 
var html = document.body.innerHTML;

1) sabon.formatSkin(document.getElementById('divForm'),"skin-a.html","Post Message",_html);
2) sabon.formatSkin(document.getElementById('divForm')
   , "skin-a.html","Post Message",_html
   , function myfunc(){alert('alert')}); 

//return with function
formatSkin(document.getElementById('divForm'),"skin-a.html","Post Message",_html);

//note: (_skinFile) make sure you have these IDs (skin-content_title and skin-content_body).



getCenterByHeightWidth. This method is used to make object element locates in a center of a screen.
Example:
 // Example:
var objWidth=400;
var objHeight=300;

var move = new sabon.GetCenterByHeightWidth(objWidth,objHeight);		
sabon.DivPopUp.style("left:" +  move.left + ";top:" + move.top + ";width:" + objWidth + ";height:" + objHeight);



getCheckObjectsToArray. This method gets all checked boxes items base of these parameters “table name, check box id, and input text/hidden object”
Example:

-----HTML------------ 
<table id=”grid” >
  <tr>
     <td> <input type=”checkbox” id=” chkID” />
     <td> <input type=”hidden” id=”BadgeNo” value=”12808”/>  
          <input type=”text” id=”lastName” value=”Fuentes”/> </td>
     <td> <input type=”text” id=”firstName” value=”German”/>
    </td>
  </tr>
  <tr>. . .</tr>
</table>

-----JavaScript------ 
var result = sabon.getCheckObjectsToArray("grid","chkID"," BadgeNo ")

		
*getChildById*. This method use to find object by object id.

Example:

var child = getChildById("divMain","divChild1");




getChilds. This method use to get all elements in a parent object.
Example:

var objects =  sabon.getChilds(document.form1);


getChildsById. This method is used to get all first elements object in a parent object.
Example:
var objects =  sabon.getChilds(document.form1);
 


getE. This method is used to get object by Element Id.
Example:
var div = document.getElementById(“divMainPanel”)
var obj = sabon.getE(“studentId”,div)


getEByAttrName. This method is used to get elements by attribute name.
Example:
var objects = sabon.getEByAttrName(document,"grid"); 
*getEName*. This method is used to get elements by name.

Example:
var objects = sabon.getEName (document.form1); 



getHttpResponse. This method gets a response value from a web server.
Example:
1.)  sabon.getHttpResponse('controls/update.asp?pid=2'); //no call back method
2.)  sabon.getHttpResponse('controls/update.asp?pid=2',callBack); with call back method.
     function callBack(res){
	alert("this is a response from other page"	
     } 

getQuery. This method is a simple AJAX function that gets response value from a web server.
Example:
var url = “Reports.aspx?userid=12808&clientId=4875”;
var value = GetQuery(url,”userid”)


getObjectValue. This method is used to get value of an object element.
Example:

var x =sabon.getObjectValue(document.form1.txtUserId);


getWindowHeightWidth. This method is used to get the height and width of window browser
Example:

//cover whole window
var wh = new sabon.getWindowHeightWidth;
var divCoverObj= sabon.tempElement;
divCoverObj.init("div",msgModalCoverId);
divCoverObj.style("left:0;top:0;width:" + wh.width + ";height:" + wh.height + ";position:absolute:z-index:" + _objectZindex);
divCoverObj.object.style.backgroundColor="#000000";
divCoverObj.show(); 


getURLParamsVal. This method is used to get parameter value from URL(s) history.
Example:

var result =  sabon.getURLParamsVal("URL_Parameter1"); 


inherits. This method is used to inherit object.
Example:
function Animal() {
    this.species = "animal";
};

Animal.prototype.category = function() {
    alert(this.species);
};

function Dog() {
    // No call to parent constructor
    this.species = "canine";
};

// Dog "inherits" from Animal
sabon.inherits(Dog, Animal);

var d = new Dog();
d.category();


isAllowedFile. This method is used to check the file by extension name to be allowed.
Example:

var result = sabon.isAllowedFile("d:\\fuentes\\file.png","gif,jpg,png")



*isEmpty*. This method checks if control is empty.

Example:
var x=sabon.isEmpty(document.form1.txtFirstName,”First Name is required.”);
if (x) return false;



IsNumeric. This method validates numeric value.
Example:
var x= sabon.IsNumeric(document.form1.txtTotal);


isValidDate. This method validates date value.
Example:

1.) var x= sabon. isValidDate(document.form1.txtTotal);
2.) var x = sabon.isValidDate("10000/2008") 


listBox. This method used to find value of dropdown box element and return the index of an item if found.
Example:

var lb = sabon.listBox;
var cmbTool = sabon.getE("cmbTool");
var index =lb.find(cmbTool,"Quality",lb.searchType.byText);
alert(index);


listURL. This property that returns the list of URL history.
Example:

var url = sabon.listURL[3]


makeObjectOnTop. This method makes object position on top from objects.
Example:
var obj = document.getElementById(“divMessageBox”);
 obj.style.zIndex = sabon.makeObjectOnTop()
 

*Msgbox*. This is customized message box class that used to display a dialog message in a window.
Make sure to add this message box style sheet.
----------------CSS--------------------------------------
div#msgboxMainPanel{
/*display:none;*/
}
div#msgbox{
 background:url(images/messagebox/msgbackground.gif);
 background-color:#D4D0C8;width:350px; border-left:solid 1pt #666666;
 border-right:solid 1pt #666666; border-bottom:solid 1pt #666666;
 font-family:Arial, Helvetica, sans-serif; font-size:10pt;
}
div#msgbox p{margin:0px; padding:0; }
div#msgbox br{clear:left; padding:0; }

div#msgbox div#msgboxPanelHeader{height:25px; width:100%;
background:#000099;
background:url(images/messagebox/msgheader.gif) repeat-y;
}
div#msgbox div#msgboxPanelHeader div#msgboxTitle{
width:80%;float:left; color:#FFFFFF; vertical-align:middle; height:100%;line-height:25px;
}

div#msgbox div#msgboxPanelHeader div#msgboxTitle label#msgboxTitleText{
	margin-left:10px;
	font-weight:bold;
	color:#FFFFFF;
}

div#msgbox div#msgboxPanelHeader div#msgboxClose{
 float:right;height:100%;width:20%;
}
div#msgbox div#msgboxPanelHeader input#msgboxCloseButton{
border:solid 1pt #999999;float:right; width:30px; height:100%;
}

div#msgbox table#msgboxPanelBody{width:100%;}
.msgboxLogo{vertical-align:middle; text-align:center;}
.msgboxLogoIcon{
	height:50px;	width:60px;border-top:solid #666666 1pt;border-left:solid #666666 1pt; 
	border-right:solid #666666 1pt; border-bottom:solid #666666 1pt; margin:10px;
	background:url(images/messagebox/default.gif)
}

.msgboxBodyText{padding-top:10px; padding-right:10px; padding-bottom:10px;
font-family:Arial, Helvetica, sans-serif; font-size:10pt;
}
div#msgbox  div#msgboxPanelButton{text-align:center; padding-bottom:10px; }
div#msgbox div#msgboxPanelButton input{
padding-left:10px; padding-right:10px; border:solid 1pt #999999;
}

----------------JavaScript--------------------------------------

Example:

//display with question icon with call back return.
1.)sabon.msgbox.show("Message body","Do you want to continue.","yesno","msgquestion",
	 function get(ret){
		alert(ret);
	 }
 );

//display with question icon with NO call back return.
2.)sabon.msgbox.show("Message body","Do you want to continue.","yesno","msgquestion"); 

//display with default icon with no call back return.  
3. )  sabon.msgbox.show("Message body","Do you want to continue.","yesno"); 

//display with default icon and default button with no call back return.
4. )  sabon.msgbox.show("Message body","Do you want to continue."); 

//display with default (icon, button, and title) with no call back return.
5. )  sabon.msgbox.show("Message body"); 





parseVal. This method is used to get value of a delimited and formatted string.
Example:

 1.) var  result = sabon.parseVal("width:=30;height:=50;","width");
	
 2.) var  result  = sabon.parseVal("width:30;height:50;","height",":and;");
        //result = 50
//note: use (and) as a separator for equivalent(:) value and the group value(;)



parseValByTagName. This method used to parse a value by tagname of an HTML string.
Example:

var divRightContent =sabon.getE("divRightContent");
sabon.formatSkin(divRightContent,"skin-b.html"
, sabon.parseValByTagName(result.text,"title"),result.text);


readCookie. This method reads a cookie from a browser.
// Example:
 var name=”mycokie”;
 var result=sabon.readCookie(name);


refresh. This method reads a cookie from a browser.
// Example:
  sabon.refresh();

refreshContent. This method used to refresh content in a page.
// Example:
 
sabon.refreshContent("ManageUsers.asp","gridPanel",callBack);
	function callBack(r){
		sabon.formatGrid();
	}
	


RequestStatusBox. This method shows the process status top on the screen.
// Example:
 
displayContent;

sabon.getHttpResponse(“SystemSetup.aspx?userid=12808”,”divContent”);
var statusBox = new sabon.requestStatusBox
statusBox.start();	

resetControls. This method reset the controls to original state.
// Example:
 
sabon.resetControls(document.form1);


searchStr. This is a class that used to search value of a string
// Example:
 
	var r = sabon.searchStr.itemsIndex("abcdab","a")
	var r = sabon.searchStr.isFound("abcd","a") 




setObjectValue. This method is used to set value of an object element.
// Example:
 
	// To set value of an object element. 
	//Ex sabon.setObjectValue(divObj,"hello world") 


tableHTML. This is a class that manipulates html table with addrow, deleterow and update row methods.
// Example:
 
//------------| AddToTable|---------------------------------------------------------
	 var c = sabon.collection;
		c.add("EmpId","12808");
	 	c.add("FName","Gerry");
	  	c.add("LName","Fuentes");
	  	sabon.tableHTML.addRow("grid",c);	 

//------------| UpdateRowTable|-----------------------------------------------------
		// To update records on a table elements
		//Ex.:  var c = new sabon.collection;
		//  	c.add("SId","12808);
		//  	c.add("FName","German");
		//  	c.add("LName","Fuentes");
		// 		 sabon.tableHTML.updateRow("grid",c);

//------------| DeleteRowTable|-----------------------------------------------------
		// To delete record with checked value 
		// Ex.: sabon.tableHTML.deleteRowByCheckedBox("grid");
		// Ex.: sabon.tableHTML.deleteRowByCheckedBox(gridObject);



tempElement. This is class that stands as temporary object with the methods “init, remove, show, and style”
// Example:
	Ex:  
	var elem= sabon.tempElement;
	elem.init("iframe","tmpObj");
	elem.style("left:350;top:200;width:500;height:310;z-index:1000");
	elem.show();



Last edited Jul 27, 2010 at 7:39 PM by smager, version 12