104
Building impressive layout systems for mobile, desktop and tablet Peter Lehto Senior Vaadin Expert @peter_lehto
| Date post: | 22-Jan-2018 |
| Category: |
Presentations & Public Speaking |
| Upload: | peter-lehto |
| View: | 958 times |
| Download: | 1 times |
Building impressive layout systems
for mobile, desktop and tablet
Peter Lehto Senior Vaadin Expert
@peter_lehto
Setting up UI
Navigation
system
Application views
Responsive
menu
QAEvents and
Security
Setting up UI
public class DevDayUI extends UI {
}
@CDIUI("")public class DevDayUI extends UI {
}
@CDIUI("")public class DevDayUI extends UI {
@Injectprivate ViewDisplay viewDisplay;
@Overrideprotected void init(VaadinRequest request) {
…setContent((Component)viewDisplay);
}}
UI as Bean
Entry point
UI as Bean
Entry point
Context aware
UI as Bean
Entry point
Context aware
Accesible through URI
UI as Bean
Entry point
Context aware
Accesible through URI
CDI / Spring Beans (with @SpringUI)
UI as Bean
@CDIUI("")public class DevDayUI extends UI {
@Injectprivate ViewDisplay viewDisplay;
@Overrideprotected void init(VaadinRequest request) {
…setContent((Component)viewDisplay);
}}
@CDIUI("anotherUI")public class DevDayUI extends UI {
@Injectprivate ViewDisplay viewDisplay;
@Overrideprotected void init(VaadinRequest request) {
…setContent((Component)viewDisplay);
}}
http://localhost:8080/app/
http://localhost:8080/app/anotherUI
app: contextanotherUI : UI name
HorizontalLayout
HorizontalLayoutMenu
HorizontalLayoutContentAreaMenu
Navigation
public interface NavigationManager {
void navigateTo(String viewId);
View getCurrentView();}
public class NavigationManagerBean
public class NavigationManagerBean extends Navigator implements NavigationManager {
public class NavigationManagerBean extends Navigator implements NavigationManager {
@Injectprivate ViewDisplay viewDisplay;
…}
ViewDisplay
Structure ‘content area’ with components
ViewDisplay
Structure ‘content area’ with components
Access view before it’s shown
ViewDisplay
Structure ‘content area’ with components
Access view before it’s shown
Various framework implementations
ViewDisplay
public class NavigationManagerBean extends Navigator implements NavigationManager {
@Injectprivate ViewDisplay viewDisplay;
@Injectprivate CDIViewProvider viewProvider;
…}
CDIViewProvider
View Bean discovery
CDIViewProvider
View Bean discovery
Access control per view
CDIViewProvider
View Bean discovery
Access control per view
SpringViewProvider for Spring Beans
CDIViewProvider
public class NavigationManagerBean extends Navigator implements NavigationManager {
@Injectprivate ViewDisplay viewDisplay;
@Injectprivate CDIViewProvider viewProvider;
@Injectprivate ViewChangeListener viewChangeListener;
…}
ViewChangeListener
Before and AfterViewChange events
ViewChangeListener
Before and AfterViewChange events
Ability to cancel navigation
ViewChangeListener
Scope UI specific beans with
@UIScoped
@UIScopedpublic class ValoMainMenuBean extends CssLayout implements MainMenu
@UIScoped
Bean associated with UI instance
@UIScoped
Bean associated with UI instance
Bean associated with Web browser tab
@UIScoped
Bean associated with UI instance
Bean associated with Web browser tab
@CDIUI is by default @UIScoped
@UIScoped
@CDIUI DevDayUI
_____________________________
@Injectprivate ViewDisplay menu;
@Injectprivate User currentUser;
@UIScoped
DevDayUIViewDisplay
@SessionScoped
User
@SessionScoped
User
@CDIUI DevDayUI
_____________________________
@Injectprivate ViewDisplay menu;
@Injectprivate User currentUser;
@UIScoped
DevDayUIViewDisplay
@CDIUI DevDayUI
_____________________________
@Injectprivate ViewDisplay menu;
@Injectprivate User currentUser;
@UIScoped
DevDayUIViewDisplay
@CDIUI DevDayUI
_____________________________
@Injectprivate ViewDisplay menu;
@Injectprivate User currentUser;
@UIScoped
DevDayUIViewDisplay
What about Views?
View
Component composition
View
Component composition
Active view switched by Navigator
View
Component composition
Active view switched by Navigator
Positioned inside ViewDisplay
View
HorizontalLayoutContentAreaMenu
View1
View2
View3
HorizontalLayoutView1Menu
View1
View2
View3
HorizontalLayoutView2Menu
View1
View2
View3
HorizontalLayoutView3Menu
View1
View2
View3
View as bean with
@CDIView
public class CustomerViewBean
public class CustomerViewBean extends VerticalLayout
@CDIView("customers")public class CustomerViewBean extends VerticalLayout implements View
http://localhost:8080/app/#!customers
#! : Navigator identifiercustomers : View name
Scope View specific beans with
@ViewScoped
@ViewScoped
Beans associated with View
@ViewScoped
Beans associated with View
@CDIView by default @ViewScoped
@ViewScoped
Beans associated with View
@CDIView by default @ViewScoped
@SpringView for Spring Beans
@ViewScoped
@ApplicationScoped
@ApplicationScoped@SessionScoped
@ApplicationScoped@SessionScoped
@UIScoped
@ApplicationScoped@SessionScoped
@UIScoped @ViewScoped
@ApplicationScoped
@ApplicationScoped@ApplicationScoped
@SessionScoped @SessionScoped @SessionScoped
@ApplicationScoped
@SessionScoped @SessionScoped @SessionScoped
@UI Scoped
@UI Scoped
@UI Scoped
@UI Scoped
@UI Scoped
@UI Scoped
@ApplicationScoped
@ View
@ View
@ View
@ View
@ View
@ View
@ View
@ View
@ View
@ View
@ View
@ View
@SessionScoped @SessionScoped @SessionScoped
@UI Scoped
@UI Scoped
@UI Scoped
@UI Scoped
@UI Scoped
@UI Scoped
Responsive UI
HorizontalLayoutContentAreaMenu
HorizontalLayoutContentAreaMenu
HorizontalLayoutContentArea
Menu
HorizontalLayoutContentArea
Responsive
Extension in Vaadin since 7.2
Responsive
Extension in Vaadin since 7.2
Relatively sized host component
Responsive
Extension in Vaadin since 7.2
Relatively sized host component
Pixel specified ranges
Responsive
CssLayout layout = new CssLayout();layout.setStyleName("responsive");layout.setSizeFull();Responsive.makeResponsive(layout);
ValoMenu
Set of styles in Valo Theme
ValoMenu
Set of styles in Valo Theme
No framework level API available
ValoMenu
Set of styles in Valo Theme
No framework level API available
Live example provided in DevDay App(See ValoMainMenuBean)
ValoMenu
Events and busses with
Event<MyEvent>
@UIScopedpublic class MainMenuBean extends VerticalLayout {
@Injectprivate Event<NavigationEvent> eventSource;
protected void onMenuItemClicked(MenuItem item) {eventSource.fireEvent(new NavigationEvent(item));
}}
@UIScopedpublic class NavigationManager {
…
private void onNavigationEvent(@ObservesNavigationEvent e) {
getNavigator().navigateTo(e.getView().getId());}
}
@ApplicationScoped
@ View
@ View
@ View
@ View
@ View
@ View
@ View
@ View
@ View
@ View
@ View
@ View
@SessionScoped @SessionScoped @SessionScoped
@UI Scoped
@UI Scoped
@UI Scoped
@UI Scoped
@UI Scoped
@UI Scoped
Security with
Access control
CDIViewProvider
isUserHavingAccessToView
CDIViewProvider
isUserHavingAccessToView
@RolesAllowed for static role def
CDIViewProvider
isUserHavingAccessToView
@RolesAllowed for static role def
com.vaadin.cdi.AccessControl
CDIViewProvider
isUserHavingAccessToView
@RolesAllowed for static role def
com.vaadin.cdi.AccessControl
Default JAAS implementation
CDIViewProvider
Lessons learned
Lessons learned
1. Bean based UIs provide easier enterprise integration
Lessons learned
1. Bean based UIs provide easier enterprise integration
2. Official support for CDI and SpringBeans
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
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
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
