Vaadin 7 by Joonas Lehtinen

  • 1,009 views
Uploaded on

Vaadin Framework provides a desktop-like programming model for creating modern web applications in plain Java – without the need for HTML, XML, plug-ins or JavaScript. This session explains the key …

Vaadin Framework provides a desktop-like programming model for creating modern web applications in plain Java – without the need for HTML, XML, plug-ins or JavaScript. This session explains the key concepts of the server-side and client-side RIA development with Java as well as summarizes what is new with Vaadin 7 and how it relates to GWT. To demonstrate the use of the framework, an example application is developed during the session step-by-step.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,009
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
28
Comments
0
Likes
0

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. Dr. Joonas LehtinenVaadin 7Founder & CEO, Vaadin@joonaslehtinen
  • 2. User interfaceframework for richweb applications
  • 3. Building blocks
  • 4. DeveloperProductivityRichUX
  • 5. htmljava
  • 6. 123Key Ideas
  • 7. 1RichComponents
  • 8. User IntefaceData SourceTheme
  • 9. What kind of devices does your app support?98.1%3DesktopbrowsersBrowsers developers expect to support in 20133.5 Browsers to support in 2012IE 6/7 Safari Opera IE 86/7 814% 18% 36% 54%Chrome9 10IE 9 IE 10 Firefox79% 80% 94% 94%Browsers developers expect to support in 20133.5 Browsers to support in 2012IE 6/7 Safari Opera IE 86/7 814% 18% 36% 54%Chrome9 10IE 9 IE 10 Firefox79% 80% 94% 94%esyour appsupport?25.7%Phones36.1%Others2.1%“Since gwinthe enterpexplainwhy tabpopular thansuppphones”DanieliPhoneAndroidWP8pplicationUI forr 98%of appsovertakenthenumberrope.36.1%Tablets“Sincegwt isusedextensiintheenterprise, thismexplainwhy tabletspopular thansuphones”iPadAndroidWindows8
  • 10. 350+ add-oncomponents
  • 11. User IntefaceData SourceTheme
  • 12. User IntefaceData SourceTheme
  • 13. InMemory, Bean, Method,Collection, JDBC, JPA, Hibernate,TextFile, FileSystem, Properties,EclipseLink, Lucene, Mockups,GAE, ...
  • 14. 2Server + Client
  • 15. Web application layersBackendserverWebserverCommu-nicationJavaScript
  • 16. Web application layersJavaScriptJava toJavaScriptWebserverBackendserverrequired optional optionalrequiredCommu-nicationoptionalVaadinrequired optionalrequiredGWTrequiredrequiredJSrequiredrequiredrequired required
  • 17. Web application layersJavaScriptJava toJavaScriptWebserverBackendserverrequired optional optionalrequiredCommu-nicationoptionalVaadinrequired optionalrequiredGWTrequiredrequiredJSrequiredrequiredrequired required1 layervs3 layers-50% codelines-50% development-50% maintenanceeasier to learn
  • 18. How does it work,really?
  • 19. • Initial HTML• CSS (theme)• Images• JavaScript1.2M total307kcompress135kreducedwidgetset
  • 20. • name=”Joonas”• button clicked261 bytes
  • 21. • name=”Joonas”• button clicked261 bytes• Add notification267 bytes
  • 22. Hello World!
  • 23. https://github.com/vaadin/documentmanagerhttps://vaadin.com/learnSourceHOWTO Screencast
  • 24. 3EmbracingJava
  • 25. Any languageon JVM
  • 26. Internet ExplorerChromeFirefoxSafariOperaiOSAndroid
  • 27. NobrowserpluginsNothing toinstall
  • 28. ServletPortlet(most) clouds
  • 29. EclipseIntelliJ IDEANetbeansMavenAnt∙ ∙ ∙
  • 30. Vaadin7
  • 31. v32002v0.12001OpenSource
  • 32. v42006Ajaxv52007
  • 33. 7Febv62009
  • 34. 934 tickets closed during 16 months ofdevelopment3939 commits made by 23 authorsOldest ticket created 3/2008Newest ticket 2/20133939 commits made by 23 authors93 % by 6 persons> 1 000 000 lines of code touched
  • 35. CompletestackRenewedfrom InsideSassJSHTML5+=GWTRPCStateUIField
  • 36. vaadin.com/7
  • 37. Favorite picks7
  • 38. Vaadin += GWT1/7
  • 39. GWTCompatible
  • 40. Server-Client-sideOptimizedforProductivityOptimizedforControl
  • 41. Architecture
  • 42. New Windowing API2/7
  • 43. 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; }}
  • 44. @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"))); }}
  • 45. @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"))); }}
  • 46. Built-in high levelView managementDemo
  • 47. SassSyntactically Awesome StylesheetsDemo3/7
  • 48. RedesignedForms4/7
  • 49. public class Employee { String firstName; String lastName; double salary; Date birthDate;// Getters, setters, …}Form form = new Form();form.setItemDataSource(new BeanItem<Employee>(employee));6
  • 50. 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
  • 51. 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
  • 52. public class Person {@Size(min = 5, max = 50)private String name;@Min(0)@Max(100)private int age;// + constructor + setters + getters}
  • 53. modelpresentation“Joonas Lehtinen”ComponentfirstName = “Joonas”lastName = “Lehtinen”Demo
  • 54. RPCState5/7
  • 55. ComponentWidgetPaintableserverclientVariableChangesUIDL6
  • 56. serverclientComponentWidgetConnectorRPC7StateDemo
  • 57. 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));}serverclientprivate ButtonRpc rpc = new ButtonRpc() {public void click(MouseEventDetails details) {// do stuff}};public Button() {registerRpc(rpc);}Demo
  • 58. JavaScriptAdd-ons6/7
  • 59. getPage().getJavaScript().addFunction("myCallback", new JavaScriptCallback() { public void call(JSONArray arguments) throws JSONException { // Do something with the arguments } }); Publish API from Javawindow.myCallback(foo, 100);Use from JavaScript
  • 60. 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
  • 61. 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
  • 62. Server Push7/7
  • 63. @Push MyUI<async-supported/>vaadin-push dependency
  • 64. gettingstarted
  • 65. Eclipse
  • 66. mvn archetype:generate -DarchetypeGroupId=com.vaadin -DarchetypeArtifactId=vaadin-archetype-application -DarchetypeVersion=7.1.0.beta1
  • 67. Migration Guide:Vaadin 6 to 7https://vaadin.com/wiki/-/wiki/Main/Migrating+from+Vaadin+6+to+Vaadin+7
  • 68. Download for Freevaadin.com/book728 pages701-93-1970-1PDF, ePub, HTML
  • 69. ApacheLicense
  • 70. community of100.000+developers
  • 71. ? joonas@vaadin.comvaadin.com/joonas@joonaslehtinenslideshare.com/joonaslehtinen