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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
---
title: Creating A Component Extension
order: 72
layout: page
---
[[creating-a-component-extension]]
= Creating a component extension
In this tutorial we create a simple extension that can be attached to a
`PasswordField`, displaying a floating notification if the user's Caps
Lock seems to be enabled. We assume the reader is already familiar with
the link:CreatingAUIExtension.asciidoc[Creating a UI extension]
tutorial.
This extension has almost no server-side functionality; the whole Extension
class is as follows:
[source,java]
....
public class CapsLockWarning extends AbstractExtension {
protected CapsLockWarning(PasswordField field) {
// Non-public constructor to discourage direct instantiation
extend(field);
}
public static CapsLockWarning warnFor(PasswordField field) {
return new CapsLockWarning(field);
}
}
....
When there's nothing to configure for the extension, users just want to
enable it for some component and be done with it. By defining a static
factory method, the user only needs to do something like
`CapsLockWarning.warnFor(myPasswordField);` to make `myPasswordField`
get the new functionality.
The client side is not overly complicated, either. We override the
`extend` method, called by the framework when the client-side extension
connector is attached to its target the client-side counterpart of the
connector to which the server-side extension instance is attached in
this case, `PasswordFieldConnector`.
We add a key press handler to the password widget, checking if the input
looks like Caps Lock might be enabled. The Caps Lock state cannot be
directly queried in GWT/JavaScript, so we use a trick: check if either
* the shift key was not held but the entered character was uppercase, or
* the shift key _was_ held but the entered character was lowercase.
If this is the case, we show a warning in the form of a floating widget
(`VOverlay`). This demonstrates how an extension may make use of UI
elements even though it is not a part of the layout hierarchy. A
frequent use case for extensions is showing different types of floating
overlay elements that are temporary in character.
[source,java]
....
@Connect(CapsLockWarning.class)
public class CapsLockWarningConnector extends AbstractExtensionConnector {
@Override
protected void extend(ServerConnector target) {
final Widget passwordWidget = ((ComponentConnector) target).getWidget();
final VOverlay warning = new VOverlay();
warning.setOwner(passwordWidget);
warning.add(new HTML("Caps Lock is enabled!"));
passwordWidget.addDomHandler(new KeyPressHandler() {
@Override
public void onKeyPress(KeyPressEvent event) {
if (isEnabled() && isCapsLockOn(event)) {
warning.showRelativeTo(passwordWidget);
} else {
warning.hide();
}
}
}, KeyPressEvent.getType());
}
private boolean isCapsLockOn(KeyPressEvent e) {
return e.isShiftKeyDown() ^ Character.isUpperCase(e.getCharCode());
}
}
....
To use the Caps Lock warning, compile your widgetset and extend a
PasswordField with something like this
[source,java]
....
PasswordField field = new PasswordField("Enter your password");
CapsLockWarning.warnFor(field);
addComponent(field);
....
|
