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

В этой статье рассматриваются основы языка JavaFX Script и на примере приложения изучаются некоторые компоненты пользовательского интерфейса. Чтобы получить пользу от этой статьи, необходимо обладать хорошим знанием языка программирования Java и иметь опыт разработки с использованием Swing.

Перед началом работы с JavaFX Script

При разработке приложений на JavaFX Script полезно иметь установленную среду разработки сценариев JavaFX. Существуют IDE, специально предназначенные для разработки на JavaFX Script, а также подключаемые модули к другим средам разработки на Java. В этой статье будет рассматриваться модуль JavaFX Script для Eclipse (информацию об этом и других модулях для разработки см. в разделе Ресурсы).

В начало

Обзор JavaFX Script

JavaFX Script - это язык со статической типизацией, то есть тип данных каждой переменной, параметра и тип возвращаемого методом значения известны на этапе компиляции. JavaFX Script также является декларативным языком программирования: он описывает то, что делает программа, а не то, как она это делает. Алгоритм, который определяет, каким образом отобразить приложение на экране, реализуется поддерживающим ПО (Swing Java 2D API). Поэтому JavaFX Script хорошо подходит для создания графического интерфейса пользователя.

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

Переменные и примитивные типы

JavaFX Script предоставляет четыре примитивных типа: String, Boolean, Number и Integer. В таблице 1 приведены типы Java, которым они соответствуют:

Переменные любого из этих типов вводятся с ключевым словом var. В отличие от языка Java, JavaFX Script не требует указания типа переменной в объявлении переменной. Интерпретатор может узнать тип переменной, основываясь на ее использовании. Однако, поскольку JavaFX Script является статически типизированным, объявленный тип переменной должен оставаться неизменным в течение всего жизненного цикла этой переменной. Например, var myString = "Hello"; в JavaFX Script эквивалентно var myString:String = "Hello"; в коде Java.

Операторы

В таблицах 2 и 3 приводится перечень операторов, используемых в JavaFX Script, и их аналоги в Java. При написании выражений в JavaFX Script можно обращаться к этим таблицам.

Функции и операции

JavaFX Script использует ключевое слово function для представления функциональной части программы. В JavaFX Script функция может содержать объявления переменных и конструкцию return, заключенные в фигурные скобки. Это идеально подходит для простых математических функций, а также методов-аксессоров (getters) и мутаторов (setters) класса. В листинге 1 показан пример функции JavaFX Script, которая складывает два числа:

                
function add(a,b) {
   var c = a + b;
   return c;
}

Все процедуры в JavaFX Script обозначаются ключевым словом operation и могут содержать любое количество конструкций. В листинге 2 показан пример простой операции:

                
operation helloWorld() {
   System.out.println("Hello world.");
}

В начало

Пример приложения JavaFX Script

Для демонстрации некоторых основных возможностей графического интерфейса пользователя в JavaFX Script ниже рассматривается создание простого калькулятора с функциями калькулятора, входящего в состав операционной системы Microsoft® Windows®. На рисунке 1 показан этот калькулятор:

Окна и меню

Для отображения приложений JavaFX Script служит объект Frame. Это окно верхнего уровня с границей, заголовком, и, при желании, с панелью меню. В листинге 3 показано объявление окна калькулятора:

                
Frame {
   menubar: MenuBar {
      ...
   }
   //текст, выводимый в заголовке
   title: "Calculator"
   //размер окна
   height: 200
   width: 200
   //начало размещения содержимого окна
   content: GridBagPanel {
      ...
   }
   visible: true
}

В JavaFX Script атрибуты объекта описываются в его объявлении. В листинге 3 menubar, title, height, width, content и visible - это все атрибуты объекта Frame. Атрибут title содержит значение типа String, которое отображается в строке заголовка окна. В данном примере это значение установлено в Calculator (см. строку заголовка на рисунке 1). Атрибуты height и width определяют размер окна в пикселах. Атрибут visible имеет тип Boolean и определяет, отображать или нет окно после инициализации.

Атрибут menubar, объявленный в объекте Frame в листинге 3, содержит в качестве значения объект MenuBar. Объект MenuBar может содержать один или более объектов Menu, которые определяют названия и содержимое меню, расположенного в верхней части окна калькулятора. В этом приложении объявляется меню File, содержащее одну операцию: Exit. Его объявление показано в листинге 4:

                
menubar: MenuBar {
   menus: Menu {
      text: "File"
      //первый элемент меню
      items: MenuItem {
         text: "Exit"
         //действие при нажатии
         action: operation() {
            //завершить работу приложения
            System.exit(0);
         }
      }
   }
}

Объект Menu имеет атрибут text со строковым значением, представляющим название меню, которое и отображается на экране - в данном случае это File. Объект Menu также содержит атрибут с названием items, значением которого является один или более объектов MenuItem. Объекты MenuItem представляют операции, расположенные в этом меню. Атрибут text определяет имя MenuItem, а атрибут action содержит операцию, которая определяет поведение элемента. Когда пользователь калькулятора выбирает File > Exit, операция, определенная в атрибуте action, выполняется и приложение закрывается.

Размещение GUI-компонентов и границы

Возвращаясь снова к объявлению объекта Frame в листинге 3, нужно сказать, что атрибут content является, пожалуй, наиболее важным из всех атрибутов объекта Frame. Его значение - это объект-виджет, который определяет содержимое, отображаемое в окне под строкой заголовка и панелью меню. Текстовое поле калькулятора и кнопки создаются в атрибуте content. Чтобы упорядочить кнопки калькулятора, необходимо создать форматированную панель, которая показана в листинге 5:

                
content: GridBagPanel {
   border: EmptyBorder {
      ...
   }
   cells: {
      ...
   }
}

Менеджер компоновки JavaFX Script инкапсулирует соответствующие типы размещения GUI-компонентов (layouts) Swing/AWT и создает экземпляр JPanel с указанным менеджером размещения. Затем, через атрибуты, предоставленные объектом JavaFX Script, в объект JPanel добавляются GUI-компоненты. В таблице 4 приведены виджеты JavaFX Script и их соответствие менеджерам размещения GUI-компонентов в Swing/AWT:

Точно так же каждый объект типа border (граница) инкапсулирует в себе объект border из Swing. Каждый объект border в JavaFX Script имеет атрибуты, которые соответствуют конфигурационным свойствам объекта border в Swing. В таблице 5 приведены соответствующие объекты border из Java FX Script и Swing:

Как видно из листинга 5, для калькулятора используется GridBagPanel. GridBagPanel выравнивает компоненты по сетке (вертикально и горизонтально) не требуя от компонентов, чтобы они имели одинаковый размер. Каждый объект GridBagPanel содержит сетку ячеек, причем каждый компонент может занимать одну или несколько ячеек. GridBagPanel имеет два атрибута: border и cells. Атрибут border определяет тип границы (один из объектов, представленных в таблице 5), которая будет отображаться в GridBagPanel. Как видно из листинга 6, в калькуляторе используется объект EmptyBorder.

                
border: EmptyBorder {
   top: 5
   left: 5
   bottom: 5
   right: 5
}

Пустая граница (empty border) полностью прозрачна. Она занимает пространство, как описано в атрибутах border, но не прорисовывается. Атрибутами EmptyBorder являются top, left, bottom и right. Их значения определяют размер пространства, в пикселах, которое занимает граница с каждой стороны экрана. В данном случае задана прозрачная граница шириной 5 пикселов между компонентами сетки (grid) и каждым краем экрана.

Атрибут cells объекта GridPanel определяет компоненты внутри сетки. Значением этого атрибута является массив объектов типа GridCell. Каждый объект GridCell представляет отдельный компонент в сетке. Атрибуты GridCell указывают, каким образом должен отображаться компонент, и где он расположен внутри панели. Приложение "Калькулятор" содержит 19 объектов GridCell. Один GridCell соответствует текстовому полю в верхней части калькулятора, два объекта GridCell соответствуют кнопкам Back и Clear, и 16 объектов соответствуют цифровым кнопкам и кнопкам с операциями, как показано на рисунке 1. В листинге 7 показаны объекты GridCell для текстового поля приложения "Калькулятор", кнопок Back и Clear, а также для двух цифровых кнопок:

                
cells:
      [ GridCell {
         anchor: WEST
         fill: HORIZONTAL
         //горизонтальная позиция в сетке
         gridx: 0
         //вертикальная позиция в сетке
         gridy: 0
         //количество клеток, занимаемых компонентом
         gridwidth: 4
         content: textField
      }, GridCell {
         anchor: WEST
         fill: HORIZONTAL
         gridx: 0
         gridy: 1
         gridwidth: 2
         content: Button {
            text: "Back"
            ...
         }
      }, GridCell {
         anchor: WEST
         fill: HORIZONTAL
         gridx: 2
         gridy: 1
         gridwidth: 2
         content: Button {
            text: "Clear"
            ...         
         }
      }, GridCell {
         anchor: WEST
         fill: HORIZONTAL
         gridx: 0
         gridy: 2
         content: Button {
            text: "7"
            ...
         }
      }, GridCell {
         anchor: WEST
         fill: HORIZONTAL
         gridx: 1
         gridy: 2
         content: Button {
            text: "8"
            ...
         }
      }]

Как видно из листинга 7, каждый объект GridCell содержит пять атрибутов: anchor, fill, gridx, gridy и content. Атрибут anchor используется, когда компонент меньше области, предназначенной для его отображения, и указывает, в какой части этой области разместить компонент. Возможные значения: NORTH, SOUTH, EAST, WEST, NORTHWEST, NORTHEAST, SOUTHWEST, SOUTHEAST и CENTER.

Атрибут fill также используется, когда область для отображения компонента больше самого компонента. Он указывает, как изменить размер компонента и изменять ли его вообще. В таблице 6 описываются возможные значения:

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

Атрибуты gridx и gridy объекта GridCell определяют расположение компонентов внутри сетки. Их значения указывают на ячейку, в которой будет отображаться ведущий (верхний левый) угол компонента с отсчетом от ячейки, со значениями gridx = 0, gridy = 0.

Три компонента GridCell, определенные в листинге 7, также содержат атрибут gridwidth. Этот атрибут определяет число идущих подряд ячеек в сетке, которые может занять компонент. Например, первый объект GridCell в листинге 7 (текстовое поле калькулятора) имеет значение атрибута gridwidth, равное 4. Это значение говорит о том, что текстовое поле должно занимать четыре колонки. Значения его атрибутов gridx и gridy равны 0, что говорит о том, что левый верхний угол текстового поля должен начинаться в первой строке первой колонки сетки.

Текстовые поля и кнопки

Каждый компонент GridCell, определенный в листинге 7, содержит значение виджета, которое определяет, что будет отображено в экранной области ячейки. Ячейки в приложении "Калькулятор" содержат виджеты текстовых полей и кнопок.

В листинге 7 новые объекты определяются непосредственно в содержимом атрибута. Ниже показан альтернативный сценарий определения текстового поля в JavaFX Script - определение текстового поля как переменной textField вне содержимого атрибута content. Это объявление приведено в листинге 8. После того, как текстовое поле определено, атрибут content объекта GridCell для текстового поля может содержать только имя переменной в качестве значения.

                
var textField = TextField {
   //определяет значение по умолчанию, отображаемое в текстовом поле
   value: "."
   //определяет тип выравнивания
   horizontalAlignment: TRAILING
   onChange: operation(s:String) {
      //не изменять значение, если пользователь ввел некорректный символ
   }
};

Объект TextField имеет четыре атрибута. Атрибут value определяет значение по умолчанию, которое будет появляться в текстовом поле. Атрибут horizontalAlignment указывает, как выравнивать содержимое текстового поля. В таблице 7 описываются возможные значения атрибута horizontalAlignment:

В калькуляторе используется текстовое поле с выравниванием по правому краю, на что указывает ключевое слово TRAILING.

Атрибут onChange виджета textField содержит операцию, которая определяет, что произойдет, когда пользователь изменит содержимое текстового поля. В приложении "Калькулятор" производится проверка на допустимость символов.

Кнопки во многом определяются аналогично текстовым полям. Можно сначала определить кнопку как переменную либо определить ее непосредственно в атрибуте content родительского объекта. В листинге 9 показано определение кнопки Back:

                
content: Button {
text: "Back"
   action: operation() {
      //удаление последнего введенного символа
   }
}

Виджет Button содержит два атрибута: text и action. Значение атрибута text - это то, что будет отображаться на кнопке. Атрибут action содержит операцию, которая описывает, что произойдет, когда пользователь нажмет на эту кнопку. В данном случае кнопка Back должна удалять последний символ, введенный в текстовое поле, определенное в листинге 8.

Помимо виджетов, использованных в тестовом приложении "Калькулятор", существует множество других. Более подробную информацию о методах размещения GUI-компонентов, виджетах, представленных здесь, и других компонентах пользовательского интерфейса см. в разделе Ресурсы.

В начало

Заключение

JavaFX Script - это очень динамичный переносимый язык, позволяющий создавать графические приложения, аналогичные тем, которые создаются в Swing, но с гораздо меньшими затратами труда. Хотя JavaFX Script отличается по синтаксису от Java-кода, многие из основополагающих технологий одинаковы. Мы рекомендуем исследовать JavaFX Script и его потенциал глубже и использовать знания, полученные из этой статьи, для создания собственных приложений на JavaFX Script.

Ресурсы

Научиться

• Create rich applications with JavaFX Script: оригинал статьи (EN).
  
  
• JavaFX Community (EN): вступить в сообщество JavaFX.
  
  
• JavaFX Technology (EN): домашняя страница Sun's JavaFX с дополнительной информацией об этой технологии.
  
  
• Planet JFX (EN): открытый wiki-источник документации по платформе JavaFX, поддерживаемый сообществом разработчиков и энтузиастов Java.
  
  
• JavaOne 2007: Prodigal Sun returns to the client (Elliotte Harold, developerWorks, июнь 2007 г.) (EN): статья о возможностях и задачах JavaFX Script и других клиентских технологиях, обсуждавшихся на конференции JavaOne 2007.
  
  
• First impressions: Sun's JavaFX platform for rich application development (Ryan Paul, ars technica, май 2007 г.) (EN): статья с исследованием первой версии JavaFX.
  
  
• JavaFX Update: The Elephant Is Through the Door! (James L. Weaver, AjaxWorld Magazine, декабрь 2007 г.) (EN): статья о проекте openjfx-compiler.
  
  
• Раздел Технология Java : сайта developerWorks: сотни статей обо всех аспектах Java-программирования.
  
  

Получить продукты и технологии

• JavaFX Script plug-ins - плагины для NetBeans и Eclipse от сообщества JavaFX.(EN)
  
  
• JavaFxPad: JavaFxPad позволяет вводить код JavaFX Script и мгновенно видеть результат.(EN)
  
  
• IBM trial software: ознакомительные версии программного обеспечения для разработчика, которые можно загрузить со страницы developerWorks.(EN)
  
  

Обсудить

• Примите участие в обсуждении материала на форуме.
  
  
• Познакомьтесь с блогом сообщества developerWorks, присоединяйтесь к форумам developerWorks или слушайте podcast'ы developerWorks, чтобы быть в курсе последних веяний в технологиях.(EN)
  
  

Об авторе

Оценить эту статью

Комментарии

В начало

Содержание

• Обзор JavaFX Script
• Пример приложения JavaFX Script
• Заключение
• Ресурсы
• Об авторе
• Комментарии