DomView: A squeak html/css viewer

Jerome Chauveau - 2007

Introduction

The plan is to develop a morphic widget(s) that renders the DOM generated by the parser wrote by Todd Blanchard. The ojbective is not trying to build a browser - just a modern HTML/CSS renderer based on http://www.squeaksource.com/htmlcssparser. This viewer has to respect the W3C norms (HTML/CSS).

An HTML/CSS Parser

First, this viewer could not be realized without a DOM parser which is able to parse and recognize html/css elements of a web page. Todd blanchard (my mentor) has already build a such programm. His parser is very powerfull. It constructs a DOM Tree containing all html document parsed nodes. Moreover, main nodes contains their CSS properties which are very important for the rendering. In order to render an html document, my program have to use the parser to load html and css informations in a DOM Tree. Then, it must browse this tree an build each node render. It must be done in a recursive way. In this way, the first part of my work was to understanding how using this parse. Example of an HTML code and its corresponding DOM Tree:
<div>  
  <p>bla bla  
  </p>  
  <table>  
    <tr>  
      <td>  
        <img src="image.gif">  
      </td>  
      <td>  
        bla bla  
      </td>  
    </tr>  
  </table>  
</div>
PIC

The Viewer

Architecture
Currently, all parser sources are in the htmlcssparser package. In this package, each html element has is class (HtmlDIVNode for example). For the rendering, each node must having a rendering method.
HtmlDOMNode >>renderOn: aBuilder
children do:[:aChildNode | aChildNode renderOn: aBuilder].

The rendering process is made with the builder pattern. Each node will be throw to the builder which will construct the node visual representation.

PIC

CSS properties
The visual representation depends of CSS properties. Before being displayed, a node has to "know" all its css properties. Each node could load its properties with this method (here the simplified one):
HtmlDomNode>>stylePropertiesOn: aDictionary
self styles do:
  [:rule | rule properties do:
      [:prop |(self isInherited:prop propertyName)
          ifTrue:[aDictionary at: prop propertyName ifAbsentPut: [prop].].
^self parent ifNotNil: [self parent stylePropertiesOn: aDictionary ] ifNil: [aDictionary].
Currently, a properties is not always added when absent in the dictionary - Some properties are not inherited. For example, the float properties is not inherited (a lot of properties are not inherited too).
The Box Model
Each html element(P, DIV..) is insert in a box. This box has paddings, margins, borders... The viewer must have a class (Morph) which implements this model in order to repect the W3C's norm.