UiBinder를 사용하여 DecoratorPanel에 StackLayoutPanel을 래핑하는 방법은 무엇입니까?

Question

GWT를 사용하여 프로그래밍 방식으로 중요한 UI를 성공적으로 작성한 후 UiBinder를 사용하여 동일한 UI를 다시 만들려고합니다. 전에는 어떤 종류의 선언적 UI 시스템도 사용한 적이 없으며 진전을 보이고 있지만 그러한 접근 방식의 이점을 볼 수는 있지만 DecoratorPanel에서 StackLayoutPanel을 올바르게 랩하지 못하고 있습니다. DecoratorPanel 래핑이없이 StackNavigator.java

import com.google.gwt.core.client.GWT; 
import com.google.gwt.uibinder.client.UiBinder; 
import com.google.gwt.user.client.ui.Composite; 
import com.google.gwt.user.client.ui.Widget; 

public class StackNavigator extends Composite { 

    private static StackNavigatorUiBinder uiBinder = GWT.create(StackNavigatorUiBinder.class); 

    interface StackNavigatorUiBinder extends UiBinder<Widget, StackNavigator> {} 

    public StackNavigator() { 
     initWidget(uiBinder.createAndBindUi(this)); 
    } 

} 

StackNavigator.ui.xml

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"> 
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui" xmlns:bandmates="urn:import:org.redboffin.bandmates.client"> 

    <ui:style> 
     .gwt-DecoratorPanel { 
      width: 200px; 
      height: 200px; 
     } 
     .gwt-DecoratorPanel .middleCenter { 
      height: 100%; 
      width: 100%; 
     } 
    </ui:style> 

    <g:DecoratorPanel> 
     <g:StackLayoutPanel unit='PX'> 
      <g:stack> 
       <g:header size='20'>Item One</g:header> 
       <g:Label>TODO : Item One List Widget</g:Label> 
      </g:stack> 
      <g:stack> 
       <g:header size='20'>Item Two</g:header> 
       <g:Label>TODO : Item Two List Widget</g:Label> 
      </g:stack> 
      <g:stack> 
       <g:header size='20'>Item Three</g:header> 
       <g:Label>TODO : Item Three List Widget</g:Label> 
      </g:stack> 
     </g:StackLayoutPanel> 
    </g:DecoratorPanel> 

</ui:UiBinder> 

는 StackLayoutPanel 표시 및 기능은 예상대로. DecoratorPanel에 래핑 될 때 StackLayoutPanel을 볼 수 없습니다. 그 자리에 작은 파란색 원이 있습니다. DecoratorPanel의 모서리 그래픽이 단단히 묶여 있습니다. 이것이 DecoratorPanel에 너비와 높이를 설정하고 GWT API에 제안 된대로 중간 영역을 100 %로 설정하려고 한 이유입니다.

내가 예상 한대로하지 않기 때문에 여기에서 뭔가 오해를해야합니다. 누구든지 도와 줄 수 있습니까?

그들이 뭔가에 포함되지 않은 경우

Answer 1

LayoutPanels이 잘 작동하지 않습니다 :-) 감사 몇몇 종류의 ProvidesResize, 본질적으로 다른 LayoutPanel. DecoratorPanel은 LayoutPanel이 아니며 하나를 포함 할 의도가 없습니다.

이 문제는 UiBinder 없이도 계속 발생하며, 사용자가 신고하는 방식에 문제가 없습니다.

Answer 2

서브 클래스가 LayoutPanel 인 DecoratorPanel의 구현 인이 DecoratorLayoutPanel 클래스를 사용해보십시오. 따라서 LayoutPanel 프레임 워크 (DecoratorPanel과 달리)와 호환되므로 StackLayoutPanel을 올바르게 포장해야합니다.

(면책 조항 :.. 코드가 자유롭게 기부, 어떤 라이선스 제한이 없습니다 그것은 비영리 블로그 내 블로그 http://hkwebentrepreneurs.com에서 호스팅)

UPDATE :

설명을 위해,이 DecoratorLayoutPanel 클래스는 GWT의 DecoratorPanel을 9 개의 위젯을 추가하고 3x3 격자로 정렬하여 모방합니다. 가장 바깥 쪽 위젯 8 개는 DecoratorPanel의 둥근 모서리를 사용하여 CSS 스타일로되어 있으며 기본 크기는 5px입니다. 하나의 중앙 위젯은 확장 가능하며 LayoutPanel 콘텐츠를 보유하는 데 사용됩니다.

DecoratorPanel과 동일한 둥근 모서리 효과를 얻을 수있는 반면, LayoutPanel을 자식으로 추가하고 크기에 맞게 자동으로 조정할 수 있다는 이점이 있습니다.