Uibinder를 사용하여 Decoratorpanel에 Stacklayoutpanel을 어떻게 랩핑합니까?

StackOverflow https://stackoverflow.com/questions/2013169

  •  19-09-2019
  •  | 
  •  

문제

GWT를 사용하여 프로그래밍 방식으로 사소한 UI를 성공적으로 구축 한 후 Uibinder를 사용하여 동일한 UI를 재현하려고합니다. 나는 이전에 어떤 종류의 선언적 UI 시스템을 사용한 적이 없으며, 진전을 이루고 있으며 그러한 접근 방식의 이점을 볼 수 있지만 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>

DecoratorPanel에 싸여 있지 않고 StacklayoutPanel은 예상대로 표시 및 기능을 표시합니다. Decoratorpanel에 싸서 있으면 StacklayoutPanel을 볼 수 없습니다. 그 자리에는 작은 파란색 원이 있습니다. 나는 Decoratorpanel의 코너 그래픽이 단단히 함께 묶인 것 같습니다. 그렇기 때문에 Decoratorpanel의 너비와 높이를 설정하고 GWT API에서 제안한대로 중간 영역을 100%로 설정했습니다.

그것은 내가 기대하는 것을하지 않으므로 여기서 무언가를 오해해야합니다. 누구든지 도울 수 있습니까?

고맙습니다 :-)

도움이 되었습니까?

해결책

LayoutPanel은 기본적으로 어떤 종류의 또 다른 LayoutPanel을 제공하는 무언가에 포함되어 있지 않으면 잘 작동하지 않습니다. Decoratorpanel은 LayoutPanel이 아니며 하나를 포함하지 않습니다.

이 문제는 Uibinder 없이도 여전히 발생합니다. 선언하는 방법에는 문제가되지 않습니다.

다른 팁

이 시도 DecoratorlayoutPanel 클래스는 구현입니다 DecoratorPanel 그 하위 클래스 LayoutPanel. 따라서 그것은 다음과 호환됩니다 LayoutPanel 프레임 워크 (와 달리 DecoratorPanel), 그리고 당신을 감싸 야합니다 StackLayoutPanel 바르게.

(면책 조항 : 코드는 자유롭게 기부되며 라이센스 제한이 없습니다. 내 블로그에서 호스팅됩니다. http://hkwebentrepreneurs.com, 비영리 블로그입니다.)

업데이트:

설명에 의해, 이것 DecoratorLayoutPanel 클래스는 GWT를 모방합니다 DecoratorPanel 9 개의 위젯 자체를 추가하여 3x3 그리드로 배열함으로써. 가장 외부 위젯은 CSS 스타일을 사용합니다 DecoratorPanel기본 크기가 5px의 둥근 모서리. 하나의 중앙 위젯은 확장 가능하며 LayoutPanel 콘텐츠.

이점은 당신이 동일한 원형 코너 효과를 얻는다는 것입니다. DecoratorPanel, 추가 할 수있는 동안 LayoutPanel 어린이로서 자동으로 적합하게 크기를 조정합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top