用WijmoJS玩轉您的Web應用 —— Ionic

前言：

在本文中，咱們將着重介紹如何將WijmoJS與Ionic一塊兒使用，來建立一款移動端支持優先、快捷高效的應用程序。在以前的文章中，咱們已經介紹了使用WijmoJS與Angular、React、Vue三大框架結合搭建您的Web應用程序。這篇將是本系列的最後一篇文章。

什麼是Ionic？

Ionic是一個專一於用Web開發技術，基於HTML5建立相似於手機平臺原生應用的一個開發框架，它綁定了AngularJS和Sass。這個框架的目的是從web的角度開發手機應用，基於PhoneGap的編譯平臺，能夠實現編譯成各個平臺的應用程序。
使用Ionic不但能夠優化html、css和js的性能，構建高效的應用程序，並且還能夠用於構建Sass和AngularJS的優化。對於用以開發混合手機應用的項目來講，ionic是一個值得信賴的框架。

WijmoJS VS Ionic

Ionic專一於應用程序的外觀和用戶界面交互。它基於Angular，並使用Cordova提供對特定設備本地功能的訪問，包括傳感器，數據，網絡狀態等。
做爲一樣流行的前端框架之一，WijmoJS也一樣注重更靈活、更智能的用戶操做體驗。秉承「快如閃電，觸控優先」的設計理念，WijmoJS在提供優質服務和產品的同時，不斷優化產品架構，與時俱進。憑藉其先進的觸控設計、全面的 AngularJS 支持、靈活的 API 接口、輕鬆的操做體驗，WijmoJS可全面知足企業開發所需。
那麼，咱們如何將兩者結合，搭建出一款可完美融合全新一代移動框架的Web應用程序呢？本文會給你答案。

在全部框架中建立和維護應用程序的基本步驟都是相似的：

 安裝適當的CLI（命令行界面實用程序）以生成，運行，維護和部署應用程序。

 使用CLI建立應用程序。

 使用NPM將WijmoJS添加到應用程序。

 導入您要使用的組件並添加適當的標記。

具體步驟以下：

第1步，建立一個新的Ionic應用程序
按照如下步驟建立一個新的Ionic應用程序，啓動並運行：

第2步，添加WijmoJS模塊
打開「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 './app.component';
    import { AboutPage } from '../pages/about/about';
    import { ContactPage } from '../pages/contact/contact';
    import { HomePage } from '../pages/home/home';
    import { TabsPage } from '../pages/tabs/tabs';
    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';
    
    // 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),
        WjGridModule,
        WjChartModule
      ],
      …
    })
    export class AppModule {}

本段代碼除了導入咱們想要的WijmoJS模塊外，還會自動匹配WijmoJS許可證密鑰，並從應用程序中刪除水印。

第3步，向控件添加數據
首先打開「src / pages / home / home.ts」文件，並給「HomePage」組件一些控件數據：

// src/pages/home/home.ts
    import { Component } from '@angular/core';
    import { NavController } from 'ionic-angular';
    
    // 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);
      }
    }

注意getData返回一個CollectionView而不是一個常規數組。 CollectionView類支持排序，篩選，分組，貨幣和通知。 在這個例子中，咱們將它用做網格和圖表的數據源。

第4步，將Ionic控件添加到應用程序中
要將表格和圖表添加到應用程序，請編輯「src / pages / home / home.html」文件，以下所示：

<!-- src/pages/page/home.hmtl -->
    <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">
        <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>

請注意，代碼中使用的wj-flex-grid，wj-flex-chart和wj-flex-chart-series指令，是從表格和圖表模塊導入的。

第5步，更新樣式表
首先，咱們須要添加包含全部WijmoJS控件的CSS樣式文件 - 「wijmo.css」。 有幾種方法能夠將自定義css文件添加到Ionic構建過程當中。 在這個例子中，咱們將使用最簡單的一個：

將「node_modules wijmo styles wijmo.css」文件複製到應用程序的「src / assets / css」文件夾中便可。

打開應用程序的「src / index.html」文件並添加如下行：

<!-- src/index.hmtl -->
    <link href="build/main.css" rel="stylesheet">
    <link href="assets/css/wijmo.css" rel="stylesheet">

除了WijmoJS的標準CSS，咱們還能夠添加其餘樣式來使咱們的應用程序更美觀。 打開「app / app.scss」文件並添加如下代碼：

// app/app.scss
    // http://ionicframework.com/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 {
        padding: 8px;
        text-align: left;
    }

第6步,在瀏覽器中運行
按ctrl + S保存全部文件中的更改並切換回瀏覽器以查看結果：

因爲表格和圖表綁定到同一個CollectionView，所以對錶格中的數據所作的任何更改都會自動反映在圖表中。 例如，您能夠單擊列標題對數據進行排序或使用鍵盤編輯一些值。

總結

1. 將WijmoJS集成到現代JavaScript應用程序中只須要使用NPM進行安裝並從庫中導入所需的組件便可。
2. 使用WijmoJS可以確保在不一樣的框架中使用徹底相同的UI組件，讓您輕鬆地使用兩個或多個框架，或者在將來隨意切換框架。

擴展閱讀

《用 WijmoJS 玩轉您的 Web 應用 — Angular6》
《用 WijmoJS 玩轉您的 Web 應用 — React》
《用 WijmoJS 玩轉您的 Web 應用 — Vue》

近期活動

【問卷調查】揚帆萬里，因您前行 --- ComponentOne 使用反饋意見徵集