EclipseIDE의 UI를 좋아하시는 분들 많으실 겁니다. Ruben Daniels씨가 자신의 Javeline 프레임웍에 꽤 인상적인 기능을 추가했습니다. Ajax 응용프로그램을 위한 도킹 가능 프레임 시스템입니다.
사용자 삽입 이미지
스크린 샷으론 충분하지 않습니다; 직접 해봐야 멋진 인터랙션 모델을 느낄 수 있습니다.

코드가 꽤 재밌습니다:
[code:xml]
<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>
이게 전부입니다. 물론, 개별 도킹 프레임을 위치시키는 메타 데이터가 있습니다. 프레임웍은 메타데이터를 쉽게 런타임에 읽고 저장할 수 있는 기능을 제공합니다. 직렬화된 메타데이터는 XML입니다:
[code: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>
그리고 당연히, 직접 코딩하고 싶으시다면 레이아웃을 정할 수 있는 JavaScript API도 있습니다:
[code:xml]
<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>

from Eclipse-like Dockable Frames using Javeline
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요