Vaadin 7 by Joonas Lehtinen
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Vaadin 7 by Joonas Lehtinen

on

  • 1,439 views

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.

Statistics

Views

Total Views
1,439
Views on SlideShare
1,429
Embed Views
10

Actions

Likes
0
Downloads
26
Comments
0

2 Embeds 10

https://twitter.com 8
http://berlin.codemotionworld.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Vaadin 7 by Joonas Lehtinen Presentation 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