Создание всплывающих подсказок в JavaFX

Вот и пришло время для очередного опуса по JavaFX. Совсем времени нету писать новые статьи :) Подходит к концу 3-й этап конкурса JavaFX: TowerDefence и все свободное время уходит на доработки игры. Однако пора порадовать читателей чем-нибудь интересным. Сегодня попробую осветить вопрос по созданию подсказок (Tooltip) в JavaFX.

Что такое Tooltip? Это графический элемент управления, который предназначен для отображения информации, которая дает дополнительную информацию про элемент над которым стоит курсор. Эту штуку вы видите каждый день при работе с компьютером. Подводите курсор к кнопке в какой-нибудь программе и видите всплывающее окошко с пояснением, что эта кнопка значит и т.д. что значительно повышает дружественность интерфейса. Конечно мы тоже хотим оснастить наш интерфейс такими подсказками чтобы пользователю было комфортно и понятно работать с ним.

В JavaFX подсказки можно сделать несколькими способами. Начнем рассмотрение со стандартного класса Tooltip. Его могут использовать все элементы управления напрямую. У каждого объекта есть свойство tooltip, которому можно присвоить определенное значение и получить надо нашим элементом управления подсказку. Хватит описаний, пора писать код.

Итак, нарисуем простейший интерфейс:

import javafx.stage.Stage;
import javafx.scene.*;
import javafx.scene.control.*;

Stage {
    title: "Tooltip"
    scene: Scene {
        width: 150
        height: 50
        content: Group {
          content:[
            Button {
              translateX:10
              translateY: 10
              text: "Hover me!!!"
            }
          ]
        } 
    }
}

Этот код всего лишь отобразит на экране кнопку с текстом "Hover me!!!". Оснастим теперь эту кнопку всплывающей подсказкой. В результате наш код изменится до такого:

import javafx.stage.Stage;
import javafx.scene.*;
import javafx.scene.control.*;

Stage {
    title: "Tooltip"
    scene: Scene {
        width: 150
        height: 50
        content: Group {
          content:[
            Button {
              translateX:10
              translateY: 10
              text: "Hover me!!!"
              tooltip: Tooltip {
                text: "Tooltip!!!"
              }
            }
          ]
        } 
    }
}

В результате при наведении мышкой на данную кнопку мы увидим подсказку. 

Это действительно то, что мы хотели получить. Когда мышку увести от кнопки, то подсказка исчезает. Теперь при создании интерфейса из стандартных элементов управления мы можем легко добавлять всплывающие подсказки.

Что делать, если мы хотим навесить всплывающую подсказку на любой элемент интерфейса (группа, рисунок и т.д.). Для этого мы опять же можем использовать класс Tooltip. Однако реализация будет немного другая. давайте создадим сцену на которой будет изображен круг прямоугольник и треугольник. И на каждый из этих объектов попробуем навесить подсказку..

Код для создания сцены:

import javafx.stage.Stage;
import javafx.scene.*;
import javafx.scene.control.*;
import javafx.scene.shape.*;
import javafx.scene.paint.*;

Stage {
    title: "Tooltip"
    scene: Scene {
        width: 350
        height: 150
        content: Group {
          content:[
            Circle {
              translateX: 50
              translateY: 50
              radius: 30
              fill: Color.YELLOW
              stroke:Color.BLACK
              strokeWidth:1
            }
            Rectangle {
              translateX: 100
              translateY: 20
              width: 100
              height: 60
              fill: Color.RED
              stroke: Color.BLACK
              strokeWidth: 1
            }
            Path {
              fill: Color.GREEN
              stroke: Color.BLACK
              strokeWidth: 1
              elements:[
                MoveTo {x:250 y:20}
                LineTo {x:280 y:60}
                LineTo {x:220 y:60}
                LineTo {x:250 y:20}
              ]
            }
          ]
        } 
    }
}

И сама сцена:

Для добавления подсказок к каждому элементу необходимо создать 3 разных объекта класса Tooltip и обработать события мыши при наведении на объект и ухода курсора с объекта. Принцип прост, давайте его реализуем.

Определение переменных для подсказок будет выглядеть так:

var tooltip1: Tooltip {
                text: "Yellow circle"
              }
var tooltip2: Tooltip {
                 text: "Red rectangle"
              }
var tooltip3: Tooltip {
                 text: "Green triangle"
              }

Особенностью данного способа активации подсказок является то, что их надо добавить к той группе к элементу которой они будут привязаны. Ну и для активации подсказок навесим обработку событий от мыши на каждый элемент. Пример описания круга с подсказкой и с обработкой событий мыши:

Group {
              content: [
                Circle {
                  translateX: 50
                  translateY: 50
                  radius: 30
                  fill: Color.YELLOW
                  stroke:Color.BLACK
                  strokeWidth:1
                }
                tooltip1
              ]
              onMouseEntered: function( e: MouseEvent ) {
                tooltip1.activate();
              }
              onMouseExited: function( e: MouseEvent ) {
                tooltip1.deactivate();
              }
            }

По аналогии с вышеприведенным кодом описываются и остальные элементы нашей сцены. В результате чего мы получим 3 объекта на сцене, у которых при наведении мыши на них будут появляться подсказки.
Для ленивых приведу полный исходный код:

import javafx.scene.*;
import javafx.stage.Stage;
import javafx.scene.shape.*;
import javafx.scene.paint.*;
import javafx.scene.control.*;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.*;

var tooltip1 = Tooltip {
                 text: "Yellow circle"
}

var tooltip2 = Tooltip {
                 text: "Red rectangle"
               }

var tooltip3 = Tooltip {
                 text: "Green triangle"
               }

Stage {
    title: "Tooltip"
    scene: Scene {
        width: 350
        height: 150
        content: Group {
          content:[
            Group {
              translateX: 10
              translateY: 10
              content: [
                VBox {
                  spacing:1
                  content: [
                    Circle {
                      radius: 30
                      fill: Color.YELLOW
                      stroke:Color.BLACK
                      strokeWidth:1
                    }
                    tooltip1
                  ]
                }
              ]
              onMouseEntered: function( e: MouseEvent ) {
                tooltip1.activate();
              }
              onMouseExited: function( e: MouseEvent ) {
                tooltip1.deactivate();
              }
            }
            Group {
              translateX: 100
              translateY: 10
              content: [
                VBox {
                  spacing:1
                  content: [
                    Rectangle {
                      width: 100
                      height: 60
                      fill: Color.RED
                      stroke: Color.BLACK
                      strokeWidth: 1
                    }
                    tooltip2
                  ]
                }
              ]
              onMouseEntered: function( e: MouseEvent ) {
                tooltip2.activate();
              }
              onMouseExited: function( e: MouseEvent ) {
                tooltip2.deactivate();
              }
            }
            Group {
              translateX: 220
              translateY: 10
              content: [
                VBox {
                  spacing:1
                  content: [
                    Path {
                      fill: Color.GREEN
                      stroke: Color.BLACK
                      strokeWidth: 1
                      elements:[
                        MoveTo {x:50 y:20}
                        LineTo {x:80 y:80}
                        LineTo {x:20 y:80}
                        LineTo {x:50 y:20}
                      ]
                    }
                    tooltip3
                  ]
                }
              ]
              onMouseEntered: function( e: MouseEvent ) {
                tooltip3.activate();
              }
              onMouseExited: function( e: MouseEvent ) {
                tooltip3.deactivate();
              }
            }
          ]
        } 
    }
}

Вот так будет выглядеть сцена при запуске и наведении курсора мыши на разные элементы:

Курсор мыши наведен на круг

Курсор мыши наведен на прямоугольник

Курсор мыши наведен на треугольник

Ну что, могу всех поздравить с вашими первыми подсказками для элементов управления и любых других объектов на сцене. Однако на этом мое повествование не заканчивается. Хочу еще описать возможность создания произвольных подсказок для объектов.

Чуть выше я писал, что Tooltip - это элемент управления, фактически им может выступать любой объект на сцене. Единственное условие, этот объект должен появляться при наведении курсором мыши на другой объект, подсказкой для которого он является и исчезать, когда курсор мыши уходит с нашего объекта.

У каждого объекта есть свойство visible, которым можно воспользоваться для наших целей. Если на сцену поместить какой-либо объект, установить свойство visible по умолчанию в значение false, а при наведении мыши на другой объект устанавливать его в true, то наш объект будет показан на сцене, а когда курсор мыши покидает объект сбрасывать свойство visible в false. Этим мы имитирует появление/исчезновение подсказки для объекта при наведении/покидании объекта курсором мыши.

Думаю идея всем ясна. Поэкспериментируйте и у вас все получится. Я для примера приведу небольшой код в котом будет продемонстрированы все рассмотренные сегодня мною методы создания Tooltip'ов:

import javafx.scene.*;
import javafx.scene.text.*;
import javafx.stage.Stage;
import javafx.scene.shape.*;
import javafx.scene.paint.*;
import javafx.scene.control.*;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.*;

var vis: Boolean = false;

var tooltip1 = Group {
                visible: bind vis
                content:[
                  Stack {
                    content: [
                      Rectangle {
                        arcWidth:10
                        arcHeight:10
                        width: 120
                        height: 20
                        fill: Color.GRAY
                        opacity: 0.5
                      }
                      Text {
                        content: "This is custom tooltip!"
                      }
                    ]
                  }
                ]
              }

var tooltip2 = Tooltip {
                 text: "Red rectangle"
               }

Stage {
    title: "Tooltip"
    scene: Scene {
        width: 350
        height: 150
        content: Group {
          content:[
            Group {
              translateX: 10
              translateY: 10
              content: [
                VBox {
                  spacing:1
                  content: [
                    Circle {
                      radius: 30
                      fill: Color.YELLOW
                      stroke:Color.BLACK
                      strokeWidth:1
                    }
                    tooltip1
                  ]
                }
              ]
              onMouseEntered: function( e: MouseEvent ) {
                vis = true;
              }
              onMouseExited: function( e: MouseEvent ) {
                vis = false;
              }
            }
            Group {
              translateX: 100
              translateY: 10
              content: [
                VBox {
                  spacing:1
                  content: [
                    Rectangle {
                      width: 100
                      height: 60
                      fill: Color.RED
                      stroke: Color.BLACK
                      strokeWidth: 1
                    }
                    tooltip2
                  ]
                }
              ]
              onMouseEntered: function( e: MouseEvent ) {
                tooltip2.activate();
              }
              onMouseExited: function( e: MouseEvent ) {
                tooltip2.deactivate();
              }
            }
            Group {
              translateX: 220
              translateY: 10
              content: [
                Button {
                  text:"Button"
                  tooltip: Tooltip {
                    text: "tooltip"
                  }
                }
              ]
            }
          ]
        } 
    }
}

Самый универсальный способ создания всплывающих подсказок, это 3-й метод. Он предоставляет дизайнеру формировать сколь угодно сложные графические элементы для создания подсказок. Также к ним можно применять всякие эффекты для появления и исчезания, однако этот вопрос я оставлю читателям на самостоятельное изучение. Хочу отметить что именно 3-й способ был использован для формирования подсказок в проекте для конкурса TowerDefence.

Ну что же, буду закругляться в своем повествовании. Всем удачи в изучении этой интересной платформы и ее возможностей. Экспериментируйте, исследуйте, задавайте вопросы и пребудет с вами сила и придет к вам понимание.

До новых встреч!!!