Vaadin 7              Joonas Lehtinen / Vaadin                                         @joonaslehtinen               12-5-...
Quick intro to                        Vaadin                    Framework17. toukokuuta 12
Vaadin is a                    UI framework                     for rich web                     applications17. toukokuut...
java     html17. toukokuuta 12
Developer                    experience     goals          User                    expecience                    Scalabili...
12317. toukokuuta 12                    ideas
17. toukokuuta 12                     1                    powerful                    components
User Inteface                    Data Source                       Theme17. toukokuuta 12
17. toukokuuta 12
17. toukokuuta 12
17. toukokuuta 12
17. toukokuuta 12
User Inteface                    Data Source                       Theme17. toukokuuta 12
Reindeer                      Runo                    Chameleon                     Custom17. toukokuuta 12
User Inteface                    Data Source                       Theme17. toukokuuta 12
17. toukokuuta 12
InMemory, Bean, Method,     Collection, JDBC, JPA,     Hibernate, TextFile,     FileSystem, Properties,     EclipseLink, L...
17. toukokuuta 12                    2                    combine the best of                    • Server-side RIA        ...
Layers of abstraction                   backend frontend                                                  RPC         brow...
How does it                    work, really?17. toukokuuta 12
17. toukokuuta 12
•   Initial HTML                    •   CSS (theme)                    •   Images                    •   JavaScript       ...
• name=”Joonas”                    • button clicked                    150 bytes17. toukokuuta 12
17. toukokuuta 12
• name=”Joonas”                    • button clicked                    150 bytes                    • Add                 ...
Vaadin UI component    architecture                                       HTTP(S)          “UI Component”                 ...
Creating new UI                    components is                    really easy17. toukokuuta 12
17. toukokuuta 12
Implement two classes     Server-side                                Client-side          “UI Component”            Automa...
17. toukokuuta 12
17. toukokuuta 12
17. toukokuuta 12
17. toukokuuta 12
17. toukokuuta 12
PaperStack notes = new PaperStack();!! @Override! public void init() {            // === Layout ==========================...
PaperStack notes = new PaperStack();!! @Override! public void init() {            // === Layout ==========================...
17. toukokuuta 12                    3                    embrace                    java
Any JVM                    Language17. toukokuuta 12
Scalawith Scaladin add-on       val layout =         new VerticalLayout(width = 100 pct, height = 100 pct) {             a...
Internet Explorer                    6..                             Chrome                              Firefox          ...
No                      browser                       plugins                    Nothing to                        install...
Servlet                          Portlet                    (most) clouds17. toukokuuta 12
Apache Tomcat, version 4.1 or later                    Oracle WebLogic Server, version 9.2 or later                    Ora...
Eclipse                    IntelliJ IDEA                       Netbeans                           Maven                   ...
17. toukokuuta 12
Maven                mvn archetype:generate                -DarchetypeGroupId=com.vaadin                -DarchetypeArtifac...
17. toukokuuta 12                    Vaadin                          7                    Framework
History                    When What                     2001 Millstone Framework is born                     2002 Release...
Heavily under                    construction                    [ to be released on Q4 ]17. toukokuuta 12
vaadin.com/roadmap17. toukokuuta 12
17. toukokuuta 12                    Empower Developers                    Embrace Extendability                          ...
Empower Developers   View Management                               Redesign                               • Remove "browse...
public class Vaadin6testApplication extends Application {  	 public void init() {  	 	 Window mainWindow = new Window("V6t...
17. toukokuuta 12
17. toukokuuta 12
public class V6testApplication extends Application {              	     public void init() {              	     	 setMainW...
public class Vaadin7testRoot extends Root {      	      public void init(WrappedRequest request) {      	      	 addCompon...
Warning: Naming might                    be changed from “Root”                    to “Region”17. toukokuuta 12
public class Vaadin6Application extends Application {     	     public void init() {     	     	 Window window = new Windo...
public class V7testRoot extends Root {            	 public void init(WrappedRequest request) {            	 	 addComponent...
public class V7testRoot extends Root {   	 public void init(WrappedRequest request) {   	 	 final Label label = new Label(...
Most of the changes                    already available Alpha 1                    View management API                   ...
Empower Developers   Full CSS Control                               • Layout calculations are                             ...
.v-connector {                       -webkit-box-sizing: border-box;                       -moz-box-sizing: border-box;   ...
private final ElementResizeListener listener = new ElementResizeListener() {       public void onElementResize(ElementResi...
Alpha 2 implements lots of                    layout performance                    improvements, but work is             ...
or17. toukokuuta 12
Empower Developers   Glue for Integrations                               • Publish JavaScript API                         ...
Empower Developers   Live Translations                               • Built in translator API                            ...
Easier Client-Server                               Embrace Extendability          Empower Developers                      ...
Widget                                                   6                                Paintable                     Va...
Widget                                    7                    Connector client                                State serve...
State                    Bean with most Java types: integers,                    Strings, lists, maps, ...                ...
RPC                    public interface ButtonRpc extends ServerRpc {                               public void click(Mous...
Already done in Alpha 2,                    start trying these out                    today...17. toukokuuta 12
New Extension                               Embrace Extendability          Empower Developers                             ...
Generic JavaScript                               Embrace Extendability          Empower Developers                        ...
Ease Common                               Embrace Extendability          Empower Developers                               ...
Data Binding and          Embrace Extendability          Empower Developers               Clean Up           Form redesign...
Converters17. toukokuuta 12
public class Name {        private String firstName;        private String lastName;               public Name(String firs...
“Joonas Lehtinen” presentation                         Component model                     firstName = “Joonas”            ...
public class StringToNameConverter implements Converter<String, Name> {        public Name convertToModel(String text, Loc...
Name name = new Name("Rudolph", "Reindeer");        final TextField textField = new TextField("Name");        textField.se...
public class MyStringToDoubleConverter extends     StringToDoubleConverter {                @Override                prote...
public class MyConverterFactory extends DefaultConverterFactory {               @Override               protected <PRESENT...
table.setConverter(PERCENT_PROPERTY,       new StringToNumberConverter() {         @Override         protected NumberForma...
Validation17. toukokuuta 12
public class Person {                    @Size(min = 5, max = 50)                    private String name;                 ...
Person person = new Person("John", 26);BeanItem<Person> item = new    BeanItem<Person>(person);TextField firstName = new T...
FieldGroup17. toukokuuta 12
public class Employee {                    	 String firstName;                    	 String lastName;                    	 ...
17. toukokuuta 12
Form form = new Form() {	    	     	 @Override	    	     	 protected void attachField(Object propertyId, Field field) {	  ...
form.setFormFieldFactory(new FormFieldFactory() {         	     	    	   public Field createField(Item item, Object proper...
FormLayout form = new FormLayout() {    	     	     	   TextField   firstName = new TextField("First name");    	     	   ...
final BeanFieldGroup<Employee> fieldGroup =	 	 	 new BeanFieldGroup<Employee>(Employee.class);	 fieldGroup.bindMemberField...
17. toukokuuta 12
GridLayout form = new GridLayout(2,2) {	     	      	     TextField   firstName = new TextField("First name");	     	     ...
17. toukokuuta 12
Client-side          Embrace Extendability          Empower Developers                                  • Review widgetset...
Improved session          Embrace Extendability          Empower Developers               Clean Up           management   ...
HTML          Embrace Extendability          Empower Developers                                  • Simpler DOM as IE6/IE7 ...
Old API          Embrace Extendability          Empower Developers                                  • Replace integer cons...
17. toukokuuta 12                    Empower Developers                    Embrace Extendability                          ...
Changes to roadmap                    are expected.                    Almost certainly some                    things wil...
Vaadin 7.1                    • Table redesign                    • Things postponed from 7.017. toukokuuta 12
more                    info17. toukokuuta 12
Find out more at                    vaadin.com/wiki17. toukokuuta 12
Roots (Windows)             •      Creating a basic application             •      Creating multi tab applications        ...
Form & Data binding        •   Formatting data in Table        •   Creating a TextField for Integer only input using a dat...
Custom widgets           • Creating a simple component           • Using Shared State for communication           • Sendin...
Download for Free          vaadin.com/book     Vaadin is                a    for build n open source              ing mod ...
brought to you by... #85   Get More Refcardz! Visit refcardz.com                                           CONTENTS INCLUD...
Expert services                                      Better                      Online support                           ...
Upcoming SlideShare
Loading in …5
×

Vaadin7

2,945
-1

Published on

Presentation at GeeCON 2012 conference on upcoming Vaadin 7 release.

Published in: Technology, Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,945
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
108
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Vaadin7

  1. 1. Vaadin 7 Joonas Lehtinen / Vaadin @joonaslehtinen 12-5-1717. toukokuuta 12
  2. 2. Quick intro to Vaadin Framework17. toukokuuta 12
  3. 3. Vaadin is a UI framework for rich web applications17. toukokuuta 12
  4. 4. java html17. toukokuuta 12
  5. 5. Developer experience goals User expecience Scalability17. toukokuuta 12
  6. 6. 12317. toukokuuta 12 ideas
  7. 7. 17. toukokuuta 12 1 powerful components
  8. 8. User Inteface Data Source Theme17. toukokuuta 12
  9. 9. 17. toukokuuta 12
  10. 10. 17. toukokuuta 12
  11. 11. 17. toukokuuta 12
  12. 12. 17. toukokuuta 12
  13. 13. User Inteface Data Source Theme17. toukokuuta 12
  14. 14. Reindeer Runo Chameleon Custom17. toukokuuta 12
  15. 15. User Inteface Data Source Theme17. toukokuuta 12
  16. 16. 17. toukokuuta 12
  17. 17. InMemory, Bean, Method, Collection, JDBC, JPA, Hibernate, TextFile, FileSystem, Properties, EclipseLink, Lucene, Mockups, GAE, ... Your’s17. toukokuuta 12
  18. 18. 17. toukokuuta 12 2 combine the best of • Server-side RIA • Google Web Toolkit
  19. 19. Layers of abstraction backend frontend RPC browser browser server server any language any language json / xml java ➠ javascriptExtJS GWT Vaadin required required optional optional optional required required required required optional required required required X required 17. toukokuuta 12
  20. 20. How does it work, really?17. toukokuuta 12
  21. 21. 17. toukokuuta 12
  22. 22. • Initial HTML • CSS (theme) • Images • JavaScript 830k total compress 250k reduced widgetset 120k17. toukokuuta 12
  23. 23. • name=”Joonas” • button clicked 150 bytes17. toukokuuta 12
  24. 24. 17. toukokuuta 12
  25. 25. • name=”Joonas” • button clicked 150 bytes • Add notification 466 bytes17. toukokuuta 12
  26. 26. Vaadin UI component architecture HTTP(S) “UI Component” “Widget” • Button, Table, Tree, ... • Client-side peer for • Server-side data the component • Full Java API • Runs on JavaScript Java Java • Compiled with JDK • Google Web Toolkit17. toukokuuta 12
  27. 27. Creating new UI components is really easy17. toukokuuta 12
  28. 28. 17. toukokuuta 12
  29. 29. Implement two classes Server-side Client-side “UI Component” Automatic “Widget” • Define API • Render to DOM • Receive client events • Collect user events • Send UI updates back17. toukokuuta 12
  30. 30. 17. toukokuuta 12
  31. 31. 17. toukokuuta 12
  32. 32. 17. toukokuuta 12
  33. 33. 17. toukokuuta 12
  34. 34. 17. toukokuuta 12
  35. 35. PaperStack notes = new PaperStack();!! @Override! public void init() { // === Layout ========================================================! ! HorizontalLayout lo= new HorizontalLayout();! ! Window mainWindow = new Window("Postitnotes Application", lo);! ! lo.setSizeFull();! ! lo.addComponent(notes);! ! lo.setComponentAlignment(notes, Alignment.MIDDLE_CENTER);! ! setMainWindow(mainWindow);!!! ! notes.setWidth("350px");! ! notes.setHeight("350px");! ! // === Note 1 ========================================================! ! notes.addComponent(new Label("<h1>TODO / Today</h1><div style=font-size: 24px>” + “<p>Enjoy the conference...</p></div>", Label.CONTENT_XHTML), "#fef49c"); // === Note 2 ========================================================! ! notes.addComponent(new Label("<h1>TODO / Tomorrow</h1><div style=font-size: 24px>” + “<p>Learn Vaadin!</p></div>", Label.CONTENT_XHTML), "#b2ffa1"); // === Note 3 ========================================================! ! notes.addComponent(new Label("<div style=font-size: 60px><center><br/><br/><br/>” + “DOUBLE<br/><br/><br/>SPEED</center></div>", Label.CONTENT_XHTML), "#b2ffa1"); // === Note 4 ========================================================! ! com.vaadin.ui.RichTextArea rta = new RichTextArea();! ! rta.setSizeFull();! ! notes.addComponent(rta);! ! rta.setValue("<span style=font-size: 35pt; color: green;>You can use any “ + “Vaadin components here...</span>");! }17. toukokuuta 12
  36. 36. PaperStack notes = new PaperStack();!! @Override! public void init() { // === Layout ========================================================! ! HorizontalLayout lo= new HorizontalLayout();! ! Window mainWindow = new Window("Postitnotes Application", lo);! ! lo.setSizeFull();! ! lo.addComponent(notes);! ! lo.setComponentAlignment(notes, Alignment.MIDDLE_CENTER);! ! setMainWindow(mainWindow);!!! ! notes.setWidth("350px");! ! notes.setHeight("350px");! ! // === Note 1 ========================================================! ! notes.addComponent(new Label("<h1>TODO / Today</h1><div style=font-size: 24px>” + “<p>Enjoy the conference...</p></div>", Label.CONTENT_XHTML), "#fef49c"); // === Note 2 ========================================================! ! notes.addComponent(new Label("<h1>TODO / Tomorrow</h1><div style=font-size: 24px>” + “<p>Learn Vaadin!</p></div>", Label.CONTENT_XHTML), "#b2ffa1"); // === Note 3 ========================================================! ! notes.addComponent(new Label("<div style=font-size: 60px><center><br/><br/><br/>” + “DOUBLE<br/><br/><br/>SPEED</center></div>", Label.CONTENT_XHTML), "#b2ffa1"); // === Note 4 ========================================================! ! com.vaadin.ui.RichTextArea rta = new RichTextArea();! ! rta.setSizeFull();! ! notes.addComponent(rta);! ! rta.setValue("<span style=font-size: 35pt; color: green;>You can use any “ + “Vaadin components here...</span>");! }17. toukokuuta 12
  37. 37. 17. toukokuuta 12 3 embrace java
  38. 38. Any JVM Language17. toukokuuta 12
  39. 39. Scalawith Scaladin add-on val layout = new VerticalLayout(width = 100 pct, height = 100 pct) { add(new Label(content = "Persons")) add(new Table(width = 100 pct, height = 100 pct), ratio = 1) add(new HorizontalLayout(spacing = true) { add(new Button("Edit selected", _ => editClicked())) add(new Button("Add new", _ => addNewClicked())) }) } getMainWindow.setContent(layout)17. toukokuuta 12
  40. 40. Internet Explorer 6.. Chrome Firefox Safari Opera iOS Android17. toukokuuta 12
  41. 41. No browser plugins Nothing to install17. toukokuuta 12
  42. 42. Servlet Portlet (most) clouds17. toukokuuta 12
  43. 43. Apache Tomcat, version 4.1 or later Oracle WebLogic Server, version 9.2 or later Oracle WebLogic Portal, version 10gR3 IBM WebSphere Application Server, version 6.1 or later IBM WebSphere Portal, version 6.1 and 7.0 JBoss Application Server, version 3.2.8 or later Jetty, version 5 or later Glassfish, version 2 or later Liferay Portal 5.2 or later GateIn Portal 3.1 eXo Platform 3 Google App Engine Vaadin supports Java Servlet API 2.3 and JSR-168 and JSR-286 Portlet Specifications and should work with any Java application server that conforms to these standards.17. toukokuuta 12
  44. 44. Eclipse IntelliJ IDEA Netbeans Maven Ant Spring Roo ∙∙∙17. toukokuuta 12
  45. 45. 17. toukokuuta 12
  46. 46. Maven mvn archetype:generate -DarchetypeGroupId=com.vaadin -DarchetypeArtifactId= vaadin-archetype-clean mvn package yourproject-1.0.war17. toukokuuta 12
  47. 47. 17. toukokuuta 12 Vaadin 7 Framework
  48. 48. History When What 2001 Millstone Framework is born 2002 Released as Open Source Server-side API compatible 2005 Ajax based rendering 2008 Google Web Toolkit integrated 2009 Renamed to Vaadin 2010 Add-ons17. toukokuuta 12
  49. 49. Heavily under construction [ to be released on Q4 ]17. toukokuuta 12
  50. 50. vaadin.com/roadmap17. toukokuuta 12
  51. 51. 17. toukokuuta 12 Empower Developers Embrace Extendability Clean Up
  52. 52. Empower Developers View Management Redesign • Remove "browser window" • HttpRequest access • View management API • Simplified Application API by removing unnecessary abstractions • Multitab support by default17. toukokuuta 12
  53. 53. public class Vaadin6testApplication extends Application { public void init() { Window mainWindow = new Window("V6test Application"); setMainWindow(mainWindow); mainWindow.addComponent(new TextField("What is your name")); mainWindow.addComponent(new Button("Do not push me")); } }17. toukokuuta 12
  54. 54. 17. toukokuuta 12
  55. 55. 17. toukokuuta 12
  56. 56. public class V6testApplication 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("V6test Application"); window.addComponent(new TextField("What is your name")); window.addComponent(new Button("Do not push me")); return window; } }17. toukokuuta 12
  57. 57. public class Vaadin7testRoot extends Root { public void init(WrappedRequest request) { addComponent(new TextField("What is your name")); addComponent(new Button("Do not push me")); } }17. toukokuuta 12
  58. 58. Warning: Naming might be changed from “Root” to “Region”17. toukokuuta 12
  59. 59. public class Vaadin6Application extends Application { public void init() { Window window = new Window("V6test Application"); setMainWindow(window); final Label label = new Label(); final UriFragmentUtility fragment = new UriFragmentUtility(); window.addComponent(fragment); window.addComponent(label); fragment.addListener(new UriFragmentUtility.FragmentChangedListener() { public void fragmentChanged(FragmentChangedEvent source) { label.setValue(fragment.getFragment()); } }); } }17. toukokuuta 12
  60. 60. public class V7testRoot extends Root { public void init(WrappedRequest request) { addComponent(new Label(getFragment())); } }17. toukokuuta 12
  61. 61. public class V7testRoot extends Root { public void init(WrappedRequest request) { final Label label = new Label(getFragment()); addComponent(label); addListener(new FragmentChangedListener() { public void fragmentChanged(FragmentChangedEvent event) { label.setValue(getFragment()); } }); } }17. toukokuuta 12
  62. 62. Most of the changes already available Alpha 1 View management API in Alpha 3 to be released in June17. toukokuuta 12
  63. 63. Empower Developers Full CSS Control • Layout calculations are managed by browser • Improved performance • Support border/margin/... • Drop support for IE6/IE7 • CSS abstraction language • Inject CSS from Java • Per component selectors17. toukokuuta 12
  64. 64. .v-connector { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }17. toukokuuta 12
  65. 65. private final ElementResizeListener listener = new ElementResizeListener() { public void onElementResize(ElementResizeEvent e) { int buttonWidth = getLayoutManager().getOuterWidth(e.getElement()); buttonWidth -= getLayoutManager().getMarginRight(e.getElement()); getWidget().adjustButtonSpace(buttonWidth); } }; @Override protected void init() { Element button = getWidget().getWidget(1).getElement(); getLayoutManager().addElementResizeListener(button, listener); } @Override public void onUnregister() { Element button = getWidget().getWidget(1).getElement(); getLayoutManager().removeElementResizeListener(button, listener); }17. toukokuuta 12
  66. 66. Alpha 2 implements lots of layout performance improvements, but work is still unfinished.17. toukokuuta 12
  67. 67. or17. toukokuuta 12
  68. 68. Empower Developers Glue for Integrations • Publish JavaScript API from the server-side • Integrate easily with the rest of the web page • Tag lib to ease integration with JSP/JSF • Centralized shared resource loading (JS/CSS)17. toukokuuta 12
  69. 69. Empower Developers Live Translations • Built in translator API • Custom translation stores • Translated transparently on client-server communication • Switch languages on fly • Strings and resources17. toukokuuta 12
  70. 70. Easier Client-Server Embrace Extendability Empower Developers Communications • Client-server RPC API • Shared state API • Phase out “variables” and “attributes”17. toukokuuta 12
  71. 71. Widget 6 Paintable Variable client Changes server UIDL Component17. toukokuuta 12
  72. 72. Widget 7 Connector client State server RPC Component17. toukokuuta 12
  73. 73. State Bean with most Java types: integers, Strings, lists, maps, ... All server-side changes automatically sent to client. Connectors can access all states of children and parent components17. toukokuuta 12
  74. 74. RPC public interface ButtonRpc extends ServerRpc { public void click(MouseEventDetails details); client to server } example 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 server17. toukokuuta 12
  75. 75. Already done in Alpha 2, start trying these out today...17. toukokuuta 12
  76. 76. New Extension Embrace Extendability Empower Developers Points • ApplicationServlet plug-ins • “Non-widget” add-ons • Component decorator for extending without extend • Server-push plug-in API • Plug-in for push • State storage plug-ins17. toukokuuta 12
  77. 77. Generic JavaScript Embrace Extendability Empower Developers Widget Wrapper • Convert existing 3rd party widgets to Vaadin • GWT compilation not required17. toukokuuta 12
  78. 78. Ease Common Embrace Extendability Empower Developers Extensions • Allow easy packaging of CSS and images with server-side compositions • Simplify Component Container API to make implementation easier17. toukokuuta 12
  79. 79. Data Binding and Embrace Extendability Empower Developers Clean Up Form redesign • Form binding and layout are cleanly separated • Explicit property convertters • Two phase commit support • Built-in JSR-303 validations • Backwards compatibility helper as add-on17. toukokuuta 12
  80. 80. Converters17. toukokuuta 12
  81. 81. public class Name { private String firstName; private String lastName; public Name(String firstName, String lastName) { this.firstName = firstName; this.lastName = lastName; } // Setters and getters }17. toukokuuta 12
  82. 82. “Joonas Lehtinen” presentation Component model firstName = “Joonas” lastName = “Lehtinen”17. toukokuuta 12
  83. 83. public class StringToNameConverter implements Converter<String, Name> { public Name convertToModel(String text, Locale locale) throws ConversionException { if (text == null) { return null; } String[] parts = text.split(" "); if (parts.length != 2) { throw new ConversionException("Can not convert text to a name: " + text); } return new Name(parts[0], parts[1]); } public String convertToPresentation(Name name, Locale locale) throws ConversionException { if (name == null) { return null; } else { return name.getFirstName() + " " + name.getLastName(); } } public Class<Name> getModelType() { return Name.class; } public Class<String> getPresentationType() { return String.class; }}17. toukokuuta 12
  84. 84. Name name = new Name("Rudolph", "Reindeer"); final TextField textField = new TextField("Name"); textField.setConverter(new StringToNameConverter()); // .... Name name = (Name) textField.getConvertedValue();17. toukokuuta 12
  85. 85. public class MyStringToDoubleConverter extends StringToDoubleConverter { @Override protected NumberFormat getFormat(Locale locale) { NumberFormat format = super.getFormat(locale); format.setGroupingUsed(false); format.setMaximumFractionDigits(3); format.setMinimumFractionDigits(3); return format; } }17. toukokuuta 12
  86. 86. public class MyConverterFactory extends DefaultConverterFactory { @Override protected <PRESENTATION, MODEL> Converter<PRESENTATION, MODEL> findConverter( Class<PRESENTATION> presentationType, Class<MODEL> modelType) { // Handle String <-> Double if (presentationType == String.class && modelType == Double.class) { return (Converter<PRESENTATION, MODEL>) new MyStringToDoubleConverter(); } // Let default factory handle the rest return super.findConverter(presentationType, modelType); } } getApplication().setConverterFactory(new MyConverterFactory());17. toukokuuta 12
  87. 87. table.setConverter(PERCENT_PROPERTY, new StringToNumberConverter() { @Override protected NumberFormat getFormat(Locale locale) { return NumberFormat.getPercentInstance(locale); } }); table.setConverter(CURRENCY_PROPERTY, new StringToNumberConverter() { @Override protected NumberFormat getFormat(Locale locale) { return NumberFormat.getCurrencyInstance(locale); } });17. toukokuuta 12
  88. 88. Validation17. toukokuuta 12
  89. 89. public class Person { @Size(min = 5, max = 50) private String name; @Min(0) @Max(100) private int age; // + constructor + setters + getters }17. toukokuuta 12
  90. 90. Person person = new Person("John", 26);BeanItem<Person> item = new BeanItem<Person>(person);TextField firstName = new TextField("First name", item.getItemProperty("name"));firstName.addValidator(new BeanValidator(Person.class, "name"));17. toukokuuta 12
  91. 91. FieldGroup17. toukokuuta 12
  92. 92. public class Employee { String firstName; String lastName; double salary; Date birthDate; // Getters, setters, … } Form form = new Form(); form.setItemDataSource( new BeanItem<Employee>(employee));17. toukokuuta 12
  93. 93. 17. toukokuuta 12
  94. 94. Form form = new Form() { @Override protected void attachField(Object propertyId, Field field) { // Some custom logic for placing components } };17. toukokuuta 12
  95. 95. form.setFormFieldFactory(new FormFieldFactory() { public Field createField(Item item, Object propertyId, Component uiContext) { if ("salary".equals(propertyId)) { TextField tf = new TextField(); tf.setWidth("7em"); return tf; } else if ("birthDate".equals(propertyId)) { DateField df = new DateField(); df.setResolution(DateField.RESOLUTION_DAY); return df; } else { // .. } return DefaultFieldFactory.createFieldByPropertyType(item .getItemProperty(propertyId).getType()); } });17. toukokuuta 12
  96. 96. FormLayout form = new FormLayout() { 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); addComponent(firstName); addComponent(lastName); addComponent(birthDate); addComponent(salary); } };17. toukokuuta 12
  97. 97. final BeanFieldGroup<Employee> fieldGroup = new BeanFieldGroup<Employee>(Employee.class); fieldGroup.bindMemberFields(form); fieldGroup.setItemDataSource(new BeanItem<Employee>(employee));17. toukokuuta 12
  98. 98. 17. toukokuuta 12
  99. 99. 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); } }; 17. toukokuuta 12
  100. 100. 17. toukokuuta 12
  101. 101. Client-side Embrace Extendability Empower Developers • Review widgetset API • Ease client-side logic Clean Up • Decouple communication from core widgets thoughtout Vaadin 7 series • Client-side compositions • Support GWT Designer • Better support for multiple Vaadin apps per Page17. toukokuuta 12
  102. 102. Improved session Embrace Extendability Empower Developers Clean Up management • Kill all “out-of-sync” errors • Default to one server Window Root per page • Default to keeping sessions live while page is shown17. toukokuuta 12
  103. 103. HTML Embrace Extendability Empower Developers • Simpler DOM as IE6/IE7 is not supported any more Clean Up • WAI-ARIA support • Built in HTML sanitation to improve security17. toukokuuta 12
  104. 104. Old API Embrace Extendability Empower Developers • Replace integer constants with enums Clean Up • Remove the unnecessary Container.Ordered interface • Remove deprecated APIs17. toukokuuta 12
  105. 105. 17. toukokuuta 12 Empower Developers Embrace Extendability Clean Up
  106. 106. Changes to roadmap are expected. Almost certainly some things will be postponed to 7.1.17. toukokuuta 12
  107. 107. Vaadin 7.1 • Table redesign • Things postponed from 7.017. toukokuuta 12
  108. 108. more info17. toukokuuta 12
  109. 109. Find out more at vaadin.com/wiki17. toukokuuta 12
  110. 110. Roots (Windows) • Creating a basic application • Creating multi tab applications • Defining the theme for a Root • Using URI fragments • Finding the current Root and Application • Using URI or parameters or screen size when initializing an application • Generating dynamic resources based on URI or parameters • Creating an application that preserves state on refresh • Creating an application with different features for different clients17. toukokuuta 12
  111. 111. Form & Data binding • Formatting data in Table • Creating a TextField for Integer only input using a data source • Creating a TextField for Integer only input when not using a data source • Creating your own converter for String <-> MyType conversion • Changing the default converters for an application • Creating a master-details view for editing persons • Auto generating a form based on a bean - Vaadin 6 style Form • Creating a form using an existing layout • Using Bean Validation to validate input • Creating a custom field for editing the address of a person17. toukokuuta 12
  112. 112. Custom widgets • Creating a simple component • Using Shared State for communication • Sending events from the client to the server using RPC • Using RPC to send events to the client • Using Components in the shared state • Using Resources in the shared state • Integrating an existing GWT widget • Creating a simple component container • Widget styling using only CSS • Lightweight calculations of widget layout • Complex widget layouts17. toukokuuta 12
  113. 113. Download for Free vaadin.com/book Vaadin is a for build n open source ing mod J look gre ern web ava framework at, applicat your use perform well a ion rs happ nd make s that y. you and http://va adin.com /SBN 978 -9 52-92-67 53-8 900009 7 8 95 2 9 267538 $29.95 4th Editio n 674 pages 17. toukokuuta 12
  114. 114. brought to you by... #85 Get More Refcardz! Visit refcardz.com CONTENTS INCLUDE: About Vaadin Getting Started with Vaadin Creating An Application Components Layout Components Themes Data Binding and more... By Marko Grönroos ABOUT VAADIN Web Browser External Client-Side Resources Vaadin is a server-side Ajax web application development Engine framework that allows you to build web applications just like AJAX Requests with traditional desktop frameworks, such as AWT or Swing. An Servlet Container Java File application is built from user interface components contained Servlet Resources hierarchically in layout components. Data In the server-driven model, the application code runs on Application UI Binding Default Class Component Theme a server, while the actual user interaction is handled by a client-side engine running in the browser. The client-server Inherits Events Changes Inherits communications and any client-side technologies, such as User Event Data Application Application HTML and JavaScript, are invisible to the developer. As the Application Listener Model Themes Resources client-side engine runs as JavaScript in the browser, there is no need to install plug-ins. Vaadin is released under the Apache Database License 2.0. Web Java Vaadin Your Web Figure 2: Architecture for Vaadin Applications Browser Web UI Java Service Client-Side Server Components Application You can get a reference to the application object w.dzone.com Engine EJB Hot Tip from any component attached to the application with DB Event Listeners Figure 1: Vaadin Client-Server Architecture In the event-driven model, user interaction with user interface If the built-in selection of components is not enough, you can components triggers server-side events, which you can handle17. toukokuuta 12 develop new components with the Google Web Toolkit (GWT)
  115. 115. Expert services Better Online support Results Training Faster Tools vaadin.com/pro Questions? joonas@vaadin.com vaadin.com/joonas 12-5-17 @joonaslehtinen17. toukokuuta 12

×