DomView: A squeak html/css viewer
Jerome Chauveau - 2007
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:
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.
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):
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.