Joonas LehtinenFounder & CEO@joonaslehtinen

Beyond 7

Questions &answers

Roadmap

Quick recap of Vaadin 7

7.1Feature by feature

Agenda

Vaadin7

v32002

v0.12001

OpenSource

v42006

Ajax

v52007

7Febv6

2009

Completestack

Renewedfrom Inside

Sass

JS

HTML5+=GWT

RPCState

UI

Field

vaadin.com/7

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

Samplehttp://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”));

}});

Debugwindow

?debug

Optimizing widgetset...

278k 130k

Compiling themes

Add-ontheme packaging

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

Inject CSSdynamically

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

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

);

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

ButtonTextFieldPasswordFieldTextAreaDateField

WAI-ARIA enabled components

CheckBoxComboBoxButtonGroupTreeTooltip

Roadmap

Roadmap

Vaadin 7.2GWT compatibilityApplication archetypeVaadin CDI 1.0 betaVaadin TouchKit 4.0Vaadin TestBench 4.0Netbeans plug-inSpreadsheet

Grid• Client-side data model• Client-side APIs• Replaces Table and TreeTable

New theme that leverages SASS

Responsive extension built-inhttp://vaadin.com/addon/vaadin-responsive

Vaadin 7.2

<Beat design example>

// Vaadin UIprotected 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 themehttp://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-13Frankfurt - Dec 17-18