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

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

概述

What is Electron?

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

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

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

git clone 
cd electron-quick-start
npm install
npm start

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

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

將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=
          rel="stylesheet"/>
    <link href=
          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 Wijmovar 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 keyvar key = 'GrapeCity-Internal-Use-Only,…';wjCore.setLicenseKey(key);// create the controlsvar 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 datafunction 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

這次你會看到這個：

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

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

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

關於 ：

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

關於葡萄城：

賦能開發者！葡萄城公司成立於 1980 年，是全球領先的集開發工具、商業智慧解決方案、管理系統設計工具於一身的軟體和服務提供商。西安葡萄城是其在中國的分支機構，面向全球市場提供軟體研發服務，併為中國企業的資訊化提供國際先進的開發工具、軟體和研發諮詢服務。葡萄城的控制元件和軟體產品在國內外屢獲殊榮，在全球被數十萬家企業、學校和政府機構廣泛應用。


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/28298702/viewspace-2218510/，如需轉載，請註明出處，否則將追究法律責任。

相關文章