Question

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

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

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

Answer 1

由于我还没有在GWT中实际使用过Tree，所以我会在这里稍稍强调一下，但我看到TreeItem类是{{1}的子类}}。任何UIObject都可以调用其UIObject方法。在引擎盖下，此方法将标准HTML标题属性设置为您传递到setTitle()的任何字符串。

这应该为您提供所寻求的工具提示行为。作为额外的奖励，浏览器会为您执行所有鼠标事件处理：

setTitle()

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

从表面上看，{p>

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的关键区别毕竟是处理事件的能力。所以人们会认为我们无法向TreeItem添加处理程序！）

虽然这是严格正确的，但请注意UIObject为我们提供了以下构造函数：

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); } }会变得很昂贵。然后，您可能希望探索一种更复杂的处理鼠标事件的方法，可能是通过让一个处理程序检查它所在的元素。

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

于连

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。

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

3 个答案: