Download - Creating Ext GWT Extensions and Components
![Page 1: Creating Ext GWT Extensions and Components](https://reader038.vdocument.in/reader038/viewer/2022102900/54c726f74a7959cf018b4671/html5/thumbnails/1.jpg)
Wednesday, November 2, 11
![Page 3: Creating Ext GWT Extensions and Components](https://reader038.vdocument.in/reader038/viewer/2022102900/54c726f74a7959cf018b4671/html5/thumbnails/3.jpg)
OverviewWidget vs Component
Important methods of the Widget classWhen to use the Cell class?
Important methods of the Cell classQuestions
Wednesday, November 2, 11
![Page 4: Creating Ext GWT Extensions and Components](https://reader038.vdocument.in/reader038/viewer/2022102900/54c726f74a7959cf018b4671/html5/thumbnails/4.jpg)
Which Class To Start From?
Wednesday, November 2, 11
![Page 5: Creating Ext GWT Extensions and Components](https://reader038.vdocument.in/reader038/viewer/2022102900/54c726f74a7959cf018b4671/html5/thumbnails/5.jpg)
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
Wednesday, November 2, 11
![Page 6: Creating Ext GWT Extensions and Components](https://reader038.vdocument.in/reader038/viewer/2022102900/54c726f74a7959cf018b4671/html5/thumbnails/6.jpg)
ComponentExtends the Widget class and so inherits all its featuresSolves the different sizing boxesCan be disabled directlyCan be positioned
Wednesday, November 2, 11
![Page 7: Creating Ext GWT Extensions and Components](https://reader038.vdocument.in/reader038/viewer/2022102900/54c726f74a7959cf018b4671/html5/thumbnails/7.jpg)
Important Methods
Wednesday, November 2, 11
![Page 8: Creating Ext GWT Extensions and Components](https://reader038.vdocument.in/reader038/viewer/2022102900/54c726f74a7959cf018b4671/html5/thumbnails/8.jpg)
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; }}
Wednesday, November 2, 11
![Page 9: Creating Ext GWT Extensions and Components](https://reader038.vdocument.in/reader038/viewer/2022102900/54c726f74a7959cf018b4671/html5/thumbnails/9.jpg)
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);}
Wednesday, November 2, 11
![Page 10: Creating Ext GWT Extensions and Components](https://reader038.vdocument.in/reader038/viewer/2022102900/54c726f74a7959cf018b4671/html5/thumbnails/10.jpg)
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; } }}
Wednesday, November 2, 11
![Page 11: Creating Ext GWT Extensions and Components](https://reader038.vdocument.in/reader038/viewer/2022102900/54c726f74a7959cf018b4671/html5/thumbnails/11.jpg)
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); }}
Wednesday, November 2, 11
![Page 12: Creating Ext GWT Extensions and Components](https://reader038.vdocument.in/reader038/viewer/2022102900/54c726f74a7959cf018b4671/html5/thumbnails/12.jpg)
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());}
Wednesday, November 2, 11
![Page 13: Creating Ext GWT Extensions and Components](https://reader038.vdocument.in/reader038/viewer/2022102900/54c726f74a7959cf018b4671/html5/thumbnails/13.jpg)
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;}
Wednesday, November 2, 11
![Page 14: Creating Ext GWT Extensions and Components](https://reader038.vdocument.in/reader038/viewer/2022102900/54c726f74a7959cf018b4671/html5/thumbnails/14.jpg)
How To Start?
Wednesday, November 2, 11
![Page 15: Creating Ext GWT Extensions and Components](https://reader038.vdocument.in/reader038/viewer/2022102900/54c726f74a7959cf018b4671/html5/thumbnails/15.jpg)
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?
Wednesday, November 2, 11
![Page 16: Creating Ext GWT Extensions and Components](https://reader038.vdocument.in/reader038/viewer/2022102900/54c726f74a7959cf018b4671/html5/thumbnails/16.jpg)
Implementation
Wednesday, November 2, 11
![Page 17: Creating Ext GWT Extensions and Components](https://reader038.vdocument.in/reader038/viewer/2022102900/54c726f74a7959cf018b4671/html5/thumbnails/17.jpg)
The ClassExtending Component to overcome different sizing models
public class SquareWidget extends Component {
}
Wednesday, November 2, 11
![Page 18: Creating Ext GWT Extensions and Components](https://reader038.vdocument.in/reader038/viewer/2022102900/54c726f74a7959cf018b4671/html5/thumbnails/18.jpg)
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); }
Wednesday, November 2, 11
![Page 19: Creating Ext GWT Extensions and Components](https://reader038.vdocument.in/reader038/viewer/2022102900/54c726f74a7959cf018b4671/html5/thumbnails/19.jpg)
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); } }
Wednesday, November 2, 11
![Page 20: Creating Ext GWT Extensions and Components](https://reader038.vdocument.in/reader038/viewer/2022102900/54c726f74a7959cf018b4671/html5/thumbnails/20.jpg)
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); } }
Wednesday, November 2, 11
![Page 21: Creating Ext GWT Extensions and Components](https://reader038.vdocument.in/reader038/viewer/2022102900/54c726f74a7959cf018b4671/html5/thumbnails/21.jpg)
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); } }
Wednesday, November 2, 11
![Page 22: Creating Ext GWT Extensions and Components](https://reader038.vdocument.in/reader038/viewer/2022102900/54c726f74a7959cf018b4671/html5/thumbnails/22.jpg)
onClick()Sets the different background color
private void onClick(Event event) { getElement().getStyle().setBackgroundColor("red"); }
Wednesday, November 2, 11
![Page 23: Creating Ext GWT Extensions and Components](https://reader038.vdocument.in/reader038/viewer/2022102900/54c726f74a7959cf018b4671/html5/thumbnails/23.jpg)
Demonstration
Wednesday, November 2, 11
![Page 24: Creating Ext GWT Extensions and Components](https://reader038.vdocument.in/reader038/viewer/2022102900/54c726f74a7959cf018b4671/html5/thumbnails/24.jpg)
But, Do We Really Require a Widget?
Wednesday, November 2, 11
![Page 25: Creating Ext GWT Extensions and Components](https://reader038.vdocument.in/reader038/viewer/2022102900/54c726f74a7959cf018b4671/html5/thumbnails/25.jpg)
Introducing CellCells can handle browser eventsCells can be used in data componentsWidgets cannot be used thereCells render a lot faster
Wednesday, November 2, 11
![Page 26: Creating Ext GWT Extensions and Components](https://reader038.vdocument.in/reader038/viewer/2022102900/54c726f74a7959cf018b4671/html5/thumbnails/26.jpg)
Context of the CellContains the relevant row and column indexImportant when used in data widgetsContains the key representing the value
Wednesday, November 2, 11
![Page 27: Creating Ext GWT Extensions and Components](https://reader038.vdocument.in/reader038/viewer/2022102900/54c726f74a7959cf018b4671/html5/thumbnails/27.jpg)
Important Methods
Wednesday, November 2, 11
![Page 28: Creating Ext GWT Extensions and Components](https://reader038.vdocument.in/reader038/viewer/2022102900/54c726f74a7959cf018b4671/html5/thumbnails/28.jpg)
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);
Wednesday, November 2, 11
![Page 29: Creating Ext GWT Extensions and Components](https://reader038.vdocument.in/reader038/viewer/2022102900/54c726f74a7959cf018b4671/html5/thumbnails/29.jpg)
render()Called when a Cell should be renderedThe output should be written to the SafeHtmlBuilder
void render(Context context, C value, SafeHtmlBuilder sb);
Wednesday, November 2, 11
![Page 30: Creating Ext GWT Extensions and Components](https://reader038.vdocument.in/reader038/viewer/2022102900/54c726f74a7959cf018b4671/html5/thumbnails/30.jpg)
getConsumedEvents()Returns the events this cell requiresCannot change in the lifecycle of a Cell
Set<String> getConsumedEvents();
Wednesday, November 2, 11
![Page 31: Creating Ext GWT Extensions and Components](https://reader038.vdocument.in/reader038/viewer/2022102900/54c726f74a7959cf018b4671/html5/thumbnails/31.jpg)
Implementation
Wednesday, November 2, 11
![Page 32: Creating Ext GWT Extensions and Components](https://reader038.vdocument.in/reader038/viewer/2022102900/54c726f74a7959cf018b4671/html5/thumbnails/32.jpg)
The ClassExtending AbstractCellImplementing the Cell interface directly works too
public class SquareCell extends AbstractCell<Data> {
}
Wednesday, November 2, 11
![Page 33: Creating Ext GWT Extensions and Components](https://reader038.vdocument.in/reader038/viewer/2022102900/54c726f74a7959cf018b4671/html5/thumbnails/33.jpg)
ConstructorDefining the events this cell listens to
public SquareCell() { super("click", "mouseover", "mouseout"); }
Wednesday, November 2, 11
![Page 34: Creating Ext GWT Extensions and Components](https://reader038.vdocument.in/reader038/viewer/2022102900/54c726f74a7959cf018b4671/html5/thumbnails/34.jpg)
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); } }
Wednesday, November 2, 11
![Page 35: Creating Ext GWT Extensions and Components](https://reader038.vdocument.in/reader038/viewer/2022102900/54c726f74a7959cf018b4671/html5/thumbnails/35.jpg)
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); } }
Wednesday, November 2, 11
![Page 36: Creating Ext GWT Extensions and Components](https://reader038.vdocument.in/reader038/viewer/2022102900/54c726f74a7959cf018b4671/html5/thumbnails/36.jpg)
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); } }
Wednesday, November 2, 11
![Page 37: Creating Ext GWT Extensions and Components](https://reader038.vdocument.in/reader038/viewer/2022102900/54c726f74a7959cf018b4671/html5/thumbnails/37.jpg)
onClick()Sets the different background color
private void onClick(Context context, Element parent, Data value, NativeEvent event) { parent.getFirstChildElement().getStyle().setBackgroundColor("red"); }
Wednesday, November 2, 11
![Page 38: Creating Ext GWT Extensions and Components](https://reader038.vdocument.in/reader038/viewer/2022102900/54c726f74a7959cf018b4671/html5/thumbnails/38.jpg)
Demonstration
Wednesday, November 2, 11
![Page 39: Creating Ext GWT Extensions and Components](https://reader038.vdocument.in/reader038/viewer/2022102900/54c726f74a7959cf018b4671/html5/thumbnails/39.jpg)
Questions
Wednesday, November 2, 11
![Page 40: Creating Ext GWT Extensions and Components](https://reader038.vdocument.in/reader038/viewer/2022102900/54c726f74a7959cf018b4671/html5/thumbnails/40.jpg)
Thank You!
Wednesday, November 2, 11