Custom Components: Widget vs Cell Class

CUSTOM COMPONENTS
Sven Brunken

sven@sencha.com @svenbrunken

Wednesday, November 2, 11

Overview
Widget vs Component
Important methods of the Widget class
When to use the Cell class?
Important methods of the Cell class
Questions


Which Class To Start
From?


Widget
Build on top of a DOM Element
Listens to browser events
Needs to be attached and detached for event handling
Does not solve the different sizing boxes
Can ﬁre custom events through its HandlerManager


Component
Extends the Widget class and so inherits all its features
Solves the different sizing boxes
Can be disabled directly
Can be positioned


Important Methods


sinkEvents()
Deﬁnes which events can be listened to
Events not sunk cannot be listened to

public void sinkEvents(int eventBitsToAdd) {
if (isOrWasAttached()) {
DOM.sinkEvents(getElement(), eventBitsToAdd|DOM.getEventsSunk(getElement()));
} else {
eventsToSink |= eventBitsToAdd;
}
}


onAttach()
Removes the event listener
Mandatory to enable browser event handling
Attaches the event listener of all its children widgets

protected void onAttach() {
attached = true;
DOM.setEventListener(getElement(), this);
int bitsToAdd = eventsToSink;
eventsToSink = -1;
if (bitsToAdd > 0) {
sinkEvents(bitsToAdd);
}
doAttachChildren();
onLoad();
AttachEvent.fire(this, true);
}


onDetach()
Removes the event listener added from onAttach()
Browser events are no longer handled for this Widget
Prevents memory leaks
Detaches the event listener for all its children widgets

protected void onDetach() {
try {
onUnload();
AttachEvent.fire(this, false);
} finally {
try {
doDetachChildren();
} finally {
DOM.setEventListener(getElement(), null);
attached = false;
}
}
}

fireEvent()
Fires a custom event through the HandlerManager
Other classes could listen to these events

public void fireEvent(GwtEvent<?> event) {
if (handlerManager != null) {
handlerManager.fireEvent(event);
}
}


onBrowserEvent()
Only called when a Widget is attached
Gets called with the browser event that occurred
Reﬁres the browser event through the HandlerManager

public void onBrowserEvent(Event event) {
DomEvent.fireNativeEvent(event, this, this.getElement());
}


setElement()
Sets the element for this Widget
Mandatory to be called
An Element can only be set once and not changed
Needs to be called before calling getElement()

protected void setElement(Element elem) {
assert (element == null) : SETELEMENT_TWICE_ERROR;
this.element = elem;
}


How To Start?


Gathering Information
What is the purpose of my custom widget?
Which browser events are required?
Can I extend an already existing class?

Do I understand all my requirements?


Implementation


The Class
Extending Component to overcome different sizing models

public class SquareWidget extends Component {

}


Constructor
Setting the Element
Deﬁning the events we want to listen to

public SquareWidget(Data data) {
this.data = data;
SquareWidgetTemplate t = GWT.create(SquareWidgetTemplate.class);
setElement(XDOM.create(t.render(data)));

sinkEvents(Event.ONMOUSEOVER | Event.ONMOUSEOUT | Event.ONCLICK);

setPixelSize(100, 100);
}


onBrowserEvent()
Contains our event handling logic
Should call the super method

@Override
public void onBrowserEvent(Event event) {
super.onBrowserEvent(event);

if (event.getTypeInt() == Event.ONMOUSEOUT) {
onMouseOut(event);
} else if (event.getTypeInt() == Event.ONMOUSEOVER) {
onMouseOver(event);
} else if (event.getTypeInt() == Event.ONCLICK) {
onClick(event);
}
}


onMouseOver()
getRelatedEventTarget returns the Element coming from
Setting the mouse over value

private void onMouseOver(Event event) {
EventTarget t = event.getRelatedEventTarget();
if (t == null || Element.is(t) && !getElement().isOrHasChild(Element.as(t))) {
String s = SafeHtmlUtils.fromString(data.getMouseOverName()).asString();
getContentElement().setInnerHTML(s);
}
}


onMouseOut()
getRelatedEventTarget returns the Element moving to
Clearing the background color
Setting the standard value again

private void onMouseOut(Event event) {
if (t == null
|| (Element.is(t) && !getElement().isOrHasChild(Element.as(t)))) {
getElement().getStyle().clearBackgroundColor();

String s = SafeHtmlUtils.fromString(data.getName()).asString();
getContentElement().setInnerHTML(s);
}
}


onClick()
Sets the different background color

private void onClick(Event event) {
getElement().getStyle().setBackgroundColor("red");
}


Demonstration


But, Do We Really
Require a Widget?


Introducing Cell
Cells can handle browser events
Cells can be used in data components
Widgets cannot be used there
Cells render a lot faster


Context of the Cell
Contains the relevant row and column index
Important when used in data widgets
Contains the key representing the value


onBrowserEvent()
Gets called when an event for this cell occurred
Gets passed in the parent Element
Cell on its own does not know anything where it is displayed
One Cell can be displayed in many places

void onBrowserEvent(Context context, Element parent, C value,
NativeEvent event, ValueUpdater<C> valueUpdater);


render()
Called when a Cell should be rendered
The output should be written to the SafeHtmlBuilder

void render(Context context, C value, SafeHtmlBuilder sb);


getConsumedEvents()
Returns the events this cell requires
Cannot change in the lifecycle of a Cell

Set<String> getConsumedEvents();


The Class
Extending AbstractCell
Implementing the Cell interface directly works too

public class SquareCell extends AbstractCell<Data> {

}


Constructor
Deﬁning the events this cell listens to

public SquareCell() {
super("click", "mouseover", "mouseout");
}


onBrowserEvent()
Contains our event handling logic

public void onBrowserEvent(Context context, Element parent, Data value,
NativeEvent event, ValueUpdater<Data> valueUpdater) {
Element t = parent.getFirstChildElement();
Element target = event.getEventTarget().cast();
if (!t.isOrHasChild(target)) {
return;
}

if ("mouseout".equals(event.getType())) {
onMouseOut(context, parent, value, event);
} else if ("mouseover".equals(event.getType())) {
onMouseOver(context, parent, value, event);
} else if ("click".equals(event.getType())) {
onClick(context, parent, value, event);
}
}

onMouseOver()
getRelatedEventTarget returns the Element coming from
Setting the mouse over value

private void onMouseOver(Context context, Element parent, Data value,
NativeEvent event) {
Element fc = parent.getFirstChildElement();
if (t == null || (Element.is(t) && !fc.isOrHasChild(Element.as(t)))) {
String s = SafeHtmlUtils.fromString(value.getMouseOverName()).asString();
getContentElement(parent).setInnerHTML(s);
}
}


onMouseOut()
getRelatedEventTarget returns the Element moving to
Clearing the background color
Setting the standard value again
private void onMouseOut(Context context, Element parent, Data value,
Element fc = parent.getFirstChildElement();
if (t == null || (Element.is(t) && !fc.isOrHasChild(Element.as(t)))) {
fc.getStyle().clearBackgroundColor();
String s = SafeHtmlUtils.fromString(value.getName()).asString();
getContentElement(parent).setInnerHTML(s);
}
}


onClick()
Sets the different background color

private void onClick(Context context, Element parent, Data value,
parent.getFirstChildElement().getStyle().setBackgroundColor("red");
}


Questions


Thank You!


Custom Components: Widget vs Cell Class

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Similar to Custom Components: Widget vs Cell Class

Similar to Custom Components: Widget vs Cell Class (20)

More from Sencha

More from Sencha (20)

Recently uploaded

Recently uploaded (20)

Custom Components: Widget vs Cell Class