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

3,843

Published on

Introduction to Vaadin 7 presentation given at Devoxx 2012

Introduction to Vaadin 7 presentation given at Devoxx 2012

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. https://github.com/jojule/NotesDemo
  • 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) { }; rpc.click( 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. Eclipsehttp://vaadin.com/eclipse/experimental
  • 69. Download for Free vaadin.com/book 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

×