Your SlideShare is downloading. ×
Vaadin 7
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Vaadin 7


Published on

Introduction to Vaadin 7 presentation given at Devoxx 2012

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Vaadin 7 Joonas Lehtinen, CEO @joonaslehtinen
  • 2. Intro to Vaadin new Label( “Hello world”)
  • 3. New in 7
  • 4. Gettingstarted QA
  • 5. User interfaceframework for rich web applications
  • 6. java html
  • 7. Why on earth?
  • 8. consumerEE
  • 9. expectations
  • 10. reality
  • 11. consumer business “million” users “500” users 10 views 50 views 1€/user 500€/user100,000€ / view >> 5,000€ / view
  • 12. Problem How to build consumergrade UX with business system budget
  • 13. How?
  • 14. 123Key Ideas
  • 15. 1RichComponents
  • 16. User IntefaceData Source Theme
  • 17. Rich Applications
  • 18. User IntefaceData Source Theme
  • 19. User IntefaceData Source Theme
  • 20. InMemory, Bean, Method,Collection, JDBC, JPA, Hibernate,TextFile, FileSystem, Properties,EclipseLink, Lucene, Mockups,GAE, ...
  • 21. 2Server + Client
  • 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. How does it work,really?
  • 24. • Initial HTML• CSS (theme)• Images• JavaScript830k total compress250k reduced widgetset120k
  • 25. • name=”Joonas”• button clicked150 bytes
  • 26. • name=”Joonas”• button clicked150 bytes• Add notification466 bytes
  • 27. Trying it out
  • 28.
  • 29. 3EmbracingJava
  • 30. Any JVMLanguage
  • 31. Internet Explorer Chrome Firefox Safari Opera iOS Android
  • 32. No browser pluginsNothing to install
  • 33. Servlet Portlet(most) clouds
  • 34. EclipseIntelliJ IDEA Netbeans Maven Ant Spring Roo ∙∙∙
  • 35. Vaadin 7Framework
  • 36. Empower DevelopersEmbrace Extendability Clean Up
  • 37. Vaadin += GWT
  • 38. GWTCompatible
  • 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. 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. Architecture
  • 42. Refactoredwindowing
  • 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. @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. SASS
  • 46. Variables & functions
  • 47. Mixins
  • 48. Nesting
  • 49. Selector Inheritance
  • 50. RedesignedForms
  • 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. 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. 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. public class Person { @Size(min = 5, max = 50) private String name; @Min(0) @Max(100) private int age; // + constructor + setters + getters}
  • 55. “Joonas Lehtinen”presentation Componentmodel firstName = “Joonas” lastName = “Lehtinen”
  • 56. final TextField textField = new TextField("Name");textField.setConverter(new StringToNameConverter());// ....Name name = (Name) textField.getConvertedValue();
  • 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. Renewedcommunication
  • 59. Widget 6 Paintable Variableclient Changesserver UIDL Component
  • 60. Widget 7 Connectorclient Stateserver RPC Component
  • 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. JavaScriptAdd-ons
  • 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. 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. 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. gettingstarted
  • 67. Maven mvn archetype:generate -DarchetypeGroupId=com.vaadin -DarchetypeArtifactId= vaadin-archetype-application -DarchetypeVersion=7.0.0.beta8 mvn package yourproject-1.0.war
  • 68. Eclipse
  • 69. Download for Free ework s thato u an d ~700 pages
  • 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. Q&A