Ajouter un MouseOverHandler à un élément?

Question

Je souhaite écouter l'événement survol de la souris dans GWT 1.6. Depuis GWT 1.6 a introduit les gestionnaires et les auditeurs dépréciés Je ne suis pas sûr de la façon dont je peux accomplir cela avec le peu d'information existe.

Remarque: J'ai un objet Element. C'est ce dont j'ai besoin d'ajouter le gestionnaire de la souris. Je m'excuse pour mon manque de clarté.

Merci!

Answer 1

J'espérais que nous verrions une réponse avant que je devais m'y attaquer moi-même. Il y a quelques erreurs dans l'exemple de code qu'il a posté, mais le post by Mark Renouf in this thread a la plupart de ce dont nous avons besoin.

Supposons que vous souhaitiez écouter les événements de souris et de souris sur un widget personnalisé. Dans votre widget, ajoutez deux méthodes:

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

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

Ensuite, créez une classe de gestionnaire:

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"); 
    } 
} 

Enfin, ajoutez le gestionnaire au widget:

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

Si vous n'écoute la souris sur l'événement, vous pouvez ignorer la gestion de la souris. Et si vous ne faites pas de widget personnalisé, le widget my possède déjà une méthode pour ajouter le gestionnaire.

Enfin, par l'avertissement du thread, n'oubliez pas de addDomHandler pour les événements de la souris, pas addHandler.

Answer 2

Vous voudriez mettre en œuvre ces interfaces dans votre classe:

• HasMouseOverHandlers
• HasMouseOutHandlers
• mouseOverHandler
• mouseOutHandler

MouseOverEvent est déclenché lorsque la souris entre dans l'élément et MouseOutEvent est déclenché quand ce n'est plus terminé.

HasMouseOverHandler est mis en œuvre comme ceci:

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

HasMouseOutHandler est mis en œuvre comme ceci:

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

Après que vous gérer les évènements en un mouseOverHandler et mouseOutHandler, devrait être assez simple après cela.

Si vous voulez ajouter un EventHandler à un élément qui existe déjà dans le HTML, la seule idée que j'ai trouvée est de créer une classe wrapper. Ceci est complètement non testé.

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()); 
    } 
} 

Ensuite, vous pourriez obtenir un élément existant à partir du HTML et initialiser comme ceci:

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

} 

Hope this helps.

Answer 3

Si vous connaissez le type de l'élément, vous pouvez envelopper l'élément et récupérer le widget approprié. Dans le cas, disons, d'une image:

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

Le seul problème avec ce que j'ai rencontré est que vous obtiendrez un AssertionError dans HostedMode si l'élément est déjà attaché à un autre widget parent. Cela fonctionnera bien dans la production cependant. Il y a probablement une bonne raison à cette affirmation, alors faites attention.

Answer 4

Si vous connaissez le type de l'objet, certains widgets incluent une fonction de retour à la ligne statique. De l'un d'eux, j'ai pu dériver la classe suivante.

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); 
    } 
}