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

【问题标题】：Tooltips for GWT tree: adding mouseovers to nodesGWT 树的工具提示：向节点添加鼠标悬停
【发布时间】：2011-08-04 05:17:38
【问题描述】：

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

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

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

【问题讨论】：

标签： gwt tree mouseover tooltip

【解决方案1】：

由于我还没有在 GWT 中实际使用过Tree，因此我将在这里稍微突出一下，但我看到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 传递给它（比如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 可能会很昂贵。然后你可能想探索一种更复杂的方式来处理你的鼠标事件，也许是通过一个处理程序来检查它在哪个元素中。

【讨论】：

虽然这绝对有帮助，但我希望为树中的每个不同节点提供不同的工具提示。这为整个树提供了一个工具提示，对吗？
不，我很确定 TreeItem 用于表示每个节点，因此您应该能够在每个节点上调用 setTitle() 来为每个节点提供不同的工具提示。请注意，GWT 中的几乎所有内容最终都继承自 UIObject，因此这是一个非常普遍的规则。每当您需要工具提示时，请查看Javadoc——如果您在超类链中看到UIObject，您就可以开始了。
啊，谢谢。关于鼠标听众问题的主要部分有什么想法吗？
我在上面添加了另一个关于事件处理的想法。
轻松解决我的问题，太好了！

【解决方案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);

朱利安

【讨论】：

这正是我想要的。谢谢朱利安！

【解决方案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。

【讨论】：