Generating the View from the Model

151

iterating over the object in the autoSpec() function. The objViewSpec property is a numerical array, with each element being a lookup table of properties. For now, we’re only concerned with generating the name property. The PropertyViewer is passed the spec for this property in its constructor and can take hints from the spec as to how it should render itself.

If we provide a specification property to an object that we want to inspect in the ObjectViewer, then we can limit the properties being displayed to those that we think are relevant.

A second problem with our ObjectViewer is that it doesn’t handle complex properties very well. When objects, arrays, and functions are appended to a string, the toString() method is called. In the case of an object, this generally returns something nondescriptive such as [Object object]. In the case of a Function object, the entire source code for the function is returned. We need to discriminate between the different types of properties, which we can do using the instanceof operator. With that in place, let’s see how we can improve on our viewer.

4.5.2 Dealing with arrays and objects

One way of handling arrays and objects is to allow the user to drill down into them using separate ObjectViewer objects for each property. There are several ways of representing this. We have chosen here to represent child objects as popout windows, somewhat like a hierarchical menu. To achieve this, we need to do two things. First, we need to add a type property to the object specification and define the types that we support:

objviewer.TYPE_SIMPLE="simple";

objviewer.TYPE_ARRAY="array";

objviewer.TYPE_FUNCTION="function";

objviewer.TYPE_IMAGE_URL="image url";

objviewer.TYPE_OBJECT="object";

We modify the function that generates specs for objects that don’t come with their own to take account of the type, as shown in listing 4.13.

Listing 4.13 Modified autoSpec() function

objviewer.autoSpec=function(obj){

var members=new Array();

for (var propName in obj){

var propValue=obj[name];

var propType=objviewer.autoType(value);

var spec={name:propName,type:propType};

Licensed to jonathan zheng

152

CHAPTER 4

The page as an application

members.append(spec);

}

if (obj && obj.length>0){

for(var i=0;ivar propName="array ["+i+"]";

var propValue=obj[i];

var propType=objviewer.ObjectViewer.autoType(value);

var spec={name:propName,type:propType};

members.append(spec);

}

}

return members;

}

objviewer.autoType=function(value){

var type=objviewer.TYPE_SIMPLE;

if ((value instanceof Array)){

type=objviewer.TYPE_ARRAY;

}else if (value instanceof Function){

type=objviewer.TYPE_FUNCTION;

}else if (value instanceof Object){

type=objviewer.TYPE_OBJECT;

}

return type;

}

Note that we also add support for numerically indexed arrays, whose elements wouldn’t be discovered by the for...in style of loop.

The second thing that we need to do is to modify the PropertyViewer to take account of the different types and render them accordingly, as shown in listing 4.14.

Listing 4.14 Modified PropertyViewer constructor

objviewer.PropertyViewer=function

(objectViewer,memberSpec,appendAtTop){

this.objectViewer=objectViewer;

this.spec=memberSpec;

this.name=this.spec.name;

this.type=this.spec.type;

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

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

this.rowTr.className='objViewRow';

var isComplexType=(this.type==objviewer.TYPE_ARRAY

||this.type==objviewer.TYPE_OBJECT);

if ( !(isComplexType && this.objectViewer.isInline

)

){

this.nameTd=this.renderSideHeader();

Licensed to jonathan zheng

Generating the View from the Model

153

this.rowTr.appendChild(this.nameTd);

}

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

this.valTd.className='objViewValue';

this.valTd.viewer=this;

this.rowTr.appendChild(this.valTd);

if (isComplexType){

if (this.viewer.isInline){