Creating Ext GWT Extensions and Components

Wednesday, November 2, 11

Sven BrunkenCUSTOM COMPONENTS

[email protected] @svenbrunken


OverviewWidget vs Component

Important methods of the Widget classWhen to use the Cell class?

Important methods of the Cell classQuestions


Which Class To Start From?


WidgetBuild on top of a DOM ElementListens to browser eventsNeeds to be attached and detached for event handlingDoes not solve the different sizing boxesCan fire custom events through its HandlerManager


ComponentExtends the Widget class and so inherits all its featuresSolves the different sizing boxesCan be disabled directlyCan be positioned


Important Methods


sinkEvents()Defines which events can be listened toEvents 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 listenerMandatory to enable browser event handlingAttaches 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 WidgetPrevents memory leaksDetaches 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 HandlerManagerOther classes could listen to these events

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


onBrowserEvent()Only called when a Widget is attachedGets called with the browser event that occurredRefires the browser event through the HandlerManager

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


setElement()Sets the element for this WidgetMandatory to be calledAn Element can only be set once and not changedNeeds to be called before calling getElement()

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


How To Start?


Gathering InformationWhat 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 ClassExtending Component to overcome different sizing models

public class SquareWidget extends Component {

}


ConstructorSetting the ElementDefining 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 logicShould 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 fromSetting 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 toClearing the background colorSetting the standard value again

private void onMouseOut(Event event) { EventTarget t = event.getRelatedEventTarget(); 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 CellCells can handle browser eventsCells can be used in data componentsWidgets cannot be used thereCells render a lot faster


Context of the CellContains the relevant row and column indexImportant when used in data widgetsContains the key representing the value


Important Methods


onBrowserEvent()Gets called when an event for this cell occurredGets passed in the parent ElementCell on its own does not know anything where it is displayedOne 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 renderedThe output should be written to the SafeHtmlBuilder

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


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

Set<String> getConsumedEvents();


Implementation


The ClassExtending AbstractCellImplementing the Cell interface directly works too

public class SquareCell extends AbstractCell<Data> {

}


ConstructorDefining 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 fromSetting the mouse over value

private void onMouseOver(Context context, Element parent, Data value, NativeEvent event) { Element fc = parent.getFirstChildElement(); EventTarget t = event.getRelatedEventTarget(); 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 toClearing the background colorSetting the standard value again

private void onMouseOut(Context context, Element parent, Data value, NativeEvent event) { Element fc = parent.getFirstChildElement(); EventTarget t = event.getRelatedEventTarget(); 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, NativeEvent event) { parent.getFirstChildElement().getStyle().setBackgroundColor("red"); }


Demonstration


Questions


Thank You!


Technology

Creating Ext GWT Extensions and Components