GWT面板類型的問題

Question

在此先感謝您的幫助。

我目前正在嘗試爲GWT應用創建符合W3C標準的HTML/CSS界面，其中大部分依賴於在正確的位置使用正確類型的面板，而不是使用嵌套的水平和垂直面板寫出用戶界面中的表格。

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