Building impressive layout systems with vaadin
•
4 recomendaciones•1,566 vistas
The document discusses building layout systems for mobile, desktop, and tablet applications using Vaadin. It covers setting up navigation with views, using the UI as a bean, navigation managers, view displays, responsive design, events and security. The key lessons are that bean-based UIs provide easier enterprise integration, Vaadin supports CDI and Spring beans, the navigator API simplifies navigation, responsive design is integrated with the Valo theme, and events allow for loose coupling between scoped components.
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Destacado (14)
Similar a Building impressive layout systems with vaadin
Similar a Building impressive layout systems with vaadin (20)
Último
Último (20)
Building impressive layout systems with vaadin
- 1. Building impressive layout systems for mobile, desktop and tablet Peter Lehto Senior Vaadin Expert @peter_lehto
- 7. public class DevDayUI extends UI { }
- 8. @CDIUI("") public class DevDayUI extends UI { }
- 9. @CDIUI("") public class DevDayUI extends UI { @Inject private ViewDisplay viewDisplay; @Override protected void init(VaadinRequest request) { … setContent((Component)viewDisplay); } }
- 10. UI as Bean
- 11. Entry point UI as Bean
- 12. Entry point Context aware UI as Bean
- 13. Entry point Context aware Accesible through URI UI as Bean
- 14. Entry point Context aware Accesible through URI CDI / Spring Beans (with @SpringUI) UI as Bean
- 15. @CDIUI("") public class DevDayUI extends UI { @Inject private ViewDisplay viewDisplay; @Override protected void init(VaadinRequest request) { … setContent((Component)viewDisplay); } }
- 16. @CDIUI("anotherUI") public class DevDayUI extends UI { @Inject private ViewDisplay viewDisplay; @Override protected void init(VaadinRequest request) { … setContent((Component)viewDisplay); } }
- 18. HorizontalLayout
- 21. Navigation
- 22. public interface NavigationManager { void navigateTo(String viewId); View getCurrentView(); }
- 24. public class NavigationManagerBean extends Navigator implements NavigationManager {
- 25. public class NavigationManagerBean extends Navigator implements NavigationManager { @Inject private ViewDisplay viewDisplay; … }
- 26. ViewDisplay
- 27. Structure ‘content area’ with components ViewDisplay
- 28. Structure ‘content area’ with components Access view before it’s shown ViewDisplay
- 29. Structure ‘content area’ with components Access view before it’s shown Various framework implementations ViewDisplay
- 30. public class NavigationManagerBean extends Navigator implements NavigationManager { @Inject private ViewDisplay viewDisplay; @Inject private CDIViewProvider viewProvider; … }
- 31. CDIViewProvider
- 33. View Bean discovery Access control per view CDIViewProvider
- 34. View Bean discovery Access control per view SpringViewProvider for Spring Beans CDIViewProvider
- 35. public class NavigationManagerBean extends Navigator implements NavigationManager { @Inject private ViewDisplay viewDisplay; @Inject private CDIViewProvider viewProvider; @Inject private ViewChangeListener viewChangeListener; … }
- 37. Before and AfterViewChange events ViewChangeListener
- 38. Before and AfterViewChange events Ability to cancel navigation ViewChangeListener
- 39. Scope UI specific beans with @UIScoped
- 40. @UIScoped public class ValoMainMenuBean extends CssLayout implements MainMenu
- 41. @UIScoped
- 42. Bean associated with UI instance @UIScoped
- 43. Bean associated with UI instance Bean associated with Web browser tab @UIScoped
- 44. Bean associated with UI instance Bean associated with Web browser tab @CDIUI is by default @UIScoped @UIScoped
- 45. @CDIUI DevDayUI _____________________________ @Inject private ViewDisplay menu; @Inject private User currentUser; @UIScoped DevDayUI ViewDisplay @SessionScoped User
- 46. @SessionScoped User @CDIUI DevDayUI _____________________________ @Inject private ViewDisplay menu; @Inject private User currentUser; @UIScoped DevDayUI ViewDisplay @CDIUI DevDayUI _____________________________ @Inject private ViewDisplay menu; @Inject private User currentUser; @UIScoped DevDayUI ViewDisplay @CDIUI DevDayUI _____________________________ @Inject private ViewDisplay menu; @Inject private User currentUser; @UIScoped DevDayUI ViewDisplay
- 48. View
- 50. Component composition Active view switched by Navigator View
- 51. Component composition Active view switched by Navigator Positioned inside ViewDisplay View
- 56. View as bean with @CDIView
- 58. public class CustomerViewBean extends VerticalLayout
- 59. @CDIView("customers") public class CustomerViewBean extends VerticalLayout implements View
- 60. http://localhost:8080/app/#!customers #! : Navigator identifier customers : View name
- 61. Scope View specific beans with @ViewScoped
- 62. @ViewScoped
- 63. Beans associated with View @ViewScoped
- 64. Beans associated with View @CDIView by default @ViewScoped @ViewScoped
- 65. Beans associated with View @CDIView by default @ViewScoped @SpringView for Spring Beans @ViewScoped
- 74. Responsive UI
- 79. Responsive
- 80. Extension in Vaadin since 7.2 Responsive
- 81. Extension in Vaadin since 7.2 Relatively sized host component Responsive
- 82. Extension in Vaadin since 7.2 Relatively sized host component Pixel specified ranges Responsive
- 83. CssLayout layout = new CssLayout(); layout.setStyleName("responsive"); layout.setSizeFull(); Responsive.makeResponsive(layout);
- 85. ValoMenu
- 86. Set of styles in Valo Theme ValoMenu
- 87. Set of styles in Valo Theme No framework level API available ValoMenu
- 88. Set of styles in Valo Theme No framework level API available Live example provided in DevDay App (See ValoMainMenuBean) ValoMenu
- 89. Events and busses with Event<MyEvent>
- 90. @UIScoped public class MainMenuBean extends VerticalLayout { @Inject private Event<NavigationEvent> eventSource; protected void onMenuItemClicked(MenuItem item) { eventSource.fireEvent(new NavigationEvent(item)); } }
- 91. @UIScoped public class NavigationManager { … private void onNavigationEvent(@Observes NavigationEvent e) { getNavigator().navigateTo(e.getView().getId()); } }
- 94. CDIViewProvider
- 96. isUserHavingAccessToView @RolesAllowed for static role def CDIViewProvider
- 97. isUserHavingAccessToView @RolesAllowed for static role def com.vaadin.cdi.AccessControl CDIViewProvider
- 98. isUserHavingAccessToView @RolesAllowed for static role def com.vaadin.cdi.AccessControl Default JAAS implementation CDIViewProvider
- 99. Lessons learned
- 100. Lessons learned 1. Bean based UIs provide easier enterprise integration
- 101. Lessons learned 1. Bean based UIs provide easier enterprise integration 2. Official support for CDI and SpringBeans
- 102. Lessons learned 1. Bean based UIs provide easier enterprise integration 2. Official support for CDI and SpringBeans 3. Navigator with utility API make navigation simple
- 103. Lessons learned 1. Bean based UIs provide easier enterprise integration 2. Official support for CDI and SpringBeans 3. Navigator with utility API make navigation simple 4. Responsive addon integrated to core with Valo theme
- 104. Lessons learned 1. Bean based UIs provide easier enterprise integration 2. Official support for CDI and SpringBeans 3. Navigator with utility API make navigation simple 4. Responsive addon integrated to core with Valo theme 5. Events provide loose coupling with scopes as borders