Roassal visualization of Seaside components

At STIC 2013 Alexandre Bergel presented Roassal, a Smalltalk visualization engine. It looked like a nice fit for our project, where we build deeply nested Seaside views from VW window specs. Navigating the component structure can be confusing, so I decided to add a tree view using Roassal.

We have the ability to inspect individual components, and we added our own inspector subclass which gives us a place for a custom menu (in VW you can do that by overriding #inspectorClasses). The most used menu entry is 'Inspect Parent Path', which inspects an array of components built from walking the parent links from the selected component up to the root component.

The parent path is handy, but is does not provide enough context, and navigating to a component outside of the parent path is a pain. It would be better to see a parent tree, with siblings and labels. Each of our components answers #parentComponet and #components. For the parent tree we just added each parent and each parent's components (siblings) into a set. Coding it in Roassal was easy...


visualizeParentPath

| view list |

list := self parentPathWithComponents.
view := Roassal.ROMondrianViewBuilder view: Roassal.ROView new.
view shape rectangle 
if: [:each | each hasUpdates] borderColor:  Color red;
if: [:each | each == self] fillColor:  Color yellow;
withText: [:each | each displayVisualizationLabel].
view interaction 
item: 'inspect' action: #inspect;
item: 'visualize' action: #visualizeParentPath.
view nodes: list.
view edgesFrom: #parentComponent. 
view treeLayout.
view open.


And here is what it looks like (the mouse is hovering over the 'I' input field; the popup is the printString of the component)...

This has proven to be quite handy. A big thanks to everyone that contributed to Roassal.

Simple things should be simple. Complex things should be possible.  Alan Kay.