Hola a todos, soy nuevo en vaadin y estoy viendo si el framework se adapta a mis necesidades. He leído un poco sobre el tema (me comi todo el libro de Learning Vaadin 7) pero no me queda en claro como se maneja la navegación.
Asumiendo que yo quiero construir una aplicación clásica donde tengo un menú y en función de la opción me despliega una web; como es que se hace eso utilizando Vaadin (de la forma correcta)?; Se deben utilizar Views ?
y el resultado final para el usuario… es una mega pagina ?; la duda surge porque lei por ahí que la filosofía de vaadin era tener 1 sola pagina donde pase todo.
Basicamente lo que quiero hacer es una aplicacion web tipica con un menu y en funcion de la opcion me navegue a otra pagina.
En realidad puedes manejar la navegación a través de Layouts (VerticalLayout, HorizontalLayout, etc).
Un layout puede ocupar toda la página usando el método setSizeFull(). Pues si tienes tu primer Layout con tu Menú inicial y el usuario al seleccionar uno de los items de tu menú puede crear otro Layout utilizando setContent(new TuNuevoLayoutAqui()).
Dentro de los layouts vas ubicando tus componentes, por ejemplo si quieres un formulario utilizas un FormLayout, etc.
Hola Miguel, tenia exactamente la misma duda que tu y basicamente Euclides te dio la respuesta.
Solo agrego que el tema de los View’s se utiliza para que el navegador pueda moverse entre paginas que ya se han visitado con los botones ‘Atras’ y ‘Adelante’, como comunmente hacemos.
El componente que maneja esto se llama ‘Navigator’. Te adjunto un ejemplo simple.
@Override
protected void init(VaadinRequest vaadinRequest) {
Navigator navigator = new Navigator(this, this);
navigator.addView("", LoginDiv.class);
}
Al levantar la aplicacion, se navegara automaticamente al componente ‘LoginDiv’
‘LoginDiv’ es una clase que implementa ‘View’. Ademas, en mi caso, extiende de ‘VerticalLayout’.
La clase que implementa ‘View’ debe extender de algun ‘Component’ para que funcione (no estoy seguro si es de un ‘Component’ pero el compilador te avisa del error)
Teniendo mas 'View’s, la navegacion Atras/Adelante de tu aplicacion web sera mas natural.
Por ejemplo creamos el navegador , this seria tu contenedor principal y panel seria donde quieres que se vayan mostrando
tus vistas.
…
Panel panel=new Panel(“Contenido”);
Navigator nav=new Navigator(this,panel);
…
Despues deberas configurar tus vistas, en caso de que tengas 2 vistas.
Cuando defines una vista con el primera parametro “” , lo que haces es decirlo que ventana quieres que se visualice primero.
…
nav.addView(“”, MainView.class);
nav.addView(MainView.NAME, MainView.class);
nav.addView(UsuarioView.NAME, UsuarioView.class);
…
Finalmente configurar como enviaras la informacion.
Esto lo puedes colocar en una evento para que al realizar la accion te redireccione en estos casos a:
tuapp:8080/proyecto/#!usuario
tuapp:8080/proyecto/#!main
…
TuUI.getNavigator().navigateTo(“main”);
TuUI.getNavigator().navigateTo(“usuario”);
…
Esto es lo basico de Navigation, de igual manera te dejo una excelente direccion: