The HTML file can either be local or remote. The window instance has a loadUrl() method, allowing us to load the contents of an actual HTML file in the current window.It takes an object as a single argument, allowing us to define various settings, amongst which the default width and height of the window.We create a new window by creating a new instance of the BrowserWindow object.MainWindow.loadUrl('file://' + _dirname + '/windows/main/main.html') At this point, we can instantiate the main window of our app: var mainWindow = null When the app is actually started, it fires a ready event, which we can bind to. To define the Main Process for our app, we will open src/app.js and include the app module to start the app, and the browser-window module to create the various windows of our app (both part of the Electron core), as such: var app = require('app'),īrowserWindow = require('browser-window') Each window creates its own Renderer Process.įor code clarity, a separate file should be used for each Renderer Process. The Renderer Process: The controller for a given window in our application.Typically, this file declares the various windows of the app, and can optionally be used to define global event listeners using Electron’s IPC module. The Main Process: The entry point of our application, the file that will be executed whenever we run the app.Understanding Electron ProcessesĮlectron distinguishes between two types of processes: We will install the necessary packages later on in this tutorial. Next, we will navigate to the src/ folder in our terminal and create the package.json and bower.json files for our app: $ npm init src/app.js will be the entry point of our application. dist/ will contain the generated distribution files. cache/ will be used to download the Electron binaries when building the app. Let’s assume the following basic folder structure: my-app To test the installation, type electron -h and it should display the version of the Electron CLI.Īt the time this article was written, the version of Electron was 0.31.2. To install the Electron CLI, we can type the following command in our terminal: $ npm install -g electron-prebuilt This process involves copying the Electron binaries, and therefore it makes little to no sense to manually install it in our application’s path. We will learn later how to package our application for distribution using Gulp. I recommend installing it globally, so that way we do not have to do it over and over again for every app we develop. We can install it globally and use it as a CLI, or install it locally in our application’s path. They are familiar with Node.js, Angular.js and MongoDB-like query syntax.įirst things first, we will need to get the Electron binaries in order to test our app locally.The reader has Node.js and Bower installed on their machine.The full source code for this application is available here. In this tutorial, we will build a simple password keychain application using Electron, Angular.js and Loki.js, a lightweight and in-memory database with a familiar syntax for MongoDB developers.
0 Comments
Leave a Reply. |