GWT 树的工具提示：向节点添加鼠标悬停

Question

我正在尝试为 GWT 中的树节点添加工具提示。因此，我想为树的节点而不是树本身添加一个鼠标悬停侦听器。

Treelistener 接口似乎是我想要的，但现在已弃用它来代替处理程序系统。我不太明白如何在单元格上获得鼠标悬停行为，因为我似乎只能将 MouseOverHandler 添加到树本身。

任何帮助将不胜感激，谢谢。

Answer 1

我要在这里冒险一下，因为我还没有在 GWT 中实际使用过 TreeItem，但我看到 TreeItem 类是UIObject。任何 UIObject 都可以调用其 setTitle() 方法。在幕后，此方法将标准 HTML 标题属性设置为您传递给 setTitle() 的任何字符串。

这应该会给你你想要的工具提示行为。作为一个额外的好处，浏览器会为您处理所有的鼠标事件：

import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Tree;
import com.google.gwt.user.client.ui.TreeItem;

public class TreeTest extends Composite {

    public TreeTest() {
        Tree root = new Tree();
        initWidget(root);
        TreeItem dogs = new TreeItem("canines");
        dogs.addItem("Fido").setTitle("faithful");
        dogs.addItem("Lassie").setTitle("starlet");
        dogs.addItem("Touser").setTitle("ruthless killer");
        root.addItem(dogs);

        TreeItem cats = new TreeItem("felines");
        cats.addItem("Boots").setTitle("needy");
        cats.addItem("Fabio").setTitle("aloof");
        cats.addItem("Mandu").setTitle("bob seger");
        root.addItem(cats);
    }


}

---

编辑： 现在让我们假设您不想使用上述浏览器的内置工具提示机制，并且您想自己处理鼠标事件。

从表面上看，TreeItem 可能看起来行不通。毕竟，它直接继承自 UIObject，而不是继承自 Widget。 ，Widget 添加到 UIObject 的关键区别在于处理事件的能力。因此，人们会认为我们无法向 TreeItem 添加处理程序！）

（毕竟 这是完全正确的，请注意 TreeItem 为我们提供了以下构造函数：

public TreeItem(Widget widget)

当我们创建每个实例时，我们可以将一个真正的 Widget 传递给它（例如一个 Widget ） >Label，也许，或者也许是您自己的class MyWidget extends Composite），我们可以直接向其中添加事件处理程序：

    import com.google.gwt.core.client.GWT;
    import com.google.gwt.event.dom.client.MouseOutEvent;
    import com.google.gwt.event.dom.client.MouseOutHandler;
    import com.google.gwt.event.dom.client.MouseOverEvent;
    import com.google.gwt.event.dom.client.MouseOverHandler;
    import com.google.gwt.user.client.ui.Composite;
    import com.google.gwt.user.client.ui.Label;
    import com.google.gwt.user.client.ui.Tree;
    import com.google.gwt.user.client.ui.TreeItem;

    public class AnotherTreeTest extends Composite {

        public AnotherTreeTest() {
            Tree root = new Tree();
            initWidget(root);
            TreeItem dogs = new TreeItem("canines");
            makeItem(dogs,"Fido","faithful");
            makeItem(dogs,"Lassie","starlet");
            makeItem(dogs,"Touser","ruthless killer");
            root.addItem(dogs);

            TreeItem cats = new TreeItem("felines");
            makeItem(cats,"Boots","needy");
            makeItem(cats,"Fabio","aloof");
            makeItem(cats,"Mandu","bob seger");
            root.addItem(cats);
        }

        private void makeItem(TreeItem parent, String name, final String tip) {
            Label label = new Label(name);
            TreeItem animal = new TreeItem(label);
            label.addMouseOverHandler(new MouseOverHandler() {

                @Override
                public void onMouseOver(MouseOverEvent event) {
                    GWT.log("mouse over " + tip); // do something better here
                }

            });
            label.addMouseOutHandler(new MouseOutHandler() {

                @Override
                public void onMouseOut(MouseOutEvent event) {
                    GWT.log("mouse out " + tip); // do something better here
                }

            });
            parent.addItem(animal);
        }

}

请注意，可能还有其他更便宜的方法来完成此任务。如果您有一棵巨大的树，那么为每个节点创建一个 Widget 的成本可能会很高。然后，您可能想要探索一种更复杂的方法来处理鼠标事件，也许可以通过一个处理程序来检查鼠标事件位于哪个元素中。

Answer 2

TreeItem 可以包含 Widget 对象。因此，在小部件（即标签）上添加 MouseOverHandler 和 MouseOutHandler 并将小部件放入要添加的 TreeItem 中：

Label myItemContent = new Label("My content");
myItemContent.addMouseOverHandler(new MouseOverHandler() {

  public void onMouseOver(MouseOverEvent event) {
    // construct and/or open your tooltip
  }
});

myItemContent.addMouseOutHandler(new MouseOutHandler() {

  public void onMouseOut(MouseOutEvent event) {
    // close your tooltip

  }
});
//put your Label inside a TreeItem
TreeItem myItem = new TreeItem(myItemContent);
// let's assume that parentNode is an ItemTree
parentNode.addItem(myItem);

另一种解决方案是使用 GwtQuery。 GwtQuery 允许将事件处理程序绑定到任何 DOM 元素：

import static com.google.gwt.query.client.GQuery.$;

...

TreeItem myItem = new TreeItem("My content");
$(myItem.getElement()).hover(new Function() {

  //method called on mouse over
  public void f(Element e) {
      // construct and/or open your tooltip
  }

}, new Function() {

  //method called on mouse out
  public void f(Element e) {
      //close your tooltip
  }
});

parentNode.addItem(myItem);

Julien

Answer 3

我选择的另一种方法是使用 CSS。

/**
 * @return a label with a CSS controlled popup
 */
public static Widget labelWithHTMLPopup(String text, String description)
{
    FlowPanel p = new FlowPanel();
    p.addStyleName("tooltipLabel");
    p.add(new Label(text));

    HTML contents = new HTML(description);
    contents.setStyleName("tooltip");
    p.add(contents);

    return p;
}

附带 css：

/*************** Tooltip **************/

div.tooltip
{
    display: none;

    position: absolute; 
    border: 1px outset black;
    left: 90%;  
    top: -20px;

    background: white;
    padding: 5px;
    box-shadow: 3px 3px 2px 0px #555;       
    overflow-y: auto;
    max-height: 150px;
    font-size: 80%; 
    z-index: 99;
}

div.tooltipLabel
{
    position: relative;
}
div.tooltipLabel:hover div.tooltip
{
    display: block;
    position: absolute; 
}

当然，您可以根据需要更改样式、添加淡入淡出等。

少一些 javas/javascript，多一些 css。