Tuesday, June 17th, 2008

Eclipse-like Dockable Frames using Javeline

Category: JavaScript

I’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:

javascript

  1. <j :modalwindow modal="false" btnmax="1" btnclose="1" btnmin="1" title="Tree Window" icon="icopage.gif" id="b2"></j>
  2.         <j :modalwindow modal="false" btnmax="1" btnclose="1" btnmin="1" title="Window of Oppertunity" icon="icopage.gif" id="b3"></j>
  3.         <j :modalwindow modal="false" btnmax="1" btnclose="1" btnmin="1" title="20% window" icon="icopage.gif" id="b4"></j>
  4.         <j :modalwindow modal="false" btnmax="1" btnclose="1" btnmin="1" title="Some Window" icon="icopage.gif" id="b5"></j>
  5.  
  6.         <j :modalwindow modal="false" btnmax="1" btnclose="1" btnmin="1" title="Lesser Window" icon="icopage.gif" id="b6"></j>
  7.         <j :modalwindow modal="false" btnmax="1" btnclose="1" btnmin="1" title="Down Window" icon="icopage.gif" id="b8"></j>
  8.         <j :modalwindow modal="false" btnmax="1" btnclose="1" btnmin="1" title="Another Window" icon="icopage.gif" id="b9"></j>
  9.         <j :modalwindow modal="false" btnmax="1" btnclose="1" btnmin="1" title="Redmond Window" icon="icopage.gif" id="b10"></j>
  10.         <j :modalwindow modal="false" btnmax="1" btnclose="1" btnmin="1" title="Ping Window" icon="icopage.gif" id="b11"></j>
  11.         <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:

  1. <layouts>
  2.     <layout name="Layout 1" icon="" margin="2,2,2,2">
  3.         <vbox edge="splitter">
  4.             <node name="b1" edge="2"/>
  5.             <hbox edge="2">
  6.                 <vbox weight="1">
  7.                     <node name="b2" caption="Tree Window"/>
  8.                     <node name="b3" caption="Window of Oppertunity" /><!-- height="20%" -->
  9.                 </vbox>
  10.  
  11.                 <vbox weight="2">
  12.                     <node name="b4" height="20%" caption="20% window"/>
  13.                     <hbox>
  14.                         <vbox>
  15.                             <node name="b5" caption="Some Window"/>
  16.                             <node name="b9" caption="Another Window"/>
  17.                             <hbox>
  18.                                 <node name="b10" caption="Redmond Window"/>
  19.                                 <vbox>
  20.  
  21.                                     <node name="b11" caption="Ping Window"/>
  22.                                     <node name="b12" caption="YAW window"/>
  23.                                 </vbox>
  24.                             </hbox>
  25.                         </vbox>
  26.                         <node name="b8" caption="Down Window"/>
  27.                     </hbox>
  28.                 </vbox>
  29.                 <node name="b6" weight="1" caption="Lesser Window" />
  30.  
  31.             </hbox>
  32.             <node name="b7" height="20" />
  33.         </vbox>
  34.     </layout>
  35.    
  36.     <layout name="Layout 2" icon="">
  37.         <vbox edge="splitter">
  38.             <node name="b1" edge="2" />
  39.             <node name="b2" height="100" caption="Tree Window"/>
  40.             <hbox edge="2">
  41.  
  42.                 <node name="b3" width="20%" caption="Window of Oppertunity" />
  43.                 <node name="b4" width="100" caption="20% window"/>
  44.                 <vbox>
  45.                     <hbox>
  46.                         <node name="b6" caption="Lesser Window" />
  47.                         <node name="b12" caption="YAW window"/>
  48.                         <node name="b8" caption="Down Window"/>
  49.                         <node name="b9" caption="Another Window"/>
  50.                         <node name="b10" caption="Redmond Window"/>
  51.  
  52.                         <node name="b11" caption="Ping Window"/>
  53.                     </hbox>
  54.                     <node name="b5" caption="Some Window"/>
  55.                 </vbox>
  56.             </hbox>
  57.             <node name="b7" height="20"/>
  58.         </vbox>
  59.     </layout>
  60. </layouts>

And of course, there’s a JavaScript API for doing the layout if you want to hard-code it:

javascript

  1. <j :vbox margin="10,10,10,10">
  2.   </j><j :bar margin="3" edge="3" height="20">top</j>
  3.  
  4.   <j :hbox splitter="3">
  5.     </j><j :bar id="b1" splitter="5" width="20%">left</j>
  6.  
  7.     <j :vbox>
  8.       </j><j :bar splitter="5" height="200">
  9.         </j><j :button onclick="b1.hide();">Hide</j>
  10.         <j :button onclick="b1.show();">Show</j>
  11.      
  12.  
  13.       <j :bar>right</j>
  14.    
  15.  
  16.  
  17.   <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.)

Posted by Ben Galbraith at 5:00 am
4 Comments

+++--
3.9 rating from 29 votes

4 Comments »

Comments feed TrackBack URI

This is great!

Comment by Rizqi_Ahmad — June 17, 2008

i’m really impressed. I really dont understand why html namespacing isn’t used more often. why not invent a rich layout language on top of html and say f off to all the crap templating solutions we see in the wild?

Comment by ilazarte — June 17, 2008

not only that you can begin to export your functionality and services completely as declarative entites, instead of wierd js hack on top of wierd js hack…

ever hear this one?
“just insert a script tag here to include our product…. and to customize you edit your stylesheet here… yes you have to edit the head of your document to include our js file…”

Comment by ilazarte — June 17, 2008

Absssoolluttly Great if it was a standalone library or linked with a popular framework like Prototype.

I really need this feature but it is unusable if I have to add a new client/server side framework.

Comment by nextone — August 22, 2008

Leave a comment

You must be logged in to post a comment.