Hinzufügen eines MouseOverHandlers zu einem Element?

Question

Ich würde gerne für die Maus über Ereignis in GWT 1.6 hören. Seit GWT 1.6 Handler und veraltete Listener eingeführt hat, bin ich mir nicht sicher, wie ich dies mit wenigen Informationen erreichen kann.

Hinweis: Ich habe ein Element-Objekt. Dazu muss ich den Maus-Handler hinzufügen. Ich entschuldige mich für meine Unklarheit.

Danke!

Answer 1

Ich hatte gehofft, wir würden eine Antwort sehen, bevor ich das selbst angehen musste. Es gibt einige Fehler in dem von ihm geposteten Beispielcode, aber die post by Mark Renouf in this thread hat das meiste von dem, was wir brauchen.

Angenommen, Sie möchten die Maus über Ereignisse auf einem benutzerdefinierten Widget abhören und ausblenden. In Ihrem Widget, fügen Sie zwei Methoden:

public HandlerRegistration addMouseOverHandler(MouseOverHandler handler) { 
    return addDomHandler(handler, MouseOverEvent.getType()); 
} 

public HandlerRegistration addMouseOutHandler(MouseOutHandler handler) { 
    return addDomHandler(handler, MouseOutEvent.getType()); 
} 

Dann eine Handler-Klasse erstellen:

public class MyMouseEventHandler implements MouseOverHandler, MouseOutHandler { 
    public void onMouseOver(final MouseOverEvent moe) { 
    Widget widget = (Widget) moe.getSource(); 
    widget.addStyleName("my-mouse-over"); 
    } 

    public void onMouseOut(final MouseOutEvent moe) { 
    Widget widget = (Widget) moe.getSource(); 
    widget.removeStyleName("my-mouse-over"); 
    } 
} 

Schließlich fügen Sie den Handler auf das Widget:

myWidget.addMouseOverHandler(new MyMouseEventHandler()); 
myWidget.addMouseOutHandler(new MyMouseEventHandler()); 

Wenn Sie nur hören Wenn Sie die Maus über das Ereignis bewegen, können Sie die Maus-aus-Behandlung überspringen. Wenn Sie kein benutzerdefiniertes Widget erstellen, hat das Widget bereits eine Methode zum Hinzufügen des Handlers.

Schließlich, erinnern Sie sich an die Warnung aus dem Thread zu addDomHandler für die Mausereignisse, nicht addHandler.

Answer 2

Sie wollen würde diese Schnittstellen in Ihrer Klasse implementieren:

• HasMouseOverHandlers
• HasMouseOutHandlers
• mouseoverhandler
• mouseOutHandler

MouseOverEvent wird ausgelöst, wenn die Maus das Element eintritt und MouseOutEvent wird ausgelöst, wenn es nicht mehr zu Ende ist.

HasMouseOverHandler wie dies umgesetzt wird:

public HandlerRegistration addMouseOverHandler(MouseOverHandler handler) { 
    return addDomHandler(handler, MouseOverEvent.getType()); 
} 

HasMouseOutHandler wie dies umgesetzt wird:

public HandlerRegistration addMouseOutHandler(MouseOutHandler handler) { 
    return addDomHandler(handler, MouseOutEvent.getType()); 
} 

Danach Sie nur die Ereignisse behandeln mit einem mouseoverhandler und mouseOutHandler sollte hübsch sein direkt danach.

Wenn Sie einen EventHandler zu einem Element hinzufügen möchten, das bereits im HTML vorhanden ist, ist die einzige Idee, die ich mir ausgedacht habe, das Erstellen einer Wrapper-Klasse. Dies ist vollständig nicht getestet.

class ElementWrapper extends UIObject implements HasMouseOverHandlers, 
HasMouseOutHandlers 
{ 
    public ElementWrapper(Element theElement) 
    { 
     setElement(theElement); 
    } 

    public HandlerRegistration addMouseOutHandler(MouseOutHandler handler) { 
     return addDomHandler(handler, MouseOutEvent.getType()); 
    } 

    public HandlerRegistration addMouseOverHandler(MouseOverHandler handler) { 
     return addDomHandler(handler, MouseOverEvent.getType()); 
    } 
} 

Dann könnten Sie ein vorhandenes Element aus der HTML erhalten und wie folgt initialisieren:

onModuleLoad() 
{ 
    Element theElement = RootPanel().get("elementID"); 
    ElementWrapper wrapper = new ElementWrapper(theElement); 
    wrapper.addMouseOverHandler(new myHandler()); 

} 

Hoffnung, das hilft.

Answer 3

Wenn Sie den Typ des Elements kennen, können Sie das Element umbrechen und das entsprechende Widget zurückbekommen. Im Fall von, sagen wir, ein Bild:

Element el = DOM.getElementById("someImageOnThePage"); 
Image i = Image.wrap(el); 
i.addMouseOverHandler(...); 

Das einzige Problem mit dieser ich erlebt habe ist, dass Sie eine AssertionError in HostedMode erhalten, wenn das Element bereits an einen anderen Elternteil Widget angebracht ist. Es wird jedoch in der Produktion gut funktionieren. Es gibt wahrscheinlich einen guten Grund für diese Behauptung, also sei vorsichtig.

Answer 4

Wenn Sie den Typ des Objekts kennen, enthalten einige Widgets eine statische Wrap-Funktion. Von einem von ihnen konnte ich die folgende Klasse ableiten.

public class Widget extends com.google.gwt.user.client.ui.Widget 
{ 
    public Widget(Element element, boolean detatchFromDom) 
    { 
     super(); 
     if (detatchFromDom) 
      element.removeFromParent(); 

     setElement(element); 

     if (!detatchFromDom) 
     { 
      onAttach(); 
      RootPanel.detachOnWindowClose(this); 
     } 
    } 

    public <H extends EventHandler> HandlerRegistration addDomHandlerPub(final H handler, DomEvent.Type<H> type) 
    { 
     return addDomHandler(handler, type); 
    } 
}