Downloaded 38 times
Uploaded byJoonas Lehtinen
Vaadin7
Vaadin 7 is an introduction to the Vaadin framework. Key ideas of Vaadin 7 include rich components, a server+client architecture that runs entirely on the Java server, and embracing the Java programming language. New features in Vaadin 7 include a renewed JavaScript architecture, Sass support, redesigned forms, and built-in high level view management. The roadmap for Vaadin 7.1 includes server push using Atmosphere, a new calendar component, and limited IE 10 support.
More Related Content
Vaadin7
- 1. Vaadin 7 Joonas Lehtinen Founder / Vaadin @joonaslehtinen
- 2. Intro to Vaadin new Label( “Hello world”)
- 3. New in 7
- 4.
- 6. User interface framework forrich web applications
- 7. java html
- 8.
- 10.
- 11.
- 12. consumer business “million” users “500” users 10 views 50 views 1€/user 500€/user 100,000€ / view >> 5,000€ / view
- 13. Challenge How tobuild consumer grade UX with business system budget
- 14.
- 15.
- 16.
- 17.
- 28.
- 33.
- 35. InMemory, Bean, Method, Collection,JDBC, JPA, Hibernate, TextFile, FileSystem, Properties, EclipseLink, Lucene, Mockups, GAE, ...
- 36.
- 37. Web application layers Backend Web Java to RPC JavaScript server server JavaScript GWT Vaadin required required optional optional optional required required required required optional JS required required required required
- 38. How does itwork, really?
- 40. • Initial HTML • CSS (theme) • Images • JavaScript 1.2M total compress 307k reduced widgetset 135k
- 41. • name=”Joonas” • buttonclicked 261 bytes
- 43. • name=”Joonas” • buttonclicked 261 bytes • Add notification 267 bytes
- 44.
- 46. Source https://github.com/vaadin/documentmanager HOWTO Screencast https://vaadin.com/learn
- 47.
- 48. Any language on JVM
- 49. Internet Explorer Chrome Firefox Safari Opera iOS Android
- 50. No browser plugins Nothing to install
- 51. Servlet Portlet (most) clouds
- 52. Eclipse IntelliJ IDEA Netbeans Maven Ant ∙∙∙
- 53. 7 Vaadin today
- 54. v0.1 2001 v3 2002 Open Source
- 55. v4 2006 Ajax v5 2007
- 56. 7 v6 Feb 2009
- 57. 934 tickets closedduring 16 months of development 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
- 58. Renewed JS Sass from Inside HTML5 += UI GWT RPC Complete State Field stack
- 69.
- 70.
- 71.
- 75.
- 76. Server Pr Op - od t r im fo uc d ti ize ize vit df y or tim e rol Op t- s d ont i C ien Cl
- 77.
- 79.
- 81. public class Vaadin6Appextends 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; } }
- 82. @Title("Vaadin 7 Application") publicclass HellowUI extends UI { protected void init(VaadinRequest request) { setContent(new VerticalLayout( new TextField("What is your name"), new Button("Do not push me"))); } }
- 83. @PreserveOnRefresh @Title("Vaadin 7 Application") publicclass HellowUI extends UI { protected void init(VaadinRequest request) { setContent(new VerticalLayout( new TextField("What is your name"), new Button("Do not push me"))); } }
- 84. Demo Built-in high level Viewmanagement
- 85.
- 86.
- 87. public class Employee{ String firstName; String lastName; double salary; 6 Date birthDate; // Getters, setters, … } Form form = new Form(); form.setItemDataSource( new BeanItem<Employee>(employee));
- 90. 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()); } });
- 91. 7 GridLayoutform = 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));
- 92. public class Person{ @Size(min = 5, max = 50) private String name; @Min(0) @Max(100) private int age; // + constructor + setters + getters }
- 93. Demo “Joonas Lehtinen” presentation Component model firstName = “Joonas” lastName = “Lehtinen”
- 94.
- 95. 6 Widget Paintable Variable client Changes server UIDL Component
- 96. 7 Widget Demo Connector client State server RPC Component
- 97. public interface ButtonRpcextends ServerRpc { Demo 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
- 98.
- 99. Publish API fromJava getPage().getJavaScript().addFunction("myCallback", new JavaScriptCallback() { public void call(JSONArray arguments) throws JSONException { // Do something with the arguments } }); Use from JavaScript window.myCallback('foo', 100);
- 100. Server-side Java APIfor Widget 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(); } }
- 101. Widget implementation inJavaScript 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); } }); }
- 102.
- 103. Vaadin Framework 7.1 April • Server push • Based on Atmosphere Framework • Web sockets, long polling and polling • Calendar (now under Apache 2.0 license) • Limited IE 10 support without touch • CSS string inject • Renewed debug console features ◦ Redesigned UI/UX for debug window ◦ Optimize widgetset • Arithmetics for SASS • Packaging SCSS / CSS for add-ons
- 105. Vaadin Charts 1.1 May • 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
- 113. Vaadin TouchKit 3.0 April • Vaadin 7 support • New components: • URLField • Datefield • Combobox
- 114. Vaadin TestBench 3.1 May • Headless mode with Phantom JS
- 115. 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
- 116. Vaadin JPAContainer • License changed to Apache 2.0 • Vaadin 7 compatible version released in March
- 117.
- 119.
- 120. mvn archetype:generate -DarchetypeGroupId=com.vaadin Maven -DarchetypeArtifactId= vaadin-archetype-application -DarchetypeVersion=7.0.3
- 121. Migration Guide: Vaadin 6to 7 https://vaadin.com/wiki/-/wiki/Main/Migrating +from+Vaadin+6+to+Vaadin+7
- 122. Download for Free vaadin.com/book -93- 1970 -1 701 728 pages PDF, ePub, HTML
- 123. ? [email protected] vaadin.com/joonas @joonaslehtinen