Compound controls

Some controls are built up using multiple HTML tags and this is one the things that Spartan Ajax can really simplify. We can opt to bundle the various objects together in the wrapper so that the whole control is created in one step.

For example, to create a drop-down list in HTML you have to use a select tag which contains a number of options tags – one for each option in the list. We can wrap the selection control so that all the programmer needs to do to create it is to provide a list of options as an array:

select=function(parent,list)
{
 var DOMObj=Sparta.DOMObject(
                    parent,"select");

Now we have created the select object we can loop through each of the options specified in the array, create an option object for each one and add it to the select object:

 for(var i=0;i<list.length;i++)
 {
  var op=document.createElement(
                            "option");
  op.value=i;
  op.text=list[i];
  try
  {
   DOMObj.add(op,null);
  }
  catch(ex)
  {
   DOMObj.add(op);
  }
 }
 return DOMObj;
}

The only complication is that IE doesn’t implement the add method correctly and so we need a try-catch construct to see which form of “add” actually works. With this added to the framework we can create a selection control very simply:

select1=new select(document.body,
             new Array( "Option one",
                        "Option two"));
select1.style.top=25;
select1.style.left=50;

Creating lists with any number of options is just as easy.

The easy way to create a select list

The table object

We could continue in this way to construct composite controls one-by-one until all the standard HTML was available as JavaScript classes. However it is more interesting to tackle one of the bigger tasks – to create a table class and then move on to demonstrate how custom controls can be built by creating a calendar control.

The table object is created in HTML using a table tag which contains lots of tr, one pair for each row, and td tags, one pair for each cell. The same task can be done in JavaScript very much more easily by using a constructor that simply specifies the number of rows and columns the table should have.

Creating the table object is straightforward:

table=function(parent,r,c)
{
 var DOMObj=Sparta.DOMObject(
                      parent,"table");
 DOMObj.border=1;

Now all we have to do is create r row objects and add c cell objects to each row. This is just a matter of two for loops. The first creates the row objects:

 for(var i=0;i<r;i++)
 {
  var row=DOMObj.insertRow(i);

The second adds the cell objects to each of the rows:

  for(var j=0;j<c;j++)
  {
   var col=row.insertCell(0);
   col.innerHTML="&nbsp";
  }
 }
 return DOMObj;
}

That’s all there is to it!

With this new definition, creating four rows and seven columns is as easy as:

table1=new table(document.body,4,7);
table1.style.top=25;
table1.style.left=50;

We can also access any cell in the table to use its content with an instruction something like:

table1.rows[2].
    cells[3].innerHTML="Table test";

However it is also easy to add a method to the table class that returns or sets the contents of the cell:

DOMObj.cellvalue=function(r,c,text)
{
 if(text)
 {
  this.rows[r].cells[c].innerHTML=text;
 }
 else
 {
  return this.rows[r].
                  cells[c].innerHTML;
 }
 return DOMObj;
}

Now you can set the content of a cell using:

table1.cellvalue (3,2,"More text");

and return the content of a cell using:

alert(table1.cellvalue (2,3));

You can even write:

table1.cellvalue (1,1,
       table1.cellvalue (2,3));

which copies the contents of row 2 column 3 to row 1 column 1.

Obviously you can continue to add methods and properties to make using a table much easier. One that is indispensable, however, is a method to return a pointer to a cell object at a given row and column:

DOMObj.cell=function(r,c)
{
 return this.rows[r].cells[c];
}

Once you have the cell reference you can do anything you want to the cell by getting directly at its properties and methods.

An easy to use table

<ASIN: 0596101996>

<ASIN:0321564081>

<ASIN:0980285801>