java - 具有气球弹出功能的 Gwt 自定义文本框

Question

如何在 Google web toolkit(gwt) 中制作具有显示错误消息的气球功能的自定义文本框？

我在 eclipse 上的 java 中使用 Google web toolkit(gwt)，我没有看到任何提供此功能的函数。

Answer 1

您应该实现自己的“复合”。用表单的输入“组合”一个“气球”/工具提示。

这是使用 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="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> 

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