vaadin7
Post on 10-May-2015
768 Views
Preview:
DESCRIPTION
TRANSCRIPT
Vaadin 7Joonas LehtinenFounder / Vaadin@joonaslehtinen
Intro toVaadin
new Label(“Hello world”)
New in
7
Gettingstarted
QA
User interface framework for rich
web applications
htmljava
Why on earth?
expectations
reality
businessconsumer
“million” users “500” users
>>100,000! / view 5,000! / view
10 views1!/user
50 views500!/user
ChallengeHow to build consumer
grade 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
JavaScriptJava toJavaScript
Webserver
Backendserver
required optional optionalrequired
RPC
optional
Vaa
din
required optionalrequired
GW
T
requiredrequiredJS
requiredrequired
required required
How does it work, really?
• Initial HTML• CSS (theme)• Images• JavaScript
1.2M total
307k
compress
135k
reducedwidgetset
• name=”Joonas”• button clicked
261 bytes
• name=”Joonas”• button clicked
261 bytes
• Add notification
267 bytes
Hello World!
https://github.com/vaadin/documentmanager
https://vaadin.com/learn
Source
HOWTO Screencast
3EmbracingJava
Any languageon JVM
Internet ExplorerChromeFirefoxSafariOpera
iOSAndroid
Nobrowserplugins
Nothing toinstall
Servlet Portlet
(most) clouds
EclipseIntelliJ IDEA
NetbeansMaven
Ant∙ ∙ ∙
Vaadin7today
v32002
v0.12001
OpenSource
v42006
Ajax
v52007
7Febv6
2009
934 tickets closed during 16 months of development
3939 commits made by 23 authors
Oldest ticket created 3/2008Newest ticket 2/2013
3939 commits made by 23 authors93 % by 6 persons
> 1 000 000 lines of code touched
Completestack
Renewedfrom Inside
Sass
JS
HTML5+=GWT
RPCState
UI
Field
Favorite picks7
Vaadin += GWT
GWTCompatible
Server-
Client-
side
Optim
ized for
Productivity
Opt
imiz
ed fo
r
Cont
rol
Architecture
New Windowing API
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 HellowUI extends UI {
protected void init(VaadinRequest request) { setContent(new VerticalLayout( new TextField("What is your name"), new Button("Do not push me"))); }
}
@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"))); }
}
Built-in high levelView management
Demo
Sass
Demo
RedesignedForms
public class Employee { String firstName; String lastName; double salary; Date birthDate; // Getters, setters, …}
Form form = new Form();form.setItemDataSource( new BeanItem<Employee>(employee));
6
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
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
public class Person {
@Size(min = 5, max = 50) private String name;
@Min(0) @Max(100) private int age;
// + constructor + setters + getters}
model
presentation
“Joonas Lehtinen”
Component
firstName = “Joonas”lastName = “Lehtinen”
Demo
RPCState
Component
Widget
Paintable
server
clientVariable
Changes
UIDL
6
server
client
Component
Widget
Connector
RPC
7State
Demo
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));}
serverclient
private ButtonRpc rpc = new ButtonRpc() { public void click( MouseEventDetails details) { // do stuff }};
public Button() { registerRpc(rpc);}
Demo
JavaScriptAdd-ons
getPage().getJavaScript().addFunction("myCallback", new JavaScriptCallback() { public void call(JSONArray arguments) throws JSONException { // Do something with the arguments } });
Publish API from Java
window.myCallback('foo', 100);
Use from JavaScript
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
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
Roadmap
Vaadin Framework 7.1• Server push
• Based on Atmosphere Framework• Web sockets, long polling and polling
• Calendar (now under Apache 2.0 license)• Limited IE 10 support without touch• CSS string inject• Renewed debug console features◦Redesigned UI/UX for debug window◦Optimize widgetset
• Arithmetics for SASS• Packaging SCSS / CSS for add-ons
April
Vaadin Charts 1.1
• New charts: • Funnel• Box plot• Waterfall• Bubble• Error bars
• Different coloring of a graph above and below a threshold• Pinch zooming and panning for touch devices
May
Vaadin TouchKit 3.0
• Vaadin 7 support
• New components: • URLField• Datefield• Combobox
April
Vaadin TestBench 3.1
• Headless mode with Phantom JS
May
Vaadin CDI
• Registering UI with @CDIUI annotation (web.xml no more)• Registering Views (to CDIViewManager)• Decoupling UI:s by injecting UI components (handy for MVP)• Injecting all the normal Java EE stuff (ejbs, events, ...)• UI Scope to complement the session scope• Supports JAAS (set @RolesAllowed for a View, ...)
• 1.0 alpha to be released any day now (in staging repo today)• Apache 2.0 License
Vaadin JPAContainer
• License changed to Apache 2.0• Vaadin 7 compatible version released in March
gettingstarted
Eclipse
mvn archetype:generate-DarchetypeGroupId=com.vaadin -DarchetypeArtifactId= vaadin-archetype-application-DarchetypeVersion=7.0.3
Maven
Migration Guide:Vaadin 6 to 7
https://vaadin.com/wiki/-/wiki/Main/Migrating+from+Vaadin+6+to+Vaadin+7
Download for Freevaadin.com/book
728 pages
9 789529 319701
ISBN 978-952-93-1970-1
PDF, ePub, HTML
?joonas@vaadin.com vaadin.com/joonas
@joonaslehtinen
top related