Vaadin7
•
0 likes•638 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.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Vaadin7
Similar to Vaadin7 (20)
More from Joonas Lehtinen
More from Joonas Lehtinen (20)
Recently uploaded
Recently uploaded (20)
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