Thêm một MouseOverHandler vào một phần tử?

Question

Tôi muốn nghe sự kiện di chuột qua trong GWT 1.6. Kể từ khi GWT 1.6 đã giới thiệu trình xử lý và người nghe không được chấp nhận, tôi không chắc chắn về cách tôi có thể thực hiện điều này với những thông tin nhỏ tồn tại.

Lưu ý: Tôi có đối tượng Element. Đó là những gì tôi cần để thêm trình xử lý chuột vào. Tôi xin lỗi vì sự thiếu rõ ràng của tôi.

Cảm ơn!

Answer 1

Tôi đã hy vọng chúng tôi sẽ thấy câu trả lời trước khi tôi cần tự mình giải quyết vấn đề này. Có một số lỗi trong mã ví dụ mà anh đã đăng, nhưng post by Mark Renouf in this thread có hầu hết những gì chúng ta cần.

Giả sử bạn muốn nghe các sự kiện di chuột qua và di chuột lên tiện ích tùy chỉnh. Trong widget của bạn, thêm hai phương pháp:

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

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

Sau đó, tạo ra một lớp xử lý:

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

Cuối cùng, thêm xử lý để các phụ tùng:

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

Nếu bạn chỉ nghe chuột qua sự kiện, bạn có thể bỏ qua việc xử lý chuột. Và nếu bạn không tạo widget tùy chỉnh, widget của tôi đã có phương thức để thêm trình xử lý.

Cuối cùng, theo cảnh báo từ chuỗi, hãy nhớ addDomHandler cho các sự kiện chuột, không phải addHandler.

Answer 2

Bạn muốn thực hiện các giao diện trong lớp học của bạn:

• HasMouseOverHandlers
• HasMouseOutHandlers
• MouseOverHandler
• MouseOutHandler

MouseOverEvent được kích hoạt khi chuột vào phần tử và MouseOutEvent được kích hoạt khi nó không còn nữa.

HasMouseOverHandler được thực hiện như thế này:

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

HasMouseOutHandler được thực hiện như thế này:

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

Sau đó bạn chỉ cần xử lý các sự kiện với một MouseOverHandler và MouseOutHandler, nên được khá đơn giản sau đó.

Nếu bạn muốn thêm EventHandler vào một Phần tử đã tồn tại trong HTML, ý tưởng duy nhất tôi đưa ra là tạo lớp bao bọc. Điều này hoàn toàn chưa được kiểm tra.

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

Sau đó, bạn có thể nhận được một phần tử hiện tại từ HTML và khởi tạo như thế này:

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

} 

Hope this helps.

Answer 3

Nếu bạn biết loại phần tử, bạn có thể bọc phần tử và lấy lại Widget thích hợp. Trong trường hợp, nói, một hình ảnh:

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

Vấn đề duy nhất với điều này tôi đã gặp phải là bạn sẽ nhận được một AssertionError trong HostedMode nếu các phần tử đã được gắn liền với một phụ tùng cha mẹ. Nó sẽ làm việc tốt trong sản xuất tuy nhiên. Có lẽ có một lý do chính đáng cho sự khẳng định đó, vì vậy hãy cẩn thận.

Answer 4

Nếu bạn biết loại đối tượng, một số tiện ích bao gồm chức năng bọc tĩnh. Từ một trong số họ, tôi đã có thể lấy được lớp sau.

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