Question

我有一个简单登录页面的HTML文件

   <g:HTMLPanel>
 <div class="login">
    <div class="heading">
        <h2>Sign in</h2>
        <form action="#">
       <g:Label ui:field="lblError" styleName="errorFields"></g:Label>
            <div class="input-group input-group-lg">
                <span class="input-group-addon"><i class="fa fa-user"></i></span>
                <input type="text" class="form-control" placeholder="Username or email" ui:field="txtUserName"/>
            </div>
            <div class="input-group input-group-lg">
                <span class="input-group-addon"><i class="fa fa-lock"></i></span>
                <input type="password" class="form-control" placeholder="Password" ui:field="txtPassword"/>
            </div>
            <button type="submit" class="float" ui:field="btnSubmit">Login</button>
        </form>
    </div>
</div>

现在有一种方法可以在我的GWT中绑定它。我把这个Html放在我的uibinder.xml文件中...... 但后来它说了

   Type mismatch: cannot convert from InputElement to TextBox

但是，如果我将输入更改为GWT文本框，则整个样式会受到干扰。我希望在我的GWT中拥有与此html文件完全相同的样式/效果。

请建议。

Answer 1

首先，你收到的错误只是意味着你的java文件（对于这个uiBinder）你已经映射了txtUserName错误; 你的就像：

@UiField
TextBox txtUserName;

将其更改为

@UiField
InputElement txtUserName

但请注意 - InputElement将使用很少的函数。你可以“转换”这一行

<input type="text" class="form-control" ui:field="txtUserName"/>

到

<g:TextBox setStyleName="form-control" ui:field="txtUserName">

然后，您可以在java文件中设置占位符（在uiBinder调用后的构造函数中）： txtUserName.setAttribute（“占位符”，“用户名或电子邮件”）;

并确保您的样式未被GWT默认主题覆盖 - 请检查您的... gwt.xml文件不包含未注释的行：

<inherits name='com.google.gwt.user.theme.standard.Standard'/>

Answer 2

首先：是的，它可以绑定到现有的输入元素。我自己用它来创建一个登录表单，它应该能够允许自动填充用户名/密码。 （据我记得，只有在某些浏览器中才有可能，如果输入元素已经存在于HTML中包含的页面加载期间，而不是由GWT添加）。

您可以使用Qt docs和TextBox.wrap(element)创建一个绑定到现有输入元素的文本框：

Element elemUsername = DOM.getElementById("login_username");
Element elemPassword = DOM.getElementById("login_password");
txtUserName = TextBox.wrap(elemUsername);
txtPassword = PasswordTextBox.wrap(elemPassword);

因此，您必须删除HTML文件中的ui:field标记。

要么将@UiField注释更改为@UiField(provided = true)以获取java文件中的这些文本框，并将这些元素包装在表单的构造函数中 - 或者您必须完全删除此注释并绑定事件如果需要，可以手动（通过代码）。

有没有办法将html文件与我的GWT小部件绑定

2 个答案: