Extraños anchos de control en JavaFX 2?

Question

Soy nuevo en JavaFX 2 y estoy confundido acerca de los anchos predeterminados de ComboBox y ListView. Esperaría que el ComboBox fuera más ancho, de modo que el texto "el texto del mensaje" fuera completamente visible, para el ListView esperaría que fuera más pequeño, solo que fuera tan ancho como fuera necesario. Código y captura de pantalla siguientes a continuación.

1) ¿Cómo puedo lograr que tanto ComboBox como Listview tengan el ancho que necesitan?

2) Cómo hacer que ambos controles tengan el mismo ancho (por lo tanto, el máximo fuera de ambos anchos), ¿es posible crear algún tipo de vínculo entre los anchos de ambos? Estoy buscando especialmente una solución elegante para FXML.

¡Gracias por cualquier pista!

@Override 
public void start(Stage primaryStage) { 
    ComboBox<String> comboBox = new ComboBox<String>(); 
    comboBox.setPromptText("the prompt text"); 
    ObservableList<String> items = FXCollections.observableArrayList(); 
    items.addAll("item 1", "item 2"); 
    comboBox.setItems(items); 

    ListView<String> list = new ListView<String>(); 
    ObservableList<String> items2 =FXCollections.observableArrayList (
     "blue", "red"); 
    list.setItems(items2); 

    VBox vBox = new VBox(); 
    vBox.getChildren().addAll(comboBox, list); 

    primaryStage.setScene(new Scene(vBox, 200, 300)); 
    primaryStage.show(); 
} 

Answer 1

1) Tratar de establecer minWidth(x), prefWidth(x), maxWidth(x). Eso ayuda, pero no estoy seguro de que sea una buena decisión.

2) Utilice el método void bind(ObservableValue<? extends Number> observable); del marco vinculante. Fue desarrollado solo para tales casos. Ejemplo:

someProperty.bind(otherProperty); 

También puede utilizar el enlace bidireccional para vincularlos.

Answer 2

2) Cómo hacer que ambos controles tengan el mismo ancho (por lo tanto, el máximo de ambos anchos), ¿es posible crear algún tipo de vínculo entre los anchos de ambos? Estoy buscando especialmente una solución elegante para FXML.

Parece que, por defecto, ListView tiene su maxWidth ilimitado, pero ComboBox tiene su maxWidth fijado al ancho de su lista de elementos inicial. Para que estos controles tengan el mismo ancho, la forma más fácil de hacerlo es colocarlos en un administrador de diseño (como lo ha hecho, el VBox) y luego liberar el maxWidth de comboBox.

En el código se puede hacer esto:

comboBox.setMaxWidth(Double.MAX_VALUE); 

En FXML añadir el siguiente attibute definición a su elemento de ComboBox:

maxWidth="Infinity" 

Usted puede utilizar la solución de unión del John Gray, pero encontrar la por encima más elegante.

1) ¿Cómo puedo lograr que tanto ComboBox como Listview tengan el ancho que necesitan?

Creo que lo que está preguntando aquí es cómo hacer que el combobox y la vista de lista solo ocupen todo el espacio que necesiten y nada más. Esto es, creo que es un poco complicado, y la plataforma JavaFX no proporciona mucho soporte para esto.

Aquí hay algunos ejemplos de código para fijar el tamaño del listbox al mínimo requerido.

import javafx.application.Application; 
import javafx.collections.FXCollections; 
import javafx.scene.*; 
import javafx.scene.control.ComboBox; 
import javafx.scene.control.ListView; 
import javafx.scene.layout.GridPane; 
import javafx.scene.layout.Priority; 
import javafx.stage.Stage; 

public class GridControlWidths extends Application { 
    public static void main(String[] args) throws Exception { launch(args); } 
    @Override public void start(Stage stage) { 
    ComboBox<String> comboBox = new ComboBox<String>(FXCollections.observableArrayList("item 1", "item 2")); 
    comboBox.setPromptText("the prompt text"); 

    ListView<String> list = new ListView<String>(FXCollections.observableArrayList ("blue", "red")); 

    // layout the controls in a grid with appropriate constraints. 
    GridPane grid = new GridPane(); 
    grid.add(comboBox, 0, 0); 
    grid.add(list, 0, 1); 
    grid.setVgrow(list, Priority.ALWAYS); // make the list grow vertically as much as possible 

    // unclamp the max width of the combo box. 
    comboBox.setMaxWidth(Double.MAX_VALUE); 

    // display the scene. 
    stage.setScene(new Scene(grid, 200, 300)); 
    stage.show(); 

    // set the prefWidth of the listview based on the list cells (allowing 8 pixels for padding of the cells). 
    double maxWidth = 0; 
    for (Node n: list.lookupAll(".text")) { 
     maxWidth = Math.max(maxWidth, n.getBoundsInParent().getWidth() + 8); 
    } 
    list.setPrefWidth(maxWidth); 
    } 
} 

Fwiw, creo que un enfoque que se recomienda cuando sólo hay unos pocos elementos consiste en poner los artículos en una caja vertical en lugar de utilizar un ListView o una ChoiceBox en lugar de un cuadro combinado, de esa manera no es necesario para realizar la introspección de la celda y actualizar el ancho preferido todo el tiempo, ya que el administrador de diseño y los controles se encargarán de resolverlo. ListView está optimizado para manejar el caso de una lista virtualizada que puede contener miles de elementos de tamaño arbitrario para los cuales no podrá calcular fácilmente el ancho de diseño, por lo que creo que viene con el comportamiento de tamaño de control predeterminado que no lo hace Ajústalo al tamaño mínimo que pueda tener. Por lo general, cuando se usa un ListView, se elige un prefWidth razonable para listView y se establece en listView en lugar de introspección de los elementos como se muestra en el ejemplo anterior.

Además, la imagen que tiene donde se recorta parte del texto del mensaje, me parecería (a mí) un error en JavaFX donde no calcula correctamente el ancho preferido para el control ComboBox cuando el texto del indicador ComboBox es más ancho que el texto del elemento ComboBox. Como ComboBox es actualmente un nuevo control y he visto este tipo de problemas en compilaciones anteriores de controles JavaFX y se arreglaron, esperaría que el cálculo de ancho preferido para ComboBox se solucione razonablemente pronto.