¿Cómo se especifica un porcentaje de ancho en JavaFX 2 usando FXML?

Question

Estoy buscando una forma de decir establecer un tamaño maxWidth a 80% en FXML.

Mucho me gusta en el desarrollo web.

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

Pero esto no es así:
<VBox fx:id="testVB" prefWidth="80%">

Sé que en recta JavaFX2 no fxml puede crear inserciones? ¿Cuál es la mejor manera de hacer esto fuera del código en FMXL?

Gracias!

Riley

Answer 1

No estoy seguro de que pueda. Debe usar el componente de diseño GridPane. En este componente, puede especificar restricciones de filas y columnas, y en estas restricciones puede especificar un ancho como un porcentaje. Por ejemplo:

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

Este código define una GridPane con una primera columna con un ancho de 80%. El TitledPane se establece en la primera celda de la primera columna de este GridPane, y puede (porque debe estar seguro de que las restricciones de ancho del TitledPane coinciden con sus necesidades) ocupan el 80% del ancho del GridPane.

Tenga en cuenta que eliminé toda la información no relevante para su pregunta. Por cierto, la herramienta Oracle Builder Scene es muy útil para definir el diseño complejo de FXML.

Answer 2

Puede simularlo - ejemplo básico que simula 50% para dos cols en un HBox. Se pueden añadir paneles ficticias para obtener tercios, etc.

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

Parece que muchas respuestas ya han sido proporcionados y deben trabajar. Sin embargo , hay una manera de establecer porcentajes:

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

Esto ayudaría a detectar las dimensiones de la pantalla actual, se está mostrando en la solicitud. Ahora que tenemos las dimensiones de la pantalla, podemos jugar con él en FXML de la siguiente manera:

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

Nota que utilizo visualBounds, ya que esto me conseguiría el espacio disponible en la pantalla, ya no lo hago quiere una superposición con la barra de tareas en Windows, por ejemplo. Para aplicaciones de pantalla completa, simplemente usaría 'límites'.

Ahora, para llegar a su punto de uso de porcentajes, puede jugar con el valor de prefheight y prefWidth. Puede colocar cálculos dentro del $ {}.

Opcionalmente:

Si usted quiere tener todos sus elementos utilizan tamaños relativos, sólo se refieren a ellos, utilizando su ID y la anchura o la altura de la propiedad, y que su cálculo.

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

Hope this helps!