الكائن المركز على الشاشة باستخدام المغلق فقط في GWT2.0 تخطيط / uibinder العالم

Question

وهناك عدد قليل من الطرق هناك في الإنترنت لمركز شيء على الشاشة عن طريق المغلق (هوامش هاء، الجدول خلية الإختراق الخ). كنت سعيدا جدا مع أنه حتى الآن عندما أردت أن تستخدم الأم تخطيط gwt2.0 وحات / الحاجيات. تخيل أنك تريد أن تفعل شاشة "تحميل" لإظهار دائرة الغزل حتى يحاول التطبيق لمعرفة إلى أين ترسل المستعمل المقبل (في خلفية التطبيق هو التحقق إذا تم تسجيل مستخدم في أم لا).

ولدي هذا الرمز في منسوب المياه الجوفية uiBinder XML:

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
         xmlns:g='urn:import:com.google.gwt.user.client.ui'>

  <ui:with field='res' type='ru.atamur.resources.CommonBundle'/>

  <g:HTMLPanel>
    <g:Image resource='{res.loader}'/>
  </g:HTMLPanel>

</ui:UiBinder>

وأريد أساسا على الصورة ليتم عرضها في وسط الشاشة عموديا وأفقيا.

وأي أفكار مشرق كيفية تحقيق ذلك ث / س البرمجة getWidth / setHeight وما إلى ذلك؟

وشكرا.

Answer 1

في نهاية كنت قادرا على استخدام المغلق العام بمساعدة HTMLPanel:

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
             xmlns:g='urn:import:com.google.gwt.user.client.ui'>

    <ui:with field='res' type='ru.atamur.resources.CommonBundle'/>

    <g:HTMLPanel>
        <div class="{res.centerStyle.container}">
            <p class="{res.centerStyle.centered}">
                <g:Image resource='{res.loader}'/>
            </p>
        </div>
    </g:HTMLPanel>

</ui:UiBinder>

وحيث المغلق (مرتبط عبر حزمة) المقابلة هي:

.container {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    display: table
}

.centered {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

والوحيد التلميح هنا كانت الدعوة ensureInjected في منشئ القطعة المقابلة (انظر <لأ href = "http://code.google.com/p/google-web-toolkit/issues/detail؟id=4408" يختلط = "noreferrer نوفولو"> http://code.google.com/p/google-web-toolkit/issues/detail؟id=4408 للحصول على مزيد من التفاصيل):

@UiField CommonBundle res;

public LoadingScreen() {
    initWidget(uiBinder.createAndBindUi(this));
    res.centerStyle().ensureInjected();
}

Answer 2

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

وGWT لديه PopupPanel، الأمر الذي يجعل ما نحاول القيام به بسيط جدا.

// A popup that doesn't auto-hide, and doesn't let the
// user click on anything else.
PopupPanel popup = new PopupPanel(false,true);
popup.setGlassEnabled(); // Dims the rest of the page
popup.setWidget(new Image(res.loader()));
popup.center(); // Show popup centered

وبعد ذلك يمكنك فقط popup.hide المكالمة () عند الانتهاء من ذلك.

Answer 3

ويمكن أيضا أن يتم توسيط العناصر باستخدام UIBinder دون CSS:

<g:HorizontalPanel width="100%" height="100%">
 <g:cell horizontalAlignment="ALIGN_CENTER" verticalAlignment="ALIGN_MIDDLE">
  <g:Label>Hello Center</g:Label>
 </g:cell>
</g:HorizontalPanel>