25. What kind of devices does your app support?
98.1%
3Desktop
browsers
Browsers developers expect to support in 2013
3.5 Browsers to support in 2012
IE 6/7 Safari Opera IE 8
6/7 8
14% 18% 36% 54%
Chrome
9 10
IE 9 IE 10 Firefox
79% 80% 94% 94%
Browsers developers expect to support in 2013
3.5 Browsers to support in 2012
IE 6/7 Safari Opera IE 8
6/7 8
14% 18% 36% 54%
Chrome
9 10
IE 9 IE 10 Firefox
79% 80% 94% 94%
es
your app
support?
25.7%
Phones
36.1%
O
thers2.1%
“Since gw
in
the enterp
explain
why tab
popular than
supp
phones”
Daniel
iPhone
Android
W
P
8
pplication
UI for
r 98%
of apps
overtaken
the
num
ber
rope.
36.1%
Tablets
“Since
gwt is
used
extensi
in
the
enterprise, this
m
explain
why tablets
popular than
su
phones”
iPadAndroid
W
indow
s
8
58. 934 tickets closed during 16 months of
development
3939 commits made by 23 authors
Oldest ticket created 3/2008
Newest ticket 2/2013
3939 commits made by 23 authors
93 % by 6 persons
> 1 000 000 lines of code touched
82. public class Employee {
String firstName;
String lastName;
double salary;
Date birthDate;
// Getters, setters, …
}
Form form = new Form();
form.setItemDataSource(
new BeanItem<Employee>(employee));
6
83.
84.
85. 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
86. 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
87. public class Person {
@Size(min = 5, max = 50)
private String name;
@Min(0)
@Max(100)
private int age;
// + constructor + setters + getters
}
95. 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(); }
}
用于 Widget 的服 器端 Java API
96. 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 的服 器端 Java API
106. 免 下
vaadin.com/refcard
8
PDF
GetMoreRefcardz!Visitrefcardz.com
#85
Vaadin7:ANewWaytoBuildWebUIswithJava
By: Marko Grönroos
Vaadin is a web application development framework that allows you
to build web applications much as you would with traditional desktop
frameworks, such as AWT or Swing. A UI is built hierarchically from user
interface components contained in layout components. User interaction is
handled in an event-driven manner.
Vaadin supports both a server-side and a client-side development model.
In the server-side model, the application code runs on a server, while the
actual user interaction is handled by a client-side engine that runs in the
browser. The client-server communications and client-side technologies,
such as HTML and JavaScript, are invisible to the developer. The client-
side engine runs as JavaScript in the browser, so there is no need to install
plug-ins.
Figure 1: Vaadin Client-Server Architecture
The client-side development model allows building new client-side widgets
and user interfaces with the GWT toolkit included in Vaadin. The widgets
can be integrated with server-side component counterparts to enable
using them in server-side applications. You can also make pure client-side
UIs, which can communicate with a back-end service.
A server-side Vaadin application consists of one or more UI classes that
extend the com.vaadin.UI class and implement the init() method.
@Title(“My Vaadin UI”)
public class HelloWorld extends com.vaadin.UI {
@Overrideprotected void init(VaadinRequest request) {
// Create the content root layout for the UI
VerticalLayout content = new VerticalLayout();
setContent(content);
// Display the greeting
content.addComponent(new Label(“Hello World!”));
}
}
Normally, you need to:
extend the UI class
build an initial UI from comp
Optionally, you can also:
set a custom theme for the UI
bind components to data
bind components to resources
Figure 2: Architecture for Vaadin Applications
You can create a Vaadin application project easily with the Vaadin Plugin
for Eclipse, with NetBeans, or with Maven.Hot
Tip
You can get a reference to the UI object associated
with the currently processed request from anywhere in
the application logic with UI.getCurrent(). You can also
access the current VaadinSession, VaadinService, and
VaadinServlet objects in the same way.
CONTENTS INCLUDE:
Creating a Server-side UI
ComponentsThemes
Class DiagramData BindingWidget Integration... and more!
Vaadin 7:
Modern Web Apps in Java
Vaadin Charts
The best charting compone
with over
ABOUT VAADIN
CREATING A SERVER-SIDE UI
Brought to you by:
107. 免 下
vaadin.com/refcard
8
PDF
GetMoreRefcardz!Visitrefcardz.com
#85
Vaadin7:ANewWaytoBuildWebUIswithJava
By: Marko Grönroos
Vaadin is a web application development framework that allows you
to build web applications much as you would with traditional desktop
frameworks, such as AWT or Swing. A UI is built hierarchically from user
interface components contained in layout components. User interaction is
handled in an event-driven manner.
Vaadin supports both a server-side and a client-side development model.
In the server-side model, the application code runs on a server, while the
actual user interaction is handled by a client-side engine that runs in the
browser. The client-server communications and client-side technologies,
such as HTML and JavaScript, are invisible to the developer. The client-
side engine runs as JavaScript in the browser, so there is no need to install
plug-ins.
Figure 1: Vaadin Client-Server Architecture
The client-side development model allows building new client-side widgets
and user interfaces with the GWT toolkit included in Vaadin. The widgets
can be integrated with server-side component counterparts to enable
using them in server-side applications. You can also make pure client-side
UIs, which can communicate with a back-end service.
A server-side Vaadin application consists of one or more UI classes that
extend the com.vaadin.UI class and implement the init() method.
@Title(“My Vaadin UI”)
public class HelloWorld extends com.vaadin.UI {
@Overrideprotected void init(VaadinRequest request) {
// Create the content root layout for the UI
VerticalLayout content = new VerticalLayout();
setContent(content);
// Display the greeting
content.addComponent(new Label(“Hello World!”));
}
}
Normally, you need to:
extend the UI class
build an initial UI from comp
Optionally, you can also:
set a custom theme for the UI
bind components to data
bind components to resources
Figure 2: Architecture for Vaadin Applications
You can create a Vaadin application project easily with the Vaadin Plugin
for Eclipse, with NetBeans, or with Maven.Hot
Tip
You can get a reference to the UI object associated
with the currently processed request from anywhere in
the application logic with UI.getCurrent(). You can also
access the current VaadinSession, VaadinService, and
VaadinServlet objects in the same way.
CONTENTS INCLUDE:
Creating a Server-side UI
ComponentsThemes
Class DiagramData BindingWidget Integration... and more!
Vaadin 7:
Modern Web Apps in Java
Vaadin Charts
The best charting compone
with over
ABOUT VAADIN
CREATING A SERVER-SIDE UI
Brought to you by:
