Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with...
Transcript of Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with...
![Page 1: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/1.jpg)
Web UI best practice integration with Java EE 7
Peter Lehto @peter_lehto
expert & trainer
![Page 2: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/2.jpg)
What is Vaadin?
Java EE 7
![Page 3: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/3.jpg)
Vaadin CDI
Addon
Structuring Vaadin
App
![Page 4: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/4.jpg)
How to get started
QA
Application architecture
![Page 5: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/5.jpg)
![Page 6: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/6.jpg)
Server driven UI framework for rich
web applications
![Page 7: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/7.jpg)
User Interface Components
![Page 8: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/8.jpg)
Developer
Productivity
Rich
UX
![Page 9: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/9.jpg)
Server side UI How?
![Page 10: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/10.jpg)
![Page 11: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/11.jpg)
• Loader page • CSS Theme • Images • JavaScript
135k
Compressed & reduced thin client
![Page 12: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/12.jpg)
![Page 13: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/13.jpg)
• name=”Joonas” • button clicked
261 bytes
![Page 14: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/14.jpg)
![Page 15: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/15.jpg)
• name=”Joonas” • button clicked
261 bytes
• Add notification
267 bytes
![Page 16: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/16.jpg)
Java Enterprise Edition 7
![Page 17: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/17.jpg)
Collection of Java Specification Requests (JSRs)
Implemented by app servers
![Page 18: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/18.jpg)
![Page 19: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/19.jpg)
![Page 20: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/20.jpg)
Do you know some Java EE specs?
![Page 21: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/21.jpg)
Java Persistence API 2.1 (JPA)
(JSR-338)
Enterprise Java Beans 3.2 (EJB)
(JSR-345)Java Servlet 3.1
(JSR-340)Java Message
Service 2.0 (JMS)(JSR-343)
Context and Dependency
Injection 1.1 (CDI)(JSR-340)
Java Server Faces 2.2 (JSF)
(JSR-344)
Java Server Pages 2.3 (JSP)
(JSR-245)Bean Validation 1.1
(JSR-349)Interceptors 1.2(JSR-318)
Java Transaction API 1.2 (JTA)
(JSR-907)
Java API for RESTful Web Services 2.0
(JAX-RS)(JSR-907)
Java API for XML based Web Services 2.2
(JAX-WS)(JSR-907)
Java Architecture for XML Binding 2.2
(JAX-B)(JSR-222)
![Page 22: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/22.jpg)
APIs that form your technology stack
Which APIs should I know?
![Page 23: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/23.jpg)
Java Persistence API 2.1 (JPA)
![Page 24: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/24.jpg)
Customer
@Entity
______________________________@Id@AutoGeneratedLong id;
@Column(nullable = false)String name;
Date birthdate;
![Page 25: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/25.jpg)
Customer
@Entity
______________________________
Customer
Id name birthdate
1 Alex 07.02.1984
2 John 18.2.1992
@Id@AutoGeneratedLong id;
@Column(nullable = false)String name;
Date birthdate;
![Page 26: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/26.jpg)
Customer@Id@AutoGeneratedLong id;
@Column(nullable = false)String name;
Date birthdate;
@OneToMany(mappedBy=“customer”)List<Invoice> invoices;
@Entity
______________________________
Customer
Id name birthdate
1 Alex 07.02.1984
2 John 18.2.1992
Invoice
Id customer number
1 1 123
2 1 124
![Page 27: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/27.jpg)
Enterprise Java Beans 3.2 (EJB)
![Page 28: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/28.jpg)
Business layer services
@local and @remote
Enterprise Java Beans
Transaction boundaries
![Page 29: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/29.jpg)
(UI) CustomerView
![Page 30: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/30.jpg)
(@Remote) CustomerService
(UI) CustomerView
@Remote @Local
![Page 31: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/31.jpg)
(@Remote) CustomerService
(UI) CustomerView
(@Stateless) CustomerService
Bean
@Remote @Local
@Stateless @Stateful @Singleton
(@Stateless) CustomerService
Bean
(@Stateless) CustomerService
Bean
![Page 32: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/32.jpg)
(DB) CustomerDatabase
![Page 33: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/33.jpg)
@Localpublic interface CustomerService {
void storeCustomers(Collection<Customer> customers);
void removeCustomers(Collection<Customer> customers);
Collection<Customer> getAllCustomers()
Optional<Customer> getCustomerByName(String name);}
![Page 34: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/34.jpg)
@Statelesspublic class CustomerServiceBean implements CustomerService {
@PersistenceContextprivate EntityManager em;
public void storeCustomers(Collection<Customer> cu) {cu.forEach(c -> storeCustomer(c));
}
public void storeCustomer(Customer c) {em.merge(c);
}}
![Page 35: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/35.jpg)
Context and Dependency
Injection 1.2 (CDI)
![Page 36: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/36.jpg)
Instead of saying new say @Inject
Context and Dependency Injection
![Page 37: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/37.jpg)
Instead of saying new say @Inject
Decouples code and lets container manage dependencies
Context and Dependency Injection
![Page 38: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/38.jpg)
Object references by scopes
Context and Dependency Injection
![Page 39: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/39.jpg)
@ApplicationScoped @SessionScoped @RequestScoped
Context and Dependency Injection
Object references by scopes
![Page 40: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/40.jpg)
@UIScoped @ViewScoped
Context and Dependency Injection
@ApplicationScoped @SessionScoped @RequestScoped
Object references by scopes
![Page 41: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/41.jpg)
@Stateless CustomerService
_________________@UIScoped
AppUI_________________
@EJBCustomerService service;
![Page 42: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/42.jpg)
@Stateless InvoiceService
@Stateless CustomerService
_________________@EJBInvoiceService invoices;
@UIScoped AppUI
_________________
@EJBCustomerService service;
![Page 43: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/43.jpg)
@Stateless CustomerService
_________________@EJBInvoiceService invoices;
@UIScoped AppUI
_________________
@EJBCustomerService service;
@InjectMainMenu mainMenu;
@InjectUser currentUser;
@UIScoped MainMenu
_________________@InjectEvent<MenuEvent> menuEventSource;
@Stateless InvoiceService
![Page 44: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/44.jpg)
Integration to EE through
Vaadin CDI
![Page 45: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/45.jpg)
Managed UI with @CDIUI
![Page 46: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/46.jpg)
Managed UI with @CDIUI
Allows injection with @Inject and @EJB
![Page 47: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/47.jpg)
Easily reference EE objects
Allows injection with @Inject and @EJB
Managed UI with @CDIUI
![Page 48: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/48.jpg)
@CDIUI(“”)public class AppUI extends UI {
}
![Page 49: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/49.jpg)
@CDIUI(“”)public class AppUI extends UI {
@Injectprivate MainMenu mainMenu;
@Inject private User currentUser;
@Injectprivate ViewManager viewManager;
public void init(VaadinRequest request) {VerticalLayout layout = new VerticalLayout();layout.addComponent(mainMenu);
setContent(layout);}
}
![Page 50: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/50.jpg)
@UIScoped AppUI
_____________________________
@Injectprivate MainMenu menu;
@Injectprivate ViewManager viewMgr;
@Injectprivate User loggedInUser;
<<UIScope>>
MainMenuViewManager
<<SessionScope>>
User
![Page 51: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/51.jpg)
<<UIScope>>
MenuBarFooter
ViewManager
<<SessionScope>>
User
@UIScoped AppUI
_____________________________
@Injectprivate MenuBar menu;
@Injectprivate ViewManager viewMgr;
@Injectprivate User loggedInUser;
<<UIScope>>
MenuBarFooter
ViewManager
<<UIScope>>
MenuBarFooter
ViewManager
<<UIScope>>
MenuBarViewManager
![Page 52: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/52.jpg)
VaadinServlet
![Page 53: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/53.jpg)
VaadinServlet
HttpSession
1
n
![Page 54: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/54.jpg)
VaadinServlet
HttpSession VaadinSession
1
n
1 1
1
n
![Page 55: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/55.jpg)
VaadinServlet
HttpSession VaadinSession
UI
1
n
1 1
1
n
1n
![Page 56: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/56.jpg)
@UIScopedUI specific bean references
CDI context for mapping beans per UI
@UIScoped
![Page 57: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/57.jpg)
@UIScopedpublic class MainMenu extends CustomComponent {
}
![Page 58: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/58.jpg)
@UIScopedpublic class MainMenu extends CustomComponent {
@Injectprivate Event<NavigationEvent> eventSource;
protected void onMenuItemClicked(MenuItem item) {eventSource.fireEvent(new NavigationEvent(item));
}}
![Page 59: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/59.jpg)
@CDIUI(“”)public class AppUI extends UI {
…
protected void onNavigationEvent(@ObservesNavigationEvent event) {
viewMgr.navigateTo(event.getView());}
}
![Page 60: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/60.jpg)
Structuring Vaadin App with Model View Presenter
![Page 61: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/61.jpg)
Do you like spaghetti?
![Page 62: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/62.jpg)
Do you like spaghetti?
Let’s clean it!
![Page 63: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/63.jpg)
History behind MVP
![Page 64: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/64.jpg)
Late
1970
s
SmallTalk-80
Controller is mediator between end user and application
Originally Model-View-Controller
![Page 65: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/65.jpg)
1980
s
Influenced by SmallTalk-80
Model, View, Presenter, Interactors, Commands, Selections
Taligent Model-View-Presenter
Presenter orchestrates the structure, not the input
![Page 66: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/66.jpg)
late
1980
s
Simplified Taligent MVP
View handles events by notifying presenter
Dolphin-Smalltalk MVP
Presenter handles the logic, not the user input control
![Page 67: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/67.jpg)
UI layer MVP targets Clean code best practices like…
![Page 68: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/68.jpg)
Single responsibility principle Class should have only one reason to change
![Page 69: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/69.jpg)
Image credit: http://lostechies.com/derickbailey/2009/02/11/solid-development-principles-in-motivational-pictures/
![Page 70: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/70.jpg)
Open closed principle Open for extension, closed for change
![Page 71: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/71.jpg)
Image credit: http://lostechies.com/derickbailey/2009/02/11/solid-development-principles-in-motivational-pictures/
![Page 72: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/72.jpg)
Dependency Inversion principle Depend on abstraction, not concretions
![Page 73: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/73.jpg)
Image credit: http://lostechies.com/derickbailey/2009/02/11/solid-development-principles-in-motivational-pictures/
![Page 74: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/74.jpg)
Today many MVP variations exists
Here’s one…
![Page 75: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/75.jpg)
Model-View-Presenter
Presenter
View Model
![Page 76: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/76.jpg)
View Impl
Model-View-Presenter
Presenter
View Model
![Page 77: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/77.jpg)
Example
EditorView- Button saveButton;- Button cancelButton;- FieldGroup personFieldGroup;- saveButtonClicked()- cancelButtonClicked()
ClickListener+ buttonClicked()
![Page 78: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/78.jpg)
Presenter+ saveButtonClicked()+ cancelButtonClicked()
EditorView- Button saveButton;- Button cancelButton;- FieldGroup personFieldGroup;+ commitChanges()+ discardChanges()
ClickListener+ buttonClicked()
Example
![Page 79: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/79.jpg)
+ commitChanges()+ discardChanges()
Presenter+ saveButtonClicked()+ cancelButtonClicked()
EditorViewImpl- Button saveButton;- Button cancelButton;- FieldGroup personFieldGroup;+ commitChanges()+ discardChanges()
ClickListener+ buttonClicked()
Example
EditorView
![Page 80: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/80.jpg)
Benefits of MVP
Simpler classes by SRP
Complex UI logic separated from rendering
Logic becomes easier to test by DIP
![Page 81: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/81.jpg)
Application Architecture
![Page 82: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/82.jpg)
Client Browser View
<<EJB>> Business
Logic
Server-side-UI
Presenter <<JPA>> Persistency
Business Persistency
![Page 83: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/83.jpg)
Client Browser View
Server-side-UI
![Page 84: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/84.jpg)
public interface CustomerView extends ApplicationView<CustomerViewPresenter> {
}
![Page 85: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/85.jpg)
public interface CustomerView extends ApplicationView<CustomerViewPresenter> {
void populateCustomers(Collection<Customer> customers);
void openEditorFor(Customer customer); void closeEditor(); void removeTableSelection();}
![Page 86: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/86.jpg)
Client Browser View
Server-side-UI
Presenter
![Page 87: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/87.jpg)
@ViewScopedpublic class CustomerViewPresenter extends AbstractPresenter<CustomerView> {
}
![Page 88: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/88.jpg)
@ViewScopedpublic class CustomerViewPresenter extends AbstractPresenter<CustomerView> {
@EJB private CustomerService customerService;
@Override protected void onViewEnter() { getView().populateCustomers(customerService.getAllCustomers()); }}
![Page 89: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/89.jpg)
@ViewScopedpublic class CustomerViewPresenter extends AbstractPresenter<CustomerView> {
@EJB private CustomerService customerService;
@Override protected void onViewEnter() { getView().populateCustomers(customerService.getAllCustomers()); }
public void onCustomerSaved(@Observes CustomerSavedEvent event) { … }
public void onCustomerRemoved(@Observes CustomerRemovedEvent event) { … }
public void onCustomerSelected(@Observes CustomerSelectedEvent event) { … }}
![Page 90: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/90.jpg)
Client Browser View
<<EJB>> Business
Logic
Server-side-UI
Presenter
Business
![Page 91: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/91.jpg)
@Localpublic interface CustomerService {
void storeCustomers(Collection<Customer> customers);
void removeCustomers(Collection<Customer> customers);
Collection<Customer> getAllCustomers();
Optional<Customer> getCustomerByUsername(String username);}
![Page 92: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/92.jpg)
Application Architecture
@Stateless@TransactionAttribute(TransactionAttributeType.REQUIRED)public class CustomerServiceBean implements CustomerService {
@PersistenceContext(unitName = "appUnit")private EntityManager entityManager;
@Overridepublic void storeCustomers(Collection<Customer> customers) {
customers.forEach(cu -> entityManager.merge(cu));}
@Overridepublic Collection<Customer> getAllCustomers() {
return entityManager.createQuery(query).getResultList();}
…}
![Page 93: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/93.jpg)
Client Browser View
<<EJB>> Business
Logic
Server-side-UI
Presenter <<JPA>> Persistency
Business Persistency
![Page 94: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/94.jpg)
Application Architecture
@Entitypublic class Customer {
@Id@AutoGeneratedprivate Long id;
private String name;
@Temporal(DATE)private Date birthDate;
public boolean isPersisted() {return id != null;
}
…}
![Page 95: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/95.jpg)
<persistence-unit name="appUnit" transaction-type="JTA"> <jta-data-source>jdbc/app-backend</jta-data-source> <class>org.vaadin.example.backend.entity.Customer</class>
<properties> <property name="…" … /> </properties></persistence-unit>
![Page 96: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/96.jpg)
How to Get Started?
![Page 97: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/97.jpg)
<dependency><groupId>com.vaadin</groupId><artifactId>vaadin-cdi</artifactId><version>1.0.2</version>
</dependency>
<repository> <id>vaadin-addons</id> <url>http://maven.vaadin.com/vaadin-addons</url></repository>
![Page 98: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/98.jpg)
Eclipse
Download plugin from Martketplace
![Page 99: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/99.jpg)
IntelliJ IDEA
Built-in support
![Page 100: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/100.jpg)
Netbeans
Download plugin Netbeans Plugin Portal
![Page 101: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/101.jpg)
Example App github.com/peterl1084/cdiexample
Peter Lehto @peter_lehto
expert & trainer
![Page 102: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/102.jpg)
What did we learn today?
1. Java EE contains tons of specifications for enterprise apps 2. Vaadin is a great way to assemble UIs with components 3. Combining Vaadin with Java EE works best through CDI 4. Write maintainable code by following best practices
![Page 103: Web UI best practice integration with Java EE 7EE+7.pdf · Web UI best practice integration with Java EE 7 Peter Lehto @peter_lehto expert & trainer](https://reader033.fdocuments.in/reader033/viewer/2022051901/5fefe852b6d82e5c131452b2/html5/thumbnails/103.jpg)
Thank you!Peter Lehto @peter_lehto
expert & trainer