Come specificare una percentuale di larghezza in JavaFX 2 usando FXML?

Question

Sto cercando un modo per dire di impostare una dimensione maxWidth all'80% in FXML.

Molto simile allo sviluppo web.

<VBox fx:id="testVB" prefWidth="600">

Ma questo non lo fa:
<VBox fx:id="testVB" prefWidth="80%">

so che in rettilineo JavaFX2 non fxml è possibile creare inserti? Qual è il modo migliore per farlo al di fuori del codice in FMXL?

Grazie!

Riley

Answer 1

Non sono sicuro che sia possibile. È necessario utilizzare il componente di layout GridPane. In questo componente, è possibile specificare i vincoli di righe e colonne e in questi vincoli è possibile specificare una larghezza come percentuale. Ad esempio:

<GridPane> 
    <children> 
     <TitledPane text="testGridPane" GridPane.columnIndex="0" GridPane.rowIndex="0" /> 
    </children> 
    <columnConstraints> 
     <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="80.0" prefWidth="100.0" /> 
     <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" percentWidth="20.0" prefWidth="100.0" /> 
    </columnConstraints> 
    <rowConstraints> 
     <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" /> 
    </rowConstraints> 
</GridPane> 

Questo codice definisce una GridPane con una prima colonna con una larghezza di 80%. Il TitledPane è impostato nella prima cella della prima colonna di questo GridPane e può (poiché è necessario assicurarsi che i limiti di larghezza di TitledPane corrispondano alle proprie esigenze) occupi l'80% della larghezza dello GridPane.

Si prega di notare che ho rimosso tutte le informazioni non pertinenti alla tua domanda. A proposito, lo strumento Oracle's Scene Builder è molto utile per definire il layout FXML complesso.

Answer 2

È possibile simularlo - esempio di base che simula il 50% per due colonne in un HBox. È possibile aggiungere riquadri fittizi per ottenere terzi, ecc

HBox { 
     VBox { 
      static hgrow : "ALWAYS", 
      Label { 
       text : "Privacy", 
       alignment : "CENTER", 
       styleClass : ["h2", "heading"] 
      } 
     }, 
     VBox { 
      static hgrow : "ALWAYS", 
      Label { 
       text : "Messages", 
       alignment : "CENTER", 
       styleClass : ["h2", "heading"] 
      }, 
      Label {text:""} 
     } 
    } 

Answer 3

Sembra che molte risposte sono già state erogate e dovrebbero lavorare. Tuttavia, c'è un modo per impostare percentuali:

<fx:define> 
    <Screen fx:factory="getPrimary" fx:id="screen" /> 
</fx:define> 

Questo aiuterebbe a rilevare le dimensioni dello schermo corrente, è visualizzato sulla domanda. Ora che abbiamo le dimensioni del display, possiamo giocare con essa in FXML come segue:

<HBox fx:id="hroot" prefHeight="${screen.visualBounds.height}" prefWidth="${screen.visualBounds.width}"> Your FXML elements inside the root... </HBox> 

Nota che uso visualBounds, dal momento che questo mi avrebbe ottenere lo spazio disponibile sullo schermo, dal momento che non lo faccio per esempio, vuoi una sovrapposizione con la barra delle applicazioni in Windows. Per le applicazioni a schermo intero, devi solo usare 'limiti'.

Ora, per arrivare al punto in cui utilizzi le percentuali, puoi effettivamente giocare con il valore di prefheight e prefWidth. È possibile inserire calcoli all'interno dello $ {}.

Opzionalmente:

Se si desidera avere tutti gli elementi utilizzano dimensioni relative, basta fare riferimento a loro, utilizzando il loro ID e la larghezza o l'altezza di proprietà, e rendere il vostro calcolo.

<VBox fx:id="VBSidebar" prefWidth="${hroot.width*0.15}" prefHeight="${hroot.height}"> more elements.. </VBox> 

Spero che questo aiuti!