• Choose a category
• All
• Classic-Fiction

By Root 4049 0

is known as reflection. Readers with a familiarity to Java or .NET should already be familiar with this term. We discuss JavaScript’s reflection capabilities in more detail in appendix B. To summarize briefly here, a JavaScript object can be iterated over as if it were an associative array. To print out all the properties of an object, we can simply write

var description="";

for (var i in MyObj){

var property=MyObj[i];

description+=i+" = "+property+"\n";

}

alert(description);

Presenting data as an alert is fairly primitive and doesn’t integrate with the rest of a UI very well. Listing 4.11 presents the core code for the ObjectViewer object. Listing 4.11 ObjectViewer object

objviewer.ObjectViewer=function(obj,div,isInline,addNew){

styling.removeAllChildren(div);

this.object=obj;

this.mainDiv=div;

this.mainDiv.viewer=this;

Licensed to jonathan zheng

Generating the View from the Model

149

this.isInline=isInline;

this.addNew=addNew;

var table=document.createElement("table");

this.tbod=document.createElement("tbody");

table.appendChild(this.tbod);

this.fields=new Array();

this.children=new Array();

for (var i in this.object){

this.fields[i]=new objviewer.PropertyViewer(

this, i

);

}

objviewer.PropertyViewer=function(objectViewer,name){

this.objectViewer=objectViewer;

this.name=name;

this.value=objectViewer.object[this.name];

this.rowTr=document.createElement("tr");

this.rowTr.className='objViewRow';

this.valTd=document.createElement("td");

this.valTd.className='objViewValue';

this.valTd.viewer=this;

this.rowTr.appendChild(this.valTd);

var valDiv=this.renderSimple();

this.valTd.appendChild(valDiv);

viewer.tbod.appendChild(this.rowTr);

}

objviewer.PropertyViewer.prototype.renderSimple=function(){

var valDiv=document.createElement("div");

var valTxt=document.createTextNode(this.value);

valDiv.appendChild(valTxt);

if (this.spec.editable){

valDiv.className+=" editable";

valDiv.viewer=this;

valDiv.onclick=objviewer.PropertyViewer.editSimpleProperty;

}

return valDiv;

}

Our library contains two objects: an ObjectViewer, which iterates over the members of an object and assembles an HTML table in which to display the data, and a PropertyViewer, which renders an individual property name and value as a table row.

This gets the basic job done, but it suffers from several problems. First, it will iterate over every property. If we have added helper functions to the Object prototype, we will see them. If we do it to a DOM node, we see all the built-in properties and appreciate how heavyweight a DOM element really is. In general, we Licensed to jonathan zheng

150

CHAPTER 4

The page as an application

want to be selective about which properties of our object we show to the user. We can specify which properties we want to display for a given object by attaching a special property, an Array, to the object before passing it to the object renderer. Listing 4.12 illustrates this.

Listing 4.12 Using the objViewSpec property

objviewer.ObjectViewer=function(obj,div,isInline,addNew){

styling.removeAllChildren(div);

this.object=obj;

this.spec=objviewer.getSpec(obj);

this.mainDiv=div;

this.mainDiv.viewer=this;

this.isInline=isInline;

this.addNew=addNew;

var table=document.createElement("table");

this.tbod=document.createElement("tbody");

table.appendChild(this.tbod);

this.fields=new Array();

this.children=new Array();

for (var i=0;ithis.fields[i]=new objviewer.PropertyViewer(

this,this.spec[i]

);

}

objviewer.getSpec=function (obj){

return (obj.objViewSpec) ?

obj.objViewSpec :

objviewer.autoSpec(obj);

}

objviewer.autoSpec=function(obj){

var members=new Array();

for (var propName in obj){

var spec={name:propName};

members.append(spec);

}

return members;

}

objviewer.PropertyViewer=function(objectViewer,memberSpec){

this.objectViewer=objectViewer;

this.spec=memberSpec;

this.name=this.spec.name;

...

}

We define a property objViewSpec, which the ObjectViewer constructor looks for in each object. If it