Client Tier

Client Tier

The design of this client is very clean. It knows nothing at all about the forms it will be required to present. In the middle tier, our PHP program was pretty independent of the data; it asked the database what the fields were and then passed them to the client. It only knew that the UserName and Password existed and had special properties. The UserName is the primary key ”the unique identifier of the record. The Password is required to open an exist ing record.

The Flash client is even more ignorant. It does not know any special data elements; it simply displays what it is told to. We create two graphical elements, a simple submit button and a generic data field. The field object can display the contents of an XML leaf element and ( optionally ) permit it to be edited. It can also recreate itself as XML that reflects the editing and possible validation.

The client has only to take in an XML object and dissect the data, associating each leaf element with a field display. It places the fields neatly onscreen with the submit button.

Submit Button

After the user edits the fields, he presses the submit button. The data in memory transforms itself into an XML object. This object is uploaded to the server, and a new XML object is loaded from the server. This will show an updated form, perhaps with new fields, perhaps showing which fields are acceptable and which ones might have problems.

ActionScript

 function makeFields(xml) {     for(var i=0; i<xml.childNodes.length;  i++)      if(xml.childNodes[i].nodeType ==1){        this.attachMovie("field", "Field"+this.n, 1500+this.n);        clip= eval("Field"+this.n++);        clip._x= this.xchild;        clip._y= this.ychild+=24;        clip.item=  xml.childNodes[i] ;        makeFields(xml.childNodes[i]);        } } 

This code attaches a field object to the current MovieClip and places it onscreen. The code also inserts the correct XML data. This code is a function of a MovieClip, not a method of any XML object. The makeFields() function is passed an element node and it runs through all the children of that node, ignoring all but the element nodes (type 1). For each element node, makeFields() instantiates a new field MovieClip. It names the new field object Fieldn (where n is the next available number) and places it 24 pixels below Field(n “1). The makeField() function copies the XML daughter element into the MovieClip as the variable item and then recurses through that node.

ActionScript

 function submit() {    statusline= "Waiting for Server.";    member= new XML("<Member></Member>");    while(this.n) {        this.member.firstChild.appendChild(eval("Field"+this.n).toXML());        eval("Field"+this.n).removeMovieClip();        }    this.xchild = this.ychild = this.n =0;    member.onLoad= this.refresh;    member.contentType= "text/xml";    member.sendAndLoad("member.php", member); } 

This function is hooked to the submit button. It creates an XML object called member that contains all the elements created by the field objects. As a single wrapper element, it is a legitimate XML document and perfect for passing back and forth to the server.

Each of the n fields is converted from an ActionScript object to an XML object. First, the toXML() function is invoked. It returns an XML element which is appended within the member element. The MovieClip is then removed. Then the positioning and count variable ( _xchild, _ychild and n ) are all zeroed out. The display is empty.

The XML object is given and the event handler and the content type must be manually set each time. Then the object is fired off to the server and exchanged for a new XML object of the same name .

ActionScript

 function refresh(ok) {    statusline= ok? "Server response:\ n" : "Error contacting server.\ n";    statusline+= member.toString();    makeFields(member.firstChild);    delete(member); } 

After the server has updated the member object, and the status line is updated, the data is converted from XML back into ActionScript. The makeField function recursively converts XML elements into visible field MovieClips, and the XML is tossed to the garbage collector.

Field Object

A field object makes a single variable visible and editable. It displays the variable's name and its contents. The contents are editable depending on the variable's type:

• A Fixed value cannot be edited.

• A Number needs numeric entry.

• A String16 is limited to 16 characters .

• All others are limited to 32 characters.

Two flags can be set by the XML element. A false value in invalid means that the current value is unacceptable. In our design, this flag is set by the server when the SQLs data validation raises an error. Alternatively, it could be set by a local validation process within the client (or it could be set by the PHP script, as it sometimes is).

The required flag is typically set by the SQL database to warn the user that a blank entry in this field will return as invalid (Figure 17.3). There is a blank frame that allows the XML to be loaded before it is analyzed . The second frame analyzes the XML and advances to the appropriate keyframe for displaying this data type.

Figure 17.3. Field Displays a Single XML Tag

ActionScript

 function setVariable(node) {    name= node.nodeName;    value= "";    for(var i=0; i< node.childNodes.length; i++)            if(node.childNodes[i].nodeType== 1)                         setVariable(node.childNodes[i]); 

The setVariable() function hunts through the subnodes. If it finds an element node, it recurses.

ActionScript

 else if(node.childNodes[i].nodeType== 3)    value += node.childNodes[i].nodeValue; 

If it finds content, it concatenates the content into the editable value variable.

ActionScript

 if(node.attributes["type"]   eq "Fixed") gotoAndStop("Fixed"); else if(node.attributes["type"]   eq "Number") gotoAndStop("Number"); else if(node.attributes["type"]   eq "String16") gotoAndStop          ("String16"); else                                               gotoAndStop          ("String32"); 

Then it chooses a display frame based on its type attribute.

ActionScript

 if(node.attributes["valid"]  eq "False") valid   ="INVALID"; else                                              valid   =""; if(node.attributes["required"]eq "True") required="REQUIRED"; else                                              required=""; 

It decides whether INVALID and REQUIRED flags are to be displayed.

ActionScript

 if (!eval(name)) eval(name) = value; } 

Finally, it creates a variable in its own namespace with the same name as its element and the same contents.

The field also has a toXML() function. This function is similar to an XML object's .toString() method and is used much the same way. Called as a member function of a field object, it returns an XML element.

ActionScript

 function toXML() {    element=             (new XML()).createElement(this.name);    element.appendChild((new XML()).createTextNode(this.value));    return element; } 

It makes an element node whose name is contained in name and attaches to this node a text node that contains the contents of value. Of course, this is simply the reverse of the way we got name and value from an XML element earlier.

It would not be hard to insert the attributes ( type, invalid, and required ) into this XML with a line like

ActionScript

 if (valid eq "INVALID")      element.attributes["valid"]= "False"; 

But it is not necessary; the server does not use this information.