CUBA屏幕設計師的佈局問題

我正在測試古巴平臺，我無法理解屏幕設計師的佈局選項。CUBA屏幕設計師的佈局問題

我想要均勻分佈表和twincolumns並在屏幕上對齊。（並在每個頂部添加標籤）

拉伸容器（vbox和hbox）最簡單的任務很困難。當我將高度/寬度設置爲100％時，內部物品均勻分佈在空間內。當我現在嘗試將vbox中表格的高度設置爲100％（希望它會拉伸）時，它會重置爲100px。

我也嘗試了網格組件，但是當我將其設置爲100％，列有所有同HIGHT（沒有良好的標籤）

也許我的理解（從XAML/C＃和MS-未來組件）是完全錯誤的。請告訴我，我怎麼可以創建一個視圖，並確保：

部件是否在同一高度（拉伸如果需要的話）
的組件排列
，整個畫面充滿

標籤標籤
表twincolum
艾伯塔省

由於reque STED一個簡單的形象 - 現在是什麼驅使我瘋了..

我還想添加一些代碼，我終於想出了 - 它還不是理想的事情：

<layout> 
    <hbox id="hboxexpand" 
      expand="assignTwinCol" 
      height="100%" 
      spacing="true" 
      width="80%"> 
     <table id="userTable" 
       height="100%" 
       **width="auto"**> 
      <columns> 
       <column id="value1" 
         caption="msg://1"/> 
       <column id="firstName" 
         description="msg://firstNameHeader"/> 
       <column id="lastName" 
         caption="msg://nameHeader"/> 
       <column id="active" 
         caption="msg://activeHeader"/> 
      </columns> 
      <rows datasource="userDs"/> 
     </table> 
     <twinColumn id="assignTwinCol" 
        addAllBtnEnabled="true" 
        height="100%" 
        optionsDatasource="myDs"/> 
    </hbox> 
</layout>

請注意：當我使用設計師****部分寬度=自動將每次重置爲200px！我只能在xml設計器中更改它

來源

2016-05-12 smack

你能繪製所需的佈局簡單的圖像？ – jreznot

我建議在此處查看佈局規則手冊：https://www.cuba-platform.com/tutorials/screen-layout-rules – jreznot

在繪製圖像之前，我會查看指南。看起來我正在使用相對大小太多。 '展開'可能會幫助我...... Thx的評論。 – smack

表沒有完全支持AUTO寬度，因爲列的寬度可以通過內容進行調整，所以我建議對錶使用固定寬度或相對寬度。

<layout> 
    <hbox expand="twinColumn" 
      height="100%" 
      spacing="true" 
      width="100%"> 

     <table id="userTable" 
       height="100%" 
       width="400px"> 
      <columns> 
       <column id="firstName"/> 
       <column id="lastName"/> 
       <column id="active"/> 
      </columns> 
      <rows datasource="usersDs"/> 
     </table> 

     <twinColumn id="twinColumn" 
        addAllBtnEnabled="true" 
        optionsDatasource="usersSelectDs" 
        height="100%"/> 
    </hbox> 
</layout>

如果你想設置標頭TwinColumn列，您可以使用展開方法和TwinColSelect的Vaadin API：

public class Screen extends AbstractWindow { 

    @Inject 
    private TwinColumn twinColumn; 
    @Inject 
    private Table<User> userTable; 

    @Override 
    public void init(Map<String, Object> params) { 
     super.init(params); 

     TwinColSelect colSelect = twinColumn.unwrap(TwinColSelect.class); 

     colSelect.setLeftColumnCaption("Header Left"); 
     colSelect.setRightColumnCaption("Header Left"); 

     Layout tableComposition = userTable.unwrapComposition(Layout.class); 
     tableComposition.setCaption("Table Header"); 
    } 
}

我們需要使我們的表和TwinColumn的頭。表格標題不具有TwinColumn標題具有的填充底部0.3em。我們可以使用樣式名添加填充該表：

<table id="userTable" 
     height="100%" 
     width="400px" 
     stylename="padding"> 
    <columns> 
     <column id="firstName"/> 
     <column id="lastName"/> 
     <column id="active"/> 
    </columns> 
    <rows datasource="usersDs"/> 
</table>

然後我們使用Studio中創建的主題擴展，並添加CSS定義暈ext.scss文件：

.v-caption.v-caption-padding { 
    padding-bottom: 0.3em; 
}

現在重新啓動應用程序和我們的頭對齊！

CUBA團隊計劃在下一個次要版本中爲組件添加caption和leftColumnCaption/rightColumnCaption屬性，並且您將能夠從XML/Screen Designer中分配它們。

參見：

來源

2016-06-27 09:00:45 jreznot

CUBA屏幕設計師的佈局問題

回答

相關問題