Vaadin 7
-
Upload
joonas-lehtinen -
Category
Technology
-
view
3.854 -
download
0
description
Transcript of Vaadin 7
Vaadin 7
Joonas Lehtinen, CEO@joonaslehtinen
Intro toVaadin
new Label(“Hello world”)
New in
7
Gettingstarted
QA
User interface framework for rich
web applications
htmljava
Why on earth?
consumerEE
expectations
reality
businessconsumer
“million” users10 views1!/user
“500” users50 views500!/user
>>100,000! / view 5,000! / view
ProblemHow 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
Layers of abstraction
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
830k total
250k
compress
120k
reducedwidgetset
• name=”Joonas”• button clicked
150 bytes
• name=”Joonas”• button clicked
150 bytes
• Add notification
466 bytes
Trying it out
https://github.com/jojule/NotesDemo
3EmbracingJava
Any JVMLanguage
Internet ExplorerChromeFirefoxSafariOpera
iOSAndroid
Nobrowserplugins
Nothing toinstall
Servlet Portlet
(most) clouds
EclipseIntelliJ IDEA
NetbeansMaven
AntSpring Roo
∙ ∙ ∙
Vaadin Framework7
Empower Developers
Embrace Extendability
Clean Up
Vaadin += GWT
GWTCompatible
Server-
Client-
side
Optim
ized for
Productivity
Opt
imiz
ed fo
r
Cont
rol
Server-
Client-
sideO
ptim
ized
for
Prod
uctiv
ity
Optim
ized for
Control
Architecture
Refactored windowing
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 {
@Override public void init(VaadinRequest request) { addComponent(new TextField("What is your name")); addComponent(new Button("Do not push me")); }
}
SASS
Variables & functions
Mixins
Nesting
Selector Inheritance
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”
final TextField textField = new TextField("Name");textField.setConverter(new StringToNameConverter());
// ....
Name name = (Name) textField.getConvertedValue();
public class StringToNameConverter implements Converter<String, Name> {
public Name convertToModel(String text, Locale locale) throws ConversionException {
// do the conversion }
public String convertToPresentation(Name name, Locale locale) throws ConversionException {
// do the conversion }
public Class<Name> getModelType() { return Name.class; }
public Class<String> getPresentationType() { return String.class; }}
Renewed communication
Component
Widget
Paintable
server
clientVariable
Changes
UIDL
6
server
client
Component
Widget
Connector
RPC
7State
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);}
JavaScriptAdd-ons
getPage().getJavaScript().addCallback("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
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
public 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 }
}
Server-side Java API for Widget
gettingstarted
mvn archetype:generate-DarchetypeGroupId=com.vaadin -DarchetypeArtifactId= vaadin-archetype-application-DarchetypeVersion=7.0.0.beta8
Maven
yourproject-1.0.warmvn package
Eclipse
http://vaadin.com/
eclipse/experimental
Download for Freevaadin.com/book
~700 pages
Vaadin 7 Draft Edition
US $29.95
Vaadin is an open source Java framework for building modern web applications that look great, perform well and make you and
your users happy. http://vaadin.com/
2675387895299
ISBN 978-952-92-6753-890000
�
By Marko Grönroos
ABOUT VAADIN
ww
w.d
zone
.com
Get
Mo
re R
efca
rdz!
Vis
it re
fcar
dz.c
om
#85
Getting Started with Vaadin
CONTENTS INCLUDE:
�� About Vaadin
�� Creating An Application
�� Components
�� Layout Components
�� Themes
�� Data Binding and more...
Vaadin is a server-side Ajax web application development
framework that allows you to build web applications just like
with traditional desktop frameworks, such as AWT or Swing. An
application is built from user interface components contained
hierarchically in layout components.
In the server-driven model, the application code runs on
a server, while the actual user interaction is handled by a
client-side engine running in the browser. The client-server
communications and any client-side technologies, such as
HTML and JavaScript, are invisible to the developer. As the
client-side engine runs as JavaScript in the browser, there is no
need to install plug-ins. Vaadin is released under the Apache
License 2.0.
Vaadin Client-Server Architecture
If the built-in selection of components is not enough, you can
develop new components with the Google Web Toolkit (GWT)
Figure 2: Architecture for Vaadin Applications
Hot Tip
You can get a reference to the application object
from any component attached to the application with
��$!!��
��$� ���
Event Listeners
In the event-driven model, user interaction with user interface
components triggers server-side events, which you can handle
with event listeners.
In the example below, we handle click events for a button with
an anonymous class:
�%$$ ��
*�������
��+��
�%$$ ��
�������#
$���"���
(
��%$$ ��
��������
���&��$�
�&��$��(
*�������
%�+��
Web
Browser
Client-Side
Engine
Java
Web
Server
Vaadin
UIComponents
Your
Java
Application
Web
Service
EJB
DB
Servlet Container
User
Application
Event
Listener
Data
Model
Application
Themes
Application
Resources
Default
Theme
FileResources
External
Resources
Database
DataBinding
InheritsEvents
Changes
AJAX Requests
InheritsUIComponent
Java
Servlet
Application
Class
Web
Browser
Client-Side
Engine
Q&A