blob: 2fab75ed1846f6ac6818c6b1a0b35b27c3eddf92 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
---
title: Creating a Custom Widget
order: 5
layout: page
---
[[clientside.widget]]
= Creating a Custom Widget
Creating a new Vaadin component usually begins from making a client-side widget,
which is later integrated with a server-side counterpart to enable server-side
development. In addition, you can also choose to make pure client-side widgets,
a possibility which we also describe later in this section.
[[clientside.widget.simple]]
== A Basic Widget
All widgets extend the [classname]#Widget# class or some of its subclasses. You
can extend any core GWT or supplementary Vaadin widgets. Perhaps typically, an
abstraction such as [classname]#Composite#. The basic GWT widget component
hierarchy is illustrated in <<figure.clientside.widgets>>. Please see the GWT
API documentation for a complete description of the widget classes.
[[figure.clientside.widgets]]
.GWT widget base class hierarchy
image::img/gwt-widgets-hi.png[]
For example, we could extend the [classname]#Label# widget to display some
custom text.
----
package com.example.myapp.client;
import com.google.gwt.user.client.ui.Label;
public class MyWidget extends Label {
public static final String CLASSNAME = "mywidget";
public MyWidget() {
setStyleName(CLASSNAME);
setText("This is MyWidget");
}
}
----
The above example is largely what the Eclipse plugin generates as a widget stub.
It is a good practice to set a distinctive style class for the widget, to allow
styling it with CSS.
The client-side source code __must__ be contained in a [filename]#client#
package under the package of the descriptor file, which is covered later.
[[clientside.widget.using]]
== Using the Widget
You can use a custom widget just like you would use any widget, possibly
integrating it with a server-side component, or in pure client-side modules such
as the following:
----
public class MyEntryPoint implements EntryPoint {
@Override
public void onModuleLoad() {
// Use the custom widget
final MyWidget mywidget = new MyWidget();
RootPanel.get().add(mywidget);
}
}
----
|
