sencha 重置_ZK Framework与Sencha GXT的简要比较

sencha 重置

本文是关于ZK Framework与Sencha GXT的简要比较。 在担任前端高级开发人员的经验期间，我在工作中使用了Sencha GXT，并在业余时间使用ZK Framework来实现自己的自定义框架。 因此，我想与您分享我对这两个很棒的框架进行比较的想法。

1.概述

下面让我们看一下这些框架的简短介绍：

Sencha GXT：它是Sencha公司专有的Java用户界面框架，它建立在以前由google维护的GWT框架之上，仅在客户端浏览器中运行。

ZK框架：这是Potix公司维护的Java Web框架，它使用JQuery作为其用户界面组件并提供高级服务器端功能，它以客户端和服务器端为中心运行。

这两个框架均使用Java编写，并提供了重要的用户界面组件和功能，但是一个框架仅在客户端（GXT）上运行，而另一个（ZK）在服务器端为中心。

2.建筑模式

设计应用程序体系结构时需要体系结构模式 ，因此对于图形用户界面层，您将需要使用一种众所周知的前端模式，例如： MVC或MVVM或MVP ，让我们看看两个框架都提供了什么：

Sencha GXT： GWT使用MVP模式，更详细的信息在GWTproject中发布，要与GXT一起使用，您必须使Presenter的实现适应GXT的生命周期逻辑。

fZK框架：提供MVC和MVVM模式。 使用ZK Bind功能，可以在开发过程中轻松使用MVVM。

3.响应式网页设计（RWD）

响应式Web设计（RWD）的方法包括调整Web应用程序的外观以使其在所有设备中都能很好地显示。 有一些模式可用于设计和实现您的响应式应用程序，例如Grid-View 。 下面让我们看看如何通过比较的框架来实现响应式Web应用程序：

Sencha GXT：提供了一个容器FloatLayoutContainer来创建浮动元素，没有其他默认容器，例如Grid-View，您必须设计自己的响应容器。
如果您将使用CSS Media查询来定义自己的断点和规则，则将很难对生成的GXT组件进行宽度修改，因为所有内容都是使用GXT以像素为单位计算的，即使某些容器或组件允许您更改，也不会使用百分比它们的宽度百分比，您将处于像素宽度固定的容器内的父级。 关于此部分的文档不多。

ZK框架：提供zul语言来开发您的html页面，使用所有组件和容器中可用的vflex / hflex属性，所有组件的大小可以像素或百分比为单位 。 您可以使用CSS Grid，带有本机html标签的Vlayout， CSS flex box ， Bootstrap网格系统CSS和服务端媒体查询 。 本节有充分的文档记录： 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自定义单元格技术变得可自定义，您无法像以前一样在单元格中渲染任何小部件，您必须在可用的单元格（如CheckBoxCell ， ButtonCell ， DateCell之间进行选择，或者创建自己的自定义单元格。

ZK Framework：使用Grid组件和zul语言，您可以在其中添加任何组件
每个单元格，像这样：

<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>

如果要使单元格可编辑，则只需执行以下操作：

<textbox inplace="true"
value="@bind(each.title)" width="99%" />

因此，这两个框架都提供了灵活的方式来使用Grid组件，但是使用Zk可以
比GXT更简单。

5.主题和样式

一个Web应用程序必须至少具有一个主题，创建一个新主题或自定义一个现有主题应该是一个简单而又容易的步骤，而且人/天的成本也很低，下面让我们看看这两个框架为我们提供了什么：

Sencha GXT：从3.x版本开始，GXT的所有组件和容器设计都采用外观模式 ，该模式将组件功能逻辑与外观分开，因此要自定义组件的样式或视图html，您必须：

1. 定义外观界面
2. 实现外观界面
3. 定义外观样式界面
4. 定义外观资源界面
5. 定义模板html

下面是Grid组件的自定义外观示例：

/***
* 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页面上工作和添加自定义样式名称（例如，以下示例：

<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框架：提供了一种使用zul语言将html页面与java代码分离的方法，您可以在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框架：这是一个服务器端框架，因此您的表示逻辑将在服务器端运行，没有客户端资源会公开您的业务规则。

7.结论

两种框架都非常适合SPA应用程序，选择其中一种取决于您应用程序的体系结构。

如果您打算仅使用不带服务器端逻辑的UI框架，则可以考虑GXT / GWT，但要注意安全性，响应方面以及如何实现自己的服务器端层来管理数据。

如果您打算使用具有丰富服务器端功能（例如报表，图表和电子表格）的完整Web应用程序框架，则可以使用ZK。

我希望这篇文章可以帮助您为前端应用程序选择正确的框架。

翻译自: https://www.javacodegeeks.com/2018/07/brief-comparison-zk-framework-sencha-gxt.html

sencha 重置