Layout Probleme mit CUBA Bildschirm Designer

Question

Ich teste die Cuba-Plattform und ich habe Probleme beim Verständnis der Layout-Optionen innerhalb der Bildschirm-Designer.

Ich versuche Tabellen und Doppelsäulen gleichmäßig und über den Bildschirm ausgerichtet zu verteilen. (Und fügen Sie ein Etikett über jedem)

Die einfachste Aufgabe der Dehnung der Container (Vbox und Hbox) ist schwierig. Wenn ich Höhe/Breite auf 100% setze, sind die Objekte innerhalb des Raums gleichmäßig verteilt. Wenn ich jetzt versuche, die Höhe der Tabelle innerhalb der vbox auf 100% zu setzen (in der Hoffnung, dass sie sich dehnen würde), wird sie auf 100px zurückgesetzt.

Ich habe auch versucht die Netzkomponente, aber wenn ich es auf 100% die Spalten haben, sind alle die gleiche Höhe (nicht gut für label)

Vielleicht mein Verständnis (aus Richtung XAML/C# und die MS- Komponenten) ist völlig falsch. Bitte sagen Sie mir, wie kann ich eine Ansicht erstellen und sicherstellen:

• , dass die Komponenten in der gleichen Höhe (gedehnt, wenn es sein muss) sind
• , dass die Komponenten
• , dass der gesamte Bildschirm ausgefüllten ausgerichtet sind, ist

label label
Tabelle twincolum
OkCancel

Als reque ein einfaches Bild sted - von dem, was jetzt macht mich verrückt ..

Id gerne einige Code hinzufügen ich kam mit schließlich - Sein noch nicht die ideale Sache:

<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> 

Bitte beachten Sie: Bei Ich benutze den Designer die **** Teilbreite = Auto wird jedes Mal auf 200px zurückgesetzt! Ich kann das nur im XML-Designer ändern

Answer 1

Tabelle hat keine volle Unterstützung der AUTO-Breite, da die Breite der Spalten nach Inhalt angepasst werden kann, so würde ich empfehlen, feste oder relative Breite für eine Tabelle zu verwenden.

<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> 

Wenn Sie für TwinColumn Spalten-Header setzen Sie unwrap Methoden und Vaadin API von TwinColSelect verwenden:

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"); 
    } 
} 

Wir müssen unsere Header der Tabelle und TwinColumn auszurichten. Die Tabellenüberschrift hat keinen padding-bottom 0.3em, den TwinColumn-Header haben. Wir können Polsterung mit Stylenamen für die Tabelle hinzu:

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

Dann erstellen wir Thema Erweiterung Studio verwenden und CSS-Definition in der Halo-ext.scss Datei:

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

nun die Anwendung und unsere Header neu starten Sind ausgerichtet!

Das CUBA-Team plant, die Attribute caption und leftColumnCaption/rightColumnCaption für Komponenten in der nächsten Minor-Version hinzuzufügen, und Sie können sie aus XML/Screen Designer zuweisen.auch

Siehe:

• https://doc.cuba-platform.com/manual-6.2/webComponentsHelper.html
• https://vaadin.com/api/com/vaadin/ui/TwinColSelect.html