Motivation and some implementation detail for Seafox - the HTML -> Seaside canvas translator

1. Seafox
+
Nick Ager

2. Demo

3. Why #1?
• Learning Seaside

4. Why #2 - workflow
Seaside
Dreamweaver
?
Graphic designer
Seaside developer

5. Implementation
Ideas
1. Dreamweaver plug-in
2. Smalltalk HTML parser
3. Firefox plugin

6. Implementation
Autogenerated
seafox.xpi
elementAttributeMapping.js
parser.js

7. Autogenerated
<ul>...</ul>
HTML Elements
WAHtmlCanvas >> #unorderedList
<tag class=”title”>...</tag>
Elements Attributes
WATagBrush >> #class: ‘title’

8. Implementation
Plan #1
WAHtmlCanvas >> #unorderedList
^ self brush: WAUnorderedListTag new
WAUnorderedListTag >> #tag
^ ’ul’

9. Implementation
Plan #1
WAHtmlCanvas >> #code
^ self tag: ‘code’
WAHtmlCanvas >> #blockquote
^ self tag: ‘blockquote’
.
.
.
.

10. Implementation #2
brushMethodWrapper := ObjectAsMethodWrapper installOn: WAHtmlCanvas
selector: #brush:.
brushMethodWrapper preblock: [:aSel :someArgs :aRec |
brush := someArgs first].

11. Implementation fudges
• Ignore: WAPopupAnchorTag,
WAColorInputTag,WAImageMapTag,
WABasicFormTag......
• WAHeadingTag
• #title: #script: #style:

12. Outstanding
• 0.1 release
• mapping isn’t perfect:
html div "unmapped attribute->"
attributeAt: 'lang' put: 'en-GB';
• More thanproblems:
Compiler
256 literalsreferenced.
You must split or otherwise
simplify this method

13. Future
• Integration with firebug
• Bug fixes; entity mappings...
• Syntax colour highlighting
• Experiment serialising the DOM as JSON
into Smalltalk then writing the parser in
Smalltalk

14. Where to find Seafox
• http://www.squeaksource.com/Seafox
• http://seafox.seasidehosting.st/
• http://addons.mozilla.org/

15. Thanks