Fisarmonica JavaFX con più riquadri aperti

Question

È possibile avere una fisarmonica con più di 1 riquadro aperto in JavaFX?

Answer 1

No, un JavaFX 2.2 Accordion può avere solo un riquadro aperto alla volta.

Ho creato una richiesta di miglioramento (JDK-8090554 StackedTitledPanes control) per una funzionalità che consente di aprire più di un riquadro nella fisarmonica alla volta, tuttavia la richiesta di funzione non è attualmente implementata.

Nel frattempo, è possibile creare facilmente un controllo simile creando più istanze TitledPane e inserendole in un VBox.

private VBox createStackedTitledPanes() { 
    final VBox stackedTitledPanes = new VBox(); 
    stackedTitledPanes.getChildren().setAll(
    new TitledPane("Pane 1", contentNode1), 
    new TitledPane("Pane 2", contentNode2), 
    new TitledPane("Pane 3", contentNode3) 
); 
    ((TitledPane) stackedTitledPanes.getChildren().get(0)).setExpanded(true); 

    return stackedTitledPanes; 
} 

Se necessario, è possibile avvolgere il VBox che contiene i riquadri in un ScrollPane, in modo che il contenuto di tutte le lastre espanse possono essere utilizzabile se la loro zona trabocca l'area disponibile.

Ho creato un sample solution (icone sono collegamenti da: http://www.fasticon.com).

Answer 2

ho avuto un po 'diverse esigenze

1. La fisarmonica sia espande o gestisce lo spazio di visualizzazione per le viste incorporate
2. L'intera vista può essere messo in una vista di scorrimento
3. Ogni la casella si espande completamente alla dimensione dell'intera vista, se la fisarmonica è di dimensioni fisse, o si espande alla dimensione del contenuto, se non è una vista fissa.

Anche se nel mio caso, non ero in grado di soddisfare tutte le 3. e test 2., sono stato in grado di venire con la seguente correzione:

1) Utilizzare uno ScrollPane, con un VBox all'interno, con TitledWindows all'interno. 2) Assicurati che TitledPanes sia impostato su VBox.grow = "SOMETIMES". 3) Aggiungi un VBox come ultimo elemento e imposta VBox.vgrow = "SEMPRE" - questo spinge il TitledPanes fino alla dimensione minima. Tutti gli altri ha fornito esempi di codice, se si desidera utilizzare fxml, o non vogliono usare Java, usando solo gli elementi direttamente funziona altrettanto bene (generate con SceneBuilder):

<ScrollPane fitToHeight="true" fitToWidth="true" prefHeight="200.0" prefWidth="200.0" BorderPane.alignment="CENTER"> 
    <content> 
     <VBox fx:id="leftVBox" maxHeight="1.7976931348623157E308" prefHeight="200.0" prefWidth="100.0"> 
      <children> 
       <TitledPane fx:id="titledPanelOne" animated="false" expanded="false" style="-fx-background-color: red;" text="Pane One" VBox.vgrow="SOMETIMES"> 
       <content> 
        <ListView fx:id="listViewOne" maxHeight="1.7976931348623157E308" prefHeight="200.0" prefWidth="200.0" /> 
       </content> 
       </TitledPane> 
       <TitledPane fx:id="titledPanelTwo" animated="false" expanded="false" style="-fx-background-color: green;" text="Pane Two" VBox.vgrow="SOMETIMES"> 
       <content> 
        <ListView fx:id="listViewTwo" maxHeight="1.7976931348623157E308" prefHeight="200.0" prefWidth="200.0" /> 
       </content> 
       </TitledPane> 
       <VBox prefHeight="0.0" prefWidth="0.0" VBox.vgrow="ALWAYS" /> 
      </children> 
     </VBox> 
    </content> 
</ScrollPane> 

4) Anche se questo ottenere caselle impilate che si espandono/si contraggono indipendentemente l'una dall'altra, questo non risolve il problema in cui si hanno caselle che non vengono ridimensionate in modo appropriato ai loro contenuti (se ad esempio si ha una Vista Elenco incorporata come nell'esempio precedente), e quindi ora devi scorrere un bel po 'quando è rimasto molto spazio sullo schermo. La soluzione? È richiesto un po 'di Java.

Per implementare questa correzione, per prima cosa leghiamo del maxHeightProperty() TitledPane a quello del VBox esterno heightProperty():

public class Controller implements Initializable { 
    //... controller code 
    @Override 
    public void initialize(URL location, ResourceBundle resources) { 
    //... 
    variablesViewPane.maxHeightProperty().bind(leftVBox.heightProperty()); 
    historyViewPane.maxHeightProperty().bind(leftVBox.heightProperty()); 
    } 
} 

La leghiamo a ciascun vetro di expandedProperty(), e dinamicamente legano e non associare il prefHeighProperty():

private static void bindExpanded(TitledPane pane, ReadOnlyDoubleProperty prop) { 
    pane.expandedProperty().addListener((observable, oldValue, newValue) -> { 
    if(newValue) { 
     pane.prefHeightProperty().bind(prop); 
    } else { 
     pane.prefHeightProperty().unbind(); 
     pane.prefHeightProperty().set(0); 
    } 
    }); 

}

Se ci viene mostrato, chiediamo di essere grandi come VBox, se lo siamo non mostrato, chiediamo di essere il più piccolo possibile. Il vantaggio di fare le cose in questo modo è che il layout calcola automaticamente l'altezza disponibile in base al numero di TitledPanes attualmente mostrati - il che porta esattamente al comportamento che vogliamo.

vado più in dettaglio qui:

http://sebastianaudet.com/blog/playing-with-javafx/