如何使用JavaScript UI控制元件（WijmoJS）構建Electron應用程式

77rou發表於2018-11-02
JavaScriptUI控制元件JS

概述

What is Electron?

Electron是一個使用JavaScript、HTML和CSS構建跨平臺桌面應用程式的框架。 您可以將Electron與純JavaScript或您選擇的JavaScript框架一起使用：

構建一個簡單的Electron應用程式

要建立基本的Electron應用程式，請按照下列步驟操作：

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start
複製程式碼

您應該看到如下所示的Hello World應用程式：

Electron apps in JavaScript

將JavaScript UI控制元件（WijmoJS）新增到應用程式

要將WijmoJS新增到應用程式，請先安裝它。在命令提示符下，進入app資料夾（electron-quick-start）並鍵入：

npm install Wijmo
複製程式碼

接下來，使用VS Code或您喜好的編輯器開啟index.html檔案，並新增以下內容：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>

    <!-- add Bootstrap and Wijmo css -->
    <link href=https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css
          rel="stylesheet"/>
    <link href=https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css
          rel="stylesheet"/>

    <!-- define the app styles -->
    <style>
      .app-panel {
        margin: 0 48pt;
      }
      .app-panel .wj-control {
        display: inline-block;
        vertical-align: top;
        width: 400px;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Hello World!</h1>
      <p>
        <!-- Node.js APIs are available in this renderer process. -->
        We are using Node.js
        <script>document.write(process.versions.node)</script>,
        Chromium <script>document.write(process.versions.chrome)</script>,
        and Electron
        <script>document.write(process.versions.electron)</script>.
      </p>

      <!--add Wijmo controls to the page -->
      <div class="app-panel">
        <div id="theGrid"></div>
        <div id="theChart"></div>
      </div>
    </div>
    <script>
      // You can also require other files to run in this process
      require('./renderer.js')
    </script>
  </body>
</html>
複製程式碼

在這一步中，我們為兩個WijmoJS控制元件新增了一些樣式和主題元素。接下來，開啟“renderer.js”檔案並按如下所示進行編輯：

// This file is required by the index.html file and will
// be executed in the renderer process for that window.
// All of the Node.js APIs are available in this process.

// import Wijmo
var wjCore = require('./node_modules/wijmo/wijmo.js');
var wjGrid = require('./node_modules/wijmo/wijmo.grid.js');
var wjChart = require('./node_modules/wijmo/wijmo.chart.js');

// set the Wijmo license key
var key = 'GrapeCity-Internal-Use-Only,…';
wjCore.setLicenseKey(key);

// create the controls
var theGrid = new wjGrid.FlexGrid('#theGrid', {
    itemsSource: getData()
});
var theChart = new wjChart.FlexChart('#theChart', {
    itemsSource: theGrid.itemsSource,
    bindingX: 'country',
    series: [
        { name: 'Sales', binding: 'sales' },
        { name: 'Expenses', binding: 'expenses' },
        { name: 'Downloads', binding: 'downloads' },
    ]
});

// get some random data
function 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 wjCore.CollectionView(data);
}
複製程式碼

實現這段程式碼首先需要三個WijmoJS模組：WijmoJS Core，Grid和Chart。 （它設定了WijmoJS許可證金鑰，因此應用程式在執行時不會顯示水印。如果您沒有許可證金鑰，請跳過此步驟，應用程式仍將執行，但會顯示水印元素）

如果您在此之前已經安裝了許可證金鑰，則不需要特定域。WijmoJS電子應用程式會從檔案或本地主機協議執行，因此任何有效的WijmoJS金鑰都將起作用，無論用於生成它的域是什麼。

最後一步是建立WijmoJS控制元件並將它們繫結到資料來源。 在此示例中，網格和圖表繫結到同一資料來源。

執行Electron應用程式

像以前一樣執行應用程式!

npm start
複製程式碼

這次你會看到這個：

Electron apps in JavaScript

由於表格和圖表繫結到相同的資料，因此您對網格所做的任何更改（如編輯單元格或排序列）都將自動應用於圖表。

現在，請下載WijmoJS，享用WijmoJS JavaScript控制元件的Electron應用程式吧。

WijmoJS | 下載試用

快如閃電，觸控優先。純前端控制元件集 WijmoJS，為您的企業應用提供更加靈活的操作體驗，在全球率先支援 AngularJS，並提供效能卓越、零依賴的 FlexGrid 和金融圖表等多個控制元件，為您提供易用、輕鬆的操作體驗，全面滿足開發所需。


相關文章