كيفية تخطيط الأدوات باستخدام DockLayoutPanel وUiBinder في GWT 2.0؟

Question

أحاول الحصول على تخطيط بسيط يعمل ضمن GWT 2.0 باستخدام UiBinder.التخطيط الذي أحاول الحصول عليه هو تخطيط يحاكي BorderLayout الخاص بـ Java حيث يمكنك تحديد لوحات مختلفة في اتجاهات الشمال والجنوب والشرق والغرب والوسط؛لذلك أنا أستخدم DockLayoutPanel.أرغب في الحصول على رأس وتذييل، كلاهما بعرض ثابت.سيتم شغل مساحة إطار العرض المتبقية بواسطة الأداة المخصصة للفتحة المركزية DockLayoutPanel.

ملف .ui.xml الحالي الذي لدي هو:

<g:DockLayoutPanel unit='EM'>
    <g:north size='2'>
        <g:HTML>HEADER</g:HTML> 
    </g:north>

    <g:south size='2'>
        <g:HTML>FOOTER</g:HTML> 
    </g:south>

    <g:center>
        <g:HTML>
            <div id='loginform'>Hello!</div>
        </g:HTML>
    </g:center>
</g:DockLayoutPanel>

يعرض المتصفح الرأس فقط في الزاوية اليسرى العليا.كيف يمكنني تحقيق التصميم الذي أبحث عنه؟يبدو أن هناك المزيد من CSS التي يجب عليك معرفتها قبل أن تتمكن من استخدام لوحات تخطيط GWT، لكن هذا النوع يحبط الغرض من إنشاء واجهة المستخدم بها.

Answer 1

ويعمل هذا بالنسبة لي مع أي من الخارقة التي اقترحتها RaphaelO.

والمثال جافادوك على DockLayoutPanel يستخدم 192 كما عرض لغرب. وهذا خطأ - المؤلف ربما يعتقد أنه كان يستخدم PX، لكنه كان يستخدم EM. حتى إذا كنت تصغير، سترى أن المركز لا يزال بعيدا إلى اليمين.

هل فحص باستخدام الوضع المعايير؟ هذا مطلوب لDockLayoutPanel.

وأيضا، نسيت أن أذكر أنه يجب استخدام RootLayoutPanel عند إضافة DockLayout في الدرجة نقطة الدخول الخاصة بك - لا تستخدم RootPanel

Answer 2

وواستخدام لوحات تخطيط أدخلت حديثا هو في الواقع مربكة جدا. هل هناك طريقة لجعل تخطيط تحتل منطقة العميل بأكملها. فهو يتطلب قليلا من جافا البرمجية بالإضافة إلى ملف ui.xml.

في الدرجة نقطة الدخول الخاصة بك، إضافة تعريف UiBinder مع الشرح إلى ملف ui.xml الذي يعلن التخطيط:

@UiTemplate("LayoutDeclarationFile.ui.xml")
interface DockLayoutUiBinder extends
        UiBinder<DockLayoutPanel, TheEntryPointChildClass> {
}

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

وفي وظيفة onModuleLoad، مثيل UiBinder، باسترداد جذورها ومباشرة إضافته إلى DOM:

public void onModuleLoad() {
    DockLayoutPanel layout = uiBinder.createAndBindUi(this);
    // Make sure we use the whole client area
    Window.setMargin("0px");

    // Add the panel to the DOM
    RootLayoutPanel.get().add(layout);
 }

Answer 3

لقد جربت كتلة التعليمات البرمجية الخاصة بك بالإضافة إلى كتلة العينة الموجودة على صفحة javadoc لـ DockLayoutPanel وأنا أحصل على نتائج مماثلة.فقط البيانات الموجودة في شمال يبدو أن قسم DockLayoutPanel معروض.ومع ذلك، عندما أبحث في الصفحة (باستخدام فايرفوكس وسفاري على نظام ماك) يتم العثور على العناصر الأخرى ولكنها لا تظهر في أي مكان.يبدو أنه قد يكون هناك خطأ في هذه اللوحة وUiBinder.