如何使用GWT 2.4對邊框進行垂直佈局？

我正在使用GWT 2.4和uiBinder。如何使用GWT 2.4對邊框進行垂直佈局？

我想獲得一組頁面中心的小部件與一個外部邊界垂直對齊的頁面。我認爲這很容易，但我需要在頁面中心使用垂直佈局來對齊小部件。

小部件按照我希望使用垂直面板的方式排列，但沒有可用的邊框選項，除非我想在每個使用borderwidth屬性的元素周圍放置邊框。

這裏是UiBinder的代碼：

<g:HTMLPanel ui:field="mainPanel"> 
     <g:VerticalPanel ui:field="verticalPanel" styleName="{style.center}"> 
         <g:Label ui:field="titleLabel"></g:Label> 
         <g:Label ui:field="loggedInUserLabel" text="You are logged in as: "> </g:Label> 
         <g:Label ui:field="userNameLabel" styleName="{style.spacer-bottom}"></g:Label> 

         <g:FormPanel ui:field="formPanel" styleName="{style.spacer-bottom}"> 
         <g:FileUpload ui:field="fileUpload"></g:FileUpload> 
         </g:FormPanel> 

         <g:Label ui:field="Label" text="Please select:"></g:Label> 

         <g:ListBox ui:field="ListBox" styleName="{style.spacer-bottom}" visibleItemCount='5'> 
          <g:item value="-1">-- Please select item(s) below: --</g:item> 
         </g:ListBox> 

         <g:Button ui:field="Button" styleName="{style.button}" text="Calculate"></g:Button> 

         <g:HorizontalPanel ui:field="horizontalPanel" styleName="{style.spacer-top}"> 
          <g:cell width='5em' horizontalAlignment="ALIGN_LEFT"> 
           <g:Button ui:field="cancelButton" styleName="{style.exitcancelbutton}" text="Cancel"></g:Button> 
          </g:cell> 
          <g:cell width='5em' horizontalAlignment="ALIGN_RIGHT"> 
           <g:Button ui:field="exitButton" styleName="{style.exitcancelbutton}" text="Exit"></g:Button> 
          </g:cell>     
         </g:HorizontalPanel> 
       </g:VerticalPanel> 
    </g:HTMLPanel>

難道我設計這個錯，我的意思是使用了錯誤的面板中，我想要做什麼？

來源

2011-11-23 James Drinkard

好的，我自己想出了這一個。作爲一名java開發人員，我需要更多地關注CSS解決方案，但是經過一番思考之後，CSS是實現這一目標的正確方法。我要把它放到我的CSS：

.mainPanel { 
      width: 400px ; 
      margin-left: auto ; 
      margin-right: auto ; 
      border: 1px solid black; 
      padding: 2px; 
      margin-bottom:6px; 
     }

，然後我利用最上面的板，這是我的主容器，（在HTMLPanel），並應用該樣式到它：

<g:HTMLPanel ui:field="mainPanel" styleName="{style.mainPanel}"> 
      <table width="30%" align="center"> 
       <tr> etc...

它的中心在頁面，並有像我想要的邊框。我通常偏愛習慣的桌面佈局，但它似乎適用於我想要的東西。

來源

2011-11-30 15:41:43

您可以爲verticalpanel的borderwidth設置邊框，以便所有添加到它的小部件都將顯示爲具有邊框。

來源

2011-11-25 02:25:28 Ashok

我不認爲這將與uiBinder一起作爲解決方案。請查看我使用的代碼。 –

對不起詹姆斯。請忽略我的回答。 – Ashok

如何使用GWT 2.4對邊框進行垂直佈局？

回答

相關問題