• Choose a category
• All
• Classic-Fiction

this.valTd.colSpan=2;

var nameDiv=this.renderTopHeader();

this.valTd.appendChild(nameDiv);

var valDiv=this.renderInlineObject();

this.valTd.appendChild(valDiv);

}else{

var valDiv=this.renderPopoutObject();

this.valTd.appendChild(valDiv);

}

}else if (this.type==objviewer.TYPE_IMAGE_URL){

var valImg=this.renderImage();

this.valTd.appendChild(valImg);

}else if (this.type==objviewer.TYPE_SIMPLE){

var valTxt=this.renderSimple();

this.valTd.appendChild(valTxt);

}

if (appendAtTop){

styling.insertAtTop(viewer.tbod,this.rowTr);

}else{

viewer.tbod.appendChild(this.rowTr);

}

}

To accommodate the various types of properties, we have defined a number of rendering methods, the implementation of which is too detailed to reproduce in full here. Source code for the entire ObjectViewer can be downloaded from the website that accompanies this book.

We now have a fairly complete way of viewing our domain model automatically. To make the domain model objects visible, all that we need to do is to assign objViewSpec properties to their prototypes. The Planet object backing the view shown in figure 4.7, for example, has the following statement in the constructor: this.objViewSpec=[

{name:"name", type:"simple"},

{name:"distance", type:"simple", editable:true},

{name:"diameter", type:"simple", editable:true},

{name:"image", type:"image url"},

{name:"facts", type:"array", addNew:this.newFact, inline:true }

];

Licensed to jonathan zheng

154

CHAPTER 4

The page as an application

The notation for this specification is the JavaScript object notation, known as JSON. Square braces indicate a numerical array, and curly braces an associative array or object (the two are really the same). We discuss JSON more fully in appendix B.

There are a few unexplained entries here. What do addNew, inline, and editable mean? Their purpose is to notify the View that these parts of the domain model can not only be inspected but also modified by the user, bringing in the Controller aspects of our system, too. We’ll look at this in the next section. 4.5.3 Adding a Controller

It’s nice to be able to look at a domain model, but many everyday applications require us to modify them too—download the tune, edit the document, add items to the shopping basket, and so on. Mediating between user interactions and the domain model is the responsibility of the Controller, and we’ll now add that functionality to our ObjectViewer. The first thing that we’d like to do is to be able to edit simple text values when we click on them, if our specification object flags them as being editable. Listing 4.15 shows the code used to render a simple text property.

Listing 4.15 renderSimple() function

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

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

var valTxt=document

.createTextNode(this.value);

Show read-only value

valDiv.appendChild(valTxt);

if (this.spec.editable){ b

Add interactivity if editable

valDiv.className+=" editable";

valDiv.viewer=this;

valDiv.onclick=objviewer.PropertyViewer.editSimpleProperty;

}

return valDiv;

}

objviewer.PropertyViewer.editSimpleProperty=function(e){ c

Begin editing

var viewer=this.viewer;

if (viewer){

viewer.edit();

}

}

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

if (this.type=objviewer.TYPE_SIMPLE){

var editor=document.createElement("input");

editor.value=this.value;

document.body.appendChild(editor);

Licensed to jonathan zheng

Generating the View from the Model

155

var td=this.valTd;

xLeft(editor,xLeft(td));

xTop(editor,xTop(td));

xWidth(editor,xWidth(td));

xHeight(editor,xHeight(td));

td.replaceChild(editor,td.firstChild); d

Replace with read/write view

editor.onblur=objviewer.

PropertyViewer.editBlur; e

Add commit callback

editor.viewer=this;

editor.focus();

}

}

objviewer.PropertyViewer

.editBlur=function(e){ f

Finish editing

var viewer=this.viewer;

if (viewer){

viewer.commitEdit(this.value);

}

}

objviewer.PropertyViewer.prototype.commitEdit=function(value){

if (this.type==objviewer.TYPE_SIMPLE){