Implementar un menú ocultable

Other Languages Discusión en español (Discussion in Spanish)
1

Buenas, estoy buscando la forma de hacer un menú vertical que se pueda ocultar/mostrar a elección del usuario, para que os hagáis una idea de los que busco sería como la parte inferior de esta aplicación de prueba de vaadin, pero en vertical:


http://demo.vaadin.com/sampler/#foundation/push

un saludo.

2

Usted puede utilizar el addon Animator: https://vaadin.com/directory#addon/animator

3

Un ejemplo:

    final AnimatorProxy proxy = new AnimatorProxy();
    layout.addComponent(proxy);

    final VerticalLayout shelfContent = new VerticalLayout(new Label(
            "Label 1"), new Label("Label 2"), new Label("Label 3"));

    final HorizontalLayout shelf = new HorizontalLayout(shelfContent);

    final Button btnOpenClose = new Button("<");
    btnOpenClose.addClickListener(new Button.ClickListener() {

        public void buttonClick(ClickEvent event) {
            if (btnOpenClose.getCaption().equals(">")) {
                shelf.addComponent(shelfContent, 0);

                proxy.animate(shelfContent, AnimType.ROLL_RIGHT_OPEN_POP).setDuration(500);
                btnOpenClose.setCaption("<");
            } else {
                proxy.animate(shelfContent, AnimType.ROLL_LEFT_CLOSE_REMOVE).setDuration(500);
                btnOpenClose.setCaption(">");
            }
        }
    });

    shelf.addComponent(btnOpenClose);
    layout.addComponent(shelf, 0);
4

Te has planteado usar un CssLayout y usar transciones Css3?
Por ejemplo, puedes definir dos clases:

.layout-visible {

        -webkit-transition: all 2s ease-in-out;
        -moz-transition: all 2s ease-in-out;
        -o-transition: all 2s ease-in-out;
        transition: all 2s ease-in-out;
        opacity: 1;
        height: 200px;
        
        width: 100%;
        background-color: navy;
}

.layout-invisible {

    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;
    opacity: 0;
    height: 0px;

    width: 100%;
}

Basta añadir un BUTTON que cambia entre los dos estados del layout:

@Theme(“ejemplotheme”)
public class EjemploUI extends UI {

// Captions del button
static final String MOSTRAR = "MOSTRAR";
static final String OCULTAR = "OCULTAR";
// Id del button
static final String BUTTON_ID = "mostrador";

// Estilos del Layout mostrable/ocultable
static final String LAYOUT_INVISIBLE = "layout-invisible";
static final String LAYOUT_VISIBLE = "layout-visible";

@Override
protected void init(VaadinRequest request) {

    final Button button = new Button(MOSTRAR);
    button.setId(BUTTON_ID);
    button.setSizeUndefined();
    
    final CssLayout mostrableLo = new CssLayout();
    mostrableLo.addStyleName(LAYOUT_INVISIBLE);

    final CssLayout content = new CssLayout();
    content.addComponent(button);
    content.addComponent(mostrableLo);
    setContent(content);

    // Cambio de estilo en el layoutMostrable
    button.addClickListener(new Button.ClickListener() {
        public void buttonClick(ClickEvent event) {

            // Cambio de ESTILO en el layout
            String estilos = mostrableLo.getStyleName();
            if (estilos.contains(LAYOUT_INVISIBLE)) {
                mostrableLo.removeStyleName(LAYOUT_INVISIBLE);
                if (!estilos.contains(LAYOUT_VISIBLE))
                    mostrableLo.addStyleName(LAYOUT_VISIBLE);
            } else if (estilos.contains(LAYOUT_VISIBLE)) {
                mostrableLo.removeStyleName(LAYOUT_VISIBLE);
                if (!estilos.contains(LAYOUT_INVISIBLE))
                    mostrableLo.addStyleName(LAYOUT_INVISIBLE);
            }
            
            // Cambio de caption en el BUTTON
            String buttonCaption = button.getCaption();
            if (buttonCaption.equals(MOSTRAR)) {
                button.setCaption(OCULTAR);
            } else if (buttonCaption.equals(OCULTAR)) {
                button.setCaption(MOSTRAR);
            }
        }
    });
}