Vaadin7
0 likes643 views
Vaadin is a Java-based web application framework that allows building rich client-side web applications without JavaScript. The presentation discusses new features in Vaadin 7 including a renewed windowing API, Sass support for styling, redesign forms, improved RPC and state handling, and new JavaScript add-ons capabilities. It also outlines the roadmap for upcoming releases that will add server push, new charts, touch support, and integration with CDI.
Vaadin7
- 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. How?
- 17. 123Key Ideas
- 18. 1Rich Components
- 25. 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. 2Server + Client
- 39. 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
- 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 1 layer vs 3 layers -50% codelines -50% development -50% maintenance easier to learn
- 41. How does it work, really?
- 43. • Initial HTML • CSS (theme) • Images • JavaScript 1.2M total 307k compress 135k reduced widgetset
- 44. • name=”Joonas” • button clicked 261 bytes
- 46. • name=”Joonas” • button clicked 261 bytes • Add notification 267 bytes
- 47. Hello World!
- 50. 3Embracing Java
- 56. Vaadin 7today
- 59. 7 Febv6 2009
- 60. 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
- 72. vaadin.com/7
- 73. Favorite picks 7
- 78. GWT Compatible
- 80. Architecture
- 84. 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; } }
- 85. @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"))); } }
- 86. @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"))); } }
- 87. Built-in high level View management Demo
- 90. public class Employee { String firstName; String lastName; double salary; Date birthDate; // Getters, setters, … } Form form = new Form(); form.setItemDataSource( new BeanItem<Employee>(employee)); 6
- 93. 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
- 94. 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
- 95. public class Person { @Size(min = 5, max = 50) private String name; @Min(0) @Max(100) private int age; // + constructor + setters + getters }
- 96. model presentation “Joonas Lehtinen” Component firstName = “Joonas” lastName = “Lehtinen” Demo
- 97. RPC State 5/6
- 100. 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
- 102. 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
- 103. 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
- 104. 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
- 105. Roadmap
- 106. Vaadin Framework 7.1 beta • Server push • Based on Atmosphere Framework • Web sockets, long polling and polling • Calendar (now under Apache 2.0 license) • Limited IE 10 support (without pointer events) • CSS string inject • Renewed debug console features ◦Redesigned UI/UX for debug window ◦Optimize widgetset • Arithmetics for SASS • Packaging SCSS / CSS for add-ons April
- 107. Vaadin Charts 1.1 • New charts: • Funnel • Box plot • Waterfall • Bubble • Error bars • Different coloring of a graph above and below a threshold • Pinch zooming and panning for touch devices May
- 115. Vaadin TouchKit 3.0 beta • Vaadin 7 support • New components: • URLField • Datefield • Combobox just released
- 116. Vaadin TestBench 3.1 • Headless mode with Phantom JS May
- 117. Vaadin CDI • Registering UI with @CDIUI annotation (web.xml no more) • Registering Views (to CDIViewManager) • Decoupling UI:s by injecting UI components (handy for MVP) • Injecting all the normal Java EE stuff (ejbs, events, ...) • UI Scope to complement the session scope • Supports JAAS (set @RolesAllowed for a View, ...) • 1.0 alpha to be released any day now (in staging repo today) • Apache 2.0 License just released
- 118. getting started
- 120. Eclipse
- 122. Migration Guide: Vaadin 6 to 7 https://vaadin.com/wiki/-/wiki/Main/Migrating +from+Vaadin+6+to+Vaadin+7
- 123. Download for Free vaadin.com/book 728 pages 701 -93-1970-1 PDF, ePub, HTML