More Related Content
What's hot
What's hot (20)
Similar to Vaadin 7 CN
Similar to Vaadin 7 CN (20)
Recently uploaded
Recently uploaded (20)
Vaadin 7 CN
- 4. 版本 中的 新特性 7
- 5. 入 QA
- 8. 建
- 9. 人 提效 富 UX
- 11. htmljava
- 12. 究竟 什么？
- 14. 期望
- 16. 消 者 “百万”用 “500”用 >>100,000€ / 5,000€ / 10 个 1€ / 用 50 个 500€ / 用
- 17. 挑 如何用 系 算 建消 者 UX
- 18. 主要思路
- 19. 123主要思路
- 20. 1富 件
- 21. 用 界面 数据源 主
- 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
- 26. 360 多个 插件 件
- 27. 用 界面 数据源 主
- 32. 用 界面 数据源 主
- 34. InMemory, Bean, Method, Collection, JDBC, JPA, Hibernate, TextFile, FileSystem, Properties, EclipseLink, Lucene, Mockups, GAE, ...
- 35. 2服 器 + 客 端
- 36. Web 用程序 后端 服 器 Web 服 器 通信 JavaScript
- 37. Web 用程序 必需 可 可必需 可 Vaadin 必需 可必需 GWT 必需必需 JS 必需必需 必需 必需 JavaScript Java 到 JavaScript Web 服 器 后端 服 器 通信
- 38. Web 用程序 必需 可 可必需 可 Vaadin 必需 可必需 GWT 必需必需 JS 必需必需 必需 必需 JavaScript Java 到 JavaScript Web 服 器 后端 服 器 通信 1 3 代 行 少 50% 工作量降低 50% 工作量降低 50% 更容易学
- 39. 它到底是如何工作的？
- 41. • 初始 HTML • CSS（主 ） • 片 • JavaScript 共 1.2M 307k 135k 少 widgetset
- 42. • name=”Joonas” • 按 261 字
- 44. • name=”Joonas” • 按 261 字 • 添加通知 267 字
- 45. Hello World!
- 48. 3利用 Java
- 49. JVM 上的 任何 言
- 51. 没有 器 插件 不需要安装 任何 西
- 54. Vaadin 7.1
- 57. 7 二月v6 2009
- 58. 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
- 69. vaadin.com/7
- 70. 收藏精 7.1
- 71. Vaadin += GWT
- 75. GWT 兼容
- 78. 架
- 80. Sass 法超 的 式表 演示
- 81. 重新 的表
- 82. public class Employee { String firstName; String lastName; double salary; Date birthDate; // Getters, setters, … } Form form = new Form(); form.setItemDataSource( new BeanItem<Employee>(employee)); 6
- 85. 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
- 86. 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
- 87. public class Person { @Size(min = 5, max = 50) private String name; @Min(0) @Max(100) private int age; // + constructor + setters + getters }
- 88. 模型 表示 “Joonas Lehtinen” Component firstName = “Joonas” lastName = “Lehtinen” 演示
- 89. RPC 状
- 92. 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)); } 服 器客 端 private ButtonRpc rpc = new ButtonRpc() { public void click( MouseEventDetails details) { // do stuff } }; public Button() { registerRpc(rpc); } 演示
- 93. JavaScript 插件
- 94. getPage().getJavaScript().addFunction("myCallback", new JavaScriptCallback() { public void call(JSONArray arguments) throws JSONException { // Do something with the arguments } }); 用 Java 布 API window.myCallback('foo', 100); 在 JavaScript 中使用
- 95. 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(); } } 用于 Widget 的服 器端 Java API
- 96. 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 的服 器端 Java API
- 97. 服 器推送
- 98. @Push MyUI async-supported = true vaadin-push dependency
- 99. 入
- 100. 入
- 102. Eclipse
- 103. mvn archetype:generate -DarchetypeGroupId=com.vaadin -DarchetypeArtifactId=vaadin-archetype-application -DarchetypeVersion=7.1.0
- 104. 移指南： 从 Vaadin 6 到 7 https://vaadin.com/wiki/-/wiki/Main/Migrating +from+Vaadin+6+to+Vaadin+7
- 106. 免 下 vaadin.com/refcard 8 PDF GetMoreRefcardz!Visitrefcardz.com #85 Vaadin7:ANewWaytoBuildWebUIswithJava By: Marko Grönroos Vaadin is a web application development framework that allows you to build web applications much as you would with traditional desktop frameworks, such as AWT or Swing. A UI is built hierarchically from user interface components contained in layout components. User interaction is handled in an event-driven manner. Vaadin supports both a server-side and a client-side development model. In the server-side model, the application code runs on a server, while the actual user interaction is handled by a client-side engine that runs in the browser. The client-server communications and client-side technologies, such as HTML and JavaScript, are invisible to the developer. The client- side engine runs as JavaScript in the browser, so there is no need to install plug-ins. Figure 1: Vaadin Client-Server Architecture The client-side development model allows building new client-side widgets and user interfaces with the GWT toolkit included in Vaadin. The widgets can be integrated with server-side component counterparts to enable using them in server-side applications. You can also make pure client-side UIs, which can communicate with a back-end service. A server-side Vaadin application consists of one or more UI classes that extend the com.vaadin.UI class and implement the init() method. @Title(“My Vaadin UI”) public class HelloWorld extends com.vaadin.UI { @Overrideprotected void init(VaadinRequest request) { // Create the content root layout for the UI VerticalLayout content = new VerticalLayout(); setContent(content); // Display the greeting content.addComponent(new Label(“Hello World!”)); } } Normally, you need to: extend the UI class build an initial UI from comp Optionally, you can also: set a custom theme for the UI bind components to data bind components to resources Figure 2: Architecture for Vaadin Applications You can create a Vaadin application project easily with the Vaadin Plugin for Eclipse, with NetBeans, or with Maven.Hot Tip You can get a reference to the UI object associated with the currently processed request from anywhere in the application logic with UI.getCurrent(). You can also access the current VaadinSession, VaadinService, and VaadinServlet objects in the same way. CONTENTS INCLUDE: Creating a Server-side UI ComponentsThemes Class DiagramData BindingWidget Integration... and more! Vaadin 7: Modern Web Apps in Java Vaadin Charts The best charting compone with over ABOUT VAADIN CREATING A SERVER-SIDE UI Brought to you by:
- 107. 免 下 vaadin.com/refcard 8 PDF GetMoreRefcardz!Visitrefcardz.com #85 Vaadin7:ANewWaytoBuildWebUIswithJava By: Marko Grönroos Vaadin is a web application development framework that allows you to build web applications much as you would with traditional desktop frameworks, such as AWT or Swing. A UI is built hierarchically from user interface components contained in layout components. User interaction is handled in an event-driven manner. Vaadin supports both a server-side and a client-side development model. In the server-side model, the application code runs on a server, while the actual user interaction is handled by a client-side engine that runs in the browser. The client-server communications and client-side technologies, such as HTML and JavaScript, are invisible to the developer. The client- side engine runs as JavaScript in the browser, so there is no need to install plug-ins. Figure 1: Vaadin Client-Server Architecture The client-side development model allows building new client-side widgets and user interfaces with the GWT toolkit included in Vaadin. The widgets can be integrated with server-side component counterparts to enable using them in server-side applications. You can also make pure client-side UIs, which can communicate with a back-end service. A server-side Vaadin application consists of one or more UI classes that extend the com.vaadin.UI class and implement the init() method. @Title(“My Vaadin UI”) public class HelloWorld extends com.vaadin.UI { @Overrideprotected void init(VaadinRequest request) { // Create the content root layout for the UI VerticalLayout content = new VerticalLayout(); setContent(content); // Display the greeting content.addComponent(new Label(“Hello World!”)); } } Normally, you need to: extend the UI class build an initial UI from comp Optionally, you can also: set a custom theme for the UI bind components to data bind components to resources Figure 2: Architecture for Vaadin Applications You can create a Vaadin application project easily with the Vaadin Plugin for Eclipse, with NetBeans, or with Maven.Hot Tip You can get a reference to the UI object associated with the currently processed request from anywhere in the application logic with UI.getCurrent(). You can also access the current VaadinSession, VaadinService, and VaadinServlet objects in the same way. CONTENTS INCLUDE: Creating a Server-side UI ComponentsThemes Class DiagramData BindingWidget Integration... and more! Vaadin 7: Modern Web Apps in Java Vaadin Charts The best charting compone with over ABOUT VAADIN CREATING A SERVER-SIDE UI Brought to you by:
- 108. Apache 可
- 109. 社区内活 着 100.000多 名 人