Следующим шагом в разработке приложения SnowStorm добавление текста, который будет показывать количество снежинок. Количество снежинок изменяется с течением времени, так что мы должны организовать изменение этого текста в то время, как снежинки появляются и исчезают. Вы увидите, как это делается далее в разделе этой главы "Подсчет снежинок". Пока мы создадим фиксированную строку "Snowflakes", которая будет отображаться.
Отображается текст после добавления узла Text на сцену, итак начните перетаскивать элемент Text из раздела Shapes окна палитр и опустите опустите его ниже инициализатора ImageView в редакторе. С небольшими преобразованиями, ваш код будет выглядеть следующим образом:
Отображается текст после добавления узла Text на сцену, итак начните перетаскивать элемент Text из раздела Shapes окна палитр и опустите опустите его ниже инициализатора ImageView в редакторе. С небольшими преобразованиями, ваш код будет выглядеть следующим образом:
Код, который был добавлен на строках от 20 до 26 будет вызывать текст HelloWorld для отображения в 10 пикселях с левой стороны и 30 пикселей от верхней части сцены, используя 24 размер шрифта (что означает, что символы текста будут до 24 пикселей в высоту), как показано на рисунке 4-7.
Рисунок 4-7 Добавление текста приложение SnowStorm
Это не совсем то, что мы хотим, поэтому необходимо изменить значения переменных объекта text так, чтобы он показывал правильную строку и появлялся там, где мы хотим. Чтобы изменить строку, которая отображается и сделать текст немного меньше, изменим содержимое переменных content и size объекта text, например вот так:
Text {
font: Font {
size: 20 // Новый размер шрифта
}
x: 10, y: 30
content: "Snowflakes: 0" // Новый (временный) текст
}
Примечание
Элементы в последовательности, обычно, выделяются запятыми, например: [1, 2]. Однако следует отметить, что инициализаторы для объектов ImageView и Text разделены только пробелами, потому что это как код написан в IDE, когда вы помещаете значение в инициализатор последовательности.
Компилятор, по сути, принимает последовательность элементов, разделенных пробелом, а не запятой (до тех пор, пока элементы являются литералами объектов), но мы часто включаем запятую в качестве разделителей в примерах кода в этой книге.
Далее, нам необходимо сделать так, что бы текст появлялся в нижней части изображения, а не в верхней. Положение текста определяется его х и у переменными. Они приводятся в процентах относительно верхнего левого угла сцены, который имеет координаты X = 0 и Y = 0. Значения X и Y увеличиваются при перемещении слева направо и сверху вниз, соответственно, как показано на рисунке 4-8.
Это не совсем то, что мы хотим, поэтому необходимо изменить значения переменных объекта text так, чтобы он показывал правильную строку и появлялся там, где мы хотим. Чтобы изменить строку, которая отображается и сделать текст немного меньше, изменим содержимое переменных content и size объекта text, например вот так:
Text {
font: Font {
size: 20 // Новый размер шрифта
}
x: 10, y: 30
content: "Snowflakes: 0" // Новый (временный) текст
}
Примечание
Элементы в последовательности, обычно, выделяются запятыми, например: [1, 2]. Однако следует отметить, что инициализаторы для объектов ImageView и Text разделены только пробелами, потому что это как код написан в IDE, когда вы помещаете значение в инициализатор последовательности.
Компилятор, по сути, принимает последовательность элементов, разделенных пробелом, а не запятой (до тех пор, пока элементы являются литералами объектов), но мы часто включаем запятую в качестве разделителей в примерах кода в этой книге.
Далее, нам необходимо сделать так, что бы текст появлялся в нижней части изображения, а не в верхней. Положение текста определяется его х и у переменными. Они приводятся в процентах относительно верхнего левого угла сцены, который имеет координаты X = 0 и Y = 0. Значения X и Y увеличиваются при перемещении слева направо и сверху вниз, соответственно, как показано на рисунке 4-8.
Рисунок 4-8 Система координат
Чтобы текст появлялся там. где мы хотим, необходимо установить координату y объекта text на 10 пикселей меньше высоты сцены. Для этого нам нужно получить высоту сцены, которая доступна из её переменной height. Чтобы получить доступ к значению этой переменной, нам нужна еще одна переменная, которая ссылается к сцене самого объекта. Вот как выглядит код, когда правильно расположен добавленный узел Text, с изменениями, выделенными жирным шрифтом:
Строка 11 объявляет переменную сцены, которую мы используем для хранения ссылки на сцену, мы установили его значение в строке 16, когда свойство сцены контейнера объекта инициализируется:
Stage {
title: "JavaFX Snow Storm"
resizeble: false
scene: scene = Scene {
Выражение scene = Scene { . . . } сначала назначает ссылкой Scene к переменной scene, объявленной в строке 11, а затем возвращает значение этой переменной. Это возвращаемое значение присваивается к свойству сцены контейнера. Используя этот синтаксис, мы можем держать объявление объекта сцены внутри литерала объекта. Это делает код немного более читаемым, чем вариант, который будет объявлять и инициализировать объект сцены в том же месте, сцены переменной, например:
var scene:Scene = Scene { // Инициализаторы, как показано в коде выше};
Stage {
title: "JavaFX Snow Storm"
resizeble: false
scene(scene),
}
Код, который позиционирует объект text показан на строках 27 и 28. Обратите внимание, что мы переместили текст немного вправо, изменяя ее координату х от 10 до 25. Код, который устанавливает значение у достоин немного большего обсуждения:
y: bind scene. height – 10
Цель заключается в расположении текста на 10 пикселей выше нижней части сцены, как вы могли ожидать от этой строки:
y: scene. height – 10
К сожалению, этот код не работает. Причиной этого является то, что, когда объект текста инициализируется, сцена еще не получает своего окончательного размера. В самом деле, его переменные высоты и ширины как бы равны нулю. В результате координата y объекта текст примет значение -10, в результате чего он будет перемещен на 10 пикселей выше верхней части сцены! Мы должны быть уверены, что у координата устанавливается после того, как сцена принимает соответствующий размер. Простейший способ это сделать - организовать корректировку значений y с высотой сцены, даже если та меняется. То есть явно привяжем переменную:
y: bind scene. height – 10
Вот что на самом деле происходит в результате добавления этой строки кода:
1. При инициализации текстового объекта, его переменная y устанавливается до -10, поскольку высота сцены в это время 0 пикселей.
2. Сцена получает необходимый размер высоты, основанный на высоте изображения, скажем 375 пикселов, соответственно значение scene.height изменится до 375.
3. Поскольку значение scene.height изменилось, и поскольку y связан с выражением, что он зависит от этого значения, y будет присвоено правильное значение, котрое равно (375 - 10) = 365.
Привязка является мощным инструментом. Чтобы добиться того же эффекта в Swing приложении вам необходимо зарегистрировать ComponentListener с эквивалентом сцены, осуществляющим свой метод componentResized() для настройки положения компонента текста. Это займет значительно больше времени и код, чем одно слово кода, который требуется, чтобы объявить привязку!
С помощью этих изменений в коде начальное создание приложения является законченным. Если вы запустите его сейчас, то получите результат, показанный на рисунке 4-9. Следующим шагом является добавление анимации.
Чтобы текст появлялся там. где мы хотим, необходимо установить координату y объекта text на 10 пикселей меньше высоты сцены. Для этого нам нужно получить высоту сцены, которая доступна из её переменной height. Чтобы получить доступ к значению этой переменной, нам нужна еще одна переменная, которая ссылается к сцене самого объекта. Вот как выглядит код, когда правильно расположен добавленный узел Text, с изменениями, выделенными жирным шрифтом:
Строка 11 объявляет переменную сцены, которую мы используем для хранения ссылки на сцену, мы установили его значение в строке 16, когда свойство сцены контейнера объекта инициализируется:
Stage {
title: "JavaFX Snow Storm"
resizeble: false
scene: scene = Scene {
Выражение scene = Scene { . . . } сначала назначает ссылкой Scene к переменной scene, объявленной в строке 11, а затем возвращает значение этой переменной. Это возвращаемое значение присваивается к свойству сцены контейнера. Используя этот синтаксис, мы можем держать объявление объекта сцены внутри литерала объекта. Это делает код немного более читаемым, чем вариант, который будет объявлять и инициализировать объект сцены в том же месте, сцены переменной, например:
var scene:Scene = Scene { // Инициализаторы, как показано в коде выше};
Stage {
title: "JavaFX Snow Storm"
resizeble: false
scene(scene),
}
Код, который позиционирует объект text показан на строках 27 и 28. Обратите внимание, что мы переместили текст немного вправо, изменяя ее координату х от 10 до 25. Код, который устанавливает значение у достоин немного большего обсуждения:
y: bind scene. height – 10
Цель заключается в расположении текста на 10 пикселей выше нижней части сцены, как вы могли ожидать от этой строки:
y: scene. height – 10
К сожалению, этот код не работает. Причиной этого является то, что, когда объект текста инициализируется, сцена еще не получает своего окончательного размера. В самом деле, его переменные высоты и ширины как бы равны нулю. В результате координата y объекта текст примет значение -10, в результате чего он будет перемещен на 10 пикселей выше верхней части сцены! Мы должны быть уверены, что у координата устанавливается после того, как сцена принимает соответствующий размер. Простейший способ это сделать - организовать корректировку значений y с высотой сцены, даже если та меняется. То есть явно привяжем переменную:
y: bind scene. height – 10
Вот что на самом деле происходит в результате добавления этой строки кода:
1. При инициализации текстового объекта, его переменная y устанавливается до -10, поскольку высота сцены в это время 0 пикселей.
2. Сцена получает необходимый размер высоты, основанный на высоте изображения, скажем 375 пикселов, соответственно значение scene.height изменится до 375.
3. Поскольку значение scene.height изменилось, и поскольку y связан с выражением, что он зависит от этого значения, y будет присвоено правильное значение, котрое равно (375 - 10) = 365.
Привязка является мощным инструментом. Чтобы добиться того же эффекта в Swing приложении вам необходимо зарегистрировать ComponentListener с эквивалентом сцены, осуществляющим свой метод componentResized() для настройки положения компонента текста. Это займет значительно больше времени и код, чем одно слово кода, который требуется, чтобы объявить привязку!
С помощью этих изменений в коде начальное создание приложения является законченным. Если вы запустите его сейчас, то получите результат, показанный на рисунке 4-9. Следующим шагом является добавление анимации.
Рисунок 4-9 Завершенный пользовательский интерфейс приложения SnowStorm
Комментариев нет:
Отправить комментарий