Framework vaadin создание простого проекта средствами maven пример
В 2016 многие из нас пообещали себе новые свершения, например, прочесть отложенную книгу, освоить новый вид спорта или язык программирования т.п. Изучение новых технологий в чем-то сродни вышеописанным действиям. Итак, для таких энтузиастов небольшой обзор про удобные «инструменты» для разработки web-приложений на языке Java.
Новый цикл статей будет посвящена Vaadin и Liquibase.
В первой статье хочу вам рассказать о нескольких этапах для начала знакомства с этим FrameWork-ом(Vaadin). Мы поговорим о «загрузке» шаблона и первичном добавлении элементов на «макет». Немного поговорим о Liquibase. В следующих статьях планируется добавить обработку файлов xml.
Vaadin.
Для меня — это «интерпретатор» кода на Java в интерфейс пользователя. Фактически я уменьшаю разработку до уровня контроля за java-слоем. Благодаря сервер-ориентированной архитектуре, основанной на JavaEE, вы можете заложить пласт сложной логики, не потерявшись в настройках отдельных частей. А уже подготовленная оптимизации для браузеров(я говорю о кроссбраузерности) сведет эту часть работы к минимуму.
Сервер-ориентированная модель позволяет быстро(далее вы это увидите) и качественно создавать приложения уменьшая риски «застрять» на определенном этапе. Вы разрабатываете на Java, а на клиенте увидите JavaScript.
Дополнительно нужно сказать, что использование AJAX сулит повышение скорости обмена в интерфейсе.
В этом направлении сейчас развиваются много программных продуктов. Некоторые из них описаны в нижеуказанных первой и четвертой статьях.
Если говорить об использовании, то для средних и крупных компаний — это отличный выбор(имхо).
Необходимая информация о Vaadin.
Официальный сайт Vaadin
Далее несколько ссылок на видео. Очень советую посмотреть.
На русском языке. В нем идет рассказ о наглядном создании небольшого приложения.
На иностранном языке. Лучшая практика — очень удачный рассказ о том как правильно создавать части интерфейса.
Статьи по FrameWork.
Ссылка на первую статью. Небольшая статья про отличия Vaadin от «собратьев».
Ссылка на вторую статью. Обзор возможностей FrameWork-а.
Ссылка на третью статью. Полезные «фичи».
Ссылка на четвертую статью. Тут про GWT и Vaadin. Обзор.
Для создания вашего первого шаблона вы можете поступить следующим образом.
Первое, это произвести установку и настройку нескольких частей для корректной разработки. Если, например, вы используете IntelliJ IDEA, то при создании нового проекта выбрать в разделе «Additional Libraries and FrameWorks» выбрать Vaadin. После этого вам будет предложено указать «Vaadin Distribution» и дополнительно вы можете проставить «Create sample application», перед этими действиями укажите обязательно путь к Project SDK и Application Server (все эти настройки производятся в одном окне).
Кстати, шаблоны есть и для других IDE.
Ссылки на шаблоны.
Vaadin Plug-in for Eclipse.
Vaadin Plug-in for NetBeans.
В проекте, после запуска TomCat вы можете увидеть вот такую надпись «Hello World». По этой ссылке можно посмотреть процесс еще раз.
Что такое Liquibase и зачем он нам понадобился?
Ссылка на сайт Liquibase .
Хорошая статья об особенностях работы.
Еще один отлично написанный материал.
Что такое Liquibase? Для меня — это удобный механизм, для создания идентичных видов объектов на различных базах данных(Oracle, PostgreSQL и других). Очень удачный выбор для компаний, разрабатывающих софт.
Если попробовать описать очень кратко, то вы описываете в xml таблицы, последовательности и другие объекты. Далее один и тот же файл может быть использован для установки на различных видах БД(с определенными ограничениями).
В этой статье начнем делать интерфейс пользователя для, например, создания файлов Liquibase (ограничимся xml вариантом).
Именно благодаря поддержке множества БД мы и попробуем изучить и применять эту возможность
Забыл упомянуть об Apache Tomcat. Ссылка на сайт Tomcat.
В мною предложенном варианте в тестах вы можете использовать встроенную возможность запуска прямо из среды разработки.
Начнем с интерфейса пользователя в Vaadin.
Кстати на самом сайте вы можете найти пример построения «Адресной книги».
Мы попробуем пойти своим путем и создать пускай похожее, но все таки «свое» приложение.
Начнем.
Если вам удалось подгрузить шаблон, то выглядит он примерно вот так:
В коде вы можете увидеть строку.
Фактически это «макет», на который мы будем добавлять элементы(сейчас помимо основных элементов на сайте вы можете найти огромное количество дополнительных).
Для этого добавим несколько элементов. Вот они:
При старте (я запускаю с помощью Tomcat версия — 7.0.65) у вас будет следующее.
Итак, далее пользователь жмет на кнопку «The option to create»(«Опции создания»). Предложим выбор. Для этого мы добавим addClickListener на действие. Примерно вот так:
Т.к. удобнее использовать Lambda выражения все следующие обработчики будем писать с помощью них. -->
Далее сделаем обработку добавим к кнопке (buttonClick) Listener и при нажатии сделаем вывод еще одного элемента ComboBox.
После перезапуска TomCat получим результат:
Уберем добавление элементов и добавим новый горизонтальный слой(«макет»), на него добавим кнопки, а уже новый слой на оригинальный layout.
Вот, что мы получим после перезапуска сервера приложения (TomCat).
Для «Create table» допишем следующую часть.
Делаем небольшие изменения. Например, после выбора элемент будет доступен только для чтения. Добавим поля для ввода названия таблицы и автора будущего файла:
Получим результат, на котором видно, что после выбора появилась возможность для ввода названия таблицы и автора изменений. Длину и другие параметры вводимых значений можно ограничить или изменить.
Тут остановимся в рассуждениях и написании кода для подведения промежуточного итога. Мы с вами немного разобрались с первоначальным макетом Vaadin и попробовали создать несколько элементов, а также добавили их обработку.
С этого момента немного покопаемся в Liquibase . Для начала стоит посмотреть ссылки с примерами.
Для создания файла нам нужно добавлять/записать данные в (id, author, tableName, name, type) и далее собирать отдельные «кусочки» в единый файл, т.к. в реальной ситуации у нас может быть очень много разных полей.
Как мы с вами будем это делать? Существует несколько вариантов. Их попробуем разобрать в следующей статье.
to be continued…
This tutorial gives you an overview of how you can use Vaadin 8 Framework to build single-page web UIs for your Java application. All you need to start with it is JDK 8 and an IDE, such as Eclipse. While this tutorial is written for Eclipse users, you can use your IDE of choice. No extensive knowledge of Java is needed, only basic programming skills are required.
4. Build the Project
Now it’s time to build the project so that it can download all the dependencies and include them into the project’s runtime.
The above maven command will download the dependencies (it will take some time), and build the war file VaadinExample-1.0.war .
5. Run and Test Vaadin Hello World Application
Now it’s time to run the application. In the command prompt, run the following command to start included jetty server.
Vaadin Hello World Screen
Now fill in your name or any string in the text box and click on the button. It will print the message below the button.
Vaadin Hello World Screen -2
Клиентская модель разработки
Оптимизировано для контроля
Клиентская модель позволяет разрабатывать виджеты и приложения на языке Java, которые затем компилируются в выполняемый в браузере JavaScript с помощью компилятора Vaadin Compiler, основанного на Google Web Toolkit (GWT). Можно использовать и непосредственно JavaScript. Это предоставляет полный доступ к структуре DOM и максимальный контроль над браузером.
Благодарности
@djeckson за разработку класса для фильтрации FilterPanel и активное участие в проекте.
In Vaadin hello world example, we will learn to create a simple Vaadin application, and then we will deploy the application in the built-in Jetty server.
Реализация
Класс DataContainer — класс для хранения структур данных в виде контейнера, расширяющий BeanItemContainer.
Создан для удобного присвоения контейнера в таблицы и деревья, за счет списков captions,
headers, visible в которых описываются какие property класса будут отображаться в виде столбцов, какие у них будут заголовки и какие из них будут свернуты.
Механизм присвоения контейнера в таблицу реализован в CommonLogic:
Workspace реализует в себе следующий код:
Где table() и tableAll() методы построения таблицы для текущего контейнера и для контейнера со всеми записями (справочника). navigatorLayout() создает меню для навигации (оно же MenuNavigator) и работы с текущим экземпляром Workspace. filterPanel() — создает панель фильтрации для таблицы с текущим контейнером. В veritcalSplitPanel() описывается создание нижней панели с закладками tabs для редактирования выбранных элементов в таблице созданной в table() .
Класс MenuNavigator дает стандартный набор методов для работы с имплементацией Workspace:
В классе создаются общие элементы меню, описывается логика поведения в квази- модальном режиме и обязует реализующего этот класс описать нужную логику работы.
Редактирование выделенных записей в таблице созданной в table() происходит с помощью элементов добавленных в UI BottomTabs:
Здесь также реализованы списки для более быстрого добавления компонента в закладки: captions — описание заголовков закладок, components — какой элемент будет находиться в этой закладке и resource — какая иконка для него будет отображаться.
Для реализации прав доступа нужно имплементировать PermissionAccessUI и реализовать в нем методы которые должны показывать что активно в этом классе, а что нет, в зависимости от уровня доступа:
и ниже реализация этих методов в классе Workspace:
Класс PermissionAccess — это final класс, выполняющий функцию утильного Utils класса самому не нравиться но другой реализации пока не придумал , он берет компонент PermissionAccessUI и в соответствии с заданной логикой повышает уровень доступа:
Введение
Рис. 1. Логотип Vaadin
Vaadin (кстати, в переводе с финского это слово означает «олениха») поддерживает все распространенные браузеры как обычных компьютеров, так и мобильных устройств и планшетов. Вся разработка ведется на Java, но Java-код выполняется только на сервере, на клиенте же выполняется чистый JavaScript.
Структурно Vaadin состоит из серверного API, клиентского API, набора компонентов пользовательского интерфейса с обеих сторон, механизма тем для оформления интерфейса и модели данных, позволяющей связывать серверные компоненты непосредственно с данными. Можно применять две основные модели разработки: на стороне сервера и на стороне клиента (браузера).
Рис. 2. Архитектура Vaadin
На рис. 2 показаны основные архитектурные компоненты веб-приложения, построенного с использованием Vaadin.
Подготовка среды разработки
Ниже описывается использование Vaadin в среде NetBeans 8.0.2 (версия Vaadin Plug-in for NetBeans — 1.1.3); во врезке есть ссылки на обучающие видео для работы в IntelliJ IDEA и Eclipse (плагин для Eclipse включает в себя графический редактор пользовательского интерфейса).
Первым шагом в NetBeans IDE будет установка плагина (Tools -> Plugins -> Available Plugins, ввести vaadin в поле Search, установить галочку у 'Vaadin Plug-in for NetBeans' и нажать Install, согласившись со всеми вопросами).
Теперь при создании нового проекта (File -> New Project) стала доступна новая категория Vaadin. Выберем Vaadin Web Application Project, нажмем Next и укажем имя нового проекта, например myvaadin.
Рис. 3. Структура проекта
После нажатия Finish будет создана группа проектов приложения Vaadin по умолчанию. Основной файл с минимальным примером исходного кода приложения Vaadin расположен в проекте myvaadin-ui, файл /Source Packages/com.mycompany.myvaadin/MyUI.java; его ключевая часть выглядит так (опущены инструкции package и import):
В этом простейшем проекте объявляется класс MyUI, являющийся наследником класса UI. В нем переопределяется метод init(). Внутри него создается вертикальная компоновка VerticalLayout, у нее включается отступ (margin), создается новая кнопка с обработчиком нажатия, который добавляет компонент типа Label с текстовой строкой. Затем кнопка добавляется к компоновке вызовом метода addComponent(). Директива Theme(«mytheme») задает используемую тему оформления (о них чуть ниже).
Перед первым запуском пересоберем все проекты (правый клик на 'myvaadin — myvaadin-parent' -> Build)
Для запуска в отладочном режиме можно использовать плагин Jetty или интегрированный в NetBeans сервер GlassFish Server
Щелкнем правой кнопкой на проекте -> Debug –> в окне Select Deployment Server из выпадающего списка выберем GlassFish Server.
После того как будут установлены все зависимости и перекомпилированы компоненты приложения, запустится сервлет и автоматически откроется окно браузера.
Рис. 4. Минимальное приложение Vaadin
Серверная модель разработки
Оптимизировано для производительности
Серверная модель разработки для Vaadin является основной и позволяет создавать законченные приложения без разработки на стороне клиента. При этом используется AJAX-движок Vaadin Client-Side Engine, который формирует пользовательский интерфейс в браузере. Серверный подход позволяет фактически забыть про то, что разработка ведется под веб, и разрабатывать пользовательский интерфейс почти как традиционную Java-программу с непосредственным доступом к данным и сервисам на сервере. При этом серверная часть Vaadin позаботится и о формировании пользовательского интерфейса в браузере, и об AJAX-взаимодействии между браузером и сервером. Движок Vaadin осуществляет рендеринг пользовательского интерфейса приложения серверной стороны в браузере и реализует все детали обмена клиента и сервера.
Темы и стили
Взглянем непосредственно в инспекторе или в Firebug, что собой представляет кнопка на нашей форме (рис. 5).
Рис. 5. Кнопка пользовательского интерфейса
Рис. 6. Просмотр HTML и стилей в Firebug
Все стили кнопки берутся из файла styles.css. Этот файл находится в разделе /Web Pages/VAADIN/themes/mytheme/ проекта myvaadin-ui и генерируется из SASS-файлов styles.scss, mytheme.scss и addons.scss, размещенных в том же каталоге. В них за основу берется базовый стиль, называющийся Valo (его предыдущая версия называлась Reindeer и местами по-прежнему упоминается в документации). Почитать про Valo можно здесь, а здесь можно посмотреть примеры всех компонентов.
Основные параметры темы вынесены в переменные, и для полной смены внешнего вида приложения достаточно изменения считаного числа параметров. Например, цвет шрифта определяется автоматически на основании цвета фона. Сам же цвет фона задается переменной $v-background-color. Чтобы изменить его, добавим в начало файла mytheme.scss следующую строку:
Затем нужно щелкнуть правой кнопкой мышки на проекте myvaadin-ui и выбрать Vaadin -> Compile Widgetset and Theme или Compile Theme, после чего обновить в браузере страницу.
При этом фоновый цвет большинства элементов проекта изменится на черный, цвет шрифта изменится автоматически.
Благодаря такому подходу для того, чтобы полностью переоформить приложение, скажем, под плоский стиль Metro, достаточно двух десятков строк, переопределяющих значения переменных, без изменения собственно стилей. Результат можно посмотреть здесь (выбрав тему Metro в правом верхнем углу), а исходный текст — здесь:
Можно переопределять стиль и напрямую. К примеру, изменить цвет надписи на кнопке можно, добавив в файл mytheme.scss следующие строки (ниже строки «// Insert your own theme rules here»):
Затем перекомпилировать темы и обновить страницу браузера.
Вместо того чтобы создавать свою тему, можно воспользоваться и одной из готовых, изменив название темы с mytheme на одно из следующих: valo, runo, reindeer, chameleon, liferay.
Подробнее о темах можно прочитать здесь.
2. Creating a Project from an Archetype
The following video shows how to do this step of the tutorial:
As the starting point for the application, we use a Maven archetype called vaadin-archetype-application . Archetypes are project stubs that have some example code and a basic Maven build script.
Start by choosing File › New › Maven Project from the menu.
The first step in the wizard is good as is for our purpose. Just click Next .
In the second step, you need to choose the vaadin-archetype-application archetype.
You can first try to find it using the filtering function.
If Eclipse has not yet indexed the archetype catalog, you need to manually add the archetype details.
Click the Add Archetype button.
Enter the following values:
This can be left blank.
And click OK . Now you can select the new archetype from the list.
In the next wizard step, type in the following fields:
and click Finish .
If this is your first Vaadin app, creating a project might take a while, depending on the speed of your network, as Vaadin libraries and other dependencies are being downloaded. Maven caches them on your local file system. Creating your next Maven-based Vaadin project will be much faster.
Right click on the newly created project and choose Run as › Maven Install . This initiates a full build of your application and finally creates a WAR file into the target directory. You can deploy the WAR file to your application server. The first build might take a while, as Maven might again need to download some new modules.
While the build is running, let us have a look at what the archetype created for you. You can browse your project resources from the tree structure in the Project Explorer . Maven’s pom.xml on top level contains settings for building your project and declares the used dependencies. Open Java Resources and below it src/main/java , the main source directory, and my.vaadin.app , the main Java package that will contain your Vaadin UI code.
The UI code (and the Servlet declaration) used by the application stub can be found in the MyUI.java file. Let us read it through to see how it works. The init() method of a UI class is triggered when a user enters your web application. The VerticalLayout is one of the most used layout components, which are used to position and display other Vaadin components in your UI classes. The example code creates one TextField to allow the user to input her name and a Button whose click listener dynamically adds a new Label component to the main layout. In the end of the init() method, we just configure the main layout and place components into it and set it to be the content of MyUI .
To test your first Vaadin application, right-click on the project and choose Debug as › Maven build… . The debug mode is slightly slower than the basic run mode, but it often helps you to figure out what is happening in your application.
В клиент-серверной архитектуре место Java-приложения — преимущественно на серверной стороне, при этом веб-интерфейс пишется отдельной группой фронт-енд разработчиков на JavaScript. Java не предлагает адекватных средств для создания современного веб-интерфейса (когда в последний раз ты видел Java-апплет. ) ни с точки зрения дизайна, ни с точки зрения реализации клиент-серверного взаимодействия.
А что, если бы все клиент-серверное приложение целиком писалось на Java, но его клиентская часть была бы «нативной» для браузера и соответствовала бы самым современным представлениям о юзабилити?
Заключение
В целом фреймворк оставляет очень приятное впечатление своей продуманностью и документированностью, большим количеством примеров с исходными кодами на GitHub. Журнал «Хакер» (на данный момент под этим утверждением подписался автор, редактор и главред) рекомендует тебе его использование, в том числе внутрь и в неограниченных количествах!
Google Web Toolkit (GWT)
Google Web Toolkit (GWT) — библиотека с открытым кодом, предоставляющая набор Java API и визуальных компонентов, позволяющих разрабатывать AJAX-приложения на Java и затем компилировать их исходные тексты в высоко оптимизированный JavaScript, работающий на всех основных браузерах, включая мобильные браузеры для Android и iPhone. Подробнее — здесь.
VIDEO
- Подробно начало работы описано в разделе Getting Started with Vaadin электронной книги Book of Vaadin.
- Отличным дополнением книге служит Book of Vaadin Examples, с фрагментами исходного кода для подавляющего большинства разделов книги и элементов Vaadin.
- Небольшой учебный пример приложения можно посмотреть здесь.
- Более сложные демоприложения.
- Документация по API доступна здесь.
Vaadin TouchKit
Vaadin TouchKit предназначен для разработки приложений для мобильных устройств. В него входят компоненты, оптимизированные для мобильного интерфейса, а также функции, специфичные для мобильных устройств. Кроме обычного интерфейса, формируемого на сервере, TouchKit поддерживает специальный офлайн-режим, в котором клиентский интерфейс сохраняется в кеше браузера и включается автоматически при недоступности сети.
Vaadin TestBench
Базируется на библиотеке Selenium, что позволяет управлять браузером непосредственно из кода Java.
С помощью Vaadin TestBench реализуется автоматизированное тестирование на всех уровнях и фазах разработки вплоть до сравнения скриншотов. Более подробно можно прочитать здесь.
Дополнения Vaadin
В Vaadin Directory на данный момент почти 500 различных дополнений, среди которых можно, например, отметить компонент Vaadin Charts, предназначенный для отрисовки графиков и диаграмм.
Для доступа к каталогу дополнений в контекстном меню проекта есть пункт Open Add-Ons Browser.
Зачем это затевалось? Год назад начали писать ERP систему. И с того момента начался наш тернистый путь. Определили стек технологий с которым будем работать. Кратко описали задачу и приступили к работе.
В течении обучения и параллельной "разработки" начал вырисовывать интерфейс и будущую архитектуру приложения. В итоге я попытался написать еще один свой фреймоворк.
В этой статье попытаюсь описать что было сделано, какую структуру реализовал, описать конкретную реализацию классов, почему так, написать примеры использования самописного фреймоврка. Ну и расскажу дальнейшие планы.
Если кратко об используемом стеке, то использовали финский web-framework Vaadin 7.7. Это инструмент который дает возможность писать single page application практически на одном языке (Java). Т.е. с помощью языковых конструкций описывать элементы интерфейса, которые потом транслируются в HTML+JS код и показываются в браузере.
Приложение работает полностью на сервере, беря на себя все вычисления. Действия пользователя в браузере обрабатываются на сервере, изменили размер элемента, он перерисовался на сервере и отправил результат пользователю в браузер. В общем будет много маломощных пользовательских машин читайте телефоны, планшеты, старые офисные машины и парочка мощных серверов.
Цели преследуемые фреймворком следующие: быстрое добавление в общий интерфейс элементов
отображающих нужную структуру данных в уже привычном для всех интерфейсе. А также обеспечение работы через активную запись. Т.е. работа с выделенной строкой в таблице и добавление к ней необходимых связей.
Структура получилась следующая:
Пакет | Название |
---|---|
Data | DataContainer |
TreeDataContainer | |
Elements | BottomTabs |
CommonLogic | |
CommonView | |
FilterPanel | |
Logic | |
Menu | |
MenuNavigator | |
Mode | |
Workspace | |
Permission | ModifierAccess |
PermissionAccess | |
PermissionAccessUI |
В пакете Data компоненты, которые необходимы для связывания (binding) данных с элементами UI. В текущей версии реализованы контейнеры, которые имеют дополнительные методы для быстрого присвоения данных в таблицы и деревья. В пакете два класса: DataContainer — абстрактный класс, на основании которого создаются производные контейнеры для хранения определенных классов данных. TreeDataContainer — реализует класса DataContainer для хранения элементов с указанием иерархии, и для отображения древовидных структур.
Примеры использования всех классов будут в следующих разделах.
Elements
Пакет, в котором находятся все классы описывающие элементы графики и логики системы.
Подход принятый к построению интерфейса — использование отдельных видов, в которых храниться все необходимые компоненты текущего UI. Использовались стандартные компоненты Vaddin — компонент View и его реализация CommonView, а также компонент навигации между видами Menu. Логика работы этих компонентов в связке взята из примера Vaadin, пример и как его сгенерить у себя с помощью maven archetype.
Реализация CommonView должна содержать в себе ссылку на реализацию интерфейса Logic или расширять уже имеющуюся реализацию CommonLogic.
Также есть перечисление Mode которое содержит в себе перечень режимов работы с имеющимися интерфейсами.
Основной графический элемент — Workspace. Это класс в котором имеется две таблицы (в
которые присваиваются данные DataContainer), основная (метод getTable() ) содержит текущую информацию, таблица со списком всех элементов (метод getTableAll() ) которые можно выбирать для добавления в текущий контейнер.
Навигация в Workspace реализует элемент MenuNavigator. Он описывает перечень стандартных методов работы c Workspace, такие как включение режимов Добавления и Удаления, Печати, включения панели фильтрации для таблиц, описанной в классе FilterPanel.
Для возможности редактирования добавленной информации в контейнер (установленный в таблицу из метода getTable()) используется класс BottomTabs, в который добавляются вкладки, которые в себе содержат интерфейс для редактирования информации: таблицы, поля, выпадающие списки и все что нужно.
Permission
Пакет содержит классы для реализации прав доступа к графическим элементам и механизмы повышения прав доступа с помощью ролей.
ModifierAccess — перечисление имеющихся уровней доступа к UI: отключен, чтение, редактирование.
PermissionAccess — класс реализующий механизмы установки прав доступа, где действует принцип повышения права. Т.е. если пользователю назначено в одной группе право для элемента на чтение, а в другой на редактирование, в итоге пользователю будет доступно максимальное право — право на редактирование.
PermissionAccessUI — интерфейс который имплементируеся в графические компоненты, на которые назначаются права.
3. Generated files
Along with folder structure, we get given below generated files along with vaadin hello world project.
3.1. pom.xml
3.2. MyUI.java
3.3. web.xml
If you want to use web.xml file, because your server does not support servlet 3.0 specification, you can use this configuration in web.xml file.
Do not forget to remove @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true) if you are using web.xml file.
1. Creating Vaadin Project using Maven Archetype
Use the below maven command in your workspace to create the simplest Vaadin web application.
Please update the groupId and artifactId as per your choice.
2. Import Generated Project to IDE
Now import the generated project into the IDE (in my case, it’s eclipse) as an existing Maven project.
Vaadin Hello World Application Project Structure
The generated project contains a standard folder structure for any maven web application.
Заключение
Что-то много получилось для первого раза. Но да ладно В итоге получился простенький фреймворк, который позволяет быстро создавать новые интерфейсы для отображения разного набора данных и описывать логику работы с ними. Также планируется добавить компоненты которые позволять создавать редакторы справочников(списков), что будет являться интерфейсом для наполнения баз данных. Написать много-много тестов (буду рад предложениям о том, как тестировать такие штуки, потому что идей пока не появилось), а так же улучшать API и набор функций. Также создать функционал работы с базами данных.
Данная реализация возникла в ходе производственной ситуации, и основное применение носит для конкретного заказчика, но я думаю этот проект можно использовать для решения других задач.
1. Overview
You’ll have your first Vaadin app running in your IDE in a couple of minutes. To complete the whole tutorial, you’ll need about 20 to 60 minutes, depending on your existing experience. Naturally, you can just do the beginning of the exercise or pick any of the steps you want. To start from a specific step, we have prepared the example code after each step to be downloaded as a zip file.
In this tutorial, we build a simple customer management system. It is not a real application; we use an in-memory "back-end", so that you can understand how to hook it to an existing Java based back-end. We cover the basic Vaadin development and you can use the result as a basis for more experiments with Vaadin, such as using add-ons, your own custom look-and- feel (aka. theme), adding new views, or optimizing the result for mobile support.
If you do not want to do the exercise at all, you can also just download the final application and play around with it.
1.1. Installing the Development Tools
The tutorial uses Java 8, so please ensure that you have an up-to-date JDK 8 installed. Most Linux distributions can use package managers to install JDK8. Windows and Mac users should download it from Oracle’s Java SE site.
Создание браузерного файл-менеджера
Чтобы почувствовать всю элегантность подхода, предлагаемого Vaadin, реализуем прототип файл-менеджера.
Отображение файловой системы — знакомство с TreeTable и контейнерами
Container — интерфейс Vaadin, представляющий собой источник табличных или иерархических данных. Подробнее о контейнерах можно почитать здесь. Для доступа к базе данных SQL предназначен контейнер SQLContainer. Для файловой системы также существует готовый контейнер FilesystemContainer, который мы и используем в этом проекте.
Контейнер можно задавать в качестве источника данных для элементов типа Table (табличные данные), Tree и TreeTable (для отображения иерархических данных) и других.
Начнем с того, что создадим новый проект с названием fileman. Добавим классу MyUI метод создания и инициализации элемента TreeTable, который будет отображать структуру каталога (если строка в исходном тексте подсвечивается красным, это значит, что для данного класса нет соответствующей строки import; чтобы ее добавить, можно нажать и выбрать «Add import for. ». Нужно уточнить, что ниже для класса File потребуется выбрать из предложенных именно java.io.File):
Добавим метод установки новых данных TreeTable из FilesystemContainer
Также добавим метод определения каталога проекта по умолчанию.
В методе init() удалим все, что связано с кнопкой button, и добавим в конце вызов нового метода initAll() так, чтобы init() выглядел следующим образом:
Добавим заготовки под функции для
Сохраним файл и запустим приложение в отладочном режиме. Если приложение уже было запущено раньше, то после сохранения и завершения развертывания (deploy) достаточно просто обновить страницу в браузере.
Обработка событий компонента TreeTable
В конце метода initFileTree добавим обработчик одинарного и двойного нажатия кнопок мыши:
Добавим методы классу MyUI для обработки действий пользователя
С этого момента по двойному клику уже можно переходить в каталог, находящийся уровнем ниже.
Главное меню — компонент MenuBar
Добавим главное меню с пунктами Refresh и Up Level в подменю File, подобное горизонтальным меню традиционных приложений:
И вызов этих методов в метод InitAll() первой строкой (иначе меню окажется ниже всех других элементов):
Верхняя и нижняя панели
Следующим шагом добавим панель сверху, на которой расположим кнопки и информацию о текущем пути / имени выбранного файла и панель снизу для отображения информации о файле. Внутри класса MyUI добавим:
Инициализация нижней панели, содержащей информацию о выбранном файле
Добавляем вызов этих методов в метод InitAll(), приведя его к следующему виду:
и в updateInfo(), приведя его к следующему виду:
После сохранения и обновления страницы в браузере, файл-менеджер получит меню, панель инструментов и панель статуса.
Предварительный просмотр и сплиттер — компоненты HorizontalSplitPanel, Embedded
Добавим нашему файл-менеджеру панель предварительного просмотра графических файлов. По аналогии несложно сделать предварительный просмотр для текстовых файлов с помощью компонента TextArea.
И добавляем метод initMainPanels() в метод InitAll(), вместо вызов метода инициализации дерева файлов initFileTree(), так как теперь он вызывается из initMainPanels:
и добавляем в updateInfo() строку
Не забудь скопировать изображение в папку по умолчанию (/fileman/fileman-ui/target/fileman-ui-1.0-SNAPSHOT
).
Ну вот и все, с помощью нашего файл-менеджера можно перемещаться по файловой системе, просматривать файлы и их свойства.
Мы получили клиент-серверное приложение для браузера, не написав ни строчки на JavaScript, не затратив времени на реализацию AJAX-взаимодействия и вообще не задумавшись о всех нюансах веб-разработки.
Рис. 6. Интерфейс приложения
Примеры
Данные
Пример создания контейнера какого-то абстрактного класса описывающего предметную область (он же является Bean), назовем его Element:
Классическая реализация в соответствии со спецификацией для Bean.
Для него создадим контейнер, который будет содержать в себе все записи.
Где в методах addCaption , addHeader , addCollapsed перечисляются property класса Element, которые будут использоваться в виде колонок, в какой последовательности, какие заголовки и какие из них будут скрыты.
Реализация классов для UI
Реализация класса Workspace в виде класса MyLayout:
Где описывается поведение при выборе записи в таблице со всеми компонентами и текущим контейнером (методы ItemClickEvent.ItemClickListener ), здесь они пустые. Также logic.setDataToTable(container.loadAllData(), getTable()) здесь описывается приме установки текущего контейнера в таблицу.
Реализация MenuNavigator в классе MyMenu:
Где описывает изменение стиля нажатой кнопки и тем самым должен включаться другой режим.
И последний элемент описывающий графику MyTabSheet — реализация BottomTabs:
Где создаются 4 закладки, в которые устанавливаются компоненты Label, и на все закладки ставится значок Amazon, не сочтите за рекламу, просто буква А идет первой .
В итоге получается вот такой интерфейс:
Читайте также: