Статьи

Enterprise JavaFX: наш опыт создания пользовательского интерфейса JavaFX для приложения бронирования шва

Декабрь 21, 2018

JavaFX — это новый набор инструментов для разработки и предоставления многофункциональных интернет-приложений или RIA. JavaFX 1.0 была выпущена в декабре 2008 года, а JavaFX 1.2 была выпущена в июне 2009 года. По мере появления этих новых выпусков сообщество JavaFX быстро росло. Этот рост привел к большому выбору ресурсов, статей, публикаций в блогах, книг и расширенных проектов. В этой статье, написанной Антоном Поляковым, старшим разработчиком в Exadel, описывается наш опыт создания внешнего интерфейса JavaFX для приложения бронирования Seam. 

За это время, хотя JavaFX широко использовался для обеспечения «богатства» в приложениях, он в основном «отсутствовал в действии» для веб-приложений уровня предприятия, что подразумевало бы большую интеграцию JavaFX с серверной частью приложения. Помните, что многофункциональное интернет-приложение доставляется с сервера клиенту, но, что более важно, оно продолжает взаимодействовать с сервером. Пользовательский интерфейс запускается на клиенте, а логика приложения — на сервере.

Мы считаем, что для того, чтобы JavaFX продолжал расти и конкурировать с Flex и Silverlight, он должен быть приемлемым для предприятия для использования в приложениях, которые в полной мере используют обе стороны многофункциональных интернет-приложений (Rich Enterprise Applications). Adobe и ее сообщество проделали отличную работу, продемонстрировав, что Flex можно использовать для создания реальных корпоративных приложений. То же самое должно произойти с JavaFX.

Опыт Exadel с JavaFX

Exadel работает с JavaFX уже более года. В июне 2008 года мы взяли популярное веб-приложение для бронирования отелей Jboss Seam и создали на нем пользовательский интерфейс JavaFX в качестве замены стандартного пользовательского интерфейса JSF. Тогда мы использовали предварительную версию JavaFX. (В то время был очень мало интереса к JavaFX.)

Перенесемся в сегодня. Мы взяли то же самое приложение для бронирования Seam и обновили пользовательский интерфейс JavaFX до JavaFX 1.2. Вы можете найти демо-версию здесь . Для локального использования вы также можете загрузить файл для запуска или проект Maven для создания этого приложения.

Восстановление заявки на бронирование

В оставшейся части этой статьи мы поделимся опытом создания этой демонстрации в качестве примера создания корпоративных приложений JavaFX. Задача не была легкой (но тогда это было бы не так весело).

Существующее приложение

Как упоминалось ранее, в качестве отправной точки мы взяли популярное демонстрационное приложение по бронированию Seam. (Эта демонстрационная версия предоставляет готовую серверную часть, очень похожую на ту, которая существовала бы в типе приложений уровня предприятия, которые сегодня создают многие компании.) Seam — это облегченная среда, цель которой — упростить разработку Java EE, объединяя JSF с EJB3, JPA и Hibernate. Исходный пример приложения поставляется с пользовательским интерфейсом на основе JSF / RichFaces.

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

Изменение стороны клиента

Любое корпоративное веб-приложение состоит из двух частей: клиентской и серверной. В этом примере сторона сервера не изменяется. Мы просто взяли существующее приложение Seam. Поскольку серверная часть Seam реализована с использованием компонентов, мы могли бы создать другой интерфейс, не касаясь серверной части.

Для клиентской стороны мы хотели JavaFX, который требует другого подхода по сравнению с использованием JSF. В приложениях на основе JSF UI (JSF) и логика (Seam) работают на сервере. Шов хорошо настроен для пользовательского интерфейса на основе JSF (и предлагает интеграцию). Сервер просто отображает HTML в браузере, а затем прослушивает новые запросы. С JavaFX все по-другому. Хотя логика (Seam) все еще работает на сервере, пользовательский интерфейс JavaFX полностью работает на клиенте. Шов не знает автоматически о JavaFX (или Flex, если на то пошло). Как тогда клиент и сервер могут лучше всего общаться друг с другом?

Добавление связи сервер / клиент

Хотя JavaFX предлагает базовые XML и REST для обмена данными между клиентом и сервером, этого далеко не достаточно для взаимодействия с компонентами Seam на сервере. Конечно, вы можете написать свою собственную коммуникационную среду для решения этой проблемы; однако мы сомневаемся, что вы захотите это сделать.

К счастью, мы можем использовать [инфраструктуру RIA Exadel Flamingo, http://exadel.com/web/portal/flamingo], которая решает эту проблему и экономит много времени. Flamingo — это инструмент для простой интеграции богатых пользовательских интерфейсов (пока что JavaFX и Flex) в серверные части Seam и Spring. Фламинго предлагает такие функции, как эти:

  • Прозрачный вызов компонентов Seam
  • Связывание компонентов
  • Проверка гибернации
  • Шов разговор поддерживается

Все, что вам нужно, это одна строка кода (помимо добавления библиотек Flamingo). 

ServiceFactory.setUrl("{FX.getProperty("javafx.application.codebase")}seam/resource/hessian");

  • ServiceFactory — это фабрика для получения компонентов Seam.
  • setUrl устанавливает URL для сервера.

Затем, чтобы получить экземпляр компонента Seam на клиенте, используйте это:  

ServiceFactory.getService(Identity.class, "org.jboss.seam.security.identity");
  • org.jboss.seam.security.identity — это имя компонента Seam.

или же

ServiceFactory.getService(UserManager.class, "userManager");

  • userManger — это имя компонента Seam.

Например: 

@Name(“userManager”)
public class UserManager {
  ...
}

 


Одна из проблем, с которой мы столкнулись при работе над этим, — это серьезные языковые изменения между предварительной версией JavaFX и версией 1.x JavaFX. К ним относятся изменения ключевых слов, изменения пакета и многое другое. К счастью, это не было бы проблемой ни для кого там сейчас. Люди просто начнут с JavaFX 1.2. 

Настройка формы входа в JavaFX Side

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

import javafx.stage.Stage;
import javafx.scene.control.Label;
import javafx.scene.control.TextBox;
import javafx.scene.Scene;
import javafx.scene.layout.VBox;
import javafx.geometry.VPos;

Stage {
   scene: Scene {
   width: 200,
   height: 200,
   content: [
      VBox {
         vpos: VPos.CENTER
         spacing: 10
         content: [
            Label {
                text: "Username: "
            },
            TextBox {
                text: ""
            }
         ]
      }
   ]
  }
}

У нас есть форма, так что пока все хорошо.

Добавление модели интерфейса

Далее нам понадобится небольшой класс, который будет служить моделью для пользовательского интерфейса:

public class User {
   public var username: String;
   public var password: String;
}

Добавление элемента управления TextBox

После этого мы добавляем элемент управления TextBox и подключаем его к модели данных. Эта привязка является одной из ключевых функций в JavaFX. Это позволяет синхронизировать данные между моделью и пользовательским интерфейсом.

...
Label {
   text: "Username: "
},
TextBox {
    text: bind user.username
},
Label {
    text: "Password: "
}
TextBox {
     text: bind user.password
},
...

Некоторые недостающие элементы из JavaFX

Когда мы собирались добавить поле для пароля, мы столкнулись с проблемой, которую вы, вероятно, не ожидали. Удивительно, но в JavaFX 1.2 фактически отсутствует контроль паролей. Однако сообщество JavaFX решило эту проблему, предоставив некоторые пользовательские элементы управления .

Мы столкнулись и с некоторыми другими проблемами. В настоящее время в JavaFX по-прежнему отсутствуют некоторые мощные элементы управления макетом типа, в котором изменение размера родительского элемента изменяет размеры всех содержащихся в нем элементов. Основные недостающие элементы — это таблица и поле со списком. Кроме того, мы не могли изменить стиль гиперссылки.

Проблема производительности с привязкой в ​​JavaFX

Теперь поговорим о привязке. JavaFX позволяет подключать переменные через «привязку». Когда одна переменная изменится, другая будет обновлена ​​автоматически. Например:

var a = “say hello”;
var b = bind a;
a = “say goodbye”

b теперь будет равно «попрощаться».

Хотя привязка является очень мощной функцией, она может снизить производительность приложений. Например, когда мы использовали последовательность (похожую на массив в Java) с привязкой и изменяли содержимое последовательности, мы быстро начинали получать ошибки OutOfMemory. Похоже, что при каждом изменении будет создаваться совершенно новая последовательность, что может вызвать проблемы с памятью. Просто представьте, сколько объектов создано, если последовательность воссоздается постоянно.

Вывод

Итак, каков приговор? Проработав с JavaFX более 3 недель, мы определенно верим, что у него есть будущее, нам просто нужно подождать до версии 1.5 или 2.0, чтобы использовать его для реальной корпоративной разработки. Ключевые элементы управления отсутствуют, существующие элементы управления содержат незначительные ошибки, и, конечно, проблема производительности должна быть решена. В некоторых местах нам приходилось явно присваивать переменным нулевое значение, чтобы повысить производительность. (Просто сделав это, мы могли заметить улучшение производительности невооруженным глазом.)

Другой проблемой является плагин Java, в котором работают приложения JavaFX. Если вы помните, старые апплеты страдали от многочисленных проблем. Хотя новый плагин Java значительно улучшает загрузку и производительность приложений JavaFX на клиенте, весь процесс по-прежнему не так прост и прозрачен, как следовало бы. Пользователи по-прежнему сталкиваются с проблемами (как описано здесь в комментариях , например). Чтобы JavaFX стал успешным, загрузка приложения должна быть такой же простой и прозрачной, как Adobe сделала со своим Flash-плеером.

Конечно, есть и много положительного. Приложение может быть легко запущено как автономное приложение, внутри браузера в виде апплета и через Java Web Start. Кроме того, приложение выглядит и работает одинаково в любом браузере, так как работает внутри плагина Java (виртуальной машины). Вы больше не сталкиваетесь с проблемами совместимости HTML и JavaScript. Хотя JavaFX является новым языком сценариев, он все еще основан на Java, что позволяет ему использовать любые новые или существующие классы Java.

Все, что нам нужно сделать, это дождаться выхода следующей версии JavaFX. Кроме того, на основе подсказок Oracle, как, например, во время JavaOne, JavaFX имеет многообещающее будущее. В конце концов, это редкость, когда технология становится популярной и широко распространенной сразу после выпуска 1.0 или даже 1.2. Мы определенно с нетерпением ждем следующей версии JavaFX, которая, по нашим прогнозам, действительно будет готова для предприятия.

Exadel JavaFX Studio — плагин для Eclipse

Помимо Flamingo, Exadel также предлагает бесплатный плагин JavaFX Studio для Eclipse. Плагин предоставляет различные инструменты для создания и развертывания приложений JavaFX. Плагин работает с Eclipse 3.4.2 и 3.5. Чтобы попробовать это, загрузите это здесь .

об авторе

Антон Поляков — старший разработчик в Exadel. Он разрабатывал корпоративные Java-приложения для JSF, RichFaces, JavaFX, Flex, Seam и Spring. Антон разработал JavaFX и Flex пользовательских интерфейсов для применения Шова бронирования упомянутого в этой статье нашла здесь .

 

56
Share: