Organizando conteúdos com o Accordion

Mostramos anteriormente como organizar conteúdos em paineis de aba com o TabPane e como organizar o layout da aplicação. Hoje iremos mostrar mais um controle para organização de conteúdo, o Accordion.

Accordion

Semelhante ao TabPane, o Accordion é feito de paineis, mais especificamente de TitledPane. Para cada TitledPane adicionado ao controle, teremos um painel que pode ser expandido e, quando expandido, temos os outros retraídos. O conteúdo do TitledPane pode ser qualquer coisa, já que o conteúdo deve ser um nó. Veja:

Criando o Accordion

Quando criamos o Accordion, temos que levar em conta que usamos paineis do tipo TitledPane como os paineis do accordion. Assim, essa classe tem uma propriedade para os paineis e é ela que usamos para adicionar todos os paineis do accordion. Também podemos deixar um painel aberto por padrão usando o método setExpanded. Veja o código:

// criamos o Accordion
Accordion accordion = new Accordion();
// criando os paineis do Accordion. Notem que o construtor recebe o
// texto que vai aparecer e o nó
TitledPane painel1 = new TitledPane("Painel 1", new Label(
  "O Primeiro Painel"));
TitledPane painel2 = new TitledPane("Painel 2", new Button(
  "Sou um botão do painel 2"));
TitledPane painel3 = new TitledPane("Painel 3", new Rectangle(150, 50));
// Adicionando um ícone ao Painel
painel1.setGraphic(new ImageView(new Image(getClass()
  .getResourceAsStream("coracao.png"))));
painel2.setGraphic(new ImageView(new Image(getClass()
  .getResourceAsStream("fogo.png"))));
painel3.setGraphic(new ImageView(new Image(getClass()
  .getResourceAsStream("agua.png"))));
// agora adicionamos todas as abas de vez
accordion.getPanes().addAll(painel1, painel2, painel3);
// aqui deixamos o painel que vai expandido por padrao
accordion.setExpandedPane(painel1);
// definimos um padrão mínimo para o painel ou ele vai se dimensionar de
// acordo com o tamanho dos nós
accordion.setMinSize(300, 300);

Conclusão

Apresentamos mais um controle, o Accordion. Veja o código no nosso github.