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

新一代 JavaScript 控件 WijmoJS 发布 2018 v1 版本,进一步增强产品功能,并支持在 Npm 上的安装和发布,极大的提升了产品的易用性。

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

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

引入新的 License 许可机制,提高用户程序的安全性

为了保护用户所发布程序的安全性,WijmoJS 实施了部署加密,以防止您的源码被窃取。用户只需要在购买的时候提交需要部署的域名信息,葡萄城技术团队会将生成好的授权密钥一并发送给您,用户部署到服务器时, 需要为使用 WijmoJS 的应用程序生成部署授权密钥,以便正常使用 WijmoJS 控件,并且保护用户产品的版权。您还可以将密钥应用到您的系统中,用来实施产品加密。

WijmoJS 在本地主机上(localhost)不需要应用密钥,因此您的开发过程将不会中断。 您只需在将应用程序部署到服务器时生成并应用密钥。

如果您在没有分配密钥的情况下部署 WijmoJS 应用程序,则会看到以下弹出窗口:

新的 License 许可机制

在您的产品或者项目中使用 WijmoJS 需要以下几个步骤:

  • Step1:购买 WijmoJS 产品
  • Step2:发给您需要授权的域名给我们,获取部署授权密钥
  • Step3:在您的产品或者项目中使用我们生成的部署授权,方法如下:

Example:

Wijmo.setlicenseKey(key);

注意:我们过去发布了两个版本的 WijmoJS,一个是用于评估试用,一个用于正式开发。 我们现在只需一个版本就可以可以运行在两种模式下(试用或正式开发),所以在开发时不再需要替换 WijmoJS 文件。

WijmoJS 支持在 Npm 上发布,减少您的系统维护时间和跟踪依赖程度

WijmoJS 在 Npm 上发布

WijmoJS 之前一直有发布 NpmImages。 所有的 Angular v5 的 demo 都使用安装 NpmImage 来作为 WijmoJS 的模块,此外还有一种方式是教您从本地文件系统安装 WijmoJS。 目前的好消息就是,如果您使用了这两种模式中的一种,则可以轻松转移到 NPM。

唯一需要更改的是去除 package.json 中指向我们的服务器的自定义 URL,并添加要使用的特定版本的 WijmoJS:

Old (hosted):

"dependencies":{
"@angular/common":"^5.0.0",
...
"Wijmo":"http://prerelease.componentone.com/Wijmo5/npm-images/C1Wijmo-Enterprise-Eval-CommonJs-5.20173.409.tgz",
"zone.js":"^0.8.18"
},

Old (local):

"dependencies":{
"@angular/common":"^5.0.0",
...
"Wijmo":" ../Wijmo_download/NpmImages/Wijmo-commonjs-min",
"zone.js":"^0.8.18"
},

New:

"dependencies":{
"@angular/common":"^5.0.0",
...
"Wijmo":"5.20181.450",
"zone.js":"^0.8.18"
},

安装 WijmoJS 的 npm 命令如下:

npm install Wijmo
@import 语句也是一样的:
import * as wjcGrid from 'Wijmo/Wijmo.grid';
这就是新版本的 WijmoJS,希望您能接受 WijmoJS 对于目前主流 web app 开发框架的更新。

关于用 npm 生成一个 WijmoJS 的 web app 博客教程

新控件:智能的 TabPanel 选项卡控件

根据 WijmoJS 用户反馈,新增选项卡控件,使用户可以在不同选项之间进行切换。

新的 TabPanel 控件

WijmoJS 的 TabPanel 控件最大的优势是其高度智能化:在切换标签时自动刷新 WijmoJS 控件。 之前,由于控件在呈现时需要在屏幕上可见(用于计算尺寸),因此其他选项卡控件会强制您手动刷新控件。 而现在,对于使用 WijmoJS TabPanel 控件的客户来说,它将自动完成刷新任务,优化了显示风格。

此外,我们从所有示例中删除了 Bootstrap 选项卡,并从所有示例中完全删除了 jQuery,从此你将不再需要依赖任何文件库。

使用 WijmoJS 添加无依赖关系的 JavaScript TabPanel 控件博客教程

OLAP 中的 Microsoft SSAS Cube 支持

WijmoJS OLAP 功能更强大,因为它可以直接连接到 Microsoft SSAS Cubes。 以前,WijmoJS OLAP 可以处理客户端聚合,因此它不需要服务器。 我们也有一个服务器端聚合的选项,但它需要安装一个定制的 DataEngine。

OLAP 中的 Microsoft SSAS Cube 支持

而现在,WijmoJS OLAP 可以直接与 SSAS Cubes 进行对话。 这对于那些拥有现有 SSAS 多维数据集并希望创建直接绑定到多维数据集的 PivotGrid(和数据透视图)的用户非常有用。

此功能要求您在 SSAS 多维数据集中配置一些内容,以确保可以通过 AJAX 请求访问它。 阅读我们的博客,了解如何设置 WijmoJS OLAP 和 SSAS 多维数据集。

Olap 集成 SSAS 的博客教程

ReportViewer 中的 ActiveReports 支持

WijmoJS 有了一个支持 ActiveReports 的现代客户端 ReportViewer 控件。 WijmoJS ReportViewer 是作为 TypeScript 中的一个控件编写的,并且内置了对 Angular,React,Vue 等的支持。 它也提供多种模块格式供模块加载器使用。 这款尖端的 ReportViewer 是对尖端报告引擎的补充。

ReportViewer 中的 ActiveReports 支持

FlexSheet Tables

WijmoJS 为 FlexSheet 添加了子表格支持。 FlexSheet 中的表格的行为与 Excel 类似; 您可以在工作表中选择一系列单元格并将它们转换为格式化的表格:

FlexSheet Tables

React 子组件支持

我们为具有复杂属性的控件添加了子组件支持:例如 FlexGrid Column 对象的 FlexGridColumn 和 Chart Series 对象的 FlexChartSeries。 这使得标记中的控件和绑定更加强大。

下面是一个 FlexGrid 的示例,其中列出了标记中声明的列:

<Wj.FlexGrid itemsSource={this.state.data}>
<Wj.FlexGridColumn header={this.state.countryHeader} binding="country" width="*" />
<Wj.FlexGridColumn header="Date" binding="date" />
<Wj.FlexGridColumn header="Revenue" binding="amount" format="n0" />
<Wj.FlexGridColumn header="Active" binding="active" />
</Wj.FlexGrid>

HTTPS CDN

展望未来,WijmoJS 的所有新版本都将发布到支持 HTTPS 的新 CDN。 HTTPS 正在成为托管几乎所有网络内容的标准,因此我们希望确保您可以使用 HTTPS 托管您的应用程序,并仍然使用 WijmoJS。 它还使 WijmoJS 更易于在 jsfiddle,codepen,jsbin 等网站上使用。

WijmoJS CDN 的新 URL 如下:

<!-- Wijmo references (required) -->
<script src="https://cdn.grapecity.com/Wijmo/5.20181.450/controls/Wijmo.min.js"></script>
<link href="https://cdn.grapecity.com/Wijmo/5.20181.450/styles/Wijmo.min.css" rel="stylesheet"/>
<!-- Wijmo controls (optional, include the controls you need) -->
<script src="https://cdn.grapecity.com/Wijmo/5.20181.450/controls/Wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/Wijmo/5.20181.450/controls/Wijmo.chart.min.js"></script>
<script src="https://cdn.grapecity.com/Wijmo/5.20181.450/controls/Wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/Wijmo/5.20181.450/controls/Wijmo.gauge.min.js"></script>

我们还承载了最新版本,每个正式版本都会更新:

<script src="https://cdn.grapecity.com/Wijmo/5.latest/controls/Wijmo.min.js"></script>
<link href="https://cdn.grapecity.com/Wijmo/5.latest/styles/Wijmo.min.css" rel="stylesheet"/>
<!-- Wijmo controls (optional, include the controls you need) -->
<script src="https://cdn.grapecity.com/Wijmo/5.latest/controls/Wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/Wijmo/5.latest/controls/Wijmo.chart.min.js"></script>
<script src="https://cdn.grapecity.com/Wijmo/5.latest/controls/Wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/Wijmo/5.latest/controls/Wijmo.gauge.min.js"></script>

辅助功能增强

我们致力于在此版本中提供辅助功能并增加更多增强功能。 我们改进了无障碍功能:

  • 分层 FlexGrid(带有 ARIA treegrid 属性)
  • 自动完成和组合框
  • FlexGridFilter 对话框

更新日志

  • 【许可】添加了一个 WijmoJS.setdistribution 密钥方法,可以启用单一构建部署,包括 npm。 如果分配密钥未设置,则 WijmoJS 以评估模式运行(带有水印)。 设置分配密钥(密钥提供给我们网站上的客户)导致 WijmoJS 以生产模式运行(无水印)。

  • 【npm】 WijmoJS 作为 'WijmoJS' 软件包发布到全球 npm 注册中心。

安装发布版本

> npm install Wijmo             // latest
> npm install Wijmo@5.20173.431 // specific version
安装 RC 版本
> npm install Wijmo@rc              // latest
> npm install Wijmo@5.20181.432-rc // specific version
安装每日构建版
> npm install Wijmo@nightly                             // latest
> npm install Wijmo@5.20173.431-nightly.d20180312.t0720 // specific
version (suffix denotes build date/time)

在线 npm 软件包以 CommonJS 格式提供 WijmoJS 模块。 与之前一样,替代模块格式在 WijmoJS 下载 zip 的 NpmImages 文件夹中可用。

  • 【npm】 WijmoJS npm 图像现在包含 CSS 样式和文化文件:
    'styles'子文件夹中的 Wijmo.css。 用法示例:import'Wijmo / style / Wijmo.css';
    主题 CSS 在'主题'子文件夹中。 用法示例:导入'Wijmo / themes / Wijmo.theme.dark.css';
    培养 js 文件在'文化'子文件夹中。 用法示例:import'Wijmo / cultures / Wijmo.culture.ja';

  • 【可访问性】改进了 FlexGrid,FlexGridFilter 和 ComboBox 组件上的 ARIA 支持。

  • 【Olap】添加了对将 PivotEngine 组件直接绑定到 SSAS 多维数据集的支持。 以前,绑定到 SSAS 多维数据集需要设置一个服务器和暴露多维数据集的 ComponentOne 数据引擎服务。 现在,您可以将 PivotEngine 直接绑定到 SSAS 多维数据集。

OLAP 和 SSAS Cube 博客教程

示例:

var ng = new Wijmo.olap.PivotEngine({
itemsSource:{
url:'http://ssrs.componentone.com/OLAP/msmdpump.dll',
cube:'Adventure Works'
}

  • 【ReportViewer】添加了对 GrapeCity ActiveReports 报告生成器的支持。 PureJS ReportViewer 示例已更新以演示新功能。

添加了一个提供标签导航的 Wijmo.nav.TabPanel 控件。 这个新控件可以用来替换 bootstrap 选项卡,它需要 bootstrap.js 和 jQuery。

  • 【React】添加了子组件支持。
    React 添加了对代表某些控件属性的复杂对象的子组件的支持,例如 FlexGrid Column 对象的 FlexGridColumn 和 Chart Series 对象的 FlexChartSeries。

所以从现在开始,除此之外,还有如下的静态列定义:

<Wj.FlexGrid autoGenerateColumns={ false }
columns={[
{ header 'Country' , binding 'country' , width '*' },
{ header 'Date' , binding 'date' },
{ header 'Revenue' , binding 'amount' , format 'n0' },
{ header 'Active' , binding 'active' }
]}
itemsSource={ this.state.data } />
你可以使用下面的动态定义:
<Wj.FlexGrid itemsSource={this.state.data}>
<Wj.FlexGridColumn header={this.state.countryHeader} binding="country" width="*" />
<Wj.FlexGridColumn header="Date" binding="date" />
<Wj.FlexGridColumn header="Revenue" binding="amount" format="n0" />
<Wj.FlexGridColumn header="Active" binding="active" />
</Wj.FlexGrid>
这种改进使得动态更新数组属性项成为可能,例如一组网格列,其中'渲染'代码如下所示:
<Wj.FlexGrid itemsSource={this.state.data}>
{this.state.columnsDefinitions.map((colDef) => {
return <Wj.FlexGridColumn key={colDef.binding} binding={colDef.binding} />}
)}
</Wj.FlexGrid>

  • 【olap.PivotPanel】添加了对非多维数据源中分层字段结构的支持。

  • 【Excel】增加了对 FlexSheet 控件和 Wijmo.xlsx 模块中表格的支持。

  • 【FlexSheet】将 _filter 公开而不是私有属性。

  • 【FlexGrid】添加了支持单元格中多行文本的 Column.multiLine(和 Row.multiLine)功能。将 multiLine 设置为 true 将导致单元格在渲染单元格内容时使用嵌入换行符(\ n)。用户可以通过按 alt + Enter 键来输入换行符,就像在 Excel 中一样。

  • 【FlexGrid】添加了对 Column.textAlign ='justify-all' 的支持。这个新设置明确地设置了 CSS 属性 textAlignLas 和 textJustify,这对基于表意文字的语言比如中文和日文很重要。

  • 【全球化】增加了对日期格式中转义字符的支持,例如
    wijmo.Globalize.format(date,'\\ h h \\ m m'); // h 3 m 55

更新所有基于 Angular 和 React npm 模块的样本的配置,以支持符号链接模块安装。

添加了一个 FlexGrid.autoScroll 属性,用于确定当用户拖动控件边缘附近的行或列时,网格是否应自动滚动其内容。

WijmoJS - 历史版本

查看更多关于 WijmoJS 历史版本的新特性。