This discussion is archived
3 Replies Latest reply: Nov 15, 2012 1:02 PM by 894607 RSS

TitledPane and Accordion

435200 Newbie
Currently Being Moderated
Hi,

I just want to know whether TitledpPane can contain many children buttons.
I can't solve the solution

For example;

Accordion accordion = new Accordion();
accordion.setPrefSize(200,700);
Button clientButton = new Button("Client");
Button userButton = new Button("User");
TitledPane adminPane = new TitledPane("Adminstration",200,350);
adminPane.setContent(clientButton);
adminPane.setContent(userButton);
accordion.getPanes().add(adminPane);

Button vclientButton = new Button("Client");
Button vuserButton = new Button("User");
TitledPane viewPane = new TitledPane("View",200,350);
adminPane.setContent(vclientButton);
adminPane.setContent(vuserButton);
accordion.getPanes().add(viewPane);

In Google Web Toolkit (GWT), you can do above example without any problem.

Please advise me what to do.

Thank you.
  • 1. Re: TitledPane and Accordion
    jsmith Guru
    Currently Being Moderated
    I wonder what toolkit or version of JavaFX your code is written in.
    TitledPane adminPane = new TitledPane("Adminstration",200,350);
    The above code does not compile with JavaFX 2.1b17 as there is no such constructor for TitledPane.
    This makes it more difficult to help troubleshoot what your issue may be.

    Perhaps the sample code below can help you:
    import javafx.application.Application;
    import javafx.scene.Scene;
    import javafx.scene.control.*;
    import javafx.scene.layout.*;
    import javafx.stage.Stage;
    
    public class AccordionChildren extends Application {
      public static void main(String[] args) { launch(args); }
    
      @Override public void start(Stage primaryStage) {
        TitledPane adminPane = new TitledPane("Administration", 
          VBoxBuilder.create().style("-fx-padding: 10").spacing(10).children(
            ButtonBuilder.create().text("Admin Client").maxWidth(Double.MAX_VALUE).build(),
            ButtonBuilder.create().text("Admin User").maxWidth(Double.MAX_VALUE).build()
          ).build()            
        );
        
        TitledPane viewPane = new TitledPane("View", 
          VBoxBuilder.create().style("-fx-padding: 10").spacing(10).children(
            ButtonBuilder.create().text("View Client").maxWidth(Double.MAX_VALUE).build(),
            ButtonBuilder.create().text("View User").maxWidth(Double.MAX_VALUE).build()
          ).build()            
        );
    
        Accordion accordion = new Accordion();
        accordion.setPrefSize(200,700);
        accordion.getPanes().addAll(adminPane, viewPane);
    
        StackPane layout = new StackPane();
        layout.setStyle("-fx-padding: 10; -fx-background-color: cornsilk;");
        layout.getChildren().add(accordion);
        primaryStage.setScene(new Scene(layout));
        primaryStage.show();
      }
    }
    Accordion is a rather strange control to use for your UI as it makes it look really tall and skinny and only one pane in an Accordion can be open at a time and it fills the entire tall skinny area, making for an awkward user experience when you want to switch from one pane to another.

    Maybe you want a sidebar control with stacked TitlePanes - there is a Jira request for such a thing (http://javafx-jira.kenai.com/browse/RT-19248 "StackedTitledPanes control"), but it has not been implemented yet.

    You could read through this thread to get more insight: TitledPane in a VBox ... TitledPane ignores maxSize "TitledPane in a VBox"
  • 2. Re: TitledPane and Accordion
    435200 Newbie
    Currently Being Moderated
    Thank you for advise.

    I guess I will have to wait for latest Javafx version. In meantime I will go for Accordion.

    Regards,

    Mike
  • 3. Re: TitledPane and Accordion
    894607 Newbie
    Currently Being Moderated
    You can put a listview inside every single accordion and if you don´t like having a text instead a button you can use list.setCellFactory like the example provided by oracle. Instead of using the Rectangle class use the Button Class so you can have a variable listview with buttons. I made something similar in FXML so you´ll have an idea.
    <Accordion minWidth="-Infinity" prefHeight="600.0" prefWidth="200.0">
                                <expandedPane>
                                    <TitledPane fx:id="x1" animated="false" minWidth="200.0" prefHeight="379.0" prefWidth="200.0" text="Vectores">
                                        <content>
                                            <AnchorPane id="Content" minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0">
                                                <children>
                                                    <ListView id="listaVectores" fx:id="idLlist" onMouseClicked="#handleListMouseClick" layoutX="-4.0" layoutY="0.0" prefHeight="518.0" prefWidth="200.0">
                                                        <items>
                                                            <FXCollections fx:factory="observableArrayList">
                                                                <String fx:value="Item 1" />
                                                                <String fx:value="Item 2" />
                                                                <String fx:value="Item3" />
                                                            </FXCollections>
                                                        </items>
                                                    </ListView>
                                                </children>
                                            </AnchorPane>
                                        </content>
                                    </TitledPane>
                                </expandedPane>

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points