Question

如何在Google网络工具包（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>

我建议使用HorizontalPanel来显示字段的标签（ui：field =“label”），输入字段本身（ui：field =“myWidget”）和错误消息（ui：field =“errorMessage”）on一行，但也可以使用其他类型的面板，或者您可以使用CSS根据需要定位元素。

获取具有气球弹出窗口的自定义文本框

1 个答案: