Vaadin roadmap-devoxx-2013

Joonas Lehtinen Founder & CEO @joonaslehtinen

Beyond 7

Questions & answers

Roadmap

Quick recap of Vaadin 7

7.1 Feature by feature

Agenda

Vaadin7.1

@VaadinServletConfiguration

https://vaadin.com/wiki/-/wiki/Main/Creating+a+servlet+3.0+application

@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) { ... }!}

@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) { ... }!}

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/> orasyncSupported = 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

Vaadin 7.2

GWT compatibility

Application archetype

Vaadin CDI 1.0 beta

Vaadin TouchKit 4.0

Vaadin TestBench 4.0

Netbeans plug-in

Spreadsheet

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

Editor rowWidgetWidgetWidget

Editor rowComponentComponentComponent

Widget

Renderer

Grid

Escalator

Connector (Hierarchical) DataSource

(Hierarchical) DataSource

Grid

Component Component

Widget

Renderer Per column

In headers and cells

In headers and cells

Escalator

<Beat design example>

// 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/

Full stack example

Suitable for working on all layers • Server-side Java • Client-side Java • JavaScript

Modularization and full tools support

Application Archetype

Finalize what is already available as alpha in directoryhttp://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

New cross-platform theme http://demo.vaadin.com/parking/

Windows Phone 8 support

Vaadin TouchKit 4.0

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