More Related Content
Similar to Develop Desktop Apps with Electron (20)
More from Eueung Mulyana (20)
Develop Desktop Apps with Electron
- 1.
JS - Electron
Eueung Mulyana
http://eueung.github.io/js/electron
JS CodeLabs | Attribution-ShareAlike CC BY-SA
1 / 27
- 5. package.json
{
"name":"electron-quick-start",
"version":"1.0.0",
"description":"AminimalElectronapplication",
"main":"main.js",
"scripts":{
"start":"electronmain.js"
},
"repository":{
"type":"git",
"url":"git+https://github.com/atom/electron-quick-start.git"
},
"keywords":[
"Electron","quick","start","tutorial"
],
"author":"GitHub",
"license":"CC0-1.0",
"bugs":{
"url":"https://github.com/atom/electron-quick-start/issues"
},
"homepage":"https://github.com/atom/electron-quick-start#readme"
"devDependencies":{
"electron-prebuilt":"^0.36.0"
}
}
main.js
'usestrict';
constelectron=require('electron');
constapp=electron.app;
constBrowserWindow=electron.BrowserWindow;
//--------------------------------------
letmainWindow;
//--------------------------------------
app.on('window-all-closed',function(){
if(process.platform!='darwin'){
app.quit();
}
});
//--------------------------------------
app.on('ready',function(){
mainWindow=newBrowserWindow({width:800,height:600});
mainWindow.loadURL('file://'+__dirname+'/index.html');
mainWindow.webContents.openDevTools();
mainWindow.on('closed',function(){
mainWindow=null;
});
});
5 / 27
- 6. Electron Quick Start
package.json + main.js + index.html
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>HelloWorld!</title>
<script></script>
</head>
<body>
<h1>HelloWorld!</h1>
Weareusingnode<script>
Chrome<script> </
andElectron<script>
</body>
</html>
document.write(process.versions.
document.write(process.versions.chrome)
document.write(process.versions.elect
6 / 27
- 9. package.json
{
"name":"app",
"productName":"App",
"version":"0.0.0",
"description":"",
"license":"MIT",
"repository":"user/repo",
"author":{"name":"","email":"","url":""
},
"electronVersion":"0.36.0",
"scripts":{
"test":"xo",
"start":"electron.",
"build":"electron-packager.$npm_package_productName--out=dist--ignore='^/dist$'--prune--asar--all--version=$npm_p
},
"files":["index.js","index.html","index.css"
],
"keywords":["electron-app","electron"
],...
}
...
"dependencies":{
"electron-debug":"^0.5.0"
},
"devDependencies":{
"electron-packager":"^5.0.0",
"electron-prebuilt":"^0.36.0",
"xo":"^0.12.0"
},
"xo":{
"esnext":true,
"envs":["node","browser"]
}
9 / 27
- 19. Photon Template App
{
"name":"proton-template-app",
"version":"1.0.0",
"description":"AsimpletemplateappforProton",
"main":"app.js",
"author":"ConnorSears",
"scripts":{
"start":"electron."
}
}
package.json
app.js
varapp=require('app');
varBrowserWindow=require('browser-window');
//-------------------------------------
varmainWindow=null;
//-------------------------------------
app.on('window-all-closed',function(){
if(process.platform!='darwin'){
app.quit();
}
});
//-------------------------------------
app.on('ready',function(){
mainWindow=newBrowserWindow({
width:800,
height:600,
'min-width':480,
'min-height':360,
'accept-first-mouse':true,
'title-bar-style':'hidden'
});
mainWindow.loadURL('file://'+__dirname+'/index.html');
mainWindow.setMenu(null);
mainWindow.on('closed',function(){
mainWindow=null;
});
});
19 / 27
- 20. Photon Template App
package.json + app.js
index.html + js/menu.js
varremote=require('remote')
varMenu=remote.require('menu')
varMenuItem=remote.require('menu-item')
//---------------------------------
varmenu=newMenu()
menu.append(newMenuItem({
label:'Delete',
click:function(){
alert('Deleted')
}
}));
//---------------------------------
menu.append(newMenuItem({
label:'MoreInfo...',
click:function(){
alert('Hereismoreinformation')
}
}));
//---------------------------------
window.addEventListener('contextmenu',function(e){
e.preventDefault();
menu.popup(remote.getCurrentWindow());
},false);
js/menu.js
20 / 27