Подсказки для дерева GWT: добавление указателей мыши к узлам - PullRequest
Новая
       22

Подсказки для дерева GWT: добавление указателей мыши к узлам

3 голосов
/ 13 апреля 2011

Я пытаюсь добавить всплывающие подсказки для узлов дерева в GWT. Поэтому я хотел бы добавить слушатель при наведении курсора на узлы дерева, а не на само дерево.

Кажется, мне нужен интерфейс Treelistener, но вместо системы-обработчика это устарело. Я не совсем понимаю, как настроить наведение мыши на ячейку, так как мне кажется, что я могу добавить MouseOverHandler в само дерево.

Любая помощь будет оценена, спасибо.

Ответы [ 3 ]

4 голосов
/ 13 апреля 2011

Я собираюсь немного подсунуть свою шею, поскольку я еще не использовал Tree в GWT, но я вижу, что класс 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 для каждого узла может стать дорогостоящим. Тогда вы можете захотеть изучить более изощренный способ обработки событий мыши, возможно, имея один обработчик, который проверяет, в каком элементе он находится.

2 голосов
/ 13 апреля 2011

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

0 голосов
/ 05 августа 2013

Альтернативный способ, на котором я остановился, - использовать 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.

...