JavaFX в действии

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


Вступление

Для начала хочу поблагодарить тех читателей, которые прислали письма и поделились своим мнением по поводу JavaFX и статей, посвящённых этой технологии. Конечно, JavaFX пока не так актуальна, как Flex или Silverlight, и я действительно не нашёл предложений по работе для JavaFX-разработчиков в Беларуси вообще и в Минске, в частности. Но это, как мне кажется, как раз тот случай, когда сани нужно готовить летом, поскольку JavaFX имеет очень серьёзный потенциал.

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

Напомню, что ранее мы с вами рассмотрели синтаксис JavaFX Script - языка программирования, который используется для создания RIA-приложений с использованием технологии JavaFX. Также мы узнали, как именно использовать разные встроенные классы для проектирования пользовательского интерфейса JavaFX-приложений. Сейчас мы с вами продолжим говорить именно об этом.

 


Визуальный редактор интерфейса

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

Найти эту программу в Интернете очень легко - www.reportmill.com/jfx. Называется она, кстати, довольно прозаически - JFXBuilder. Эту программу, конечно, сложно назвать полноценной средой разработки приложений, но в ней можно "рисовать" декларативный код, который затем со всеми удобствами можно будет дорабатывать в более мощной и удобной среде NetBeans. Конечно, если бы в NetBeans был дизайн или в JFXBuilder'е более приличный редактор кода, было бы лучше... Впрочем, давайте лучше посмотрим на то, что всё-таки есть.

Предлагают нам дизайнер, на котором можно размещать различные геометрические элементы из базовой библиотеки классов JavaFX, а в редакторе их свойств, расположенном сбоку от основного окна (см. скриншот), можно менять свойства этих объектов. Какие свойства? Ну, например, заливку, линии контура обводки фигуры, применяемые к данному объекту эффекты. Можно настраивать связи (bindings) и анимацию (о ней мы с вами сегодня ещё поговорим). По мере того, как вы настраиваете свойства объекта, JFXBuilder генерирует соответствующий этому объекту программный код, который можно увидеть в нижней части основного окна программы. В нём самом, как я уже говорил, редактировать этот код не слишком удобно, поэтому рекомендую перенести его после того, как закончите с дизайном, в среду NetBeans.

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


Программируем анимацию

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

Следующим моментом, который мы с вами рассмотрим, будет анимация. Без неё сложно представить современные web-приложения, в том числе и те, которые создаются на конкурентах JavaFX - Flex'е и Silverlight'е. Действительно, движущаяся по экрану картинка вызывает куда больше интереса у пользователя, чем статичное изображение, и уж, во всяком случае, внимание привлекает куда легче. Как вы сейчас сможете убедиться, создатели JavaFX использовали анимацию достаточно хорошо, поэтому никаких особых ухищрений, чтобы применить её в своём приложении, от разработчика не потребуется. Как, впрочем, и со всем остальным, с чем мы с вами встречались до сих пор.

Для работы с анимацией в JavaFX предусмотрен специальный класс, называемый Timeline. Экземпляр этого класса и будет в нашем примере с кривой из предыдущей статьи управлять её движением. В листинге вы можете увидеть реализацию экземпляра этого класса.

Timeline {
 keyFrames: [
  KeyFrame{
   time: 0s
   values: x => 0.0
  },
  KeyFrame{
   time: 10s
   values: x => 200.0 tween Interpolator.LINEAR
  }
 ]
}.play();

Здесь задана анимация в виде простого движения вдоль оси X со скоростью 20 пикселов в секунду. Если вы знакомы с понятием "ключевой кадр", то легко можете увидеть, что именно на основе ключевых кадров и сделана анимация в приведённом листинге. То есть, мы задаём начальный и конечный кадр, время между ними, а движок JavaFX уже самостоятельно рассчитывает, что и как рисовать в кадрах промежуточных и, вообще, как их демонстрировать.

Привязку анимации к объекту мы организуем одной строкой - свойством экземпляра класса Path: "translateX: bind x". Это движение по оси X - с осью Y всё аналогично. Что кавычки не нужны, думаю, вполне понятно. Что касается "импортов", которые нужно добавить, то они выглядят следующим образом: "import javafx.animation.Timeline; import javafx.animation.KeyFrame; import javafx.animation.Interpolator;". Кстати, рекомендую поэкспериментировать с "Interpolator.LINEAR" - попробуйте другие типы интерполяции для имитации разных видов движения.


События

В "Компьютерных вестях" есть такая интересная и полезная рубрика "События и факты". Очень рекомендую вам с нею знакомиться каждый номер. Почему я вдруг заговорил об этой рубрике? Потому что на очереди как раз такая интересная тема, как события. Это очень важная тема, поскольку именно благодаря событиям приложение может адекватно реагировать на действия пользователя. Давайте посмотрим, как работать с событиями в JavaFX-приложениях.

Добавьте в список импортируемых пакетов строку "import javafx.scene.input.MouseEvent; import javafx.scene.Cursor;", и обратите внимание на листинг, в котором показан пример использования событий, возникающих при наведении курсора мыши на объект и его удалении с объекта. Объектом, как вы сами понимаете, служит по-прежнему наша кривая.

Stage {
 title: "Application title"
 width: 350
 height: 380
 scene: Scene {
  var effect1 = Glow {
   level: 0.5
  }
  content: Path {
   stroke: Color.CADETBLUE
   transforms: Rotate {angle: 45 pivotX: 40 pivotY: 40};
   effect: effect1
   elements: [
    MoveTo { x: 100 y: 90 },
    ArcTo { x: 100 y: 150 radiusX: 120 radiusY: 60},
    LineTo{x: 100 y: 90}
   ]
   cursor: Cursor.HAND
   onMouseEntered: function(evt: MouseEvent):Void {
    effect1.level = 1;
   }
   onMouseExited: function( e: MouseEvent ):Void {
    effect1.level = 0.5;
   }
  },
 }
}

Пример в листинге, в общем-то, довольно жизненный, потому что если применить его к какой-нибудь, скажем, кнопке, то он будет выдавать сияние вокруг неё - довольно часто используемый дизайнерами сайтов приём. События же, как вы можете легко увидеть сами, реализуются с помощью присвоения функциональных значений свойствам onMouseEntered и onMouseExited нашего с вами геометрического объекта. Внутри функций мы изменяем интенсивность свечения - именно для этого, фактически, эффект в самом начале листинга и был вынесен в отдельную переменную. Строка "cursor: Cursor.HAND" меняет вид курсора мыши при наведении на объект со стрелочки на указатель в виде руки. Это также полезно в том случае, если вы планируете делать обработку событий для каких-то объектов, на которые можно ещё и нажать (событие тогда будет называться onMousePressed).


Резюме

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

Как видите, JavaFX - действительно довольно мощная платформа, уже сейчас способная составить конкуренцию тому же Silverlight. Конечно, в определённом смысле она пока отстаёт и от него, и от Flex'а, который развивается уже не один год, но это вовсе не означает, что у JavaFX нет будущего - как раз наоборот. Посмотрите, сколько программистов на Java и сколько - на ActionScript'е. Думаю, одно это способно заставить многих задуматься о том, насколько JavaFX перспективна как платформа. Писать приложения благодаря особенностям JavaFX Script'а и IDE Netbeans от Sun Microsystems достаточно удобно, а с визуальным редактором типа JFXBuilder и вовсе просто.

Если вы решили дальше изучать эту технологию, то рекомендую вам сайт developers.sun.ru/javafx. Там довольно подробно расписано, особенно если не лениться читать на английском языке. Русскоязычной печатной литературы по JavaFX пока не обнаружено, но нет сомнений в том, что она скоро появится.

Успехов вам в освоении JavaFX!

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

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

Версия для печатиВерсия для печати

Номер: 

20 за 2009 год

Рубрика: 

Software
Заметили ошибку? Выделите ее мышкой и нажмите Ctrl+Enter!
 

Комментарии

Аватар пользователя Инкогнито
Не надоело ещё?