GWT：動態轉換Horizo​​ntalPanel到VerticalPAnel

Question

我如何編程轉換Horizo​​ntalPanel到VerticalPanel？可能嗎？

來源：

<g:HorizontalPanel ui:field="panel"> 

</g:HorizontalPanel> 

要：

<g:VerticalPanel ui:field="panel"> 

</g:VerticalPanel> 

Answer 1

請問以下工作的片段？ （沒有一個GWT環境設置進行測試）：

public SomeClass extends Composite { 

@UiField 
CellPanel panel; 

    public SomeClass() {  
     panel = new VerticalPanel; 
    } 
} 

甚至更​​好的你爲什麼不你ui.xml

<g:CellPanel ui:field="panel"> 

</g:CellPanel > 

使用和做任何你想要在Java代碼中（因爲Horizo​​ntalPanel和VerticalPanel是CellPanel的子類）？

Answer 2

不，這不是可能的方式你想象它。 一旦部件填充到DOM樹則不能動態地重新扮演他們 幾個解決方法建議

最差的做法可能

1. 複製垂直面板的孩子的名單部件
2. 刪除垂直來自DOM樹的面板
3. 改爲插入水平面板
4. 將垂直面板的所有子節點添加到水平面板

一種更好的方式

如果你可以在IE6，IE7的支持，你其實可以做的是使用<g:FlowPanel>與display: flex; 放棄這裏有一個例子給你：

<ui:style> 
.flexPanel{ 
    display: flex; 
} 
.vertical{ 
    flex-direction: column; 
} 
</ui:style> 
<!-- then in your uibinder--> 
<g:FlowPanel ui:field="panel" addStyleName="{style.flexPanel}"> 
<!-- will act as horizontal panel by default--> 
</g:FlowPanel> 

然後，你要改變方向的任何時間只是這樣做：

panel.addStyleName(style.vertical()); 
//or if you want it back to horizontal 
panel.removeStyleName(style.vertical()); 

爲了簡單起見，我沒有把CSS前綴彎曲的屬性，如果你的目標不僅是現代的瀏覽器，可以在前面兩類喜歡這裏：

.flexPanel{ 
display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
} 

.vertical{ 
-webkit-box-orient: vertical; 
    -webkit-box-direction: normal; 
    -webkit-flex-direction: column; 
    -ms-flex-direction: column; 
    flex-direction: column; 
} 

，是的，採取CSS很好看。不要使用那些舊的桌面佈局，現在是2016年。檢查這個簡單的文章，它幫助我們的球隊足夠快的轉變： https://css-tricks.com/snippets/css/a-guide-to-flexbox/