Eclipse-like Dockable Frames using Javeline
Date : 2008 06 17 Category : Tech & Development
AjaxianI've never been a big fan of the Eclipse IDE's user interface, but personal biases aside, Ruben Daniels has come up with a pretty impressive feature in his Javeline framework: a dockable frames system for Ajax applications.
The screenshot doesn't do it justice; playing around with it reveals a nice interaction model that feels faithful to the original.
The code is where things get interesting:
PLAIN TEXT JAVASCRIPT:<j :modalwindow modal="false" btnmax="1" btnclose="1" btnmin="1" title="Tree Window" icon="icopage.gif" id="b2"></j> <j :modalwindow modal="false" btnmax="1" btnclose="1" btnmin="1" title="Window of Oppertunity" icon="icopage.gif" id="b3"></j> <j :modalwindow modal="false" btnmax="1" btnclose="1" btnmin="1" title="20% window" icon="icopage.gif" id="b4"></j> <j :modalwindow modal="false" btnmax="1" btnclose="1" btnmin="1" title="Some Window" icon="icopage.gif" id="b5"></j> <j :modalwindow modal="false" btnmax="1" btnclose="1" btnmin="1" title="Lesser Window" icon="icopage.gif" id="b6"></j> <j :modalwindow modal="false" btnmax="1" btnclose="1" btnmin="1" title="Down Window" icon="icopage.gif" id="b8"></j> <j :modalwindow modal="false" btnmax="1" btnclose="1" btnmin="1" title="Another Window" icon="icopage.gif" id="b9"></j> <j :modalwindow modal="false" btnmax="1" btnclose="1" btnmin="1" title="Redmond Window" icon="icopage.gif" id="b10"></j> <j :modalwindow modal="false" btnmax="1" btnclose="1" btnmin="1" title="Ping Window" icon="icopage.gif" id="b11"></j> <j :modalwindow modal="false" btnmax="1" btnclose="1" btnmin="1" title="YAW window" icon="icopage.gif" id="b12"></j>
That's it. Of course, there is the metadata controlling where the individual docking frames are placed. The framework features easy run-time loading/saving of the metadata. The serialized metadata is XML:
PLAIN TEXT XML:<layouts> <layout name="Layout 1" icon="" margin="2,2,2,2"> <vbox edge="splitter"> <node name="b1" edge="2"/> <hbox edge="2"> <vbox weight="1"> <node name="b2" caption="Tree Window"/> <node name="b3" caption="Window of Oppertunity" /><!-- height="20%" --> </vbox> <vbox weight="2"> <node name="b4" height="20%" caption="20% window"/> <hbox> <vbox> <node name="b5" caption="Some Window"/> <node name="b9" caption="Another Window"/> <hbox> <node name="b10" caption="Redmond Window"/> <vbox> <node name="b11" caption="Ping Window"/> <node name="b12" caption="YAW window"/> </vbox> </hbox> </vbox> <node name="b8" caption="Down Window"/> </hbox> </vbox> <node name="b6" weight="1" caption="Lesser Window" /> </hbox> <node name="b7" height="20" /> </vbox> </layout> <layout name="Layout 2" icon=""> <vbox edge="splitter"> <node name="b1" edge="2" /> <node name="b2" height="100" caption="Tree Window"/> <hbox edge="2"> <node name="b3" width="20%" caption="Window of Oppertunity" /> <node name="b4" width="100" caption="20% window"/> <vbox> <hbox> <node name="b6" caption="Lesser Window" /> <node name="b12" caption="YAW window"/> <node name="b8" caption="Down Window"/> <node name="b9" caption="Another Window"/> <node name="b10" caption="Redmond Window"/> <node name="b11" caption="Ping Window"/> </hbox> <node name="b5" caption="Some Window"/> </vbox> </hbox> <node name="b7" height="20"/> </vbox> </layout> </layouts>
And of course, there's a JavaScript API for doing the layout if you want to hard-code it:
PLAIN TEXT JAVASCRIPT:<j :vbox margin="10,10,10,10"> </j><j :bar margin="3" edge="3" height="20">top</j> <j :hbox splitter="3"> </j><j :bar id="b1" splitter="5" width="20%">left</j> <j :vbox> </j><j :bar splitter="5" height="200"> </j><j :button onclick="b1.hide();">Hide</j> <j :button onclick="b1.show();">Show</j> <j :bar>right</j> <j :bar height="20">bottom</j>
I've dealt with big commercial frameworks for desktop GUI toolkits that pale compared to this in terms of API usability. Let the JavaScript Eclipse clones commence! (Actually, please, no.)