HTML5/JavaScript UI控件Wijmo Enterprise更新至v2018 v2
【下载WijmoJS 2018 v2】
WijmoJS是为企业应用程序开发而推出的一系列包含HTML5和JavaScript的开发控件。其中包含了金融图表、FlexSheet、先进的JavaScript控件(Wijmo 5)和经典的jQuery小部件(Wijmo 3)。无论您的应用程序是移动应用还是必须要支持IE6,Wijmo Enterprise均能满足您的需求。
新一代 JavaScript 控件 WijmoJS 发布 2018 v2 版本,提供全新的可视化设计器,在 Angular、React 和 Vue 中更加好用,增加了Web组件的互操作用法和 SASS 样式支持,极大的提升了产品的易用性。
秉承触控优先的设计理念,WijmoJS 在全球率先支持 AngularJS,同时支持 React、Vue 等前端框架,并提供性能卓越、零依赖的 FlexGrid 和图表等多个控件。WijmoJS 灵活的 API 为用户提供易用、轻松的操作体验,全面满足开发所需,是构建企业应用程序的全套控件集,正在为微软 Dynamics 等项目使用。
WijmoJS 2018 v2更新内容如下:
全新的可视化设计器
VSCode设计器
此设计器是 VSCode 的扩展。安装后,它会在每个 Angular 框架下的 WijmoJS 组件上方添加“Wijmo Designer …”操作。单击操作按钮后,它将打开一个设计界面,用于自定义该特定组件。开发人员可以实时更改属性和绑定事件,并将所做更改保存回 Angular 应用程序中。 要在 VSCode 中安装此扩展,请单击 VS Marketplace上Designer 设置中的“安装”按钮。 此外,您还可以在 VSCode 的扩展管理器中搜索“wijmo”并从那里安装。 确保安装后重新加载 VSCode。 然后打开一个使用 WijmoJS 控件的 Angular 应用程序并尝试启动设计器。

可视化在线设计器
此设计器是用于创建和自定义 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 应用程序。

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

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

WijmoJS Web组件实现当前状态的关键点:
- WijmoJS 控件的WijmoJS“顶级”Web组件(如表示 FlexGrid 控件的 wjc-flex-grid 组件)继承自相应的控件类。例如,WjcFlexGrid 组件类扩展了 FlexGrid 控件类。这也意味着当 WijmoJS 用于“Web组件模式”时,基础 WijmoJS 控件类扩展了 HTML 元素类。
- 与顶级组件互补的子组件,如定义 FlexGrid 列的 wjc-flex-grid-column 组件,作为它们所代表的 WijmoJS 类的包装器。子组件直接从 HTMLElementclass 继承,底层 WijmoJS 类实例可通过组件的特殊控件属性访问。
- 可以使用组件元素上的属性定义 WijmoJS 类属性。当属性值更改时,相应的 WijmoJS 类属性会相应更新。目前,更改类属性值不需要更改相应的属性值。
- JavaScript 代码可以使用本机 Element.addEventListener(’event’,handler)方法为 WijmoJS 控件事件订阅处理程序。
- WijmoJS 组件现在不使用 Shadow DOM。这将在互操作的未来版本中得到解决。最大的挑战是 WijmoJS 允许通过 CSS 对其控件的部件进行深度定制,而 Shadow DOM 的目标是防止它。有关 Shadow DOM 规范的新提议可以缓解此限制,我们正在密切关注这些更改。目前,WijmoJS Web组件及其部件可以使用全局 CSS 以与普通 WijmoJS 控件相同的方式进行自定义。
Web组件的最大好处是,可以在不同的框架中使用相同的组件,并从框架的附加功能(如属性,属性和事件绑定)中受益。
SASS 支持的控件和主题
WijmoJS 的控件样式(布局,默认样式)以前是用CSS编写的。最初,它很简单,但目前已经发展到难以管理的程度。因此,现在决定使用SASS和更好的方式来重写样式。
- 您可以轻松使用 SASS 文件来创建自己的主题风格。WijmoJS 还提供 SASS 文件供您使用和自定义。
- 您现在可以选择要包含在应用程序中的 SASS 模块。 例如,现在有一个仅包含核心模块(非企业)的 WijmoJS-Core 文件,它只是全部 CSS 文件的一小部分。您可以有选择地使用要包含的模块来真正优化 CSS 大小。
- WijmoJS 在 Web Component interop 中增加了对 Shadow DOM 的支持。
ES6 和 ESModule 支持
本次更新,增加了 ES6 版本的 WijmoJS 模块(测试版),你可以在 WijmoJS 安装包的 NpmImages 文件夹中找到它:
- wijmo-es2015-esm-min – ESM模块格式(ES6导入/导出语句)
- wijmo-es2015-commonjs-min – 采用CommonJS模块格式

标签:HTML5HTMLHTML5/JS
声明:本站部分文章及图片源自用户投稿,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!