使用Npm来创建WijmoJS的Ionic的应用
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
概述
在本文中，我们将展示如何将 WijmoJS 与 NPM 和 Webpack 一起使用，来创建最流行的 基于 HTML5 的 JavaScript Web 应用程序。 本博客主要使用 WijmoJS+Ionic 来构建移动 应用程序。作为最流行的框架之一，Ionic 专注于应用程序的外观和用户界面交互。 它基 于 Angular，并使用 Cordova 提供对特定设备的本地功能的访问，包括传感器，数据，网 络状态等。
除了 WijmoJS 的标准 CSS，我们还可以添加其他样式来使我们的应用程序更美观。 打开 “app/app.scss”文件并添加以下代码：
// app/app.scss // /docs/theming/
// App Global Sass .App-panel { margin: 0 48pt; text-align: center; .wj-control { display: inline-block; width: 400px; height: 300px; vertical-align: top; } } .wj-flexgrid .wj-cell {
// import Wijmo components import { CollectionView } from 'wijmo/wijmo';
@Component({ selector: 'page-home', templateUrl: 'home.html'
}) export class HomePage { constructor(public navCtrl: NavController) { } data = this.getData(); getData() { var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = []; for (var i = 0; i < countries.length; i++) { data.push({ country: countries[i], sales: Math.random() * 10000, expenses: Math.random() * 5000, downloads: Math.round(Math.random() * 20000), }); } return new CollectionView(data); } }
// apply Wijmo license key import { setLicenseKey } from 'wijmo/wijmo'; setLicenseKey('your license goes here');
@NgModule({ declarations: [ MyApp, AboutPage, ContactPage, HomePage, TabsPage ], imports: [ BrowserModule, IonicModule.forRoot(MyApp),
padding: 8px; text-align: left; }
第 6 步,在浏览器中运行
按 ctrl + S 保存所有文件中的更改并切换回浏览器以查看结果：
由于表格和图表绑定到同一个 CollectionView，因此对表格中的数据所做的任何更改都会 自动反映在图表中。例如，您可以单击列标题对数据进行排序或使用键盘编辑一些值。
import { StatusBar } from '@ionic-native/status-bar'; import { SplashScreen } from '@ionic-native/splash-screen';
// import Wijmo modules import { WjGridModule } from 'wijmo/wijmo.angular2.grid'; import { WjChartModule } from 'wijmo/wijmo.angular2.chart';
将“node_modules \ wijmo \ styles \ wijmo.css”文件复制到应用程序的“src / assets / css” 文件夹中即可。
打开应用程序的“src / index.html”文件并添加以下行：
<!-- src/index.html --> <link href="build/main.css" rel="stylesheet"> <link href="assets/css/wijmo.css" rel="stylesheet" 模块
打开“src / app / app.module.ts”文件，为网格和图表添加 WijmoJS 模块：
// src/app/app.module.ts import { NgModule, ErrorHandler } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular'; import { MyApp } from './ponent'; import { AboutPage } from '../pages/about/about'; import { ContactPage } from '../pages/contact/contact'; import { HomePage } from '../pages/home/home'; import { TabsPage } from '../pages/tabs/tabs';
<!-- src/pages/page/home.html --> <ion-header> <ion-navbar> <ion-title>Home</ion-title> </ion-navbar> </ion-header>
<ion-content padding> <h2>Welcome to Wijmo in Ionic!</h2> <p> This starter project comes with simple tabs-based layout for apps that are going to primarily use a Tabbed UI. </p> <p> Take a look at the <code>src/pages/</code> directory … </p> <h4>Here are some Wijmo controls to help you get started:</h4> <div class="App-panel">
首先打开“src / pages / home / home.ts”文件，并给“HomePage”组件一些控件数据：
// src/pages/home/home.ts import { Component } from '@angular/core'; import { NavController } from 'ionic-angular';
<wj-flex-grid [itemsSource]="data"> </wj-flex-grid> <wj-flex-chart [itemsSource]="data" [bindingX]="'country'"> <wj-flex-chart-series [binding]="'sales'" [name]="'Sales'"> </wj-flex-chart-series> <wj-flex-chart-series [binding]="'expenses'" [name]="'Expenses'"> </wj-flex-chart-series> <wj-flex-chart-series [binding]="'downloads'" [name]="'Downloads'"> </wj-flex-chart-series> </wj-flex-chart> </div> </ion-content>
注意 getData 返回一个 CollectionView 而不是一个常规数组。CollectionView 类支持排 序，筛选，分组，货币和通知。在这个例子中，我们将它用作网格和图表的数据源。
第 4 步，将 Ionic 控件添加到应用程序中
要将表格和图表添加到应用程序，请编辑“src / pages / home /home.html”文件，如下所 示：
请注意，代码中使用的 wj-flex-grid，wj-flex-chart 和 wj-flex-chart-series 指令，是从表格 和图表模块导入的。
第 5 步，更新样式表
首先，我们需要添加包含所有 WijmoJS 控件的 CSS 样式文件 - “wijmo.css”。 有几种方法 可以将自定义 css 文件添加到 Ionic 构建过程中。 在这个例子中，我们将使用最简单的一 个：
WjGridModule, WjChartModule ], … }) export class AppModule {}
本段代码除了导入我们想要的 WijmoJS 模块外，还会自动匹配 WijmoJS 许可证密钥，并 从应用程序中删除水印。如果您没有许可证密钥，则可以跳过此步骤。
第 3 步，向控件添加数据
总结
1.
将 WijmoJS 集成到现代 JavaScript 应用程序中只需要使用 NPM 进行安装并从库中 导入所需的组件即可。
2. 使用 WijmoJS 能够确保在不同的框架中使用完全相同的 UI 组件，让您轻松地使用 两个或更多框架，或者在未来随意切换框架。
• • • •
安装适当的 CLI（命令行界面实用程序）以生成，运行，维护和部署应用程序。 使用 CLI 创建应用程序。 使用 NPM 将 WijmoJS 添加到应用程序。 导入您要使用的组件并添加适当的标记。
具体步骤如下：
第 1 步，创建一个新的 Ionic 应用程序
按照以下步骤创建一个新的 Ionic 应用程序，启动并运行：
本文中我们不会详细介绍 NPM，Webpack 或 Ionic 本身。这些工具都非常受欢迎，并且 有完整的文档记录，您可以阅读关于这些框架的电子书，以获得良好的概述。在这里，我 们将专注于如何将 WijmoJS 添加到用 Ionic 编写的简单应用程序中。
在所有框架中创建和维护应用程序的基本步骤都是类似的：
在本文中，我们将展示如何将 WijmoJS 与 NPM 和 Webpack 一起使用，来创建最流行的 基于 HTML5 的 JavaScript Web 应用程序。 本博客主要使用 WijmoJS+Ionic 来构建移动 应用程序。作为最流行的框架之一，Ionic 专注于应用程序的外观和用户界面交互。 它基 于 Angular，并使用 Cordova 提供对特定设备的本地功能的访问，包括传感器，数据，网 络状态等。
除了 WijmoJS 的标准 CSS，我们还可以添加其他样式来使我们的应用程序更美观。 打开 “app/app.scss”文件并添加以下代码：
// app/app.scss // /docs/theming/
// App Global Sass .App-panel { margin: 0 48pt; text-align: center; .wj-control { display: inline-block; width: 400px; height: 300px; vertical-align: top; } } .wj-flexgrid .wj-cell {
// import Wijmo components import { CollectionView } from 'wijmo/wijmo';
@Component({ selector: 'page-home', templateUrl: 'home.html'
}) export class HomePage { constructor(public navCtrl: NavController) { } data = this.getData(); getData() { var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = []; for (var i = 0; i < countries.length; i++) { data.push({ country: countries[i], sales: Math.random() * 10000, expenses: Math.random() * 5000, downloads: Math.round(Math.random() * 20000), }); } return new CollectionView(data); } }
// apply Wijmo license key import { setLicenseKey } from 'wijmo/wijmo'; setLicenseKey('your license goes here');
@NgModule({ declarations: [ MyApp, AboutPage, ContactPage, HomePage, TabsPage ], imports: [ BrowserModule, IonicModule.forRoot(MyApp),
padding: 8px; text-align: left; }
第 6 步,在浏览器中运行
按 ctrl + S 保存所有文件中的更改并切换回浏览器以查看结果：
由于表格和图表绑定到同一个 CollectionView，因此对表格中的数据所做的任何更改都会 自动反映在图表中。例如，您可以单击列标题对数据进行排序或使用键盘编辑一些值。
import { StatusBar } from '@ionic-native/status-bar'; import { SplashScreen } from '@ionic-native/splash-screen';
// import Wijmo modules import { WjGridModule } from 'wijmo/wijmo.angular2.grid'; import { WjChartModule } from 'wijmo/wijmo.angular2.chart';
将“node_modules \ wijmo \ styles \ wijmo.css”文件复制到应用程序的“src / assets / css” 文件夹中即可。
打开应用程序的“src / index.html”文件并添加以下行：
<!-- src/index.html --> <link href="build/main.css" rel="stylesheet"> <link href="assets/css/wijmo.css" rel="stylesheet" 模块
打开“src / app / app.module.ts”文件，为网格和图表添加 WijmoJS 模块：
// src/app/app.module.ts import { NgModule, ErrorHandler } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular'; import { MyApp } from './ponent'; import { AboutPage } from '../pages/about/about'; import { ContactPage } from '../pages/contact/contact'; import { HomePage } from '../pages/home/home'; import { TabsPage } from '../pages/tabs/tabs';
<!-- src/pages/page/home.html --> <ion-header> <ion-navbar> <ion-title>Home</ion-title> </ion-navbar> </ion-header>
<ion-content padding> <h2>Welcome to Wijmo in Ionic!</h2> <p> This starter project comes with simple tabs-based layout for apps that are going to primarily use a Tabbed UI. </p> <p> Take a look at the <code>src/pages/</code> directory … </p> <h4>Here are some Wijmo controls to help you get started:</h4> <div class="App-panel">
首先打开“src / pages / home / home.ts”文件，并给“HomePage”组件一些控件数据：
// src/pages/home/home.ts import { Component } from '@angular/core'; import { NavController } from 'ionic-angular';
<wj-flex-grid [itemsSource]="data"> </wj-flex-grid> <wj-flex-chart [itemsSource]="data" [bindingX]="'country'"> <wj-flex-chart-series [binding]="'sales'" [name]="'Sales'"> </wj-flex-chart-series> <wj-flex-chart-series [binding]="'expenses'" [name]="'Expenses'"> </wj-flex-chart-series> <wj-flex-chart-series [binding]="'downloads'" [name]="'Downloads'"> </wj-flex-chart-series> </wj-flex-chart> </div> </ion-content>
注意 getData 返回一个 CollectionView 而不是一个常规数组。CollectionView 类支持排 序，筛选，分组，货币和通知。在这个例子中，我们将它用作网格和图表的数据源。
第 4 步，将 Ionic 控件添加到应用程序中
要将表格和图表添加到应用程序，请编辑“src / pages / home /home.html”文件，如下所 示：
请注意，代码中使用的 wj-flex-grid，wj-flex-chart 和 wj-flex-chart-series 指令，是从表格 和图表模块导入的。
第 5 步，更新样式表
首先，我们需要添加包含所有 WijmoJS 控件的 CSS 样式文件 - “wijmo.css”。 有几种方法 可以将自定义 css 文件添加到 Ionic 构建过程中。 在这个例子中，我们将使用最简单的一 个：
WjGridModule, WjChartModule ], … }) export class AppModule {}
本段代码除了导入我们想要的 WijmoJS 模块外，还会自动匹配 WijmoJS 许可证密钥，并 从应用程序中删除水印。如果您没有许可证密钥，则可以跳过此步骤。
第 3 步，向控件添加数据
总结
1.
将 WijmoJS 集成到现代 JavaScript 应用程序中只需要使用 NPM 进行安装并从库中 导入所需的组件即可。
2. 使用 WijmoJS 能够确保在不同的框架中使用完全相同的 UI 组件，让您轻松地使用 两个或更多框架，或者在未来随意切换框架。
• • • •
安装适当的 CLI（命令行界面实用程序）以生成，运行，维护和部署应用程序。 使用 CLI 创建应用程序。 使用 NPM 将 WijmoJS 添加到应用程序。 导入您要使用的组件并添加适当的标记。
具体步骤如下：
第 1 步，创建一个新的 Ionic 应用程序
按照以下步骤创建一个新的 Ionic 应用程序，启动并运行：
本文中我们不会详细介绍 NPM，Webpack 或 Ionic 本身。这些工具都非常受欢迎，并且 有完整的文档记录，您可以阅读关于这些框架的电子书，以获得良好的概述。在这里，我 们将专注于如何将 WijmoJS 添加到用 Ionic 编写的简单应用程序中。
在所有框架中创建和维护应用程序的基本步骤都是类似的：