Downloaded 24 times
Uploaded byJoonas Lehtinen
Vaadin7 modern-web-apps-in-java
Vaadin 7 is a Java framework for building rich web applications. It allows developers to write UI code in Java and have it rendered as responsive HTML, CSS, and JavaScript that runs in any browser. Key features include rich UI components, separation of server and client code, and support for any JVM language and cloud platform. The framework embraces modern web standards and allows developers to build consumer-grade UX with a business system budget.
Vaadin7 modern-web-apps-in-java
- 1. Vaadin 7: Modernweb apps in Java @joonaslehtinen
- 2.
- 3. Intro to Vaadin new Label( “Hello world”)
- 4. New in 7
- 5.
- 7. User interface framework forrich web applications
- 8. java html
- 9.
- 11.
- 12.
- 13. consumer business “million” users “500” users 10 views 50 views 1€/user 500€/user 100,000€ / view >> 5,000€ / view
- 14. Problem How tobuild consumer grade UX with business system budget
- 15.
- 16.
- 17.
- 18.
- 19.
- 30.
- 35.
- 37. InMemory, Bean, Method, Collection,JDBC, JPA, Hibernate, TextFile, FileSystem, Properties, EclipseLink, Lucene, Mockups, GAE, ...
- 38.
- 39.
- 40. 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
- 41. How does itwork, really?
- 43. • Initial HTML • CSS (theme) • Images • JavaScript 1.2M total compress 307k reduced widgetset 135k
- 44. • name=”Joonas” • buttonclicked 261 bytes
- 46. • name=”Joonas” • buttonclicked 261 bytes • Add notification 267 bytes
- 47.
- 48. https://github.com/vaadin/documentmanager vaadin.com/learn
- 49.
- 50.
- 51. Internet Explorer Chrome Firefox Safari Opera iOS Android
- 52. No browser plugins Nothing to install
- 53. Servlet Portlet (most) clouds
- 54. Eclipse IntelliJ IDEA Netbeans Maven Ant ∙∙∙
- 55. 7 Vaadin today 0.2
- 56. v0.1 2001 v3 2002 Open Source
- 57. v4 2006 Ajax v5 2007
- 58. 7 v6 Feb 2009
- 59. Renewed JS Sass from Inside HTML5 += UI GWT RPC Complete State Field stack
- 70.
- 71.
- 72.
- 76.
- 77. 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
- 78. Se rve P ro r- e d u O sid tim p ct or df iv it ize ize d ol for ntr tim - Op Co nt lie C
- 79.
- 81.
- 83. 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; } }
- 84. @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"))); } }
- 85. Demo Built-in high level Viewmanagement
- 86.
- 87.
- 88. public class Employee{ String firstName; String lastName; double salary; 6 Date birthDate; // Getters, setters, … } Form form = new Form(); form.setItemDataSource( new BeanItem<Employee>(employee));
- 91. 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()); } });
- 92. 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));
- 93. public class Person{ @Size(min = 5, max = 50) private String name; @Min(0) @Max(100) private int age; // + constructor + setters + getters }
- 94. Demo “Joonas Lehtinen” presentation Component model firstName = “Joonas” lastName = “Lehtinen”
- 95.
- 96. 6 Widget Paintable Variable client Changes server UIDL Component
- 97. 7 Widget Demo Connector client State server RPC Component
- 98. 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
- 99.
- 100. Publish API fromJava getPage().getJavaScript().addCallback("myCallback", new JavaScriptCallback() { public void call(JSONArray arguments) throws JSONException { // Do something with the arguments } }); Use from JavaScript window.myCallback('foo', 100);
- 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. Server-side Java APIfor Widget public 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 } }
- 103.
- 105.
- 106. mvn archetype:generate -DarchetypeGroupId=com.vaadin Maven -DarchetypeArtifactId= vaadin-archetype-application -DarchetypeVersion=7.0.0
- 107. Download for Free vaadin.com/book -93- 1970 -1 701 728 pages PDF, ePub, HTML
- 108. ? slideshare.com/ joonaslehtinen joonas@vaadin.com vaadin.com/joonas @joonaslehtinen