Урок 5. Применение привязки данных к объектам интерфейса пользователя

При создании программ часто возникает необходимость обновить определенный параметр при изменении другого параметра. Язык программирования JavaFX Script позволяет выполнить эту задачу с помощью механизма привязки данных. Разработчик может определить отношение между двумя переменными таким образом, чтобы при изменении одной переменной изменялась и другая. JavaFX отслеживает все изменения и выполняет необходимые обновления. Комбинация такого отношения и механизма обновления называется привязкой данных. Для демонстрации привязки данных будет создано простое приложение.

В этом приложении создается ползунок и круг, центр которого привязан к значению ползунка. Внутренняя часть круга окрашена радиальным градиентом. При передвижении ползунка перемещается и круг. В примере используется компонент ползунка из пакета javafx.scene.control, графическая фигура, а также градиент цвета. Заполнение неподвижным градиентом создает впечатление фаз солнечного затмения. Попробуйте передвинуть ползунок, чтобы проверить работу апплета.

Создайте окно приложения с заголовком "Data Binding", шириной в 220 пикселей и высотой в 170 пикселей. Дополнительные сведения приведены в разделе Использование декларативного синтаксиса. Указанный ниже код создает окно.

import javafx.stage.Stage;
import javafx.scene.Scene;
 
Stage {
    title: "Data Binding"
	scene: Scene {
             width: 220
             height: 170
    }//Scene
}//Stage

Объекты добавляются в окно приложения путем их помещения в scene объекта Stage. Дополнительные сведения приведены в разделе Представление объектов интерфейса пользователя в графической сцене. Дополнительные сведения о классе Circle приведены в разделе Использование декларативного синтаксиса.

1. Добавьте операторы import для классов javafx.scene.shape.Circle и javafx.scene.paint.Color.
   
   
2. Определите переменную сцены content, добавив литерал объекта Circle.
   
   

   import javafx.stage.Stage; import javafx.scene.Scene; import javafx.scene.shape.Circle; import javafx.scene.paint.Color; Stage { title: "Data Binding" scene: Scene { width: 220 height: 170 content: Circle { centerX: 50 centerY: 60 radius: 50 stroke: Color.YELLOW }//Circle }//Scene }//Stage

    
   По умолчанию круг внутри имеет черный цвет, а фон сцены – белый. На данном этапе результат выполнения выглядит следующим образом.
   
   
   

   Рис. 1. Круг, добавленный в сцену
    
   

Чтобы улучшить внешний вид примера, можно добавить к кругу определенный шаблон заливки, называющийся радиальным градиентом. Использование радиального градиента создает впечатление затмения при перемещении ползунка.

Чтобы реализовать эту функцию, воспользуйтесь классом RadialGradient. Класс Stop позволяет указать два или несколько цветов. Класс RadialGradient обеспечивает интерполяцию между ними. Укажите круг, который управляет шаблоном градиента, определив координату центра и радиус. Внутри круга можно также определить точку фокуса, в которой будет применен первый цвет. Последний цвет применяется к периметру круга.

Для радиальной градиентной заливки можно указать абсолютные значения для центра, радиуса и фокуса. В этом случае следует установить переменную proportional в значение false. Если переменная proportional установлена равной true, то значения центра, радиуса и фокуса будут находить в диапазоне от 0,0 до 1,0, а радиальный градиент будет масштабироваться, заполняя фигуру, к которой он применен.

Переменная stops определяет последовательность цветов для радиальной градиентной заливки. Используйте квадратные скобки для указания последовательности и запятые для разделения элементов последовательности. Для добавления шаблона заливки в круг выполните следующие действия.

1. Добавьте операторы импорта для классов RadialGradient и Stop из пакета javafx.scene.paint.
   
   
2. Определите переменную экземпляра fill с помощью литерала объекта RadialGradient.
   
   
3. Укажите абсолютные значения для точки центра и радиуса с помощью переменных centerX, centerY и radius.
   
   
4. Укажите точку фокуса с помощью переменных focusX и focusY.
   
   
5. Установите переменную proportional в значение false.
   
   
6. Определите переменную stops как последовательность красного и белого цветов.
   
   

   import javafx.stage.Stage; import javafx.scene.Scene; import javafx.scene.shape.Circle; import javafx.scene.paint.Color; import javafx.scene.paint.RadialGradient; import javafx.scene.paint.Stop; Stage { title: "Data Binding" scene: Scene { width: 220 height: 170 content: Circle { centerX: 50 centerY : 60 radius: 50 stroke: Color.YELLOW fill: RadialGradient { centerX: 50 centerY : 60 radius: 50 focusX: 50 focusY: 30 proportional: false stops: [ Stop {offset: 0 color: Color.RED}, Stop {offset: 1 color: Color.WHITE} ] }//RadialGradient }//Circle }//Scene }//Stage

    
   После компиляции и запуска измененный код создает следующее окно.
   
   
   

   Рис. 2. Круг, окрашенный радиальным градиентом
    
   

Класс Slider пакета javafx.scene.control предоставляет ползунок – часто используемый элемент управления интерфейса на настольных системах. Добавьте ползунок в сцену и разместите его под кругом. По умолчанию ползунок будет отображен в точке (0,0). Переменные экземпляра translateX и translateY могут использоваться для указания расстояний трансляции координат по осям сцены X и Y. Для добавления ползунка выполните следующие шаги.

1. Добавьте оператор импорта для класса javafx.scene.control.Slider.
   
   
2. Добавьте литерал объекта Slider в переменную сцены content.
   
   
3. Укажите минимальные и максимальные значения, а также установите текущее значение равным нулю.
   
   

   import javafx.scene.control.Slider; content: [ Circle { ... }, Slider {min: 0 max: 60 value : 0} ]

    
   
4. Укажите положение ползунка в сцене с помощью переменных экземпляра translateX и translateY.
   
   

   content: [ Circle { ... }, Slider { min: 0 max: 60 value : 0 translateX: 10 translateY: 110 } ]

    
   

Рис. 3. Ползунок, добавленный в окно приложения

Затем следует привязать центр круга к значению ползунка. Ползунок отображается в окне приложения, и его значение может изменяться путем перемещения. Однако, у нас пока нет необходимых для приязки средств, чтобы сослаться на значение ползунка — value. Для создания привязки необходимо определить переменную slider и сослаться на slider.value. Для определения отношения выполните следующие шаги.

1. Создайте переменную slider.
   
   

   def slider = Slider { min: 0 max: 60 value : 0 translateX: 10 translateY: 110 };

    
   
2. Определите отношение привязки.
   
   

   Circle { centerX: bind slider.value+50 centerY: 60 radius: 50 ... }

    
   

Оператор bind отслеживает изменения значения справа. По мере изменения родственного значения обновляется центр круга, и JavaFX автоматически отображает круг в новом положении. Так как положение радиальной градиентной заливки не изменяется, пользователь видит круг, который смещается относительно первоначальной заливки.

Полный код примера привязки данных приведен на следующем рисунке. Скомпилируйте, запустите и попробуйте привязку данных в действии.

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.Slider;
import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;
import javafx.scene.paint.Stop;
import javafx.scene.paint.RadialGradient;
 
def slider = Slider{min: 0 max: 60 value: 0 translateX: 10 translateY: 110};
 
Stage {
    title: "Data Binding"
    width: 220
    height: 170
    scene: Scene { 
        content: [ 
            slider, 
            Circle {
                centerX: bind slider.value+50 centerY: 60 radius: 50
	            stroke: Color.YELLOW
	            fill: RadialGradient {
	                centerX: 50 centerY: 60 radius: 50
	                focusX: 50 focusY: 30
	                proportional: false
	                stops: [
	                    Stop {offset: 0 color: Color.RED},
	                    Stop {offset: 1 color: Color.WHITE},
	                ]
                }//RadialGradient
           }//Circle
      ]
  }//Scene
}//Stage                                                                             

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

Рис. 4. Приложение, запущенное на эмуляторе мобильной платформы

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