Эта статья о кратком сравнении ZK Framework и Sencha GXT. Во время моего опыта работы с старшим разработчиком внешнего интерфейса я использовал в своей работе Sencha GXT и в свободное время использовал ZK Framework для реализации своей собственной пользовательской среды. Итак, я хотел бы поделиться с вами своими мыслями, сравнивая эти две отличные основы.
1. Обзор
Давайте посмотрим ниже краткое введение об этих платформах:
Sencha GXT: Это фреймворк пользовательского интерфейса java, принадлежащий компании Sencha, который построен на основе великолепного фреймворка GWT, ранее поддерживаемого Google, он работает только в браузере на стороне клиента.
ZK Framework: Это Java-фреймворк, поддерживаемый компанией Potix, который использует JQuery для своих компонентов пользовательского интерфейса и предлагает расширенные функции на стороне сервера, он работает на стороне клиента и сервера.
Обе платформы написаны на Java и предлагают важные компоненты и функции пользовательского интерфейса, но одна работает только на стороне клиента (GXT), а другая (ZK) — на стороне сервера.
2. Архитектурные образцы
Архитектурные шаблоны требуются при разработке архитектуры вашего приложения, поэтому для вашего уровня графического пользовательского интерфейса вам нужно будет использовать один из хорошо известных шаблонов внешнего интерфейса, таких как: MVC или MVVM или MVP , давайте посмотрим, что предоставляют обе платформы:
Sencha GXT: GWT использует шаблон MVP, более подробные опубликованы в GWTproject , чтобы использовать его с GXT, вы должны адаптировать реализацию Presenter к логике жизненного цикла GXT.
fZK Framework: предоставляет шаблоны как MVC, так и MVVM. MVVM может быть легко использован в процессе разработки с помощью функции ZK Bind.
3. Отзывчивый веб-дизайн (RWD)
Подход адаптивного веб-дизайна (RWD) состоит в том, чтобы адаптировать внешний вид вашего веб-приложения, чтобы он хорошо отображался на всех устройствах. Существуют шаблоны, которые можно использовать для проектирования и реализации адаптивного приложения, например Grid-View . Посмотрим ниже, как мы можем реализовать адаптивное веб-приложение с помощью сравниваемых платформ:
Sencha GXT: есть один контейнер FloatLayoutContainer предоставленный для создания плавающих элементов, других контейнеров по умолчанию, таких как Grid-View, нет, вы должны создавать свои собственные адаптивные контейнеры.
Если вы будете использовать CSS Media запросы для определения своих собственных точек останова и правил, изменение ширины сгенерированных компонентов GXT будет затруднено, потому что все рассчитывается в пикселях с GXT, без использования процента, даже если некоторые контейнеры или компоненты позволяют вам изменить их ширина в процентах, вы будете на родительском уровне внутри контейнера с фиксированной шириной пикселя. Существует плохая документация по этому разделу.
ZK Framework: предоставляет язык zul для разработки html-страниц. Размер всех компонентов может быть в пикселях или процентах с использованием свойства vflex / hflex, доступного во всех компонентах и контейнерах. Вы можете использовать CSS Grid, Vlayout с собственными html-тегами, CSS flex box , CSS системы сетки Bootstrap и медиа-запрос на стороне обслуживания . Этот раздел хорошо документирован: https://www.zkoss.org/wiki/Small_Talks/2017/August/Responsive_Design_in_ZK_Part_1
4. Гибкость компонентов
В некоторых пользовательских случаях гибкость компонентов очень важна для реализации пользовательских экранов. Я решил сравнить гибкость компонента Grid с обеими платформами:
Sencha GXT: в GXT 2.x вы можете добавить любой виджет, доступный в GXT или GWT, например Container ComboBox или CheckBox в ячейку, но начиная с версии 4.x поведение компонента Grid было полностью изменено, чтобы повысить производительность, чтобы ячейки стал настраиваемым с помощью технологии GWT Custom Cells, вы не можете визуализировать какой-либо виджет внутри ячейки, как раньше, вы должны либо выбрать одну из доступных ячеек, таких как CheckBoxCell , ButtonCell , DateCell … или создать свою собственную ячейку.
ZK Framework: с компонентом Grid и языком zul вы можете добавить любой компонент внутри
каждая клетка, вот так:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
|
<grid> <columns> <column label="From"/> <column label="Subject" /> </columns> <template name="model:group"> <group label="${each}" /> </template> <template name="model"> <row> <div> <image src="/img/sample-image.png" /> <label value="${each.index}" /> </div> <label value="${each.subject}" /> </row> </template></grid> |
Если вы хотите сделать ячейку редактируемой, вам нужно просто сделать это:
|
1
2
|
<textbox inplace="true"value="@bind(each.title)" width="99%" /> |
Таким образом, обе платформы предлагают гибкие способы использования компонента Grid, но с Zk это будет
более простой, чем GXT.
5. Тематика и стиль
Веб-приложение должно иметь хотя бы одну тему, создание новой или настройка существующей должно быть простым и легким шагом, а также с низкими затратами на человека / день, давайте посмотрим ниже, что предоставляют нам обе платформы:
Sencha GXT: начиная с версии 3.x, GXT принимает шаблон внешнего вида для всех своих компонентов и дизайна контейнеров, этот шаблон отделяет функциональную логику компонента от его внешнего вида, поэтому для настройки стиля или представления html-компонента необходимо:
- Определить внешний вид интерфейса
- Реализовать интерфейс внешнего вида
- Определите внешний вид стиля интерфейса
- Определите интерфейс ресурсов внешнего вида
- Определить шаблон HTML
Ниже приведен пример пользовательского внешнего вида компонента Grid:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
/**** Custom appearance for Grid component**/public class MyCustomGridAppearance extends GridBaseAppearance {private MyCustomGridResources resources;public interface MyCustomGridResources extends GridResources { @Source({"myCustomGrid.gss" }) @Override MyCustomGridStyle css(); } public interface MyCustomGridStyle extends GridStyle { String rowSelected(); } public MyCustomGridAppearance() { this(GWT. create(MyCustomGridResources.class)); } public MyCustomGridAppearance(MyCustomGridResources resources) { super(resources); this.resources = resources; }} |
Этот подход имеет много преимуществ, таких как возможность определять несколько появлений для одного и того же компонента, отделять внешний вид компонента от его функциональной логики… и т. Д. Но для этого требуется больше кода, чем для работы со стандартной html-страницей, и добавление имени собственного стиля, такого как следующий пример:
|
1
2
3
4
|
<div> <ui-combo class=”my-custom-class”>...</ui-combo></div>.my-custom-class { … } |
Доступные темы GXT по умолчанию: синий, серый и нептун: https://docs.sencha.com/gxt/3.x/guides/ui/theme/Themes.html.
ZK Framework: предоставляет способ отделить html-страницы от вашего java-кода с помощью языка zul, вы можете работать с html-страницами и определять свои стили (рекомендуется следовать методологии передового опыта, например smacss, для лучшей организации и написания ваших таблицы стилей), каждый тег на странице zul по умолчанию является компонентом zk, который имеет жизненный цикл на стороне сервера, вы также можете использовать стандартные теги html для клиентских компонентов без жизненного цикла на стороне сервера.
Официальные доступные темы ZK: Iceblue, Breeze, Sapphire и Silvertail:
https://www.zkoss.org/wiki/ZK_Developer’s_Reference/Theming_and_Styling/ZK_Official_Themes
6. Безопасность
Sencha GXT: это инфраструктура на стороне клиента java, поэтому вся ваша логика представления будет доступна в файлах javascript, работающих в веб-браузере, каждый ресурс, доступный в браузере, небезопасен, поэтому вам нужно приложить усилия, чтобы не быть взломанным.
ZK Framework: это фреймворк на стороне сервера, поэтому ваша логика представления будет работать на стороне сервера, никакой ресурс на стороне клиента не будет раскрывать ваши бизнес-правила.
7. Заключение
Обе платформы отлично подходят для приложений SPA, выбор одного из них зависит от архитектуры вашего приложения.
Если вы планируете использовать только структуру пользовательского интерфейса без серверной логики, вы можете подумать о GXT / GWT, но позаботиться о безопасности, аспекте реагирования и о том, как реализовать собственный уровень на стороне сервера для управления вашими данными.
Если вы планируете использовать полноценную среду веб-приложений с богатыми функциональными возможностями на стороне сервера, такими как отчеты, диаграммы и электронные таблицы, вы можете использовать ZK.
Я надеюсь, что этот пост поможет вам выбрать правильную структуру для вашего веб-приложения.