Sunday, April 3, 2011

Html DOM directly from database

This is the call back routine when I take a DOM tree, stored in nest order, and directly create the browser  DOM from WebSql.  This has only been tested in Opera browsers.
var fields = ['Type','Self','Span','Parent','Name','Value'];
// database call back

function nodeRec(me) {
 var top;
 
 xparent.length=0;
 for(var i=0; i < me.numrows;i++) {

  var type= me.results.rows[i][fields[0]];

  self[i] = me.results.rows[i][fields[1]];
  offset[i] = me.results.rows[i][fields[2]];
  xparent[i] = me.results.rows[i][fields[3]];
  var name= me.results.rows[i][fields[4]];
  var value=me.results.rows[i][fields[5]];

  switch(type) {
  case 0:
  break;

  case 1:  //new element  
    var n = document.createElement(name); 
    pointers[i] = n;
    if(xparent[i]==-1)
 top = n;
     else {
        var p = pointers[xparent[i]];
     try {p.appendChild(n);}
       catch(err) {
  alert('Case 1 ' +i+ ' '+ err+ ' ' + name + '  ' + value);}
        }
    break;
  case 3: //new text
   var n = document.createTextNode(value); 
   var p = pointers[xparent[i]];
   try {p.appendChild(n);}
      catch(err) {
alert('Case 3 ' +err+ ' '+p +' ' +i+ ' '+  ' ' + name + '  ' + value);}
   pointers[i] = n;

 break;
  case 2: //new attribute
   var n = document.createAttribute(name,value);
   var p = pointers[xparent[i]];
  try {p.setAttribute(name,value); }
   catch(err) {
alert('Case 2 ' +err+' '+ p.nodeName + ' ' +name + '  ' + value);}  
 break;
  case 8:  // new comment
   var n = document.createComment(value);
   var p = pointers[xparent[i]];
   try {p.setAttribute(name,value); }
   catch(err) {
alert('Case 8  ' +err+' '+ previous.nodeName + ' ' +name + '  ' + value);}  
   pointers[i] = n;
  break;
  case 9: //new tree
    p = top; 
   URI = value;
  break;
  default:
   alert(' UnknownType '+type+ ' '+ name + ' ' +value);
   break;
  }
 }
resultOut.insertBefore(top,resultOut.firstChild);
return 0;
}
Can the web publisher take and arbitrary XML tree and reate a compatible html tree through one or more simple database transactions? The answer is yes, but it is not yet simple because we have to maintain the pointers, Self,Spam and Parent. Using database transactions instead of xsl transactions should be simpler, but I am still working the mechanics.

Currently I maintain the three nesting pointers with a few lines of code behind he scenes, and the values are established by descending the original XML tree and initializing. If the taes an XML tree stored in nested order as a taable, and then creates a new table, having the conversion to html, then the ode must know that such a new html tree has been created, then the code will run a pointer fix on the new table behind the scenes. The pointer fix will use the old pointers and adjust them for any added or removed elements.

I have not worked this out.
But I am thinking that the user will be presented with three or four javascript utilities that encapsulate the database translations into something the interior code can deal with, in terms of maintaining the nested order pointers. Normally the translations consist of selects from the old table and insertions into the new table. If the user has knowledge of trees, then for any selection of items from the original and insertion into the translated, the encapsulation calls can include the parent, greatly simplifying the construction. The background code can maintain various labels on records constructed prior, and make the pointer adjustments.

I can simplify the transformation by specifying that a nest tree table store is order independent, so a parent can find its children by selecting a range in the nested pointers, and a child can always find its parent regardless of order. The code can always normalize a DOM store with a standard SQL procedure.

The user then ends up with simple tree methods that act on the table store, as long as the user can maintain label pointers to refer back to a parent node. The code should not try to implement for loops outside the SQL statements, as that would add confusion. However, the code can maintain cursor pointers by label reference.

Consider the case where the publisher has a book catalog in XML form, stored in WebSQL; and wants to create an SVG display from that, with each book a rectangle, whose height is proportional to the number of pages. The user should be able to select all books as type Rect. The syntax should allow Book: select rectangle where....; Then later, the user can use 'next book' to iterate down the list collecting all page lengths and creating attribute height for each rectangle. I cannot make is much simpler.

No comments: