Presentation at Vaadin & GWT meetup San Francisco Sep 25, 2013

1. Joonas Lehtinen
Founder & CEO
@joonaslehtinen
Beyond 7

2. Questions &
answers
Roadmap
Quick recap of
Vaadin 7
7.1
Feature by
feature
Agenda

3. Vaadin
7

4. v3
2002
v0.1
2001
Open
Source

5. v4
2006
Ajax
v5
2007

6. 7
Feb
v6
2009

7. Complete
stack
Renewed
from Inside
Sass
JS
HTML5
+=
GWT
RPC
State
UI
Field

8. vaadin.com/7

9. Vaadin
7.1

10. @VaadinServlet
Configuration
https://vaadin.com/wiki/-/wiki/Main/Creating+a+servlet+3.0+application

11. @Theme("foo")
public class FooUI extends UI {
@WebServlet(value = "/*", asyncSupported = true)
@VaadinServletConfiguration(productionMode = false, ui = FooUI.class)
public static class Servlet extends VaadinServlet {
}
@Override
protected void init(VaadinRequest request) {
...
}
}

12. @Theme("foo")
public class FooUI extends UI {
@WebServlet(value = "/*", asyncSupported = true)
@VaadinServletConfiguration(productionMode = false, ui = FooUI.class)
public static class Servlet extends VaadinServlet {
}
@Override
protected void init(VaadinRequest request) {
...
}
}

13. Server initiated
events / Push
https://vaadin.com/wiki/-/wiki/Main/Using+server+initiated+events

14. server
client
Component
Widget
Connector
RPC
State

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

16. @Push MyUI
<async-supported/> or
asyncSupported = true
vaadin-push
dependency

17. UI.getCurrent().access(new Runnable() {
public void run() {
layout.addComponent(new Label("foo”));
}
});

18. Debug
window

19. ?debug

20. Optimizing widgetset...
278k 130k

21. Compiling
themes

22. Add-on
theme
packaging
https://vaadin.com/wiki/-/wiki/Main/Packaging+SCSS+or+CSS+in+an+add-on

23. Inject CSS
dynamically
https://vaadin.com/wiki/-/wiki/Main/Dynamically+injecting+CSS

24. getPage().getStyles().add(
".reindeer.v-app { background: #"
+ Math.round(Math.random() * 899 + 100) +
";}"
);

25. Sample
http://demo.vaadin.com/sampler/#foundation/cssinject

26. Calendar
https://vaadin.com/wiki/-/wiki/Main/Migrating+from+Vaadin+7.0+to+Vaadin+7.1

27. Accessibility
with WAI-ARIA
https://vaadin.com/blog/-/blogs/first-step-in-accessibility

28. Button
TextField
PasswordField
TextArea
DateField
WAI-ARIA enabled
components
CheckBox
ComboBox
ButtonGroup
Tree
Tooltip

29. Roadmap

30. Roadmap

31. Vaadin 7.2
GWT compatibility
Application archetype
Vaadin CDI 1.0 beta
Vaadin TouchKit 4.0
Vaadin TestBench 4.0
Netbeans plug-in
Spreadsheet

32. Grid
• Client-side data model
• Client-side APIs
• Replaces Table and TreeTable
New theme that leverages SASS
Responsive extension built-in
http://vaadin.com/addon/vaadin-responsive
Vaadin 7.2

34. <Beat design example>

35. // Vaadin UI
protected void init(VaadinRequest request) {
new Responsive(this);
}
// CSS
.v-ui[width-range~="0-800px"] {
/* Styles that apply when the UI's width is
between 0 and 800 pixels */
}
.v-ui[width-range~="801px-"] {
/* Styles that apply when the UI's width is
over 800 pixels */
}
http://demo.vaadin.com/responsive/

36. Full stack example
Suitable for working on all layers
• Server-side Java
• Client-side Java
• JavaScript
Modularization and full tools support
Application Archetype

37. Finalize what is already available as
alpha in directory
http://vaadin.com/addon/vaadin-cdi
Features
• Registering UI with @CDIUI and Views
• Decoupling by injecting components
• Injecting EJBs, events, ...
• UI Scope
• Supports JAAS
Vaadin CDI 1.0 beta

38. New cross-platform theme
http://demo.vaadin.com/parking/
Windows Phone 8 support
Vaadin TouchKit 4.0

39. Vaadin Driver :
New way of building selectors
Replacing recorder with debug window
Vaadin TestBench 4.0

40. Spreadsheet

41. Netbeans plugin

42. http://gwtcreate.com/
San Francisco - Dec 12-13
Frankfurt - Dec 17-18