Dr. Joonas LehtinenVaadin 7Founder & CEO, Vaadin@joonaslehtinen
User interfaceframework for richweb applications
Building blocks
DeveloperProductivityRichUX
htmljava
123Key Ideas
1RichComponents
User IntefaceData SourceTheme
What kind of devices does your app support?98.1%3DesktopbrowsersBrowsers developers expect to support in 20133.5 Browsers ...
350+ add-oncomponents
User IntefaceData SourceTheme
User IntefaceData SourceTheme
InMemory, Bean, Method,Collection, JDBC, JPA, Hibernate,TextFile, FileSystem, Properties,EclipseLink, Lucene, Mockups,GAE,...
2Server + Client
Web application layersBackendserverWebserverCommu-nicationJavaScript
Web application layersJavaScriptJava toJavaScriptWebserverBackendserverrequired optional optionalrequiredCommu-nicationopt...
Web application layersJavaScriptJava toJavaScriptWebserverBackendserverrequired optional optionalrequiredCommu-nicationopt...
How does it work,really?
• Initial HTML• CSS (theme)• Images• JavaScript1.2M total307kcompress135kreducedwidgetset
• name=”Joonas”• button clicked261 bytes
• name=”Joonas”• button clicked261 bytes• Add notification267 bytes
Hello World!
https://github.com/vaadin/documentmanagerhttps://vaadin.com/learnSourceHOWTO Screencast
3EmbracingJava
Any languageon JVM
Internet ExplorerChromeFirefoxSafariOperaiOSAndroid
NobrowserpluginsNothing toinstall
ServletPortlet(most) clouds
EclipseIntelliJ IDEANetbeansMavenAnt∙ ∙ ∙
Vaadin7
v32002v0.12001OpenSource
v42006Ajaxv52007
7Febv62009
934 tickets closed during 16 months ofdevelopment3939 commits made by 23 authorsOldest ticket created 3/2008Newest ticket ...
CompletestackRenewedfrom InsideSassJSHTML5+=GWTRPCStateUIField
vaadin.com/7
Favorite picks7
Vaadin += GWT1/7
GWTCompatible
Server-Client-sideOptimizedforProductivityOptimizedforControl
Architecture
New Windowing API2/7
public class Vaadin6App extends Application {	 public void init() {	 	 setMainWindow(createWindow());	 }	 public Window ge...
@Title("Vaadin 7 Application")public class HellowUI extends UI {	 protected void init(VaadinRequest request) {	 	 setConte...
@PreserveOnRefresh@Title("Vaadin 7 Application")public class HellowUI extends UI {	 protected void init(VaadinRequest requ...
Built-in high levelView managementDemo
SassSyntactically Awesome StylesheetsDemo3/7
RedesignedForms4/7
public class Employee {	 String firstName;	 String lastName;	 double salary;	 Date birthDate;// Getters, setters, …}Form f...
form.setFormFieldFactory(new FormFieldFactory() {	 	 	 public Field createField(Item item, Object propertyId,	 	 	 	 	 Com...
GridLayout form = new GridLayout(2,2) {	 	 	 TextField firstName = new TextField("First name");	 	 	 TextField lastName = ...
public class Person {@Size(min = 5, max = 50)private String name;@Min(0)@Max(100)private int age;// + constructor + setter...
modelpresentation“Joonas Lehtinen”ComponentfirstName = “Joonas”lastName = “Lehtinen”Demo
RPCState5/7
ComponentWidgetPaintableserverclientVariableChangesUIDL6
serverclientComponentWidgetConnectorRPC7StateDemo
public interface ButtonRpc extends ServerRpc {public void click(MouseEventDetails details);}private ButtonRpc rpc =RpcProx...
JavaScriptAdd-ons6/7
getPage().getJavaScript().addFunction("myCallback",	 new JavaScriptCallback() {	 	 public void call(JSONArray arguments) t...
public class MyWidget extends AbstractJavaScriptComponent {	 public MyWidget() {	 	 addFunction("plotClick", new JavaScrip...
window.com_example_MyWidget = function() {	 var element = $(this.getWidgetElement());	// Draw a plot for any server-side (...
Server Push7/7
@Push MyUI<async-supported/>vaadin-push dependency
gettingstarted
Eclipse
mvn archetype:generate -DarchetypeGroupId=com.vaadin -DarchetypeArtifactId=vaadin-archetype-application -DarchetypeVersion...
Migration Guide:Vaadin 6 to 7https://vaadin.com/wiki/-/wiki/Main/Migrating+from+Vaadin+6+to+Vaadin+7
Download for Freevaadin.com/book728 pages701-93-1970-1PDF, ePub, HTML
ApacheLicense
community of100.000+developers
? joonas@vaadin.comvaadin.com/joonas@joonaslehtinenslideshare.com/joonaslehtinen
Vaadin 7 by Joonas Lehtinen
Vaadin 7 by Joonas Lehtinen
Vaadin 7 by Joonas Lehtinen
Vaadin 7 by Joonas Lehtinen
Vaadin 7 by Joonas Lehtinen
Vaadin 7 by Joonas Lehtinen
Vaadin 7 by Joonas Lehtinen
Vaadin 7 by Joonas Lehtinen
Vaadin 7 by Joonas Lehtinen
Vaadin 7 by Joonas Lehtinen
Vaadin 7 by Joonas Lehtinen
Vaadin 7 by Joonas Lehtinen
Vaadin 7 by Joonas Lehtinen
Vaadin 7 by Joonas Lehtinen
Vaadin 7 by Joonas Lehtinen
Vaadin 7 by Joonas Lehtinen
Vaadin 7 by Joonas Lehtinen
Vaadin 7 by Joonas Lehtinen
Vaadin 7 by Joonas Lehtinen
Vaadin 7 by Joonas Lehtinen
Vaadin 7 by Joonas Lehtinen
Vaadin 7 by Joonas Lehtinen
Vaadin 7 by Joonas Lehtinen
Vaadin 7 by Joonas Lehtinen
Vaadin 7 by Joonas Lehtinen
Vaadin 7 by Joonas Lehtinen
Vaadin 7 by Joonas Lehtinen
Vaadin 7 by Joonas Lehtinen
Vaadin 7 by Joonas Lehtinen
Vaadin 7 by Joonas Lehtinen
Vaadin 7 by Joonas Lehtinen
Vaadin 7 by Joonas Lehtinen
Vaadin 7 by Joonas Lehtinen
Upcoming SlideShare
Loading in...5
×

Vaadin 7 by Joonas Lehtinen

1,119

Published 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 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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

No notes for slide

Vaadin 7 by Joonas Lehtinen

  1. 1. Dr. Joonas LehtinenVaadin 7Founder & CEO, Vaadin@joonaslehtinen
  2. 2. User interfaceframework for richweb applications
  3. 3. Building blocks
  4. 4. DeveloperProductivityRichUX
  5. 5. htmljava
  6. 6. 123Key Ideas
  7. 7. 1RichComponents
  8. 8. User IntefaceData SourceTheme
  9. 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. 10. 350+ add-oncomponents
  11. 11. User IntefaceData SourceTheme
  12. 12. User IntefaceData SourceTheme
  13. 13. InMemory, Bean, Method,Collection, JDBC, JPA, Hibernate,TextFile, FileSystem, Properties,EclipseLink, Lucene, Mockups,GAE, ...
  14. 14. 2Server + Client
  15. 15. Web application layersBackendserverWebserverCommu-nicationJavaScript
  16. 16. Web application layersJavaScriptJava toJavaScriptWebserverBackendserverrequired optional optionalrequiredCommu-nicationoptionalVaadinrequired optionalrequiredGWTrequiredrequiredJSrequiredrequiredrequired required
  17. 17. Web application layersJavaScriptJava toJavaScriptWebserverBackendserverrequired optional optionalrequiredCommu-nicationoptionalVaadinrequired optionalrequiredGWTrequiredrequiredJSrequiredrequiredrequired required1 layervs3 layers-50% codelines-50% development-50% maintenanceeasier to learn
  18. 18. How does it work,really?
  19. 19. • Initial HTML• CSS (theme)• Images• JavaScript1.2M total307kcompress135kreducedwidgetset
  20. 20. • name=”Joonas”• button clicked261 bytes
  21. 21. • name=”Joonas”• button clicked261 bytes• Add notification267 bytes
  22. 22. Hello World!
  23. 23. https://github.com/vaadin/documentmanagerhttps://vaadin.com/learnSourceHOWTO Screencast
  24. 24. 3EmbracingJava
  25. 25. Any languageon JVM
  26. 26. Internet ExplorerChromeFirefoxSafariOperaiOSAndroid
  27. 27. NobrowserpluginsNothing toinstall
  28. 28. ServletPortlet(most) clouds
  29. 29. EclipseIntelliJ IDEANetbeansMavenAnt∙ ∙ ∙
  30. 30. Vaadin7
  31. 31. v32002v0.12001OpenSource
  32. 32. v42006Ajaxv52007
  33. 33. 7Febv62009
  34. 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. 35. CompletestackRenewedfrom InsideSassJSHTML5+=GWTRPCStateUIField
  36. 36. vaadin.com/7
  37. 37. Favorite picks7
  38. 38. Vaadin += GWT1/7
  39. 39. GWTCompatible
  40. 40. Server-Client-sideOptimizedforProductivityOptimizedforControl
  41. 41. Architecture
  42. 42. New Windowing API2/7
  43. 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. 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. 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. 46. Built-in high levelView managementDemo
  47. 47. SassSyntactically Awesome StylesheetsDemo3/7
  48. 48. RedesignedForms4/7
  49. 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. 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. 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. 52. public class Person {@Size(min = 5, max = 50)private String name;@Min(0)@Max(100)private int age;// + constructor + setters + getters}
  53. 53. modelpresentation“Joonas Lehtinen”ComponentfirstName = “Joonas”lastName = “Lehtinen”Demo
  54. 54. RPCState5/7
  55. 55. ComponentWidgetPaintableserverclientVariableChangesUIDL6
  56. 56. serverclientComponentWidgetConnectorRPC7StateDemo
  57. 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. 58. JavaScriptAdd-ons6/7
  59. 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. 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. 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. 62. Server Push7/7
  63. 63. @Push MyUI<async-supported/>vaadin-push dependency
  64. 64. gettingstarted
  65. 65. Eclipse
  66. 66. mvn archetype:generate -DarchetypeGroupId=com.vaadin -DarchetypeArtifactId=vaadin-archetype-application -DarchetypeVersion=7.1.0.beta1
  67. 67. Migration Guide:Vaadin 6 to 7https://vaadin.com/wiki/-/wiki/Main/Migrating+from+Vaadin+6+to+Vaadin+7
  68. 68. Download for Freevaadin.com/book728 pages701-93-1970-1PDF, ePub, HTML
  69. 69. ApacheLicense
  70. 70. community of100.000+developers
  71. 71. ? joonas@vaadin.comvaadin.com/joonas@joonaslehtinenslideshare.com/joonaslehtinen
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×