Vaadin 7

   Joonas Lehtinen, CEO
   @joonaslehtinen
Intro to
 Vaadin

           new Label( “Hello world”)
New in

  7
Getting
started



          QA
User interface
framework for rich
  web applications
java   html
Why on earth?
consumerEE
expectations
reality
consumer      business
 “million” users   “500” users
        10 views   50 views
         1€/user   500€/user

100,000€ / view >> 5,000€ / view
Problem
 How to build consumer
grade UX with business
        system budget
How?
123
Key Ideas
1
Rich
Components
User Inteface
Data Source
   Theme
Rich Applications
User Inteface
Data Source
   Theme
User Inteface
Data Source
   Theme
InMemory, Bean, Method,
Collection, JDBC, JPA, Hibernate,
TextFile, FileSystem, Properties,
EclipseLink, Lucene, Mockups,
GAE, ...
2
Server + Client
Layers of abstraction
             Backend      Web                   Java to
                                     RPC                    JavaScript
              server     server                JavaScript
GWT Vaadin




              required   required   optional     optional     optional




              required   required   required     required     optional
JS




              required   required   required                  required
How does it work,
really?
•   Initial HTML
•   CSS (theme)
•   Images
•   JavaScript

830k total
        compress

250k
        reduced
        widgetset

120k
• name=”Joonas”
• button clicked

150 bytes
• name=”Joonas”
• button clicked

150 bytes




• Add notification

466 bytes
Trying it out
https://github.com/jojule/NotesDemo
3
Embracing
Java
Any JVM
Language
Internet Explorer
         Chrome
          Firefox
           Safari
           Opera
             iOS
         Android
No
  browser
   plugins

Nothing to
    install
Servlet
      Portlet
(most) clouds
Eclipse
IntelliJ IDEA
   Netbeans
       Maven
           Ant
 Spring Roo
            ∙∙∙
Vaadin


      7
Framework
Empower Developers

Embrace Extendability

            Clean Up
Vaadin += GWT
GWT
Compatible
Server
                    Pr
                     Op
          -
             od
                        t
                                               r
                 im
                                             fo
    uc
                                           d
       ti     ize
                                     ize
 vit        df
y      or
                                  tim
                               e rol
                                Op
                                  t-



                            s d ont
                             i C
                               ien
                             Cl
Se
     rve



            r    P
        r-

                           e
            Op
              od
u
                        sid
  c           tim
                                             or
   tiv
                                           df
                 ized
      ity
                                     ize
                                           ol
     f or
                                 r
                               tim
                           Op nt
                            Co
                             t-
                           en
                        Cli
Architecture
Refactored
windowing
public class Vaadin6App extends Application {

	   public void init() {
	   	 setMainWindow(createWindow());
	   }

	   public Window getWindow(String name) {
	   	 Window window = super.getWindow(name);
	   	 if (window == null) {
	   	 	 window = createWindow();
	   	 	 window.setName(name);
	   	 	 addWindow(window);
	   	 }
	   	 return window;
	   }

	   private Window createWindow() {
	   	 Window window = new Window("Vaadin 6 Application");
	   	 window.addComponent(new TextField("What is your name"));
	   	 window.addComponent(new Button("Do not push me"));
	   	 return window;
	   }

}
@Title("Vaadin 7 Application")
public class Vaadin7uiUI extends UI {

	   @Override
	   public void init(VaadinRequest request) {
	   	 addComponent(new TextField("What is your name"));
	   	 addComponent(new Button("Do not push me"));
	   }

}
SASS
Variables & functions
Mixins
Nesting
Selector Inheritance
Redesigned
Forms
public class Employee {
	 String firstName;
	 String lastName;
	 double salary;
                                        6
	 Date birthDate;
      // Getters, setters, …
}

Form form = new Form();
form.setItemDataSource(
   new BeanItem<Employee>(employee));
form.setFormFieldFactory(new FormFieldFactory() {

	 	 	 public Field createField(Item item, Object propertyId,
	 	 	 	 	 Component uiContext) {

	   	   	   	   if ("birthDate".equals(propertyId)) {
                                                                 6
	   	   	   	   	 DateField df = new DateField();
	   	   	   	   	 df.setResolution(DateField.RESOLUTION_DAY);
	   	   	   	   	 return df;
	   	   	   	   }

                // ..

	   	   	 	 return DefaultFieldFactory.createFieldByPropertyType(item
	   	   	 	 	 	 .getItemProperty(propertyId).getType());
	   	   	 }
	   	   });
7
	 	 GridLayout form = new GridLayout(2,2) {

	   	   	    TextField   firstName = new TextField("First name");
	   	   	    TextField   lastName = new TextField("Last name");
	   	   	    TextField   salary = new TextField("Salary");
	   	   	    DateField   birthDate = new DateField("Birth date");

	   	   	    {
	   	   	    	   birthDate.setResolution(Resolution.DAY);
	   	   	    	   setSpacing(true);
	   	   	    	   addComponent(firstName);
	   	   	    	   addComponent(lastName);
	   	   	    	   addComponent(birthDate);
	   	   	    	   addComponent(salary);
	   	   	    }
	   	   };

	 	 BeanFieldGroup<Employee> fieldGroup = new BeanFieldGroup<Employee>(Employee.class);
	 	 fieldGroup.bindMemberFields(form);
	 	 fieldGroup.setItemDataSource(new BeanItem<Employee>(employee));
public class Person {

    @Size(min = 5, max = 50)
    private String name;

    @Min(0)
    @Max(100)
    private int age;

    // + constructor + setters + getters
}
“Joonas Lehtinen”



presentation
                    Component
model




                firstName = “Joonas”
               lastName = “Lehtinen”
final TextField textField = new TextField("Name");
textField.setConverter(new StringToNameConverter());

// ....

Name name = (Name) textField.getConvertedValue();
public class StringToNameConverter implements Converter<String, Name> {

    public Name convertToModel(String text, Locale locale)
            throws ConversionException {
      // do the conversion
    }

    public String convertToPresentation(Name name, Locale locale)
            throws ConversionException {
      // do the conversion
    }

    public Class<Name> getModelType() {
        return Name.class;
    }

    public Class<String> getPresentationType() {
        return String.class;
    }
}
Renewed
communication
Widget
                                        6
                     Paintable
          Variable
client   Changes


server
                                 UIDL


                 Component
Widget
                         7
         Connector

client
                     State
server
         RPC


         Component
public interface ButtonRpc extends ServerRpc {
                             public void click(MouseEventDetails details);
                         }




                                                               private ButtonRpc rpc = new ButtonRpc() {
                                                                  public void click(
private ButtonRpc rpc =
                                                                    MouseEventDetails details) {
RpcProxy.create(ButtonRpc.class, this);
                                                                        // do stuff
                                                                  }
public void onClick(ClickEvent event) {
                                                               };
  rpc.click(
     new MouseEventDetails(event));
                                                               public Button() {
}
                                                                 registerRpc(rpc);
                                                               }




                                    client              server
JavaScript
Add-ons
Publish API from Java

getPage().getJavaScript().addCallback("myCallback",
	 new JavaScriptCallback() {
	 	 public void call(JSONArray arguments) throws JSONException {
	 	 	 // Do something with the arguments
	 	 }
	 });
	 	

Use from JavaScript

window.myCallback('foo', 100);
Widget implementation in JavaScript

window.com_example_MyWidget = function() {
	 var element = $(this.getWidgetElement());
	
    // Draw a plot for any server-side (plot data) state change
	 this.onStateChange = function() {
	 	 $.plot(element, this.getState().series, {grid: {clickable: true}});
	 }

      // Communicate local events back to server-side component
	    element.bind('plotclick', function(event, point, item) {
	    	 if (item) {
        	 var onPlotClick = this.getCallback("plotClick");
	    	 	 onPlotClick(item.seriesIndex, item.dataIndex);
	    	 }
	    });
}
Server-side Java API for Widget

public class MyWidget extends AbstractJavaScriptComponent {

	   public MyWidget() {
	   	 registerCallback("plotClick", new JavaScriptCallback() {
	   	 	 public void call(JSONArray arguments) throws JSONException {
	   	 	 	 // Do something with the event
	   	 	 }
	   	 });
	   }

	   public static class MyWidgetState extends ComponentState {
	   	 public List<List<List<Double>>> plotSeriesData =
	   	 	 	 new ArrayList<List<List<Double>>>();
	   	 // getters & setters
	   }

}
getting
started
Maven
  mvn archetype:generate
  -DarchetypeGroupId=com.vaadin
  -DarchetypeArtifactId=
     vaadin-archetype-application
  -DarchetypeVersion=7.0.0.beta8


  mvn package                   yourproject-1.0.war
Eclipse




http://vaadin.com/
eclipse/experimental
Download for Free
     vaadin.com/book




 ework
 s that
o u an d




      ~700 pages
aadin
                                                                                                                                                                with V                                                  nroo
                                                                                                                                                                                                                            s

                                                                                          ted                                                                                                     o                  Grö
#85
                                                                                     gStar                                                                                                 By Mark

                                                                                 ttin
                                                  DE:


                                                                               Ge
                                            LU                                                                                                                                                                                       rnal
                                        INC                                                                                                                                                                                      Exte urces
                                NTS                                                                                                                                                                                                   o
                       CO NTE                                                                                                                                                                                                     Res
                                    adin           tion
  m



                             ut Va         p plica
                        Abo          An A
             o




                                ting
                         C re a
    rd z . c




                                         s
                                    nent         nts
                          Co  mpo       m  pone                                                                                                   Web ser                                                                              File urces
                                   t Co                                                                                                           Brow -Side                                                                            Res
                                                                                                                                                                                                                                           o
                             ayou                           ...
                           L                         m o re                                                                                             t
                                                                                                                                                   Clien e                                          ntai
                                                                                                                                                                                                         ner
  a




                                    es          nd                                                                                                                                             Co
                            Them inding a                                                                                                          Engi
                                                                                                                                                        n             sts                rvlet
                  fc




                                                                                                                                                                  eque                Se
                                     B                                                                                                                       AX R
                                                                                                                                                               AJ
                             Data
           i t re




                                                                                                                               ent
                                                                                                                       opm                                                                                             efau
                                                                                                                                                                                                                               lt
                                                                                                               d evel         us  t like n              Java t                                          Data g D
                                                                                                                                                                                                                             me
                                                                        IN                            ation ations j                                                                                                  The
                                                                                                                                                                                                              in
       Vis




                                                                                                                                         .A                                                              Bind
                                                                                                                                                           ervle
                                                               AAD                            pplic pplic                           ing
                                                                                                                           or Sw ined
                                                                                                                                                         S
                                                   UT V                                eb a
                                                                                                                                                                                                                                                          n
                                                                                                         a                                                                          UI             nt                                                atio
                                               O                                  xw                eb                WT                                                                   pone                      Inhe
                                                                                                                                                                                                                          rits
                                                                                                                                                                                                                                               pplic ces
                                          AB                               e Aja o build w uch as A                             onta                                       n         Com                                                     A
                                                                                                                                                                                                                                                   our
                 z!




                                                                                                                                                                      atio
                                                                ve   r-sid       u  t              s, s              ne nts c                              A pplic                                 es                       pp  licat
                                                                                                                                                                                                                                      ion     Res
                                                      a ser
                                                                                                                                                                                               ang
                                                                            s yo            work e compo
                         d




                                                                                                                                                                    s                      Ch                           A
                                                                                                                                                            Clas                                                                 mes
                                              in is                  allow p frame                                                                                                  ts                                    The
                    fcar




                                                                                                     c                                                                          Even                    ata
                                       Vaad ork that eskto                                    terfa                                    n                                                              D
                                                                                                                                                                                                           del
                                            me   w                al  d            us  er in        s.                      ru   ns o                       Inhe
                                                                                                                                                                 rits
                                                                                                                                                                                     E vent r Mo
                                        fra             i t i o n u i l t f ro m             nent                   code d by a                                                       Liste
                                                                                                                                                                                            ne
                                                 trad                                 mpo                    tion
                 Re




                                                                     b                                                       l e                                    ser
                                         with                                 ut co                   plica                                  r                                   n
                                                          on is                                                       hand nt-serve
                                                                                                                                                                U             io
                                                                                                                                                                        licat                                       base
                                              pl  icati lly in layo                       , th e ap         tio n is         lie             s
                                                                                                                                                                  App                                      Data
                                          ap              ica                     odel             terac er. The
                                                                                                                           c
                                                                                                                                        ch a
                        e




                                                r a rc h                    en m l user in                     s                 s, su        he                                                                                    s
                                                                                                                                                                                                                                                               ject
                                r




                                           hie                          riv                                  w               ie                                                                                              ation
                                                                 er-d             tua               e bro chnolog per. As t s no                                                                                     pplic                                on ob on with
                           t Mo




                                                      e se
                                                              rv                c
                                                                          the a ning in
                                                                                                 th           te              lo               ei                                                        aadi
                                                                                                                                                                                                                nA                                 licati
                                             In th                 hile            n           ient-
                                                                                                      side             deve ser, ther                                                              for V
                                                                                                                                                                                                                                      to the app e applicati
                                                          er, w ngine ru                                         the                              he                                    itect
                                                                                                                                                                                              ure
                                                  serv                                  n y c l i s i b l e t o t h e b ro w h e A p a c                                          Arch                                      ence ched to th
                                               a
                                                             side
                                                                      e
                                                                               and
                                                                                      a
                                                                                                nv                                    t                                    re 2:                                    refer
                                                                                                                                                                                                         get a onent atta
                        Ge




                                                                                                                 in          nder
                                                cl i e n t - i c a t i o n s i p t , a re i                ript            u                                        Figu
                                                                                                                                                                                                     an
                                                                 n               r                 vaSc              sed                                                                    You c y comp
                                                  co  m m u d J a v a S c u n s a s J a n i s re l e a                                              Web                                                                                                                  face
                                                              L  an
                                                   HTM ide eng ug-ins. V
                                                                              in er             a adi                                             Ser vice                      Ho   t from an                                                                user
                                                                                                                                                                                                                                                                   inter     le
                                                                                                                                                                                                                                                        with           hand
                                                               t-s
                                                     clien o install
                                                                               pl                                       You  r
                                                                                                                                                       EJB                       Tip                                                             tion           u ca
                                                                                                                                                                                                                                                                     n
                                                                                                                          ava            n                                                                                                terac which yo
                                                      need
                                                                  t                                     in               J
                                                                                                                                licat
                                                                                                                                      io                                                                                           er in         ts,
                                                                        2.0.                     Vaad                     App                                                                         ers
                                                                                                                                                                                                en n mode side even        l, us                                               ith
                                                        L icen
                                                                   s e
                                                                                   va             UI           ents                                           B                       t   List rive                           er -                                     t ton w
                                                                                                         pon
                                                                                                                                                                             Even event-d gers serv
                                                                                Ja                                                                         D
                                                                                                                                                                                                                                                                  a bu
                                                                                 Web r             Com                                                                                                                                                      s for
                                                              Web ser
                                                                                  Serv
                                                                                         e
                                                                                                                                                                              In th
                                                                                                                                                                                     e                trig                                             vent
                                                                     w
                                                               Bro -Side                                                                                                                    ents                 s .                      le c lick e
                                                                                                                                                                                       pon              ener                       hand
                                                                  lient                                                                                                        com               t list                        e
                                                                C
                                                                       ne                                                                                    can                         even                         w, w
                                                                 Engi
                                                                                                                                                ugh , you                        with                        belo
                                                                                                                                                               WT)                                     ple
                                                                                                                                         t eno olkit (G                                      exam s class:
                                       m




                                                                                                                     ure
                                                                                                              hitec
                                                                                                                    t             is no          To                                    the               u
Q&A

Vaadin 7

  • 2.
    Vaadin 7 Joonas Lehtinen, CEO @joonaslehtinen
  • 3.
    Intro to Vaadin new Label( “Hello world”)
  • 4.
  • 5.
  • 7.
    User interface framework forrich web applications
  • 9.
    java html
  • 10.
  • 11.
  • 13.
  • 14.
  • 15.
    consumer business “million” users “500” users 10 views 50 views 1€/user 500€/user 100,000€ / view >> 5,000€ / view
  • 16.
    Problem How tobuild consumer grade UX with business system budget
  • 17.
  • 18.
  • 19.
  • 20.
  • 23.
  • 27.
  • 32.
  • 34.
    InMemory, Bean, Method, Collection,JDBC, JPA, Hibernate, TextFile, FileSystem, Properties, EclipseLink, Lucene, Mockups, GAE, ...
  • 35.
  • 36.
    Layers of abstraction Backend Web Java to RPC JavaScript server server JavaScript GWT Vaadin required required optional optional optional required required required required optional JS required required required required
  • 37.
    How does itwork, really?
  • 39.
    Initial HTML • CSS (theme) • Images • JavaScript 830k total compress 250k reduced widgetset 120k
  • 41.
  • 43.
    • name=”Joonas” • buttonclicked 150 bytes • Add notification 466 bytes
  • 44.
  • 46.
  • 47.
  • 48.
  • 49.
    Internet Explorer Chrome Firefox Safari Opera iOS Android
  • 50.
    No browser plugins Nothing to install
  • 51.
    Servlet Portlet (most) clouds
  • 52.
    Eclipse IntelliJ IDEA Netbeans Maven Ant Spring Roo ∙∙∙
  • 54.
    Vaadin 7 Framework
  • 55.
  • 56.
  • 60.
  • 61.
    Server Pr Op - od t r im fo uc d ti ize ize vit df y or tim e rol Op t- s d ont i C ien Cl
  • 62.
    Se rve r P r- e Op od u sid c tim or tiv df ized ity ize ol f or r tim Op nt Co t- en Cli
  • 63.
  • 65.
  • 67.
    public class Vaadin6Appextends Application { public void init() { setMainWindow(createWindow()); } public Window getWindow(String name) { Window window = super.getWindow(name); if (window == null) { window = createWindow(); window.setName(name); addWindow(window); } return window; } private Window createWindow() { Window window = new Window("Vaadin 6 Application"); window.addComponent(new TextField("What is your name")); window.addComponent(new Button("Do not push me")); return window; } }
  • 68.
    @Title("Vaadin 7 Application") publicclass Vaadin7uiUI extends UI { @Override public void init(VaadinRequest request) { addComponent(new TextField("What is your name")); addComponent(new Button("Do not push me")); } }
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
    public class Employee{ String firstName; String lastName; double salary; 6 Date birthDate; // Getters, setters, … } Form form = new Form(); form.setItemDataSource( new BeanItem<Employee>(employee));
  • 78.
    form.setFormFieldFactory(new FormFieldFactory() { public Field createField(Item item, Object propertyId, Component uiContext) { if ("birthDate".equals(propertyId)) { 6 DateField df = new DateField(); df.setResolution(DateField.RESOLUTION_DAY); return df; } // .. return DefaultFieldFactory.createFieldByPropertyType(item .getItemProperty(propertyId).getType()); } });
  • 79.
    7 GridLayoutform = new GridLayout(2,2) { TextField firstName = new TextField("First name"); TextField lastName = new TextField("Last name"); TextField salary = new TextField("Salary"); DateField birthDate = new DateField("Birth date"); { birthDate.setResolution(Resolution.DAY); setSpacing(true); addComponent(firstName); addComponent(lastName); addComponent(birthDate); addComponent(salary); } }; BeanFieldGroup<Employee> fieldGroup = new BeanFieldGroup<Employee>(Employee.class); fieldGroup.bindMemberFields(form); fieldGroup.setItemDataSource(new BeanItem<Employee>(employee));
  • 80.
    public class Person{ @Size(min = 5, max = 50) private String name; @Min(0) @Max(100) private int age; // + constructor + setters + getters }
  • 81.
    “Joonas Lehtinen” presentation Component model firstName = “Joonas” lastName = “Lehtinen”
  • 82.
    final TextField textField= new TextField("Name"); textField.setConverter(new StringToNameConverter()); // .... Name name = (Name) textField.getConvertedValue();
  • 83.
    public class StringToNameConverterimplements Converter<String, Name> { public Name convertToModel(String text, Locale locale) throws ConversionException { // do the conversion } public String convertToPresentation(Name name, Locale locale) throws ConversionException { // do the conversion } public Class<Name> getModelType() { return Name.class; } public Class<String> getPresentationType() { return String.class; } }
  • 84.
  • 85.
    Widget 6 Paintable Variable client Changes server UIDL Component
  • 86.
    Widget 7 Connector client State server RPC Component
  • 87.
    public interface ButtonRpcextends ServerRpc { public void click(MouseEventDetails details); } private ButtonRpc rpc = new ButtonRpc() { public void click( private ButtonRpc rpc = MouseEventDetails details) { RpcProxy.create(ButtonRpc.class, this); // do stuff } public void onClick(ClickEvent event) { }; rpc.click( new MouseEventDetails(event)); public Button() { } registerRpc(rpc); } client server
  • 88.
  • 89.
    Publish API fromJava getPage().getJavaScript().addCallback("myCallback", new JavaScriptCallback() { public void call(JSONArray arguments) throws JSONException { // Do something with the arguments } }); Use from JavaScript window.myCallback('foo', 100);
  • 90.
    Widget implementation inJavaScript window.com_example_MyWidget = function() { var element = $(this.getWidgetElement()); // Draw a plot for any server-side (plot data) state change this.onStateChange = function() { $.plot(element, this.getState().series, {grid: {clickable: true}}); } // Communicate local events back to server-side component element.bind('plotclick', function(event, point, item) { if (item) { var onPlotClick = this.getCallback("plotClick"); onPlotClick(item.seriesIndex, item.dataIndex); } }); }
  • 91.
    Server-side Java APIfor Widget public class MyWidget extends AbstractJavaScriptComponent { public MyWidget() { registerCallback("plotClick", new JavaScriptCallback() { public void call(JSONArray arguments) throws JSONException { // Do something with the event } }); } public static class MyWidgetState extends ComponentState { public List<List<List<Double>>> plotSeriesData = new ArrayList<List<List<Double>>>(); // getters & setters } }
  • 92.
  • 94.
    Maven mvnarchetype:generate -DarchetypeGroupId=com.vaadin -DarchetypeArtifactId= vaadin-archetype-application -DarchetypeVersion=7.0.0.beta8 mvn package yourproject-1.0.war
  • 95.
  • 96.
    Download for Free vaadin.com/book ework s that o u an d ~700 pages
  • 97.
    aadin with V nroo s ted o Grö #85 gStar By Mark ttin DE: Ge LU rnal INC Exte urces NTS o CO NTE Res adin tion m ut Va p plica Abo An A o ting C re a rd z . c s nent nts Co mpo m pone Web ser File urces t Co Brow -Side Res o ayou ... L m o re t Clien e ntai ner a es nd Co Them inding a Engi n sts rvlet fc eque Se B AX R AJ Data i t re ent opm efau lt d evel us t like n Java t Data g D me IN ation ations j The in Vis .A Bind ervle AAD pplic pplic ing or Sw ined S UT V eb a n a UI nt atio O xw eb WT pone Inhe rits pplic ces AB e Aja o build w uch as A onta n Com A our z! atio ve r-sid u t s, s ne nts c A pplic es pp licat ion Res a ser ang s yo work e compo d s Ch A Clas mes in is allow p frame ts The fcar c Even ata Vaad ork that eskto terfa n D del me w al d us er in s. ru ns o Inhe rits E vent r Mo fra i t i o n u i l t f ro m nent code d by a Liste ne trad mpo tion Re b l e ser with ut co plica r n on is hand nt-serve U io licat base pl icati lly in layo , th e ap tio n is lie s App Data ap ica odel terac er. The c ch a e r a rc h en m l user in s s, su he s ject r hie riv w ie ation er-d tua e bro chnolog per. As t s no pplic on ob on with t Mo e se rv c the a ning in th te lo ei aadi nA licati In th hile n ient- side deve ser, ther for V to the app e applicati er, w ngine ru the he itect ure serv n y c l i s i b l e t o t h e b ro w h e A p a c Arch ence ched to th a side e and a nv t re 2: refer get a onent atta Ge in nder cl i e n t - i c a t i o n s i p t , a re i ript u Figu an n r vaSc sed You c y comp co m m u d J a v a S c u n s a s J a n i s re l e a Web face L an HTM ide eng ug-ins. V in er a adi Ser vice Ho t from an user inter le with hand t-s clien o install pl You r EJB Tip tion u ca n ava n terac which yo need t in J licat io er in ts, 2.0. Vaad App ers en n mode side even l, us ith L icen s e va UI ents B t List rive er - t ton w pon Even event-d gers serv Ja D a bu Web r Com s for Web ser Serv e In th e trig vent w Bro -Side ents s . le c lick e pon ener hand lient com t list e C ne can even w, w Engi ugh , you with belo WT) ple t eno olkit (G exam s class: m ure hitec t is no To the u
  • 98.