概述

作为一款纯前端控件集,WijmoJS 秉承“快如闪电,触控优先”的设计理念,在提供优质服务和产品的同时,专注于企业应用开发,不断优化产品架构,与时俱进。除在全球率先支持 AngularJS外,现已全面应用于 ReactVuejs、TypeScript 、Ionic 等主流框架中。

近日,WijmoJS 2018V2 正式发布,提供 Web 设计器,可动态设计Web页面并生成代码,提供 SASS 支持,提升控件可访问性。

WijmoJS – Web设计器

目前为止,WijmoJS 纯前端控件集已经十分易于前端开发使用,但仍需要编写代码。WijmoJS 2018V2 宣布,这种方式将被彻底颠覆。我们现在拥有了用于创建和自定义WijmoJS控件的设计器,包含两个beta版本,一个是与Visual Studio Code完美融合的设计器、另一个则是在线Web设计器,提供实时预览和编辑页面属性的功能。

  • VSCode设计器:用于自定义Angular 框架下WijmoJS 组件
  • Web在线设计器,用于创建和自定义PureJS wijmoJS 控件

VSCode设计器

此设计器是VSCode的扩展。安装后,它会在每个Angular 框架下的WijmoJS组件上方添加“Wijmo Designer ...”操作。单击操作按钮后,它将打开一个设计界面,用于自定义该特定组件。开发人员可以实时更改属性和绑定事件,并将所做更改保存回 Angular应用程序中。

要在VSCode中安装此扩展,请单击VS Marketplace上Designer设置中的“安装”按钮。

此外,您还可以在VSCode的扩展管理器中搜索“wijmo”并从那里安装。

确保安装后重新加载VSCode。 然后打开一个使用WijmoJS 控件的Angular应用程序并尝试启动设计器。

VSCode Wijmo Designer

Web在线设计器

此设计器是用于创建和自定义WijmoJS控件的Web应用程序。 您可以在任何浏览器中运行此设计器。它允许您将控件添加到设计图面,然后根据自己的喜好自定义它们。完成后,您可以将生成的代码复制到您自己的应用程序中。

Web-based Wijmo Designer

Web-based Wijmo Designer

此设计器生成的代码是纯HTML和JavaScript。 生成的代码包括初始化控件所需的引用,宿主元素和JavaScript脚本。

SASS支持的控件和主题

我们的控件样式(布局,默认样式)以前是用CSS编写的。最初,它很简单,但目前已经发展到难以管理的程度。因此,我们决定使用SASS和更好的方式来重写我们的样式。

  • 您可以轻松使用我们的SASS文件来创建自己的主题风格。我们还提供SASS文件供您使用和自定义。
  • 您现在可以选择要包含在应用程序中的SASS模块。 例如,我们现在有一个仅包含核心模块(非企业)的WijmoJS-Core文件,它只是全部CSS文件的一小部分。您可以有选择地使用要包含的模块来真正优化CSS大小。
  • 我们在Web Component interop中增加了对 Shadow DOM的支持。

我们希望通过这些改进,为使用纯前端控件集WijmoJS开发的Web应用程序更易使用,更加轻盈。

新的React / Redux加密货币跟踪应用程序

我们为使用React和Redux的 WijmoJS 增加了加密货币跟踪应用程序,该应用程序是一个财务仪表板,可用于跟踪加密货币值,这些值是在用户开发的生产应用程序之后建模的。使用React / Redux的现代设计模式和各种WijmoJS 控件,可以帮助您更好地评估和开发 WijmoJS 应用程序。

Wijmo Crypto Currency App

Wijmo Crypto Currency App

支持Vue V2的集成增强功能

随着Vue的不断发展,我们正在改进我们的互操作用法。本次更新中为我们的Vue V2支持增加了很多不错的功能。比如,WijmoJS 子组件现在可以在动态场景中正确工作,例如v-for和v-if指令。

Child components in Vue.js

Child components in Vue.js

我们还添加了WjFlexGridDetail等组件,并添加了一些新的示例。

点击查看 Vue 2 AllComponents sample

ES6和ESModule支持

本次更新,增加了ES6版本的WijmoJS模块(测试版),你可以在WijmoJS 安装包的NpmImages文件夹中找到它:

  • wijmo-es2015-esm-min - ESM模块格式(ES6导入/导出语句)
  • wijmo-es2015-commonjs-min - 采用CommonJS模块格式

今年我们将继续研究和开发基于ES6 的支持。

WijmoJS 中的Web Components

WijmoJS 的 Web组件互操作的测试版已经推出,它将WijmoJS控件公开为Web组件,更具体地说是自定义元素。 WijmoJS Web组件允许您以声明方式将WijmoJS控件添加到HTML页面,并将其作为常用DOM元素进行操作,而无需使用任何其他框架。 某些不完全支持Web组件标准的浏览器可能需要一些额外的Polyfill 支持。

Web components in Wijmo JavaScript controls

如果您不熟悉Web组件,请参考这篇博客

WijmoJS Web组件实现当前状态的关键点:

  1. WijmoJS 控件的WijmoJS“顶级”Web组件(如表示FlexGrid控件的wjc-flex-grid组件)继承自相应的控件类。例如,WjcFlexGrid组件类扩展了FlexGrid控件类。这也意味着当WijmoJS 用于“Web组件模式”时,基础WijmoJS 控件类扩展了HTML 元素类
  2. 与顶级组件互补的子组件,如定义FlexGrid列的wjc-flex-grid-column组件,作为它们所代表的WijmoJS 类的包装器。子组件直接从HTMLElementclass继承,底层 WijmoJS 类实例可通过组件的特殊控件属性访问。
  3. 可以使用组件元素上的属性定义 WijmoJS 类属性。当属性值更改时,相应的 WijmoJS 类属性会相应更新。目前,更改类属性值不需要更改相应的属性值。
  4. JavaScript代码可以使用本机Element.addEventListener('event',handler)方法为WijmoJS控件事件订阅处理程序。
  5. WijmoJS 组件现在不使用Shadow DOM。这将在互操作的未来版本中得到解决。最大的挑战是 WijmoJS 允许通过CSS对其控件的部件进行深度定制,而Shadow DOM的目标是防止它。有关Shadow DOM规范的新提议可以缓解此限制,我们正在密切关注这些更改。目前,WijmoJS Web组件及其部件可以使用全局CSS以与普通WijmoJS控件相同的方式进行自定义。

Web组件的最大好处是,可以在不同的框架中使用相同的组件,并从框架的附加功能(如属性,属性和事件绑定)中受益。

目前,我们添加了Web Components In Angular示例,演示了如何在Angular应用程序中使用 WijmoJS Web组件。其他流行框架(如React,Vue,Polymer等)的示例正在开发中。(如有需要,请及时联系我们)

支持Angular 6和TypeScript 2.7

WijmoJS 已经全面支持Angular 6.0.0版。我们仍在努力将所有Demo示例升级到Angular V6,并将我们的TypeScript版本升级到V2.7。

新增的示例

更新日志

  • [WebComponents]添加了WebComponents互操作的Beta版本(wijmo.webcomponents.xxx.js模块)。 Samples \ TS \ WebComponents \ WebComponentsIntro示例说明了互操作的状态和用法。
  • [npm] WijmoJS作为'wijmo'包发布到全局npm注册表。
  • [WebComponents]添加了AllComponents示例,其中包括所有主要支持的组件。
  • 添加了基于Web的WijmoJS 在线设计器,使用类似Visual Studio的属性网格和设计界面,提供基于 Web 的WijmoJS Designer PureJS控件。
  • 添加了VSCode WijmoJS Designer扩展,使用类似Visual Studio的属性网格和设计界面。
  • Wijmo CSS文件现在可使用Sass实现。
  • [React / Redux]添加了React / Redux CryptoCurrencyTracking示例。
  • [ES6]版本462的WijmoJS ES6 npm图像(NpmImages中的wijmo-es2015-commonjs-min和wijmo-es2015-esm-min文件夹)被批准为发布版本。
  • [a11y]添加了一个wj-state-focus类选择器,它补充了以wj-state为中心的选择器。 wj-state-focus选择器获取具有焦点的WijmoJS控件。 wj-state-focused选择器获取包含焦点的所有WijmoJS控件。例如,如果嵌套了WijmoJS控件A,B和C,并且控件C包含活动元素,则.wj-state-focus将选择C,而.wj-state-focused将选择A,B和C. wj-state-focus选择器可用于在CSS中实现焦点轮廓。例如:
.wj-state-focus,
a:focus,
button:not(.wj-btn-default):focus,
input:not(.wj-form-control):focus,
input[type=checkbox]:focus {
    box-shadow: 0px 0px 17px 0px rgb(41,173,68);
}
  • [a11y]改进了Calendar,TreeView,InputDate和FlexGridFilter的可访问性。
  • [a11y]为FlexGrid本机编辑器元素添加了aria-required属性
  • [a11y]用按钮元素替换了按钮(更好的辅助功能,支持输入/空格键)
  • [a11y]用按钮元素(过滤器,细节,列表,折叠/展开)替换FlexGrid中的所有单元格按钮
  • [a11y]为DropDown,InputDateTime,InputNumber,Calendar,ColumnFilterEditor控件中的按钮添加了ARIA属性
  • [a11y]为ListBox,Calendar,TreeView中的选定项添加了aria-selected属性(如FlexGrid和TabPanel)
  • [a11y]清理了ComboBox ARIA属性
  • [a11y]在Calendar和TreeView控件中添加了漫游tabindex(更好的可访问性,如FlexGrid和TabPanel)
  • [a11y]在FlexGrid的ColumnCollecion和Column类中添加了'describedById'属性。这用于在列标题和过滤元素上设置aria-describedby属性。
  • [a11y]为FlexGridDetailProvider类添加了keyActionEnter属性。
  • 改进了FlexGrid.virtualizationThreshold以支持数组:[rowThreshold,columnThreshold] * [Vue2]添加了许多子组件,如各种图表系列。
  • [Vue2]子组件现在可以在动态场景中正确工作,例如v-for和v-if指令。
  • [Vue2]添加了WjFlexGridDetail组件。
  • [Vue2]添加了新示例。
  • 所有示例都使用httpS CDN引用。
  • OData示例现在使用httpS。
  • 使用WijmoJS Designer主题更新WijmoHelp。
  • 使用Sass相关主题更新文档。
  • 添加了Gauge.stackRanges属性,该属性使控件堆叠范围。 RadialGauge将它们显示为同心扇区,将LinearGauge显示为堆叠条。
  • 添加了FlexGrid.autoSearch属性,允许用户通过不可编辑的单元格搜索网格中的内容。
  • 打开下拉列表时优化的ComboBox性能。
  • 填充列表时优化ListBox性能。
  • 添加了ODataCollectionView.expand属性以允许检索相关实体(如在OData的\$ expand选项中)。
  • 添加了ODataCollectionView.jsonReviver属性,该属性允许自定义从服务器返回的JSON数据的解析过程。
  • 支持在FlexSheet的绑定工作表中插入/删除列。
  • 向PdfPageArea类添加了文档属性。
  • 向IFlexGridDrawSettings接口添加了drawDetailRows属性。
  • 向ReportViewer和PdfViewer控件添加了requestHeaders属性。
  • 向ReportViewer和PdfViewer控件添加了beforeSendRequest事件。
  • 为ReportViewer控件添加了参数属性。
  • 改进了CollectionView排序以处理变音符号(重音符号)。

重大更新

  • [NPM]“themes”文件夹现在是“styles”文件夹的子项。以前是“Styles”的同级目录。
  • 新的基于Sass的CSS文件包含一些比原始CSS更具体的规则,因此如果您有自定义CSS文件,则可能需要调整其规则。
  • 新的CSS文件有关于颜色,填充等的更一致的规则,因此您在升级时可能会看到一些小的更改。例如,我们在ListBox,FlexGrid,Calendar等中使项目填充一致。
  • 新的基于Sass的主题文件是自包含的,不需要您再将基本wijmo.css文件添加到页面。这意味着对包含主题控件的页面的HTTP请求减少了一个。这不是一个突破性的变化,而是一个提高性能的机会。
  • 将AutoComplete.isContentHtml属性的默认值从true更改为false。这不应该影响大多数应用程序,新的默认值可以防止非自愿的脚本/ html注入。如果它确实会影响您的应用程序,请将AutoComplete.isContentHtml属性设置为true,您将获得原始行为。

WijmoJS | 下载试用

快如闪电,触控优先。纯前端控件集 WijmoJS,为您的企业应用提供更加灵活的操作体验,在全球率先支持 AngularJS,并提供性能卓越、零依赖的 FlexGrid 和金融图表等多个控件,为您提供易用、轻松的操作体验,全面满足开发所需。

您对WijmoJS产品的任何技术问题,都有技术支持工程师提供1对1专业解答,点击此处即可发帖提问>>