Even though widget libraries for GWT exist, it’s sometimes necessary to create a widget on your own. Widget creation will confront you with challenges like GWT specifics or the way browsers work.
Participants will learn how to compose existing widgets as well as creating new ones based on DOM elements. As it is important to know how browsers behave, topics like DOM API, reflows and event propagation will be explained. But there are also GWT specific aspects, like important interfaces and classes or how to prevent code injection.
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
GWT widget development
1. GWT widget development
Even though widget libraries for GWT
exist, it’s sometimes necessary to
create a widget on your own. Widget
creation will confront you with
challenges like GWT specifics or the
way browsers work.!
Participants will learn how to compose
existing widgets as well as creating
new ones based on DOM elements. As
it is important to know how browsers
behave, topics like DOM API, reflows
and event propagation will be
explained. But there are also GWT
specific aspects, like important
interfaces and classes or how to
prevent code injection.
20. separation of concerns?
The coders at
gwt-bootstrap did
the progress bar
widget magic.!
!
I will never build
widgets!!!!
!
It is not of my
concern. I simply
use them!!!
40. DOM API in GWT
DivElement
element
=
Document.get().createDivElement();
element.appendChild(otherElement);
element.getChild(0);
element.removeChild(otherElement);
51. Bad Smell: refused bequest
Subclasses get to inherit the
methods and data of their
parents. But what if they
don’t want or need what
they are given? They are
given all these great gifts
and pick just a few to
play with.
!
The traditional story is that
this means the hierarchy is
wrong.
http://sourcemaking.com/refactoring/refused-bequest
978-0201485677
74. Custom event development
Events between
Widgets by sending
and listening to
GwtEvents
GwtEvent
GwtEvent
Event handling in
the component, listen to
native events
Event
onBrowserEvent(Event event)
75. Custom event development
Events between
Widgets by sending
and listening to
GwtEvents
Event handling in
the component, listen to
native events
ValueChangeEvent
Event
LEDActivationEvent
Event.ONCLICK,
Event.ONKEYDOWN
76. Basic handling of DOM events
public
Led()
{
sinkEvents(Event.ONCLICK);
}
!
@Override
public
void
onBrowserEvent(Event
event)
{
if
(event.getTypeInt()
==
Event.ONCLICK)
{
toggleLed();
}
[…]
}
77. Providing events to the user
@Override
public
HandlerRegistration
addValueChangeHandler(
ValueChangeHandler<Boolean>
handler)
{
return
addHandler(handler,
ValueChangeEvent.getType());
}
!
@Override
public
void
setValue(Boolean
value,
boolean
fireEvents)
{
this.value
=
value;
if(fireEvents)
{
ValueChangeEvent.fire(this,
value);
}
}
79. Define your own events: handler…
public
class
ExampleEvent
extends
GwtEvent<ExampleEvent.Handler>
{
!
[…]
!
!
public
interface
Handler
extends
EventHandler
{
void
onSomethingHappened(ExampleEvent
event);
}
!
[…]
!
}
80. Define your own events: payload
public
class
ExampleEvent
extends
GwtEvent<ExampleEvent.Handler>
{
!
[…]
!
private
final
int
value;
public
ExampleEvent(int
value)
{
this.value
=
value;
}
!
public
int
getValue()
{
return
value;
}
!
!
}
[…]
81. Define your own events: dispatching
public
class
ExampleEvent
extends
GwtEvent<ExampleEvent.Handler>
{
!
[…]
!
!
protected
void
dispatch(Handler
handler)
{
handler.onSomethingHappened(this);
}
!
!
}
[…]
82. Define your own events: allow registration
public
HandlerRegistration
addExampleHandler(
ExampleHandler
handler)
{
return
addHandler(handler,
ExampleEvent.getType());
}
85. Define your own events
public
class
ExampleEvent
extends
GwtEvent<ExampleEvent.Handler>
{
!
private
static
Type<ExampleEvent.Handler>
type;
!
public
static
Type<ExampleEvent.Handler>
getType()
{
if
(type
==
null)
{
type
=
new
Type<ExampleEvent.Handler>();
}
return
type;
}
@Override
public
Type<Handler>
getAssociatedType()
{
return
getType();
}
}
92. We all did it already
verticalPanel.add(new
Label("Hello
GWT
world!"));
dockLayoutPanel.addWest(new
CustomerForm(),
300);
headerPanel.setContentWidget(new
CustomerForm());
93. Widgets, panels and DOM elements
Panel
div
div
label
Label
div
input
TextBox