javafx - español - ¿Cómo enlazar el tamaño de la etapa con el cambio de tamaño de los componentes?

javafx scene builder tutorial español

Question

Tengo una aplicación JavaFX 2.0 con FXML. Quiero que los componentes (TextFields, ComboBoxes, diseños, etc.) cambien de tamaño cuando se cambie el tamaño de una ventana con una aplicación. Asi que...

• Como está escrito en la documentación de Oracle para JavaFX , para hacer algo como esto con formas, hay algunas propiedades especiales para las formas:

Al crear aplicaciones GUI con JavaFX, notará que ciertas clases en la API ya implementan propiedades. Por ejemplo, la clase javafx.scene.shape.Rectangle contiene propiedades para arcHeight , arcWidth , height , width , x e y . Para cada una de estas propiedades, habrá métodos correspondientes que coincidan con las convenciones descritas anteriormente. Por ejemplo, getArcHeight() , setArcHeight(double) , arcHeightProperty() , que en conjunto indican (tanto a los desarrolladores como a las herramientas) que la propiedad dada existe. *

• Para agregar un oyente a una etapa tengo que hacer algo como:

   stage.resizableProperty().addListener(new ChangeListener<Boolean>(){
  @Override
  public void changed(ObservableValue<? extends Boolean> arg0, Boolean arg1, Boolean arg2){
  throw new UnsupportedOperationException("Not supported yet.");
  }
  });

Así que hay dos preguntas:

• Para hacer algún enlace tengo que obtener mi etapa en la clase de controlador. Entonces, ¿cómo puedo obtener una etapa en una clase de controlador?
• Parece que los controles de la interfaz de usuario no tienen ninguna propiedad de ancho / altura, para estar vinculados a algo. O tal vez no los he encontrado.

Entonces, ¿cómo puedo resolver mi problema?

UPD . Acerca de Scene Builder a Sergey Grinev: Cuando uso Ctrl + K en mi componente (dígale que ocupe toda el área de su componente principal): todo está bien.

¿Pero qué pasa si quiero decirle a mi componente que ocupe el 50% de un área? Por ejemplo, tengo una pestaña con dos VBoxes en ella. El ancho de la pestaña es de 100px . Los anchos de Vbox son 50px para cada uno. VBox1 tiene x1 = 0 , y x2 = 50 , y VBox2 tiene x1 = 50 , y x2 = 100 . Luego redimensiono mi ventana con la aplicación JavaFX. Ahora tengo el ancho de la pestaña = 200px . Pero mis anchos de VBoxes siguen siendo = 50px : VBox1 tiene x1 = 0 , y x2 = 50 , y VBox2 tiene x1 = 150 , y x2 = 200 . Y necesito que sean VBox1 x1 = 0 y x2 = 100 y VBox2 x1 = 100 y x2 = 200 . Donde los valores x1 y x2 son las coordenadas de las esquinas VBoxes.

¿Cómo me puede ayudar Scene Builder en esta situación?

Answer 1

Algunas sugerencias para construir guis redimensionables =>

• Asegúrese de que la raíz de su aplicación sea una subclase de panel, en lugar de un grupo.
• Desmarque el tamaño máximo de los botones (por ejemplo, button.setMaxSize (Double.MAX_VALUE, Double.MAX_VALUE).
• La mayoría de las veces, los paneles de diseño pueden manejar el cambio de tamaño por usted y no necesita enlaces y escuchas => es decir, solo enlace cuando realmente lo necesita.
• Los controles de la interfaz de usuario y los paneles de diseño son regiones => todas las regiones tienen propiedades de alto y ancho de solo lectura que puede escuchar y vincular.
• No puede enlazar directamente las propiedades de alto y ancho de un control a otro valor. En su lugar, utilice las propiedades minWidth / Height, prefWidth / Height, maxWidth / Height.
• La escena tiene propiedades de altura y anchura a las que se puede enlazar si es necesario. Si haces esto, cuando se cambia el tamaño del escenario, se cambia el tamaño de la escena, luego se cambia el tamaño de los componentes enlazados. Si la raíz de su escena es un panel de diseño en lugar de un grupo, este enlace generalmente no es necesario.
• Si no establece una altura y una anchura en la escena, para una aplicación independiente, la escena (y el escenario) se ajustarán para adaptarse al tamaño preferido del nodo raíz de la escena (que suele ser lo que desea).
• Si todo lo demás falla, puede comenzar a anular el método layoutchildren de Parent.

Aquí hay un ejemplo de una interfaz de usuario JavaFX de tamaño variable que implementa algunos de los principios anteriores.

Answer 2

Otra opción fácil es usar JavaFX Scene Builder (recientemente disponible como beta pública: http://www.oracle.com/technetwork/java/javafx/tools/index.html )

Permite crear una interfaz de usuario arrastrando y soltando y anclando elementos de la interfaz de usuario a los bordes (mediante la herramienta de anclaje ), por lo que se mueven / cambian de tamaño con los bordes de la ventana.

ACTUALIZAR:

Para lograr un diseño de porcentaje de tamaño automático, puede usar GridPane con ColumnConstraint :

public void start(Stage stage) {
VBox box1 = new VBox(1);
VBox box2 = new VBox(1);
//random content
RectangleBuilder builder = RectangleBuilder.create().width(20).height(20);
box1.getChildren().addAll(builder.build(), builder.build(), builder.build());
builder.fill(Color.RED);
box2.getChildren().addAll(builder.build(), builder.build(), builder.build());
//half by half screen
GridPane grid = new GridPane();
grid.addRow(0, box1, box2);
ColumnConstraints halfConstraint = ColumnConstraintsBuilder.create().percentWidth(50).build();
grid.getColumnConstraints().addAll(halfConstraint, halfConstraint);
stage.setScene(new Scene(grid, 300, 250));
stage.show();
}

Answer 3

Sugerencias:

1. Si solo tiene una etapa principal, almacénela en un campo / variable estática mientras la aplicación se inicia y acceda a ella en todas las clases de controladores.
2. Puede colocar todos los controles / componentes en un diseño / panel que administre su diseño secundario automáticamente. Para diferentes diseños verifique la api doc. Después de eso, enlace las propiedades de ancho y alto de la escena del escenario a las propiedades de este diseño en consecuencia. Más información sobre el enlace en Uso de las propiedades y el enlace de JavaFX .
   Ejemplo de unión unidireccional