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甚至可以讓您實時調整樣式，這對於現場實驗非常方便。