Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (15)
Similar to Vaadin 7
Similar to Vaadin 7 (20)
More from Joonas Lehtinen
More from Joonas Lehtinen (12)
Recently uploaded
Recently uploaded (20)
Vaadin 7
- 2. Intro to Vaadin new Label(“Hello world”)
- 3. New in 7
- 6. User interface framework for rich web applications
- 9. htmljava
- 10. Why on earth?
- 12. expectations
- 13. reality
- 14. businessconsumer “million” users “500” users >>100,000€ / view 5,000€ / view 10 views 1€/user 50 views 500€/user
- 15. Challenge How to build consumer grade UX with business system budget
- 16. Key Ideas
- 17. 123Key Ideas
- 18. Rich Components
- 19. 1Rich Components
- 24. What kind of devices does your app support? 98.1% 3Desktop browsers Browsers developers expect to support in 2013 3.5 Browsers to support in 2012 IE 6/7 Safari Opera IE 8 6/7 8 14% 18% 36% 54% Chrome 9 10 IE 9 IE 10 Firefox 79% 80% 94% 94% Browsers developers expect to support in 2013 3.5 Browsers to support in 2012 IE 6/7 Safari Opera IE 8 6/7 8 14% 18% 36% 54% Chrome 9 10 IE 9 IE 10 Firefox 79% 80% 94% 94% es your app support? 25.7% Phones 36.1% O thers2.1% “Since gw in the enterp explain why tab popular than supp phones” Daniel iPhone Android W P 8 pplication UI for r 98% of apps overtaken the num ber rope. 36.1% Tablets “Since gwt is used extensi in the enterprise, this m explain why tablets popular than su phones” iPadAndroid W indow s 8
- 36. InMemory, Bean, Method, Collection, JDBC, JPA, Hibernate, TextFile, FileSystem, Properties, EclipseLink, Lucene, Mockups, GAE, ...
- 37. Server + Client
- 38. 2Server + Client
- 40. Web application layers JavaScript Java to JavaScript Web server Backend server required optional optionalrequired Commu- nication optional Vaadin required optionalrequired GWT requiredrequired JS requiredrequired required required
- 41. Web application layers JavaScript Java to JavaScript Web server Backend server required optional optionalrequired Commu- nication optional Vaadin required optionalrequired GWT requiredrequired JS requiredrequired required required 1 layer vs 3 layers -50% codelines -50% development -50% maintenance easier to learn
- 42. How does it work, really?
- 44. • Initial HTML • CSS (theme) • Images • JavaScript 1.2M total 307k compress 135k reduced widgetset
- 45. • name=”Joonas” • button clicked 261 bytes
- 47. • name=”Joonas” • button clicked 261 bytes • Add notification 267 bytes
- 48. Hello World!
- 51. Embracing Java
- 52. 3Embracing Java
- 58. Vaadin 7.1
- 61. 7 Febv6 2009
- 62. 934 tickets closed during 16 months of development 3939 commits made by 23 authors Oldest ticket created 3/2008 Newest ticket 2/2013 3939 commits made by 23 authors 93 % by 6 persons > 1 000 000 lines of code touched
- 73. vaadin.com/7
- 79. GWT Compatible
- 82. Architecture
- 86. 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; } }
- 87. @Title("Vaadin 7 Application") public class HellowUI extends UI { protected void init(VaadinRequest request) { setContent(new VerticalLayout( new TextField("What is your name"), new Button("Do not push me"))); } }
- 88. @PreserveOnRefresh @Title("Vaadin 7 Application") public class HellowUI extends UI { protected void init(VaadinRequest request) { setContent(new VerticalLayout( new TextField("What is your name"), new Button("Do not push me"))); } }
- 89. Built-in high level View management Demo
- 92. public class Employee { String firstName; String lastName; double salary; Date birthDate; // Getters, setters, … } Form form = new Form(); form.setItemDataSource( new BeanItem<Employee>(employee)); 6
- 95. form.setFormFieldFactory(new FormFieldFactory() { public Field createField(Item item, Object propertyId, Component uiContext) { if ("birthDate".equals(propertyId)) { DateField df = new DateField(); df.setResolution(DateField.RESOLUTION_DAY); return df; } // .. return DefaultFieldFactory.createFieldByPropertyType(item .getItemProperty(propertyId).getType()); } }); 6
- 96. 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)); 7
- 97. public class Person { @Size(min = 5, max = 50) private String name; @Min(0) @Max(100) private int age; // + constructor + setters + getters }
- 98. model presentation “Joonas Lehtinen” Component firstName = “Joonas” lastName = “Lehtinen” Demo
- 99. RPC State 5/7
- 102. public interface ButtonRpc extends ServerRpc { public void click(MouseEventDetails details); } private ButtonRpc rpc = RpcProxy.create(ButtonRpc.class, this); public void onClick(ClickEvent event) { rpc.click( new MouseEventDetails(event)); } serverclient private ButtonRpc rpc = new ButtonRpc() { public void click( MouseEventDetails details) { // do stuff } }; public Button() { registerRpc(rpc); } Demo
- 104. getPage().getJavaScript().addFunction("myCallback", new JavaScriptCallback() { public void call(JSONArray arguments) throws JSONException { // Do something with the arguments } }); Publish API from Java window.myCallback('foo', 100); Use from JavaScript
- 105. public class MyWidget extends AbstractJavaScriptComponent { public MyWidget() { addFunction("plotClick", new JavaScriptFunction() { public void call(JSONArray arguments) throws JSONException { // Do something with the event } }); } public static class MyWidgetState extends JavaScriptComponentState { public List<List<List<Double>>> plotSeriesData = new ArrayList<List<List<Double>>>(); } public MyWidgetState getState() { return (MyWidgetState) super.getState(); } } Server-side Java API for Widget
- 106. 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); } }); } Widget implementation in JavaScript
- 107. Server Push 7/7
- 109. getting started
- 110. getting started
- 112. Eclipse
- 113. mvn archetype:generate -DarchetypeGroupId=com.vaadin -DarchetypeArtifactId=vaadin-archetype-application -DarchetypeVersion=7.1.0
- 114. Migration Guide: Vaadin 6 to 7 https://vaadin.com/wiki/-/wiki/Main/Migrating +from+Vaadin+6+to+Vaadin+7
- 115. Download for Free vaadin.com/book 728 pages 701 -93-1970-1 PDF, ePub, HTML
- 116. Apache License