GWT树的工具提示：将节点添加到节点

Question

我想为GWT中树的节点添加工具提示。因此，我想为树的节点添加一个mouseover监听器，而不是树本身。

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

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

Answer 1

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 2

我要在这里坚持我的脖子了一下，因为我还没有实际使用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可能会变得昂贵。然后，您可能想要探索处理鼠标事件的更复杂的方法，也许可以通过一个处理程序来检查它处于哪个元素中。

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。