Javeline을 이용한 이클립스 스러운 도킹 가능 프레임

2008. 6. 30. 21:14 from [IT] Web Tech
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

'[IT] Web Tech' 카테고리의 다른 글

72photos: 사진 공유 사이트  (1) 2008.07.03
AOL의 AIM API Dojo 모듈 지원  (0) 2008.06.30
Web 2.0 버튼 생성기  (0) 2008.06.30
Adobe AIR v1.1 릴리스! 국제화 지원 강화  (0) 2008.06.30
Javeline을 이용한 이클립스 스러운 도킹 가능 프레임  (0) 2008.06.30
SproutCore: Flash 킬러가 될 수 있을까요?  (0) 2008.06.30
Obsurvey: Ajax를 적극 사용한 설문조사 엔진  (0) 2008.06.27
JavaScriptMVC를 이용한 개선된 Class 상속  (1) 2008.06.27
Steve Yegge씨의 서버 사이드 JavaScript  (0) 2008.06.26
TAG ,
Posted by 행복한고니 트랙백 0 : 댓글 0

댓글을 달아 주세요