Shulou(Shulou.com)06/03 Report--

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 with the JavaScript framework of your choice:

React

Angular

Vue

Build a simple Electron application

To create a basic Electron application, follow these steps:

Git clone https://github.com/electron/electron-quick-startcd electron-quick-startnpm installnpm start

You should see the Hello World application as follows:

Add a JavaScript UI control (WijmoJS) to the application

To add WijmoJS to your application, install it first. At the command prompt, go to the app folder (electron-quick-start) and type:

Npm install Wijmo

Next, open the index.html file using VS Code or your favorite editor and add the following:

Hello World! .app-panel {margin: 0 48pt;}. App-panel. Wj-control {display: inline-block; vertical-align: top; width: 400px; height: 300px;} Hello World!

We are using Node.js [xss_clean] (process.versions.node), Chromium [xss_clean] (process.versions.chrome), and Electron [xss_clean] (process.versions.electron).

/ / You can also require other files to run in this process require ('. / renderer.js')

In this step, we added some style and theme elements for 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 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 这次你会看到这个：

Because tables and charts are bound to the same data, any changes you make to the grid, such as editing cells or sorting, are automatically applied to the chart.

Now, download WijmoJS and enjoy the Electron application of the WijmoJS JavaScript control.

About WijmoJS:

As fast as lightning, touch first. WijmoJS, a pure front-end control set, provides a more flexible operation experience for your enterprise applications. It takes the lead in supporting AngularJS in the world, and many controls, such as FlexGrid and financial charts with excellent and zero dependence, provide you with an easy-to-use and easy operation experience to fully meet your development needs.

About the city of grapes:

Empowered developer! Founded in 1980, Grape City is the world's leading software and service provider integrating development tools, business intelligence solutions, and management system design tools. Xi'an Grape City is its branch in China, providing software research and development services to the global market, and providing international advanced development tools, software and R & D consulting services for the informatization of Chinese enterprises. Grape City's controls and software products have won many awards at home and abroad, and have been widely used by hundreds of thousands of enterprises, schools and government agencies around the world.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.