[orginal] OOP group Box control based on WEB.!!!

Introduction:

Group boxes or frames are used to provide a convenient grouping of various controls. Group boxes are similar to panels in a way, the only difference being that group boxes display captions only, and the panels may be fitted out with scroll bars. Group boxes display frames around their contained controls and show text in a caption, as you see in Figure 1.

this.add=function()
{
childIndex++;
var ch=new Child();
ch.setParent(conainerObj.id);
ch.setTag('div');
ch.setId(pid+childIndex);
return ch.getId();

}

the total code for js:

function Child()
{
var pa;
var chi;
this.setParent=function(pid)
{
pa=document.getElementById(pid);
}
this.setTag=function(tag)
{
chi=document.createElement(tag);
pa.appendChild(chi);
}
this.setId=function(Name)
{
chi.id=Name;

}
this.setClassName=function(css)
{
chi.className=css;
}

this.getId=function(){return chi.id;}
this.getObject=function(){return document.getElementById(chi.id);}

}

function Frame(pid,W,H)
{
var childArray=new Array(1000);
var childIndex=-1;
var height=H;
var width=W,left,top;
var obj=document.getElementById(pid);
obj.className='Frame';
obj.style.width=W;
obj.style.height=H;

this.setWidth=function(val)
{
width=val;
alert(val);
obj.style.width=val;
}
this.getWidth=function()
{
return width;
}
this.setHeight=function(val)
{
height=val;
obj.style.height=val;
}
this.getHeight=function()
{
return height;
}
this.setMarginLeft=function(val)
{
obj.style.marginLeft=val;
left=val;
}
this.setMarginTop=function(val)
{
obj.style.marginTop=val;
top=val;
}
this.getMarginLeft=function()
{
return left;
}
this.getMarginTop=function()
{
return top;
}
this.setMargin=function(lleft,ttop)
{
this.setMarginLeft(lleft);
this.setMarginTop(ttop);
}
this.setSize=function(wwidth,hheight)
{
this.setWidth(wwidth);
this.setHeight(hheight);
}
// create the title of the frame:
var frameTitle=new Child();
frameTitle.setParent(pid);
frameTitle.setTag('div');
frameTitle.setId(pid+'frameTitle');
frameTitle.setClassName('title');
obj.appendChild(frameTitle.getObject());
var TitletionObj=frameTitle.getObject();

this.setText=function(val)
{
var xx=val;
val=''+xx+'';
TitletionObj.innerHTML=val;
}
// set the container of the frame:

var framContainer=new Child();
framContainer.setParent(pid);
framContainer.setTag('div');
framContainer.setId(pid+'framContainer');
framContainer.setClassName('container');
obj.appendChild(framContainer.getObject());
var conainerObj=document.getElementById(framContainer.getId());
conainerObj.style.height=H-23;
// add the new elements to the Frame:
this.add=function()
{
childIndex++;
var ch=new Child();
ch.setParent(conainerObj.id);
ch.setTag('div');
ch.setId(pid+childIndex);
return ch.getId();

}

this.setBackground=function(path)
{
conainerObj.style.backgroundImage="url("+path+")";
}

this.getBoundryX=function(){return this.getMarginLeft()+this.getWidth()+4;}
this.getBoundryY=function(){return this.getMarginTop()+this.getHeight()+4;}
//Button36x36

3- the html code:

3.1. add the headers file:

add the css header and js header to the header part of html page as below:

<link rel="stylesheet" type="text/css" href="Frame.css"/>
<script language="javascript" type="text/javascript" src="Frame.js"></script>

3.2. the next step is to integrate the headers files into a frame object, as shown below:

first we create the name of a new object with the three given parameters:

a. z is the html code we going to build the frame in

b. 413 is the width of the frame

c. 443 is the height of the frame

then set up the margins, exactly left and top

the final target deal with the caption part of a group box.

var xp=new Frame('z',413,443);
xp.setMargin(100,100);
xp.setText('MainFram');

and now we proceed by creating a new child in the xp frame, just as can be observed below :

var Xx1=new Frame(xp.add(),200,100);
Xx1.setMargin(3,3);
Xx1.setText('Ammar');



Moory !! Marisha !!