GWT: إنشاء قابل للتمرير قابل للتركيب في شاشة Tabpanel ملء الشاشة

Question

أرغب في إنشاء Tabpanel الذي يحتل منطقة عميل المستعرض بأكمله، وداخله الذي يزداد أزادا بالتفريخ إذا لزم الأمر. ومع ذلك، أواجه مشكلة في تحقيق هذا. لقد حاولت:

public void onModuleLoad() {
    TabPanel test = new TabPanel();
    test.setSize("100%", "100%");

    FlexTable flex = new FlexTable();
    for (int i = 0; i < 100; i++)
        flex.setText(i, 0, "test " + i);

    test.add(flex, "tab");
    flex.setStyleName("overflow-auto");

    test.selectTab(0);
    RootPanel.get().add(test);
    }

حيث يتم تعريف overflow-auto على النحو التالي:

.overflow-auto {
    overflow: auto;
}

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

Answer 1

يبدو أن GWT 2.0 لديه نظام تخطيط جديد يجب أن يفعل ما أردت: http://code.google.com/webtoolkit/doc/latest/devguideuipanels.html#layoutpanels.

Answer 2

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

هناك تحذير، ومع ذلك: كان هناك عيب طويل الأمد مع أي نوع من الألواح القابلة للتمرز داخل Tabpanel. أخيرا كنت قد رأيت أنه لا يزال مفتوحا.

http://code.google.com/p/google-web-toolkit/issues/detail؟id=1343.

أعتقد أن الحل الذي تبحث عنه هنا هو وضع الأرجواني في بعض لوحة الحاويات الأخرى مثل VerticalPanel (ربما يكون البسيط سيكون كافيا)، ثم وضع ذلك في Scrollpanel وأخيرا يشق ذلك في tabpanel.

كما لاحظت رغم ذلك، سيحتاجك Scrollpanel إلى إدارة ارتفاعها يدويا. لذلك، إذا كنت تريد أن تظل ارتفاع النافذة، فسيتم إشراك ذلك كتابة بعض التعليمات البرمجية التي تتحقق من حجم المستعرض وأرقامه التي تحتاج إلى أن تكون التمرير. ستحتاج إلى إرفاق معالج تغيير الحجم إلى النافذة أيضا للقبض على تغيير حجم وإصلاح الأشياء بعد ذلك.

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

Answer 3

ما كان يعمل بالنسبة لي كان يشبه ما كتب به Bikesandcode:

1. إنشاء flexpanel
2. قم بإنشاء Scrollpanel وإضافة FlexPanel إليه
3. قم بتعيين الحجم اللازم لل Scrollpanel (باستخدام وحدات CSS المطلقة)
4. قم بإنشاء SimplePanel وإضافة ScrollPanel إليه
5. أضف SimplePanel إلى Tabpanel

Answer 4

المشكلة هي في الواقع أن الجدول مضبوط على عرض / ارتفاع 100٪ عند تعيينه كطفل تبويب. إذا قمت بذلك، فلن يكون ل Overflow-Auto معنى أكبر لأنك تسمح بكونك المرن 100٪ (محتوياتها).

تجاوز العمل فقط إذا قمت بتعيين العرض / الارتفاع باستخدام وحدات البكسل.

Answer 5

أنا أستخدم HORIZONTALPANEL (الذي يوفره GOTS) كوالد قابل للتركيب واستخدام طريقة SetAutoheight (True). هذا يعمل بشكل جيد.