Joonas Lehtinen
Founder & CEO
@joonaslehtinen
Beyond 7
Questions &
answers
Roadmap
Quick recap of
Vaadin 7
7.1
Feature by
feature
Agenda
Vaadin
7
v3
2002
v0.1
2001
Open
Source
v4
2006
Ajax
v5
2007
7
Feb
v6
2009
Complete
stack
Renewed
from Inside
Sass
JS
HTML5
+=
GWT
RPC
State
UI
Field
vaadin.com/7
Vaadin
7.1
@VaadinServlet
Configuration
https://vaadin.com/wiki/-/wiki/Main/Creating+a+servlet+3.0+application
@Theme("foo")
public class FooUI extends UI {
	 @WebServlet(value = "/*", asyncSupported = true)
	 @VaadinServletConfigura...
@Theme("foo")
public class FooUI extends UI {
	 @WebServlet(value = "/*", asyncSupported = true)
	 @VaadinServletConfigura...
Server initiated
events / Push
https://vaadin.com/wiki/-/wiki/Main/Using+server+initiated+events
server
client
Component
Widget
Connector
RPC
State
Sample
http://demo.vaadin.com/sampler/#foundation/push
@Push MyUI
<async-supported/> or
asyncSupported = true
vaadin-push
dependency
UI.getCurrent().access(new Runnable() {
public void run() {
layout.addComponent(new Label("foo”));
}
});
Debug
window
?debug
Optimizing widgetset...
278k 130k
Compiling
themes
Add-on
theme
packaging
https://vaadin.com/wiki/-/wiki/Main/Packaging+SCSS+or+CSS+in+an+add-on
Inject CSS
dynamically
https://vaadin.com/wiki/-/wiki/Main/Dynamically+injecting+CSS
getPage().getStyles().add(
".reindeer.v-app { background: #"
+ Math.round(Math.random() * 899 + 100) +
";}"
);
Sample
http://demo.vaadin.com/sampler/#foundation/cssinject
Calendar
https://vaadin.com/wiki/-/wiki/Main/Migrating+from+Vaadin+7.0+to+Vaadin+7.1
Accessibility
with WAI-ARIA
https://vaadin.com/blog/-/blogs/first-step-in-accessibility
Button
TextField
PasswordField
TextArea
DateField
WAI-ARIA enabled
components
CheckBox
ComboBox
ButtonGroup
Tree
Tooltip
Roadmap
Roadmap
Vaadin 7.2
GWT compatibility
Application archetype
Vaadin CDI 1.0 beta
Vaadin TouchKit 4.0
Vaadin TestBench 4.0
Netbeans p...
Grid
• Client-side data model
• Client-side APIs
• Replaces Table and TreeTable
New theme that leverages SASS
Responsive e...
<Beat design example>
// Vaadin UI
protected void init(VaadinRequest request) {
new Responsive(this);
}
// CSS
.v-ui[width-range~="0-800px"] {
/...
Full stack example
Suitable for working on all layers
• Server-side Java
• Client-side Java
• JavaScript
Modularization an...
Finalize what is already available as
alpha in directory
http://vaadin.com/addon/vaadin-cdi
Features
• Registering UI with...
New cross-platform theme
http://demo.vaadin.com/parking/
Windows Phone 8 support
Vaadin TouchKit 4.0
Vaadin Driver :
New way of building selectors
Replacing recorder with debug window
Vaadin TestBench 4.0
Spreadsheet
Netbeans plugin
http://gwtcreate.com/
San Francisco - Dec 12-13
Frankfurt - Dec 17-18
Beoynd Vaadin 7
Upcoming SlideShare
Loading in …5
×

Beoynd Vaadin 7

2,906 views
2,771 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,906
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
32
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Beoynd Vaadin 7

  1. 1. Joonas Lehtinen Founder & CEO @joonaslehtinen Beyond 7
  2. 2. Questions & answers Roadmap Quick recap of Vaadin 7 7.1 Feature by feature Agenda
  3. 3. Vaadin 7
  4. 4. v3 2002 v0.1 2001 Open Source
  5. 5. v4 2006 Ajax v5 2007
  6. 6. 7 Feb v6 2009
  7. 7. Complete stack Renewed from Inside Sass JS HTML5 += GWT RPC State UI Field
  8. 8. vaadin.com/7
  9. 9. Vaadin 7.1
  10. 10. @VaadinServlet Configuration https://vaadin.com/wiki/-/wiki/Main/Creating+a+servlet+3.0+application
  11. 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. 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. 13. Server initiated events / Push https://vaadin.com/wiki/-/wiki/Main/Using+server+initiated+events
  14. 14. server client Component Widget Connector RPC State
  15. 15. Sample http://demo.vaadin.com/sampler/#foundation/push
  16. 16. @Push MyUI <async-supported/> or asyncSupported = true vaadin-push dependency
  17. 17. UI.getCurrent().access(new Runnable() { public void run() { layout.addComponent(new Label("foo”)); } });
  18. 18. Debug window
  19. 19. ?debug
  20. 20. Optimizing widgetset... 278k 130k
  21. 21. Compiling themes
  22. 22. Add-on theme packaging https://vaadin.com/wiki/-/wiki/Main/Packaging+SCSS+or+CSS+in+an+add-on
  23. 23. Inject CSS dynamically https://vaadin.com/wiki/-/wiki/Main/Dynamically+injecting+CSS
  24. 24. getPage().getStyles().add( ".reindeer.v-app { background: #" + Math.round(Math.random() * 899 + 100) + ";}" );
  25. 25. Sample http://demo.vaadin.com/sampler/#foundation/cssinject
  26. 26. Calendar https://vaadin.com/wiki/-/wiki/Main/Migrating+from+Vaadin+7.0+to+Vaadin+7.1
  27. 27. Accessibility with WAI-ARIA https://vaadin.com/blog/-/blogs/first-step-in-accessibility
  28. 28. Button TextField PasswordField TextArea DateField WAI-ARIA enabled components CheckBox ComboBox ButtonGroup Tree Tooltip
  29. 29. Roadmap
  30. 30. Roadmap
  31. 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. 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
  33. 33. <Beat design example>
  34. 34. // 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/
  35. 35. Full stack example Suitable for working on all layers • Server-side Java • Client-side Java • JavaScript Modularization and full tools support Application Archetype
  36. 36. 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
  37. 37. New cross-platform theme http://demo.vaadin.com/parking/ Windows Phone 8 support Vaadin TouchKit 4.0
  38. 38. Vaadin Driver : New way of building selectors Replacing recorder with debug window Vaadin TestBench 4.0
  39. 39. Spreadsheet
  40. 40. Netbeans plugin
  41. 41. http://gwtcreate.com/ San Francisco - Dec 12-13 Frankfurt - Dec 17-18

×