Gwt персонализирано текстово поле с изскачащ балон

Трябва да внедрите свой собствен "композит". За да „съставите“ „балон“/подсказка с входовете на вашия формуляр.

Ето пример за ui.xml за текстова област, използваща Gwt-bootstrap. (Да се ​​направи същото в обикновен GWT е лесно, ако не, ще се радвам да конвертирам този пример).

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui"
    xmlns:b="urn:import:com.github.gwtbootstrap.client.ui">    
<b:WellForm>
        <b:Fieldset>
            <b:ControlGroup>
                <b:Label styleName="field_label" ui:field="label" />
                <b:TextArea ui:field="myWidget"/>
                <b:HelpInline ui:field="errorMessage" visible="false" />                    
            </b:ControlGroup>
        </b:Fieldset>
    </b:WellForm>

Ако под „балон“ имате предвид „подсказка“, тогава добавете mouseOverHandler и mouseOutHandler, за да покажете/скриете съобщението за грешка (HelpInline тук, но може да бъде всяка джаджа), когато има такава за показване.

Ако сте доволни от това, трябва да приложите някакъв механизъм за наследяване, за да използвате повторно всичко около този етикет

<b:TextArea b:id="textArea" ui:field="textArea"/>

за всички видове джаджи.

Чрез използването на композитен можете да имате един ред, използван повторно за всички съобщения за грешка („балони“ или нещо друго) за всичките ви приспособления за въвеждане и лесно да превключвате между HelpInline, Label и т.н.

РЕДАКТИРАНЕ

Примерният код с обикновен GWT

 <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
        xmlns:g="urn:import:com.google.gwt.user.client.ui">   
 <g:HorizontalPanel ui:field="widgetContainer">
      <g:Label styleName="field_label" ui:field="label" />
      <g:TextArea ui:field="myWidget"/>
      <g:Label ui:field="errorMessage" visible="false" />
 </g:HorizontalPanel> 

Предлагам да използвате HorizontalPanel за показване на етикета на полето (ui:field="label"), самото поле за въвеждане (ui:field="myWidget") и съобщението за грешка (ui:field="errorMessage") на един ред, но са възможни и други видове панели или можете да използвате CSS, за да позиционирате елементите, както желаете.