Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Componentes Cerrables

Carlos Garrido
6 years ago Feb 25, 2016 4:03pm
Alejandro Duarte
6 years ago Feb 25, 2016 4:57pm

Hola,

No conozco ningún componente específicamente para esto, pero podrías implementarlo tú mismo usando componentes como VerticalLayout, HorizontalLayout, Label, Button, e implementando la lógica para mostrar u ocular el contenido cuando con un click listener en el botón. Puedes encapsular todo esto en un CustomComponent.

Adjunto una captura de lo que podría ser el resultado (lo hice con Vaadin Designer, pero tú puedes hacerlo diréctamente en Java):
Este es sólo un diseño, no implementé la lógica para ocultar el contenido de los "panels".

Espero te sirva. Saludos!

Carlos Garrido
6 years ago Mar 02, 2016 12:04pm
Alejandro Duarte
6 years ago Mar 02, 2016 12:09pm
Carlos Garrido
6 years ago Mar 02, 2016 12:13pm
Alejandro Duarte
6 years ago Mar 02, 2016 12:16pm
Carlos Garrido
6 years ago Mar 02, 2016 12:21pm
Alejandro Duarte
6 years ago Mar 02, 2016 12:27pm
Carlos Garrido
6 years ago Mar 02, 2016 12:35pm

ok lo implementare y te cuento como me fue muchas gracias por tu tiempo y paciencia.

Carlos Garrido
6 years ago Mar 02, 2016 12:44pm
Alejandro Duarte
6 years ago Mar 02, 2016 1:27pm

En realidad depende de tu implementación. Todo lo que necesitas es una referencia al componente que continene las "ventanas".

Te dejo una implementación de ejemplo, sin estilos ni ajustes de layout, pero no debería ser difícil adaptarlo para que luzca como requieres:

public class VerticalClosablePanels extends CustomComponent {

    private VerticalLayout layout = new VerticalLayout();

    public VerticalClosablePanels() {
        setCompositionRoot(layout);
    }

    public void addComponent(String caption, Component component) {
        ClosablePanel newPanel = new ClosablePanel(caption, component);
        newPanel.addCloseClickListener(e -> layout.removeComponent(newPanel));
        layout.addComponent(newPanel);
    }

    private class ClosablePanel extends CustomComponent {

        private Button closeButton;

        public ClosablePanel(String caption, Component content) {
            Label label = new Label(caption);

            closeButton = new Button(FontAwesome.TIMES);

            VerticalLayout contentLayout = new VerticalLayout(content);

            HorizontalLayout headerLayout = new HorizontalLayout(label, closeButton);
            headerLayout.setComponentAlignment(closeButton, Alignment.MIDDLE_RIGHT);

            VerticalLayout mainLayout = new VerticalLayout(headerLayout, contentLayout);
            setCompositionRoot(mainLayout);
        }

        public void addCloseClickListener(ClickListener listener) {
            closeButton.addClickListener(listener);
        }

    }

}

Con esta implementación, las clases cliente todo lo que requieren hacer es crear un nuevo VerticalClosablePanels y usar el método addComponent para agregar un nuevo panel cerrable.

Espero te sirva!

Carlos Garrido
6 years ago Mar 02, 2016 1:53pm

Me funciono, muchisimas gracias por todo, hasta pronto.