The Framework

There are lots of different ways of wrapping the DOM objects and you can change the Sparta framework to suit what you consider “good style” but the one presented has the advantage of being simple and requiring little code.

As all of the basic DOM input objects can be created in the same way, it makes more sense to factor out the code that actually does the creation:

Sparta=new Object;

Sparta.DOMInputObject=function(
                         parent,type)
{
 var DOMObj=document.createElement(
                             "input");
 DOMObj.type=type;
 DOMObj.style.position="absolute";
 parent.appendChild(DOMObj);
 return DOMObj;
}

We create a Sparta object to make a namespace that can be used for “private” internal classes and methods used by the framework itself. In this case we have defined a general object creation method. The button class can now be written:

button=function(parent)
{
 var DOMObj=Sparta.DOMInputObject(
                      parent,"button");
 return DOMObj;
}

All of the simple DOM input classes are created in the same way. For example, a text input field is just:

textbox=function(parent)
{
 var DOMObj=Sparta.DOMInputObject(
                        parent,"text");
 return DOMObj;
}

a password input box is:

passwordbox=function(parent)
{
 var DOMObj=Sparta.DOMInputObject(
                    parent,"password");
 return DOMObj;
}

and so on.

For general DOM objects, e.g. controls not based on the input object, we can use something similar:

Sparta.DOMObject=function(parent,name)
{
 var DOMObj=document.createElement(
                                name);
 DOMObj.style.position="absolute";
 parent.appendChild(DOMObj);
 return DOMObj;
}

For example to create a textarea, i.e. a multi-line textbox:

textarea=function(parent)
{
 var DOMObj=Sparta.DOMObject(
                    parent,"textarea");
 return DOMObj;
}

Once you have seen these two in action it is also clear that they can be rewritten (refactored) as a single routine that serves to create any DOM object:

Sparta.DOMObject=function(
                 parent,name,type)
{
 var DOMObj=document.createElement(
                                 name);
 if(type)
 {
  DOMObj.type=type;
 }

 DOMObj.style.position="absolute";
 parent.appendChild(DOMObj);
 return DOMObj;
}

Once you start working in this way you can’t help but notice that there are many simplifications that you can make to the available controls. After all what is the difference between a text input and a textarea? To most programmers they seem to do the same job but textarea is multi-line and textbox single line. Many would think that it’s easier to add a single multi-line property to the textbox class and use it to control which is used:

textbox=function(parent,multiline)
{
 if(multiline)
 {
  var DOMObj=Sparta.DOMObject(
                 parent,"textarea");
  DOMObj.multiline=true;
 }
 else
 {
  var DOMObj=Sparta.DOMObject(
               parent,"input","text");
  DOMObj.multiline=false;
 }
 return DOMObj;
}

Notice that the multiline property is read-only in the sense that you can use it to test if the control is multiline or not but changing its value doesn’t change the behaviour of the control. You can make almost any property read/write but this takes extra code to change the control to reflect the current setting.

<ASIN:0596517742>

<ASIN:0735624496>