Vaadin 7: Modern web apps in Java          @joonaslehtinen
slideshare.com/joonaslehtinen
Intro to Vaadin           new Label( “Hello world”)
New in  7
Gettingstarted          QA
User interfaceframework for rich  web applications
java   html
Why on earth?
expectations
reality
consumer      business “million” users   “500” users        10 views   50 views         1€/user   500€/user100,000€ / view...
Problem How to build consumergrade UX with business        system budget
How?
Key Ideas
123Key Ideas
1RichComponents
User IntefaceData Source   Theme
User IntefaceData Source   Theme
User IntefaceData Source   Theme
InMemory, Bean, Method,Collection, JDBC, JPA, Hibernate,TextFile, FileSystem, Properties,EclipseLink, Lucene, Mockups,GAE,...
Server + Client
2Server + Client
Web application layers             Backend      Web                   Java to                                     RPC     ...
How does it work,really?
•   Initial HTML•   CSS (theme)•   Images•   JavaScript1.2M total        compress307k        reduced        widgetset135k
• name=”Joonas”• button clicked261 bytes
• name=”Joonas”• button clicked261 bytes• Add notification267 bytes
Trying it out
https://github.com/vaadin/documentmanager            vaadin.com/learn
3EmbracingJava
Any JVMLanguage
Internet Explorer         Chrome          Firefox           Safari           Opera             iOS         Android
No  browser   pluginsNothing to    install
Servlet      Portlet(most) clouds
EclipseIntelliJ IDEA   Netbeans       Maven           Ant            ∙∙∙
7Vaadin    today            0.2
v0.12001        v3       2002         Open        Source
v4 2006Ajax         v5        2007
7 v6        Feb2009
Renewed             JS      Sass                         from Inside         HTML5                  +=    UI              ...
vaadin.com/7
7Favorite picks
Vaadin += GWT
GWTCompatible
Server                    Pr                     Op          -             od                        t                    ...
Se    rve                 P ro       r-                              e        d u           O                           si...
Architecture
New Windowing API
public class Vaadin6App extends Application {	   public void init() {	   	 setMainWindow(createWindow());	   }	   public W...
@Title("Vaadin 7 Application")public class HellowUI extends UI {	   protected void init(VaadinRequest request) {	   	 setC...
DemoBuilt-in high levelView management
DemoSass
RedesignedForms
public class Employee {	 String firstName;	 String lastName;	 double salary;                                        6	 Dat...
form.setFormFieldFactory(new FormFieldFactory() {	 	 	 public Field createField(Item item, Object propertyId,	 	 	 	 	 Com...
7	 	 GridLayout form = new GridLayout(2,2) {	   	   	    TextField   firstName = new TextField("First name");	   	   	    ...
public class Person {    @Size(min = 5, max = 50)    private String name;    @Min(0)    @Max(100)    private int age;    /...
Demo                “Joonas Lehtinen”presentation                    Componentmodel                firstName = “Joonas”    ...
RPCState
6                     Widget                     Paintable          Variableclient   Changesserver                        ...
7         Widget                             Demo         Connectorclient                     Stateserver         RPC     ...
public interface ButtonRpc extends ServerRpc {                    Demo                             public void click(Mouse...
JavaScriptAdd-ons
Publish API from JavagetPage().getJavaScript().addCallback("myCallback",	 new JavaScriptCallback() {	 	 public void call(J...
Widget implementation in JavaScriptwindow.com_example_MyWidget = function() {	 var element = $(this.getWidgetElement());	 ...
Server-side Java API for Widgetpublic class MyWidget extends AbstractJavaScriptComponent {	   public MyWidget() {	   	 reg...
gettingstarted
Eclipse
mvn archetype:generate      -DarchetypeGroupId=com.vaadinMaven -DarchetypeArtifactId=         vaadin-archetype-application...
Download for Free      vaadin.com/book-93-    1970        -1701      728 pages      PDF, ePub, HTML
?    slideshare.com/     joonaslehtinen           joonas@vaadin.com             vaadin.com/joonas               @joonasleh...
Vaadin7 modern-web-apps-in-java
Vaadin7 modern-web-apps-in-java
Vaadin7 modern-web-apps-in-java
Vaadin7 modern-web-apps-in-java
Vaadin7 modern-web-apps-in-java
Vaadin7 modern-web-apps-in-java
Vaadin7 modern-web-apps-in-java
Vaadin7 modern-web-apps-in-java
Vaadin7 modern-web-apps-in-java
Vaadin7 modern-web-apps-in-java
Vaadin7 modern-web-apps-in-java
Vaadin7 modern-web-apps-in-java
Vaadin7 modern-web-apps-in-java
Vaadin7 modern-web-apps-in-java
Vaadin7 modern-web-apps-in-java
Vaadin7 modern-web-apps-in-java
Vaadin7 modern-web-apps-in-java
Vaadin7 modern-web-apps-in-java
Vaadin7 modern-web-apps-in-java
Vaadin7 modern-web-apps-in-java
Vaadin7 modern-web-apps-in-java
Vaadin7 modern-web-apps-in-java
Vaadin7 modern-web-apps-in-java
Vaadin7 modern-web-apps-in-java
Vaadin7 modern-web-apps-in-java
Vaadin7 modern-web-apps-in-java
Vaadin7 modern-web-apps-in-java
Vaadin7 modern-web-apps-in-java
Vaadin7 modern-web-apps-in-java
Vaadin7 modern-web-apps-in-java
Vaadin7 modern-web-apps-in-java
Vaadin7 modern-web-apps-in-java
Vaadin7 modern-web-apps-in-java
Vaadin7 modern-web-apps-in-java
Vaadin7 modern-web-apps-in-java
Vaadin7 modern-web-apps-in-java
Vaadin7 modern-web-apps-in-java
Upcoming SlideShare
Loading in …5
×

Vaadin7 modern-web-apps-in-java

1,210 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,210
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
24
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Vaadin7 modern-web-apps-in-java

  1. 1. Vaadin 7: Modern web apps in Java @joonaslehtinen
  2. 2. slideshare.com/joonaslehtinen
  3. 3. Intro to Vaadin new Label( “Hello world”)
  4. 4. New in 7
  5. 5. Gettingstarted QA
  6. 6. User interfaceframework for rich web applications
  7. 7. java html
  8. 8. Why on earth?
  9. 9. expectations
  10. 10. reality
  11. 11. consumer business “million” users “500” users 10 views 50 views 1€/user 500€/user100,000€ / view >> 5,000€ / view
  12. 12. Problem How to build consumergrade UX with business system budget
  13. 13. How?
  14. 14. Key Ideas
  15. 15. 123Key Ideas
  16. 16. 1RichComponents
  17. 17. User IntefaceData Source Theme
  18. 18. User IntefaceData Source Theme
  19. 19. User IntefaceData Source Theme
  20. 20. InMemory, Bean, Method,Collection, JDBC, JPA, Hibernate,TextFile, FileSystem, Properties,EclipseLink, Lucene, Mockups,GAE, ...
  21. 21. Server + Client
  22. 22. 2Server + Client
  23. 23. Web application layers Backend Web Java to RPC JavaScript server server JavaScriptGWT Vaadin required required optional optional optional required required required required optionalJS required required required required
  24. 24. How does it work,really?
  25. 25. • Initial HTML• CSS (theme)• Images• JavaScript1.2M total compress307k reduced widgetset135k
  26. 26. • name=”Joonas”• button clicked261 bytes
  27. 27. • name=”Joonas”• button clicked261 bytes• Add notification267 bytes
  28. 28. Trying it out
  29. 29. https://github.com/vaadin/documentmanager vaadin.com/learn
  30. 30. 3EmbracingJava
  31. 31. Any JVMLanguage
  32. 32. Internet Explorer Chrome Firefox Safari Opera iOS Android
  33. 33. No browser pluginsNothing to install
  34. 34. Servlet Portlet(most) clouds
  35. 35. EclipseIntelliJ IDEA Netbeans Maven Ant ∙∙∙
  36. 36. 7Vaadin today 0.2
  37. 37. v0.12001 v3 2002 Open Source
  38. 38. v4 2006Ajax v5 2007
  39. 39. 7 v6 Feb2009
  40. 40. Renewed JS Sass from Inside HTML5 += UI GWT RPCComplete State Fieldstack
  41. 41. vaadin.com/7
  42. 42. 7Favorite picks
  43. 43. Vaadin += GWT
  44. 44. GWTCompatible
  45. 45. Server Pr Op - od t r im fo uc d ti ize ize vit dfy or tim e rol Op t- s d ont i C ien Cl
  46. 46. Se rve P ro r- e d u O sid tim p ct or dfiv it ize ize d ol for ntr tim - Op Co nt lie C
  47. 47. Architecture
  48. 48. New Windowing API
  49. 49. 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; }}
  50. 50. @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"))); }}
  51. 51. DemoBuilt-in high levelView management
  52. 52. DemoSass
  53. 53. RedesignedForms
  54. 54. public class Employee { String firstName; String lastName; double salary; 6 Date birthDate; // Getters, setters, …}Form form = new Form();form.setItemDataSource( new BeanItem<Employee>(employee));
  55. 55. form.setFormFieldFactory(new FormFieldFactory() { public Field createField(Item item, Object propertyId, Component uiContext) { if ("birthDate".equals(propertyId)) { 6 DateField df = new DateField(); df.setResolution(DateField.RESOLUTION_DAY); return df; } // .. return DefaultFieldFactory.createFieldByPropertyType(item .getItemProperty(propertyId).getType()); } });
  56. 56. 7 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));
  57. 57. public class Person { @Size(min = 5, max = 50) private String name; @Min(0) @Max(100) private int age; // + constructor + setters + getters}
  58. 58. Demo “Joonas Lehtinen”presentation Componentmodel firstName = “Joonas” lastName = “Lehtinen”
  59. 59. RPCState
  60. 60. 6 Widget Paintable Variableclient Changesserver UIDL Component
  61. 61. 7 Widget Demo Connectorclient Stateserver RPC Component
  62. 62. public interface ButtonRpc extends ServerRpc { Demo public void click(MouseEventDetails details); } private ButtonRpc rpc = new ButtonRpc() { public void click(private ButtonRpc rpc = MouseEventDetails details) {RpcProxy.create(ButtonRpc.class, this); // do stuff }public void onClick(ClickEvent event) { }; rpc.click( new MouseEventDetails(event)); public Button() {} registerRpc(rpc); } client server
  63. 63. JavaScriptAdd-ons
  64. 64. Publish API from JavagetPage().getJavaScript().addCallback("myCallback", new JavaScriptCallback() { public void call(JSONArray arguments) throws JSONException { // Do something with the arguments } }); Use from JavaScriptwindow.myCallback(foo, 100);
  65. 65. Widget implementation in JavaScriptwindow.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); } });}
  66. 66. Server-side Java API for Widgetpublic class MyWidget extends AbstractJavaScriptComponent { public MyWidget() { registerCallback("plotClick", new JavaScriptCallback() { public void call(JSONArray arguments) throws JSONException { // Do something with the event } }); } public static class MyWidgetState extends ComponentState { public List<List<List<Double>>> plotSeriesData = new ArrayList<List<List<Double>>>(); // getters & setters }}
  67. 67. gettingstarted
  68. 68. Eclipse
  69. 69. mvn archetype:generate -DarchetypeGroupId=com.vaadinMaven -DarchetypeArtifactId= vaadin-archetype-application -DarchetypeVersion=7.0.0
  70. 70. Download for Free vaadin.com/book-93- 1970 -1701 728 pages PDF, ePub, HTML
  71. 71. ? slideshare.com/ joonaslehtinen joonas@vaadin.com vaadin.com/joonas @joonaslehtinen

×