Your SlideShare is downloading. ×
Vaadin 7
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Vaadin 7

1,671
views

Published on

Updated copy of the Vaadin 7 introduction presentation.

Updated copy of the Vaadin 7 introduction presentation.

Published in: Technology

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,671
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
52
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Vaadin 7today @joonaslehtinen Founder & CEO
  • 2. Intro to Vaadin new Label(“Hello world”)
  • 3. New in 7
  • 4. Getting started QA
  • 5. User interface framework for rich web applications
  • 6. Building blocks
  • 7. Developer Productivity Rich UX
  • 8. htmljava
  • 9. Why on earth?
  • 10. expectations
  • 11. reality
  • 12. businessconsumer “million” users “500” users >>100,000€ / view 5,000€ / view 10 views 1€/user 50 views 500€/user
  • 13. Challenge How to build consumer grade UX with business system budget
  • 14. Key Ideas
  • 15. 123Key Ideas
  • 16. Rich Components
  • 17. 1Rich Components
  • 18. User Inteface Data Source Theme
  • 19. 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
  • 20. 350+ add-on components
  • 21. User Inteface Data Source Theme
  • 22. User Inteface Data Source Theme
  • 23. InMemory, Bean, Method, Collection, JDBC, JPA, Hibernate, TextFile, FileSystem, Properties, EclipseLink, Lucene, Mockups, GAE, ...
  • 24. Server + Client
  • 25. 2Server + Client
  • 26. Web application layers Backend server Web server Commu- nication JavaScript
  • 27. 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
  • 28. 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
  • 29. How does it work, really?
  • 30. • Initial HTML • CSS (theme) • Images • JavaScript 1.2M total 307k compress 135k reduced widgetset
  • 31. • name=”Joonas” • button clicked 261 bytes
  • 32. • name=”Joonas” • button clicked 261 bytes • Add notification 267 bytes
  • 33. Hello World!
  • 34. https://github.com/vaadin/documentmanager https://vaadin.com/learn Source HOWTO Screencast
  • 35. Embracing Java
  • 36. 3Embracing Java
  • 37. Any language on JVM
  • 38. Internet Explorer Chrome Firefox Safari Opera iOS Android
  • 39. No browser plugins Nothing to install
  • 40. Servlet Portlet (most) clouds
  • 41. Eclipse IntelliJ IDEA Netbeans Maven Ant ∙ ∙ ∙
  • 42. Vaadin 7.1
  • 43. v3 2002 v0.1 2001 Open Source
  • 44. v4 2006 Ajax v5 2007
  • 45. 7 Febv6 2009
  • 46. 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
  • 47. Complete stack Renewed from InsideSass JS HTML5 += GWT RPC State UI Field Push
  • 48. vaadin.com/7
  • 49. Favorite picks 7.1
  • 50. Vaadin += GWT 1/7
  • 51. GWT Compatible
  • 52. Server- Client- side Optim izedfor Productivity Optim izedfor Control
  • 53. Server- Client- side Optim izedfor Productivit Optim izedfor Control
  • 54. Architecture
  • 55. New Windowing API 2/7
  • 56. 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; } }
  • 57. @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"))); } }
  • 58. @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"))); } }
  • 59. Built-in high level View management Demo
  • 60. Sass Syntactically Awesome Stylesheets Demo 3/7
  • 61. Redesigned Forms 4/7
  • 62. public class Employee { String firstName; String lastName; double salary; Date birthDate; // Getters, setters, … } Form form = new Form(); form.setItemDataSource( new BeanItem<Employee>(employee)); 6
  • 63. 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
  • 64. 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
  • 65. public class Person { @Size(min = 5, max = 50) private String name; @Min(0) @Max(100) private int age; // + constructor + setters + getters }
  • 66. model presentation “Joonas Lehtinen” Component firstName = “Joonas” lastName = “Lehtinen” Demo
  • 67. RPC State 5/7
  • 68. Component Widget Paintable server client Variable Changes UIDL 6
  • 69. server client Component Widget Connector RPC 7 State Demo
  • 70. 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
  • 71. JavaScript Add-ons 6/7
  • 72. 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
  • 73. 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
  • 74. 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
  • 75. Server Push 7/7
  • 76. @Push MyUI <async-supported/> vaadin-push dependency
  • 77. getting started
  • 78. getting started
  • 79. Eclipse
  • 80. mvn archetype:generate -DarchetypeGroupId=com.vaadin -DarchetypeArtifactId=vaadin-archetype-application -DarchetypeVersion=7.1.0
  • 81. Migration Guide: Vaadin 6 to 7 https://vaadin.com/wiki/-/wiki/Main/Migrating +from+Vaadin+6+to+Vaadin+7
  • 82. Download for Free vaadin.com/book 728 pages 701 -93-1970-1 PDF, ePub, HTML
  • 83. Apache License
  • 84. community of 100.000+ developers
  • 85. ? joonas@vaadin.com vaadin.com/joonas @joonaslehtinen slideshare.com/ joonaslehtinen