Overview
What is Electron?
Electron is a framework for building cross-platform desktop applications using JavaScript, HTML, and CSS. You can use Electron with pure JavaScript or a JavaScript framework of your choice:
Build a simple Electron application
To create a basic Electron application, follow these steps:
git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm startYou should see the Hello World application shown below:
Add JavaScript UI control (WijmoJS) to the application
To add WijmoJS to the application, please install it first. At the command prompt, go to the app folder (electron-quick-start) and type:
npm install WijmoNext, use VS Code or your favorite editor to open the index.html file and add the following:
<!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>In this step, we added some styles and theme elements to the two WijmoJS controls. Next, open the "renderer.js" file and edit it as follows:
// 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);
}The implementation of this code requires three WijmoJS modules: WijmoJS Core, Grid and Chart. (It sets a WijmoJS license key, so the application will not display a watermark when it runs. If you do not have a license key, skip this step, the application will still run, but the watermark element will be displayed)
If you have installed a license key before then, you do not need a specific domain. The WijmoJS electronic application will run from a file or local host protocol, so any valid WijmoJS key will work regardless of the domain used to generate it.
The last step is to create WijmoJS controls and bind them to the data source. In this example, the grid and chart are bound to the same data source.
Run Electron application
Run the app as before!
npm startThis time you will see this:
Because tables and charts are bound to the same data, any changes you make to the grid (such as editing cells or sorting columns) are automatically applied to the chart.
Now, please download WijmoJS and enjoy the Electron application of WijmoJS JavaScript control.
