Vaadin 7
Upcoming SlideShare
Loading in...5
×
 

Vaadin 7

on

  • 2,430 views

My Introduction to Vaadin 7 presentation at Jfokus 2013

My Introduction to Vaadin 7 presentation at Jfokus 2013

Statistics

Views

Total Views
2,430
Views on SlideShare
2,383
Embed Views
47

Actions

Likes
0
Downloads
52
Comments
0

3 Embeds 47

http://eventifier.co 42
https://twitter.com 3
http://eventifier.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 Vaadin 7 Presentation Transcript

  • 7Vaadin today @joonaslehtinen
  • Intro to Vaadin new Label( “Hello world”)
  • Who is [using] Vaadin? New in 7
  • Gettingstarted QA
  • User interfaceframework for rich web applications
  • java html
  • Why on earth?
  • enterpriseconsumers
  • expectations
  • reality
  • consumer business “million” users “500” users 10 views 50 views 1€/user 500€/user100,000€ / view >> 5,000€ / view
  • Problem How to build consumergrade UX with business system budget
  • How?
  • 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, ...
  • 2Server + Client
  • 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
  • How does it work,really?
  • • Initial HTML• CSS (theme)• Images• JavaScript830k total compress250k reduced widgetset120k
  • • name=”Joonas”• button clicked150 bytes
  • • name=”Joonas”• button clicked150 bytes• Add notification466 bytes
  • Trying it out
  • https://github.com/jojule/NotesDemo
  • 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 Spring Roo ∙∙∙
  • 7Vaadin today 0.0
  • v0.12001 v3 2002 Open Source
  • v4 2006Ajax v5 2007
  • 7 v6 today2009
  • Renewed JS Sass from Inside HTML5 += UI GWT RPCComplete State Fieldstack
  • 7Favorite picks
  • Vaadin += GWT
  • GWTCompatible
  • 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
  • Se rve r P r- e Op odu sid c tim or tiv df ized ity ize ol f or r tim Op nt Co t- en Cli
  • Architecture
  • New Windowing API
  • Built-in high levelView management
  • 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; }}
  • @Title("Vaadin 7 Application")public class Vaadin7uiUI extends UI { public void init(VaadinRequest request) { addComponent(new TextField("What is your name")); addComponent(new Button("Do not push me")); }}
  • Sass
  • Variables & functions
  • Mixins
  • RedesignedForms
  • public class Employee { String firstName; String lastName; double salary; 6 Date birthDate; // Getters, setters, …}Form form = new Form();form.setItemDataSource( new BeanItem<Employee>(employee));
  • 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()); } });
  • 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));
  • public class Person { @Size(min = 5, max = 50) private String name; @Min(0) @Max(100) private int age; // + constructor + setters + getters}
  • “Joonas Lehtinen”presentation Componentmodel firstName = “Joonas” lastName = “Lehtinen”
  • RPCState
  • Widget 6 Paintable Variableclient Changesserver UIDL Component
  • Widget 7 Connectorclient Stateserver RPC Component
  • public interface ButtonRpc extends ServerRpc { 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
  • JavaScriptAdd-ons
  • 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);
  • 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); } });}
  • 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 }}
  • gettingstarted
  • Eclipse
  • mvn archetype:generate -DarchetypeGroupId=com.vaadinMaven -DarchetypeArtifactId= vaadin-archetype-application -DarchetypeVersion=7.0.0
  • Download for Free vaadin.com/book ework s thato u an d ~700 pages
  • vaadin.com/vaadin7
  • ? joonas@vaadin.com vaadin.com/joonas @joonaslehtinen