كيف يمكنني التفاف stacklayoutpanel في decoratorpanel باستخدام uibinder؟

Question

بعد أن أنشأت بنجاح UI غير تافهة باستخدام GWT برمجيا، أحاول إعادة إنشاء نفس UI باستخدام Uibinder. لم أستخدمها أبدا أي نوع من نظام واجهة المستخدم العلوي من قبل وعلى الرغم من أنني أحرز تقدما ويمكن أن أرى فوائد مثل هذا النهج، فأنا أفشل في الحصول على DecoratorPanel لف Wraped A StackLayoutPanel بشكل صحيح.

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 وقم بتعيين المنطقة الوسطى إلى 100٪ كما هو مقترح في API GWT.

لا تفعل ما أتوقع ذلك، لذلك يجب أن أسوء فهم شيء هنا. هل أستطيع مساعدتك؟

شكرا لك :-)

Answer 1

لا تعمل LayoutPanels بشكل جيد إذا لم يتم احتواءها في شيء مستند، مما أدى بشكل أساسي إلى تخطيط آخر من نوعه. decoratorpanel ليس plantpanel وليس المقصود لاحتواء واحد.

ستظل هذه المشكلة تحدث بدون Uibinder، إنها ليست مشكلة مع كيفية تعليلك بذلك.

Answer 2

جرب هذا decoratorlayoutpanel. فئة، وهو تنفيذ DecoratorPanel تلك الفرعية LayoutPanel. وبعد لذلك هو متوافق مع LayoutPanel الإطار (على عكس DecoratorPanel)، وينبغي التفاف الخاص بك StackLayoutPanel بشكل صحيح.

(إخلاء المسئولية: يتم التبرع بالقمادة بحرية، ولا يوجد لديه قيود ترخيص. يتم استضافته على مدونتي http://hkwebentrepreneurs.com., ، وهي بلوق غير هادفة للربح.)

تحديث:

عن طريق التفسير، هذا DecoratorLayoutPanel تحاكي الطبقة GWT DecoratorPanel بإضافة 9 الحاجيات إلى حد ذاتها وترتيبها في شبكة 3x3. الحاجيات الخارجية الثمانية هي مصمم CSS DecoratorPanelزوايا مدورة، مع حجم افتراضي من 5 بكسل. القطعة المركزة واحدة قابلة للتوسيع وتستخدم لعقد LayoutPanel المحتوى.

الفائدة هي أنك تحصل على نفس تأثير الزوايا الدائرية لل DecoratorPanel, ، في حين أن تكون قادرة على إضافة أي LayoutPanel كطفل ووجوده تلقائيا لتحمله.