Not ready yet.
联系我们,请拨打 400-657-6008 或点此预约技术顾问 联系我们,请拨打 400-657-6008 或点此预约技术顾问 联系我们,请拨打 400-657-6008 或点此预约技术顾问

新一代 JavaScript 控件 WijmoJS 发布 2018 v2 版本,提供全新的可视化设计器,在 Angular、React 和 Vue 中更加好用,增加了Web组件的互操作用法和 SASS 样式支持,极大的提升了产品的易用性。

WijmoJS 是用 TypeScript 编写的新一代 JavaScript/HTML5 控件集,秉承触控优先的设计理念,WijmoJS 在全球率先支持 AngularJS,同时支持 React、Vue 等前端框架,并提供性能卓越、零依赖的 FlexGrid 和图表等多个控件。

WijmoJS 灵活的 API 为用户提供易用、轻松的操作体验,全面满足开发所需,是构建企业应用程序的全套控件集,正在为微软 Dynamics 等项目使用。

全新的可视化设计器

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

VSCode设计器用于自定义Angular 框架下WijmoJS 组件

可视化在线设计器用于创建和自定义wijmoJS 控件

VSCode设计器

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

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

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

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

VSCode设计器

可视化在线设计器

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

可视化在线设计器

Web-based Wijmo Designer

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

支持 Angular 6 和 TypeScript 2.7

WijmoJS 已经全面支持Angular 6.0.0版。现阶段工作是将所有Demo示例升级到Angular V6,并将TypeScript版本升级到V2.7。

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

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

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

Wijmo Crypto Currency App

支持 Vue V2 的集成增强功能

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

支持 Vue V2 的集成增强功能

Child components in Vue.js

此外,还添加了 WjFlexGridDetail 等组件,并添加了一些新的示例。点击查看 Vue 2 AllComponents sample

WijmoJS 中的 Web Components

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

WijmoJS 中的Web Components

如果您不熟悉 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等)的示例正在开发中。(如有需要,请及时联系我们

SASS 支持的控件和主题

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

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

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

ES6 和 ESModule 支持

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

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

更新日志

  • 【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属性,该属性允许自定义从服务器- liTxt:返回的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 历史版本的新特性。