Question

提前感谢您的帮助。

我正在尝试为GWT应用程序创建符合w3c标准的HTML / CSS界面，其中很大一部分依赖于在正确的位置使用正确类型的面板，而不是使用写出表格的嵌套水平和垂直面板在UI中。

我在GWT总计n00b并且无法弄清楚为什么在下面的代码中替换顶部垂直面板会导致应用程序停止工作。任何UI编码资源，任何形式的建议都将非常感激。

<g:VerticalPanel>
    <g:FormPanel ui:field="loginFormPanel" action="/cms/j_acegi_security_check.rpc" >
      <g:HTMLPanel>     

          <g:Label ui:field="signinLabel" styleName="{style.signinStyle}">
            <ui:msg key="signInText">Welcome to Perform CMS</ui:msg>
          </g:Label> 



          <g:Label ui:field="emailLabel" styleName="{style.loginFontStyle}">
            <ui:msg key="emailAddress">Email adress</ui:msg>
            address
          </g:Label>  

            <g:TextBox ui:field="email" name="j_username" styleName="{style.loginTextBoxStyle}"/>

            <g:Label styleName="{style.fontStyle}" ui:field="usernameError"/>

          <g:Label ui:field="passwordLabel" styleName="{style.loginFontStyle}">
            <ui:msg key="password">Password</ui:msg>
          </g:Label>         

            <g:PasswordTextBox ui:field="password" name="j_password" styleName="{style.loginTextBoxStyle}"/>

            <g:Label styleName="{style.fontStyle}" ui:field="passwordError"/>


        <g:HTMLPanel ui:field="submitPanel">
            <g:HTMLPanel ui:field="submitButtonPanel" styleName="{style.buttonPanelStyle}">
              <g:Image url="/cms/images/new_button_search_left.png" styleName="{style.image}"></g:Image>
              <g:Label ui:field="signIn" styleName="{style.submitLabelStyle}">
                <ui:msg key="signIn">Sign in</ui:msg>
              </g:Label>
              <g:SubmitButton styleName="{style.hide}">Submit</g:SubmitButton> 
              <g:Image url="/cms/images/new_button_search_right.png" styleName="{style.image}"></g:Image>
            </g:HTMLPanel>
        </g:HTMLPanel>


        <g:HTMLPanel ui:field="submitErrorsPanel" styleName="{style.submitErrorPanel}">

          <g:Label styleName="{style.fontStyle}" ui:field="submitErrorMessages"/>
        </g:HTMLPanel>


      </g:HTMLPanel>
    </g:FormPanel> 
    <g:HTMLPanel ui:field="loginSuccessPanel" styleName="{style.hide}">
      <g:Label styleName="{style.fontStyle}" ui:field="loginSuccessMessageLabel"/>
   </g:HTMLPanel>
  </g:VerticalPanel>

Answer 1

您没有说明您的应用程序如何停止工作，但GWT编译器会为项目的gwt.xml中指定的每个用户代理生成不同的JS。默认情况下，程序可能有5个或6个不同版本，而正确的版本在运行时决定。存在这些版本是因为浏览器中没有W3C兼容性。一个浏览器可能比其他浏览器更接近，但都有他们的怪癖，GWT试图隐藏你。

根目录下的GWT垂直面板通常会变成一个表，每个子节点都是一行中的一个单元格。请注意，您仍然需要XML中的根元素，但它可以是流或html面板。从垂直面板改变可能会导致子元素横向流动或做其他奇怪的事情。如果您希望它们保持垂直，您可以在它们之间抛出<br>，或者为封闭的<div>设置样式。

布局问题最好的办法是在浏览器中安装一个工具，以便检查DOM。例如，Firefox有Firebug，IE有IE Developer Toolbar，Opera有开发者控制台等。您可以选择错误元素并查看它在层次结构中的位置以及适用于该元素的样式。 Firebug甚至可以让你实时调整样式，这对于现场实验来说非常方便。

GWT面板类型的问题

1 个答案: