summaryrefslogtreecommitdiffstats
path: root/documentation/clientside/clientside-widget.asciidoc
blob: ed911a46b4e1ac6431ffe72a2c1658d58e47630f (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
72
73
74
75
76
---
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);
    }
}
----