Creating Ext GWT Extensions and Components

Wednesday, November 2, 11

Sven BrunkenCUSTOM COMPONENTS

sven@sencha.com @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!

Creating Ext GWT Extensions and Components

Technology

Developing components and extensions for ext js

Ext GWT 3.0 Layouts

Monografia GWT

Ext JS 4.0 - Creating extensions, plugins and components

DevInCachu 2012 LT: Ext Gwt 3: GXT 3

Ext GWT 3.0 Theming and Appearances

Creating Ext JS Extensions and Components

GWT Indepth

Advanced Performance Tuning in Ext GWT

Architecting your GWT applications with GWT-Platform - Lesson 02

Auto-GWT : Better GWT Programming with Xtend

GWT Panels

JavaCE Conference - Ext GWT - GXT 3

Ext GWT 3.0 Data Widgets

local/dn?attributes?scope?filter?extensions?ext Apache Exploits //local/dn?attributes?scope?filter?extensions

Introducing Ext GWT 3

Ext GWT 3.0 Advanced Templates

Migrating from Ext GWT 2.x to 3.0

Conexao Java 2012: Desenvolvendo RIA com Java e Ext GWT (GXT)

Ihr Eigenheim? · S s nivea u Velopa Hauseingang Garagenvorplatz PP-Bewohner GWT 436.36 = -0.34 435.92 = -0.78 GWT 436.87 = +0.17 GWT 436.51 = -0.19 Container GWT 436.35 = -0.35 GWT