Vaadin 7


Published on

Introduction to Vaadin 7 presentation given at Devoxx 2012

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Vaadin 7

  1. 1. Vaadin 7 Joonas Lehtinen, CEO @joonaslehtinen
  2. 2. Intro to Vaadin new Label( “Hello world”)
  3. 3. New in 7
  4. 4. Gettingstarted QA
  5. 5. User interfaceframework for rich web applications
  6. 6. java html
  7. 7. Why on earth?
  8. 8. consumerEE
  9. 9. expectations
  10. 10. reality
  11. 11. consumer business “million” users “500” users 10 views 50 views 1€/user 500€/user100,000€ / view >> 5,000€ / view
  12. 12. Problem How to build consumergrade UX with business system budget
  13. 13. How?
  14. 14. 123Key Ideas
  15. 15. 1RichComponents
  16. 16. User IntefaceData Source Theme
  17. 17. Rich Applications
  18. 18. User IntefaceData Source Theme
  19. 19. User IntefaceData Source Theme
  20. 20. InMemory, Bean, Method,Collection, JDBC, JPA, Hibernate,TextFile, FileSystem, Properties,EclipseLink, Lucene, Mockups,GAE, ...
  21. 21. 2Server + Client
  22. 22. Layers of abstraction Backend Web Java to RPC JavaScript server server JavaScriptGWT Vaadin required required optional optional optional required required required required optionalJS required required required required
  23. 23. How does it work,really?
  24. 24. • Initial HTML• CSS (theme)• Images• JavaScript830k total compress250k reduced widgetset120k
  25. 25. • name=”Joonas”• button clicked150 bytes
  26. 26. • name=”Joonas”• button clicked150 bytes• Add notification466 bytes
  27. 27. Trying it out
  28. 28.
  29. 29. 3EmbracingJava
  30. 30. Any JVMLanguage
  31. 31. Internet Explorer Chrome Firefox Safari Opera iOS Android
  32. 32. No browser pluginsNothing to install
  33. 33. Servlet Portlet(most) clouds
  34. 34. EclipseIntelliJ IDEA Netbeans Maven Ant Spring Roo ∙∙∙
  35. 35. Vaadin 7Framework
  36. 36. Empower DevelopersEmbrace Extendability Clean Up
  37. 37. Vaadin += GWT
  38. 38. GWTCompatible
  39. 39. Server Pr Op - od t r im fo uc d ti ize ize vit dfy or tim e rol Op t- s d ont i C ien Cl
  40. 40. Se rve r P r- e Op odu sid c tim or tiv df ized ity ize ol f or r tim Op nt Co t- en Cli
  41. 41. Architecture
  42. 42. Refactoredwindowing
  43. 43. 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; }}
  44. 44. @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")); }}
  45. 45. SASS
  46. 46. Variables & functions
  47. 47. Mixins
  48. 48. Nesting
  49. 49. Selector Inheritance
  50. 50. RedesignedForms
  51. 51. public class Employee { String firstName; String lastName; double salary; 6 Date birthDate; // Getters, setters, …}Form form = new Form();form.setItemDataSource( new BeanItem<Employee>(employee));
  52. 52. 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()); } });
  53. 53. 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));
  54. 54. public class Person { @Size(min = 5, max = 50) private String name; @Min(0) @Max(100) private int age; // + constructor + setters + getters}
  55. 55. “Joonas Lehtinen”presentation Componentmodel firstName = “Joonas” lastName = “Lehtinen”
  56. 56. final TextField textField = new TextField("Name");textField.setConverter(new StringToNameConverter());// ....Name name = (Name) textField.getConvertedValue();
  57. 57. 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; }}
  58. 58. Renewedcommunication
  59. 59. Widget 6 Paintable Variableclient Changesserver UIDL Component
  60. 60. Widget 7 Connectorclient Stateserver RPC Component
  61. 61. 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) { }; new MouseEventDetails(event)); public Button() {} registerRpc(rpc); } client server
  62. 62. JavaScriptAdd-ons
  63. 63. Publish API from JavagetPage().getJavaScript().addCallback("myCallback", new JavaScriptCallback() { public void call(JSONArray arguments) throws JSONException { // Do something with the arguments } }); Use from JavaScriptwindow.myCallback(foo, 100);
  64. 64. Widget implementation in JavaScriptwindow.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); } });}
  65. 65. Server-side Java API for Widgetpublic 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 }}
  66. 66. gettingstarted
  67. 67. Maven mvn archetype:generate -DarchetypeGroupId=com.vaadin -DarchetypeArtifactId= vaadin-archetype-application -DarchetypeVersion=7.0.0.beta8 mvn package yourproject-1.0.war
  68. 68. Eclipse
  69. 69. Download for Free ework s thato u an d ~700 pages
  70. 70. 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
  71. 71. Q&A