GWT面板类型的问题

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开发人员工具栏，Opera具有开发人员控制台等。您可以选择errant元素并查看其在层次结构中的位置以及适用于该元素的样式。 Firebug甚至可以让您实时调整样式，这对于现场实验非常方便。