Categorized | Web 2.0

Eclipse-like Dockable Frames using Javaline

Posted on17 June 2008.

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 Javaline 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:
  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:

PLAIN TEXT
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:

PLAIN TEXT
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>
  18.  

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.)


2 Responses to “Eclipse-like Dockable Frames using Javaline”

  1. EricaBALLARD says:
    August 28, 2010 at 8:01 am

    I opine that to receive the personal loans from banks you should present a firm reason. Nevertheless, one time I’ve got a student loan, because I wanted to buy a bike.

Trackbacks/Pingbacks

  1. free porn says:
    January 31, 2012 at 12:38 am

    … [Trackback]…

    [...] There you will find 72623 more Infos: utropicmedia.net/blog/eclipse-like-dockable-frames-using-javaline [...]…


Leave a Reply