What is Electron?
Electron is a framework for building cross-platform desktop apps using JavaScript, HTML, and CSS. You can use Electron with pure JavaScript or with the JavaScript framework of your choice:
This post shows how you can use Wijmo in Electron apps without a framework. For details on using Wijmo with popular JavaScript frameworks, please see our Building web apps with Wijmo, NPM, Webpack, and JavaScript frameworks blog series.
Building a Simple Electron App
To create the basic Electron app, follow these steps:
git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start
You should see a Hello World application that looks like this:
Adding JavaScript UI Controls to the App
To add Wijmo to the app, start by installing it. From a command prompt, navigate to the app folder (electron-quick-start) and type:
npm install Wijmo
Next, open the index.html file using VS Code or your editor of choice, 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 host elements for two Wijmo 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 code starts by requiring three Wijmo modules: Core, Grid, and Chart. It sets the Wijmo license key, so the application won’t show a watermark when it runs. If you don’t have a license key, skip this step. The application will run, but will show a watermark element.
If you do have a license key, it’s worth pointing out that it does not need a specific domain. Electron apps run from a file or localhost protocol, so any valid Wijmo key will work regardless of the domain used to generate it.
The final step is to create the Wijmo controls and bind them to some data. In this example, the JavaScript DataGrid and chart are bound to the same data source.
Running the Electron App
Run the app as you did before:
npm start
This time you will see this:
Because the grid and the chart are bound to the same data, any changes you make to the grid (like editing a cell or sorting a column) will be applied to the chart automatically.
There you have it! An Electron app using Wijmo JavaScript controls.
Enjoy!
Bernardo de Castilho