RIA-приложения - это совершенно не обязательно Adobe Flex, как мы с вами имели возможность убедиться в прошлом и позапрошлом номерах "КВ". Это ещё и JavaFX - технология, предложенная Sun Microsystems как альтернатива Flex и Silverlight. Именно о ней мы и поговорим.

В прошлый раз остановились на том, что загрузили среду разработки NetBeans, которую Sun Microsystems любезно предоставила всем Java и JavaFX-разработчикам, и создали пустое JavaFX-приложение, с которым сейчас продолжим экспериментировать. Вернее, даже не продолжим, а начнём - ведь никаких экспериментов, по большому счёту, ещё не было.

Готовимся рисовать на сцене

Как вы помните, самый важный объект из всех, которые добавила в код нашего тестового приложения среда NetBeans, называется Stage. Именно вокруг него, по большому счёту, будут в дальнейшем крутиться все наши модификации пользовательского интерфейса. Внутри сцены и будут располагаться все те элементы, которые мы решим показать пользователю. Но какими эти элементы могут быть? Давайте прямо сейчас это и выясним.

Когда я здесь говорю "элементы", я имею в виду не только элементы управления, которые разработчики любят называть контролами (от английского controls). На сцене могут быть не только элементы управления, но и другие визуальные объекты, среди которых встретятся и такие, которые наверняка покажутся вам довольно-таки экзотическими. В NetBeans IDE вы можете увидеть доступные для включения в данную сцену элементы на специальной панели, которая называется "Palette". Она располагается справа от основного окна, в котором вы пишете программный код. Её можно увидеть на скриншоте к статье.

К сожалению, если вы привыкли к палитре компонентов в Visual Studio или каком-нибудь Delphi, то палитра для JavaFX из NetBeans станет для вас сплошным разочарованием. Почему? Потому что ни о какой визуальной разработке речь пока что не идёт. Когда вы кликаете на какой-нибудь элемент в этой палитре, среда вставляет соответствующий ему программный код в то место редактора кода, где установлен текстовый курсор, даже если код элемента там вообще ни к чему. Визуальное редактирование свойств элементов также, к сожалению, отсутствует. Это, конечно, серьёзные минусы JavaFX-разработки, но нужно понимать, что технология пока молодая и не слишком распространённая, а потому основная масса средств разработки приложений на её основе ещё только выходит на должный уровень. Впрочем, хоть как-то облегчить себе задачу создания пользовательского интерфейса в NetBeans вполне возможно: здесь есть специальная панель предварительного просмотра интерфейса создаваемого приложения. Кликнув на кнопку "Enable preview" на панели инструментов, вы увидите внизу слева панель с уменьшенным изображением окна создаваемого вами приложения. Это, конечно, не совсем то, что предлагают визуальные дизайнеры интерфейса, но всё-таки лучше, чем ничего.

Впрочем, я отвлёкся. Как видите, на палитре не только элементы управления и даже не только какие-то визуальные элементы вроде кривых или геометрических фигур. Здесь есть и различные события, с помощью которых наше RIA-приложение сможет реагировать на действия пользователя, и разные эффекты, применяемые к содержимому сцены, и многое другое. Сейчас мы с вами посмотрим, как это всё можно применять в создаваемых нами приложениях.

Рисуем на сцене

На самом деле на сцене мы уже рисовали. То есть, размещали на ней один объект, являющийся надписью с текстом "Application content". Конечно, добавили его на сцену не мы - среда NetBeans сделала это, не спрашивая на то нашего согласия, поскольку так предусмотрено в её встроенных шаблонах. Сейчас мы несколько разнообразим нашу сцену, добавив на неё ещё несколько различных объектов.

В листинге вы можете увидеть код, рисующий на экране довольно диковинной формы фигуру (нечто вроде сегмента круга) голубого цвета.

Stage {
 title: "Application title"
 width: 250
 height: 280
 scene: Scene {
  content: Path {
   stroke: Color.CADETBLUE
   elements: [
    MoveTo { x: 100 y: 30 },
    ArcTo { x: 150 y: 50 radiusX: 40 radiusY: 20},
    LineTo{x: 100 y: 30}
   ]
  },
 }
}

Запустив этот пример самостоятельно, вы можете поэкспериментировать с теми фрагментами, которые составляют эту фигуру, чтобы получить что-то более красивое. Мы же пока удовлетворимся разбором того, как у нас получилось хотя бы это. В листинг не вошёл код import'ов, который должен включать в себя пакеты javafx.stage.Stage, javafx.scene.Scene, javafx.scene.text.Font, javafx.scene.shape.*, javafx.scene.paint.*.

Итак, сначала идёт уже знакомое нам название класса Stage, который, как я уже напоминал, является ключевым для JavaFX-приложений. Затем мы видим также уже знакомый нам по первому приложению объект Scene, в котором и начинается что-то интересное. Что именно? Как видите, в отличие от той болванки приложения, которую нам с вами в прошлый раз услужливо сгенерировала среда NetBeans, здесь у нас в свойстве content экземпляра класса Scene присутствует экземпляр класса Path - сиречь, кривая, которая задаётся с помощью перечисления последовательности элементов. Элементы у нас такие: участок круга, начинающийся в точке с координатами 100 и 30 (центр круга приходится на точку с координатами 150 и 50), и кусок прямой, замыкающий нашу фигуру.

Контейнеры на сцене

Как видите, здесь мы включили в содержание нашей сцены только один объект. Однако как быть, если объектов на сцене несколько? Свойство content только одно, и если вы попробуете записать его содержимое несколько раз, ни к каким положительным эффектам это не приведёт. Очевидное решение этой проблемы - использовать специальные контейнеры для визуальных объектов, которые могут включать в себя несколько различных объектов, а сами присваиваться свойству content других компонентов.

В JavaFX предусмотрено два вида контейнеров: горизонтальный и вертикальный. Называются они, соответственно, HBox и VBox. Дизайн интерфейса с их помощью очень напоминает дизайн страницы в HTML: таблица, в ней ещё таблица, в ней три столбца, в каждой ячейке ещё таблица с тремя строками... Здесь всё отличие в том, что таблицы могут содержать только один горизонтальный или один вертикальный ряд, т.е. у вас могут быть таблицы вида 1xN ячеек или Mx1 ячеек.

И HBox, и VBox могут описываться, в общем-то, всего двумя основными свойствами: элементами, содержащимися в них, и расстоянием между этими элементами. Простейший вариант HBox'а приведён в коротком, но от этого ничуть не менее полезном в деле изучения JavaFX листинге.

HBox{
 spacing: 10
 content:[lightStop, lightReady, lightGo, text]
}

VBox (тоже простейший вариант) будет отличаться от него всего одной-единственной буквой. Я сейчас не буду останавливаться на том, что именно за элементы входят в состав нашего с вами контейнера, - очевидно, что это какие-то экземпляры классов, которые могут отображаться на экране. Вы можете считать, что здесь эти экземпляры просто предварительно объявлены в коде программы как переменные.

Модификаторы объектов: эффекты и трансформации

Объекты, отображаемые на экране, могут подвергаться в JavaFX определённым модификациям с помощью других объектов, которые сами непосредственно на нём не отображаются, однако вносят немалую лепту в дело построения пользовательского интерфейса нашего с вами RIA-приложения. Я сейчас говорю, конечно же, о таких вещах, как визуальные эффекты и трансформации. Эффекты - это, например, размытие (Blur), тень, отражение... Трансформации - изменение масштабов объекта, повороты, эффект перспективы... Полный список того и другого вы можете увидеть с помощью палитры NetBeans IDE, мы же сейчас посмотрим, как применять модификаторы объектов в нашей программе.

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

Stage {
 title: "Application title"
 width: 250
 height: 280
 scene: Scene {
  content: Path {
   stroke: Color.CADETBLUE
   transforms: Rotate {angle: 45 pivotX: 40 pivotY: 40};
   effect: Reflection {
    fraction: 5
    topOffset: 1.0
    topOpacity: 0.5
    bottomOpacity: 0.0
   }
   elements: [
    MoveTo { x: 100 y: 30 },
    ArcTo { x: 150 y: 50 radiusX: 40 radiusY: 20},
    LineTo{x: 100 y: 30}
   ]
  },
 }
}

Программа, которая получается в итоге, отображает нашу непонятную кривую под углом 45 градусов к её первоначальному положению, а также строит её отражение слева от неё.

Как видите, никаких особых сложностей применение трансформаций и эффектов в программу не привносит. Достаточно выбрать применяемые модификаторы и подобрать их параметры таким образом, чтобы всё, что они делают, смотрелось максимально привлекательно. На остальной код приложения эффекты и трансформации никакого влияния не оказывают, так что вы можете спокойно применять разные модификаторы к разным объектам на сцене.

Резюме

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

(Продолжение следует)

Вадим СТАНКЕВИЧ,
dreamdrusch@tut.by