向应用程序中添加对 Wijmo 5 的引用

发布时间:2017/02/23 00:02 发布者:alice

返回博客中心

为了在应用程序中使用 Wijmo 5,通过添加几个引用至 HTML 页面即可。

 

一个 Wijmo 5 应用程序所依赖的最小的文件集如下:

  • wijmo.js: 包含 Wijmo 5 的基础架构,包括: GlobalizeEventControl, 以及 CollectionView 类。
  • wijmo.css: 包含全部 Wijmo 5 控件样式的 CSS 规则。

除此之外,还需要添加一个或多个的额外文件,取决于您需要用到哪一个组件:

  • wijmo.grid.js: 包含 FlexGrid 控件。
  • wijmo.chart.js: 包含 FlexChart 以及 FlexPie 控件。
  • wijmo.input.js: 包含若干输入类控件,包括 ComboBoxAutoCompleteInputDateInputTimeInputNumberInputMaskListBoxMenu, 以及 Calendar 控件。
  • wijmo.gauge.js: 包含一些仪表盘控件,包括 LinearGaugeRadialGauge, 以及 BulletGraph
  • angular.js: 谷歌的 AngularJS 框架,是所有 AngularJS 应用程序所必须的依赖项。
  • wijmo.angular.js: 包含允许您直接在标记语言中使用 Wijmo 5 控件的 AngularJS 指令。
  • wijmo.culture.[CultureName].js: 包含支持特定文化的文件,用做开发 支持美国英语之外语言的应用程序。
  • wijmo.theme.[ThemeName].css: 包含用作自定义 Wijmo 5 控件外观的 CSS 规则。

对于引用文件的实际位置,您可以有两种选择。您既可以将 Wijmo 下载到本地,并复制所必须的文件到您的 应用程序内合适的文件夹,也可以引用托管在云上的 Wijmo 文件,位于我们的内容分发网络(CDN)。 以下章节演示了一些示例。

将 Wijmo 在本地部署

下载 Wijmo 文件并将其复制到您应用程序所在的某个文件夹内。 假设您将 Wijmo 脚本文件放置在一个叫做 “scripts/vendors” 的文件夹内,同时 css 文件位于 “styles” 文件夹, 则您可以向 HTML 页面添加以下代码行:

<!-- Wijmo 引用 (必需) -->
<script src="scripts/vendor/controls/wijmo.min.js" type="text/javascript"></script>
<link href="styles/wijmo.min.css" rel="stylesheet" type="text/css" />
<!-- Wijmo 控件(可选,包含您所需要的控件) -->
<script src="scripts/vendor/controls/wijmo.grid.min.js" type="text/javascript"></script>
<script src="scripts/vendor/controls/wijmo.chart.min.js" type="text/javascript"></script>
<script src="scripts/vendor/controls/wijmo.input.min.js" type="text/javascript"></script>
<script src="scripts/vendor/controls/wijmo.gauge.min.js" type="text/javascript"></script>
<!-- Wijmo 自定义主题(可选,包含您所喜爱的主题) -->
<link href="styles/themes/wijmo.theme.modern.min.css" rel="stylesheet" type="text/css" />
<!-- Wijmo 自定义 Culture(可选,包含您所希望支持的 Culture) -->
<script src="scripts/vendor/controls/cultures/wijmo.culture.ja.min.js " type="text/javascript"></script>
<!-- AngularJS 以及 Wijmo 指令(可选,AngularJS 应用程序支持) -->
<script src="scripts/vendor/angular.min.js" type="text/javascript"></script>
<script src="scripts/vendor/interop/angular/wijmo.angular.min.js" type="text/javascript"></script>

以 CDN 的方式部署 Wijmo

在这种场景下,您不需要下载任何内容。仅需要简单地将以下代码行添加到 HTML 页面:

<!-- Wijmo 引用 (必需) -->
<script src="http://cdn.wijmo.com/5.20142.15/controls/wijmo.min.js" type="text/javascript"></script>
<link href="http://cdn.wijmo.com/5.20142.15/styles/wijmo.min.css" rel="stylesheet" type="text/css" />
<!-- Wijmo 控件(可选,包含您所需要的控件) -->
<script src="http://cdn.wijmo.com/5.20142.15/controls/wijmo.grid.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/5.20142.15/controls/wijmo.chart.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/5.20142.15/controls/wijmo.input.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/5.20142.15/controls/wijmo.gauge.min.js" type="text/javascript"></script>
<!-- Wijmo 自定义主题(可选,包含您所喜爱的主题) -->
<link href="http://cdn.wijmo.com/5.20142.15/styles/themes/wijmo.theme.modern.min.css" rel="stylesheet" type="text/css" />
<!-- Wijmo 自定义 Culture(可选,包含您所希望支持的 Culture) -->
<script src="http://cdn.wijmo.com/5.20142.15/controls/cultures/wijmo.culture.ja.min.js " type="text/javascript"></script>
<!-- AngularJS 以及 Wijmo 指令(可选,AngularJS 应用程序支持) -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/5.20142.15/interop/angular/wijmo.angular.min.js" type="text/javascript"></script>
 

CDN 上部署的版本将会在屏幕右下角显示 Wijmo 5 水印元素。 如果您不希望显示该水印,则您必须像上面提到的那样,通过本地部署的方式使用 Wijmo。

注意:引用的添加顺序非常重要。 wijmo.js 模块必须是第一个出现,之后是控件模块,控件扩展, 然后 wijmo.angular 模块应当包含在最后。

 

如果你对Wijmo5感兴趣,可以到如下链接下载:

/download/?pid=54

更多资源:

Wijmo中文官网:/developer/wijmojs

Wijmo5在线示例:/developer/wijmojscore

Wijmo5产品文档:/developer/wijmojscore

如果依然有问题,可以到我们的官方产品论坛发帖咨询:http://gcdn.grapecity.com.cn/showforum-140.html

 

更多文章请参考Wijmo5技术文章汇总


关于葡萄城

赋能开发者!葡萄城是专业的集开发工具、商业智能解决方案、低代码开发平台于一身的软件和服务提供商,为超过 75% 的全球财富 500 强企业提供服务。葡萄城专注控件软件领域30年,希望通过模块化的开发控件、灵活的低代码应用开发平台等一系列开发工具、解决方案和服务,帮助开发者快速响应复杂多变的业务需求,最大程度地发挥开发者的才智和潜能,让开发者的 IT 人生更从容更美好。

了解详情,请访问葡萄城官网