احصل على عنصر واجهة مستخدم Uibinder لعرضه بدلاً من الكتلة

Question

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

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' xmlns:g='urn:import:com.google.gwt.user.client.ui'>
  <ui:style>
    .section {
      border: 1px solid #000000;
      width: 330px;
      padding: 5px;
      display: run-in;
    }
  </ui:style>

  <g:HTMLPanel>
    <div class="{style.section}">
      <div ui:field="titleSpan" class="{style.title}" />
      <div class="{style.contents}">
        <g:VerticalPanel ui:field="messagesPanel" />
      </div>
    </div>
  </g:HTMLPanel>
</ui:UiBinder>

يعمل هذا بشكل جيد من حيث كيف تبدو القطعة داخليًا ، لكنني أريد أن أرمي مجموعة من هذه الأدوات المصغرة في FlowPanel وجعلها تتدفق عند تغيير حجم النافذة. htmlpanel هو div ، لكن لا يمكنني الحصول على سمة العرض لتعيينها. لا يمكنني فرض اسم النمط ، لأن ما يلي يلقي خطأ:

<g:HTMLPanel styleNames="{style.section}">

ويمكنني تعيين نمط إضافي ، لكنه لا يطبق إعداد العرض.

<g:HTMLPanel addStyleNames="{style.section}">

هذا يعرض الحدود ويضع الحجم ، كما هو متوقع ، لكنه لا يتدفق. تُظهر Firebug الأنماط الموجودة على Div هي الحدود والعرض والحشو ، ولكن لا توجد شاشة.

هل هناك طريقة لصنع عنصر واجهة مستخدم في Uibinder بحيث سيتم عرضها على الخط بدلاً من الكتلة؟ وإذا كان الأمر كذلك ، هل يمكنني جعلها متوافقة مع وجود verticalpanel في الداخل (هل يمكنني القيام بذلك دون عمل عنصر واجهة مستخدم كاملة HTML بدون أي مصغاة GWT)؟

ملاحظة: رأيت سؤالا 2257924 لكن لم يكن لديه أي إجابات مؤخرًا ، ويبدو أنه يركز على الحصول على علامة ، وليس على وجه التحديد الحصول على تخطيط مضمّن. لا يهمني مباشرة ، إذا كان بإمكاني الحصول على العلامة ذات المستوى الأعلى لتدفق عنصر واجهة المستخدم الخاصة بي ، فأنا سعيد.

Answer 1

يبدو أن مشكلتك ناتجة عن استخدام display: run-in بدلا من أكثر "القياسية" display: inline. بمعنى آخر و Firefox لا تدعم run-in ويبدو أن Firebug يزحدر الأسلوب عند الإضافة.

حاول تغيير النمط إلى display: inline (أو inline-block إذا كنت تريد بعض خصائص الكتلة ، مثل العرض ، ولكن احذر من المراوغات من IE + inline-block).

Answer 2

يجب أن يكون <g:HTMLPanel styleName="{style.section}">, ، ليس <g:HTMLPanel styleNames="{style.section}"> - أسماء Stylenames هي خطأ مطبعي (يظهر في مستندات Uibinder ، لذلك أنا متأكد من أن هذا هو المكان الذي حصلت عليه منه). اسم Stylename هو الشيء الصحيح الذي يجب استخدامه.

أيضًا ، Igor Klimer صحيح أنه يجب عليك استخدامه display: inline أو display: inline-block عوضا عن display: run-in.

بشكل عام ، يمكنك معرفة أسماء السمات المتاحة من خلال البحث عن أساليب setxxx على UiObject الفصل ، واسم السمة هو فقط xxx. لذا، UIObject لديه setStyleName الطريقة التي تصل إليها باستخدام السمة المسمى styleName.