百度网站收录入口,自己做网站 需要会什么,口碑营销方案怎么写,网站建设什么软件vaadin 10从一开始#xff0c;Vaadin就成为CUBA平台用户界面的基石和重要组成部分。 凭借其创新的方法#xff0c;它帮助CUBA将企业用户界面开发带到了一个非常有希望#xff08;当今是默认#xff09;的WEB领域。 Vaadin最令人兴奋的部分之一是整个开发都是同构的#xf… vaadin 10 从一开始Vaadin就成为CUBA平台用户界面的基石和重要组成部分。 凭借其创新的方法它帮助CUBA将企业用户界面开发带到了一个非常有希望当今是默认的WEB领域。 Vaadin最令人兴奋的部分之一是整个开发都是同构的并且主要使用Java完成从而避免了开发人员与相当不稳定且快速变化的前端世界进行交互。 如您所见Vaadin的重要部分之一是功能丰富的UI在Vaadin 8的情况下基于GWT小部件。 与现代Web UI套件相比即使在今天Vaadin小部件仍然属于最复杂和最先进的部件尤其是在企业需求方面。 首先我们讨论的是在典型的CUBA应用程序组件中大量使用的组件例如表网格组合框。 例如只要尝试找到带有Table的流行UI工具包即可提供拖放式列重新排序或动态列控件。 Vaadin的故事 CUBA平台使用Vaadin有着悠久的历史。 该平台为用户提供了从Vaadin 5到Vaadin 8的几乎无缝迁移。为了提供这种迁移我们必须在Vaadin之上构建并保持API。 此外我们扩展了一些组件甚至分叉框架本身为我们的客户提供独特的功能并注入所需的扩展点。 在服务器端平台提供数据绑定和数据感知组件这是通用UI的最重要功能。 为了加快开发速度并启用快速开发工具Studio我们引入了XML描述符-建立数据绑定UI的声明性方法 layout grid spacing true height 200 columns count 4 / rows row flex 1 label value Field 1 align MIDDLE_LEFT / textField height 100% / label value Field 2 align MIDDLE_LEFT / textField height 100% / /row row flex 2 label value Field 3 align MIDDLE_LEFT / textField height 100% / /row /rows /grid /layout Pure Vaadin: GridLayout tableHeader new GridLayout( 3 , 2 );     Label nameLabel new Label( Field 1 ); nameLabel.setWidth(lastnameWidth 2 * 6 , Unit.PIXELS); tableHeader.addComponent(nameLabel, 0 , 0 , 0 , 1 ); Label countryLabel new Label( Field 2 ); countryLabel.setWidth(countryWidth 2 * 6 , Unit.PIXELS); tableHeader.addComponent( new Label( Field 3 ), 1 , 0 ); Label bornLabel new Label( Field 4 ); bornLabel.setWidth(bornWidth 2 * 6 , Unit.PIXELS); tableHeader.addComponent(bornLabel, 2 , 0 , 2 , 1 ); tableHeader.addComponent(countryFilterBox, 1 , 1 );     // Put the header and table inside a vertical layout layout.addComponent(tableHeader); layout.addComponent(table);     // Adjust the table height a bit table.setPageLength(table.size()); 我们设法建立了自己的组件列表基于Vaadin原语 组表 表格以前是FieldGroup PickerField LookupPickerField 令牌表 MaskedField 建议字段 货币字段 话虽这么说CUBA在Vaadin框架之上提供了很多功能以使开发人员的生活更轻松并使开发达到更高的水平。 CUBA团队进行了繁重的工作以在更新基础的Vaadin框架时实现非常平稳字面上不可见的迁移。 新的挑战 定制和本地交互 GWT非常复杂创建UI窗口小部件是一个挑战性且耗时的过程。 经验丰富的开发人员肯定知道在通过本机平台进行人工抽象时您必须付出高昂的代价。 对于GWT我们必须与Java世界中的浏览器JS API进行交互。 响应式布局 即使对于企业界面对于不同屏幕尺寸的可调能力也已成为关键要求。 仅由于上述在本机平台上的额外抽象性使响应式UI很难。 尽管您可以使用CssLayout或特殊的加载项来创建响应式UI但是服务器端的标准布局和计算在这种情况下不能很好地发挥作用。 使用第三方库 Web的发展非常Swift有大量的Web软件包npm 1M在Vaadin 8应用程序中几乎没有用因为它不使用现代的前端工具和构建系统。 GWT开发陷入困境 在某个时候Google停止了GWT的积极开发。 这不仅与官方支持有关而且与生态系统有关。 Vaadin流 为了对前端生态系统更加开放Vaadin开始开发Vaadin框架的后续产品。 新方法的核心是Vaadin Flow 该技术为基于Web组件而不是GWT小部件的新UI层提供服务器端模型和基本数据绑定。 考虑下图 如您所见Vaadin已将基于GWT的客户端替换为基于本机Web技术的新客户端。 Vaadin成分 新的Vaadin 组件是Vaadin GWT小部件的后继产品。 它们是使用纯Web技术HTMLJavaScript和Polymer 2库从头开始构建的Web组件。 Web组件 最初Web组件是在大多数现代浏览器中实现的一组标准 自定义元素 影子大教堂 HTML模板 HTML导入- ES模块 长期以来Web组件非常有前途许多人包括我在内都将其视为React和Angular等框架的本地替代品这些框架也利用基于组件的方法。 但是随着时间的流逝很明显其中一些标准已被浏览器删除而某些标准则需要进行认真的改进。 如今从上面的列表中只有自定义元素和Shadow DOM仍用于Web应用程序开发中。 甚至从Chrome删除了HTML导入。 如今HTML模板看起来已经过时了例如新的Polymer方法 lit-html仅在幕后使用它们。 我们还尝试使用Web组件这是我们尝试在Polymer库之上构建以客户端为中心的UI的一部分。 在某个时候我们决定将工作转向基于React的方法因为Polymer尽管具有Web Component支持解决方案的勇敢使命但开发人员的经验很差生态系统很小即使已经存在了几年最后还是不清楚not recommended在新项目解决方案发布之时发布Polymer 3。 聚合物用户不得不等了将近一年直到lit-html和LitElement最终发布。 从我们的经验中得出的另一个观察结果是尽管受到use the Platform座右铭的拥护者的大力提倡但是在开发现代前端应用程序时仍然几乎不可能摆脱转译/捆绑的步骤。 尽管标准正在为所有浏览器采用困难的方法和解决API带来困难但社区创建了许多工具和库来解决相同的问题。 例如Shadow DOM的主要目的是封装CSS样式以免溢出到组件的本地DOM或从组件的本地DOM溢出。 这个主意很棒但是大多数浏览器都花了几年的时间幸好Edge迁移到了Chromium。 同时React生态系统由大量样式库实现这些样式库可以解决相同的任务甚至可以在没有Shadow DOM 严重 缺陷的情况下完成更多任务。 但是Web组件具有非常重要的独特功能它们是平台浏览器的一部分。 从理论上讲它们不受任何特定框架的约束是通用的可以在任何地方使用。 从这个角度来看这似乎是UI Kit或独立组件而不是应用程序的合理选择不仅由Vaadin做出而且例如由Ionic和SAP做出。 瓦丹14 基于Vaadin Flow的Vaadin 10已于2018年中期发布 。很明显UI套件缺少许多重要组件仅包含基本组件。 此外客户端构建管道还包括一个Bower依赖管理器–该工具已于2017年弃用并且与事实上的标准npm生态系统不相交。 因此我们将Vaadin 10发布视为实验性的并决定等到新技术变得更稳定为止。 在Vaadin 14 LTS 于 2019年8月到来之前共有3个主要版本其中包括对npm的高度支持和更强大的UI套件。 这敦促我们仔细观察并亲身体验Vaadin 14。 UI套件 即使没有深入研究代码库很明显与Vaadin 8小部件相比许多属性和行为也发生了变化。 通常这还不错但是对于CUBA这意味着在某些方面不会直接替换当前支持的功能/ API。 在完整性方面CUBA中仍然使用了一些缺少的核心组件 日历 树 双柱 某些以前免费的组件和功能成为Pro组件的一部分例如RichTextArea现在是Pro组件的一部分Vaadin Grid Pro中提供了Grid的编辑模式。 PickerField 作为评估过程的一部分我们为Vaadin 14重新实现了CUBA的PickerField组件 说到服务器端Vaadin Flow提供了惊人的功能可以使用Java API与客户端DOM元素事件等进行交互。 Vaadin组件随附了便捷的Java API Accordion accordion new Accordion(); ... accordion.open( 1 ); 非Vaadin组件没有此类API但是您仍然可以通过DOM API对任何元素使用通用方法 例子1 if (value null ) { getElement().removeProperty( value ); } else { getElement().setProperty( value , getStringRepresentation(value)); } 例子2 getElement().appendChild( new Element[]{Element.createText(text)}); 尽管服务器端非常漂亮和清晰但客户端却花了我们90的精力。 我们首先要提到的是核心Vaadin组件当前是由Polymer 2构建的。为了支持Vaadin 14的Polymer 3它们似乎已经自动转换了。 通常Polymer 2和Polymer 3具有相同的API这就是可能进行自动转换的原因但是导入和样式声明存在细微的差异。 另一个棘手的话题是样式和自定义由于Shadow DOM您根本无法将样式应用于随机元素仅适用于设计为可通过使用自定义CSS属性进行样式设置的元素。 Vaadin组件具有用于自定义的插槽Shadow DOM的另一个强大但复杂的部分。 它们非常适合简单的用例但是在尝试实现更高级的用例时您很快就会遇到限制。 因此在实现PickerField时我们将以复制粘贴样式和Vaadin组件的其他部分结束并在本机input元素之上构建该组件从vaadin导入的唯一可重用的东西是几个Mixins。 我们不怪Vaadin因为Vaadin尚未设计也不应该作为另一个UI套件的基础它只是表明对我们来说支持所有添加功能在客户端将需要大量工作我们为开发人员提供了很长一段时间。 当前应该以Polymer 3为基础的作品已经处于维护模式所有已知的开发人员都遇到Polymer2的缺陷。 最新消息 就在撰写本文时Vaadin宣布所有核心组件都将在TypeScript和LitElement上进行重写。 我们对这一决定持积极态度因为我们在TypeScript方面的丰富经验证实它可以避免JS中缺少静态类型所引起的大量错误有助于理解代码库的结构执行安全的重构等。 不过LitElement / lit-html看起来有点令人怀疑我们理解了这一选择因为它是Polymer的后继者并且利用了React发明的强大的声明式渲染view fstate方法。 但是它仍然是 很新 。 具有运行时与Stencil和Svetle之类的已编译方法不同。 为了同时支持基于聚合物和基于Lit的组件Vaadin应将两个库都交付给客户端。 IDE支持差。 有一些VS Code插件但是IntelliJ / WebStorm中不提供支持 这使得点亮的模板看起来真的很乱。 不是SSR –友好。 出现了许多新问题 LitElement TypeScript是否将取代当前基于Polymer 3的方法来开发应用程序前端 如果是那么类似React的渲染将如何与服务器端Java API一起工作 更新资料 Vaadin 15附带了客户端引导程序和TypeScript 支持 。 结论 Vaadin是一种独特的产品可为Java提供便利的Web开发。 Vaadin Flow带来了一种全新的客户端方法我们认为这很有希望。 但是组件集仍在不断发展并正在走向稳定。 我们可以肯定地说一件事由于全新的客户端我们将无法提供平滑的迁移路径以构建基于Vaadin Flow的新UI。 同样我们认为在客户端技术上开始在其之上进行所有CUBA组件的大规模迁移仍然有些模糊和不稳定。 我们决定将积极的开发推迟到新的Web组件集可用之前。 我们仍将密切关注Vaadin的发展并准备在其变得更加稳定后对其进行重新评估。 同时我们还试图提供一种替代的友好的客户端友好的方法来创建UI请参阅我们最近关于TypeScript SDK和React Client的博客文章。 翻译自: https://www.javacodegeeks.com/2020/01/vaadin-10-as-the-future-of-cuba-ui.htmlvaadin 10