Gwt自定义文本框有baloon弹出 [英] Gwt custom text box having baloon popup

问题描述

如何在Google网络工具包（gwt）中制作具有显示错误消息的气球功能的自定义文本框？

我正在使用Google网络工具包（gwt） java在eclipse上，我没有看到任何提供这种功能的函数。

解决方案

你应该实现你自己的复合。使用表单的输入来编写一个气球/工具提示。

以下是使用Gwt-bootstrap的文本区域的ui.xml示例。 （在简单的GWT中做同样的事情很简单，如果不是的话，我会很乐意将这个例子转换成）。 ui：UiBinder xmlns：ui =urn：ui：com.google.gwt.uibinder
xmlns：g =urn：import：com.google.gwt.user.client.ui
xmlns ：b = 瓮：导入：com.github.gwtbootstrap.client.ui >
< b：WellForm>
< b：Fieldset>
< b：ControlGroup>
< b：Label styleName =field_labelui：field =label/>
< b：TextArea ui：field =myWidget/>
< b：HelpInline ui：field =errorMessagevisible =false/>
< / b：ControlGroup>
< / b：Fieldset>
< / b：WellForm>

如果用balloon表示tooltip，则添加一个mouseOverHandler和一个mouseOutHandler来显示/隐藏错误消息（HelpInline在这里，但可以是任何小部件）当有显示。

如果您对此感到满意，您应该实现一些继承机制以重用此标签周围的所有内容

 < b：TextArea b：id =textAreaui：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：TextArea ui：field =myWidget/> 
 < / g：Horizo​​ntalPanel> 
  

我建议使用Horizo​​ntalPanel来显示字段的标签（ui：field =label），在一行上输入字段本身（ui：field =myWidget）和错误消息（ui：field =errorMessage）），但也可以使用其他类型的面板，或者可以使用CSS定位元素。

how to make a custom text box in Google web toolkit(gwt) having balloon feature of displaying error messages?

i am using Google web toolkit(gwt) in java on eclipse and i don't see any function providing this functionality.

解决方案

You should implement your own "composite". To "compose" a "balloon"/tooltip with the inputs of your form.

Here is an example of the ui.xml for a text area using Gwt-bootstrap. (Doing the same in plain GWT is straightforward, if not, I'll be glad to convert this example).

<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>

If by "balloon" you mean "tooltip", then add a mouseOverHandler and a mouseOutHandler to display/hide the error message (HelpInline here, but could be any widget) when there is one to display.

If you are satisfied with this you should implement some inheritance mechanism to reuse everything around this tag

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

for all kinds of widgets.

By using composite you can have a single line reused for all error messages ("balloons" or something else) for all your input widgets, and switch between HelpInline, Label, etc easily.

EDIT

The sample code with plain 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> 

I suggest using a HorizontalPanel to display the field's label (ui:field="label"), the input field itself (ui:field="myWidget") and the error message (ui:field="errorMessage") on one line, but other kind of panels are also possible, or you can use CSS to position the elements as you want.

这篇关于Gwt自定义文本框有baloon弹出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！