hello-electron

hello-electron
- QuickStart
  - start
  - package
- index.html
- server.js
- main.js
- node
- electron
- installer
- jquery-electron
-1 git

QuickStart

start

$ git clone https://github.com/downgoon/hello-electron.git
$ cd hello-electron
$ npm start

package

$ electron-packager . --overwrite --out=target  --icon=img/hello

$ npm run-script package

package.json

"scripts": {
	"start": "electron .",
	"package": "electron-packager . --overwrite --out=target  --icon=img/hello"
},

package````start````npm

Mac````target/helloworld-electron-darwin-x64/helloworld-electron.app

index.html

index.html````Hello World

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Hello World!</title>
</head>
<body>
  <h1>Hello World!</h1>
</body>

</html>

c1-index.html

server.js

index.html````node.jsweb serverhttp://127.0.0.1:8080/index.html


var http = require('http');
var fs = require('fs');

http.createServer( function (request, response) {

  console.log('request comming: ' + request.url);

  fs.readFile('index.html', function (err, data) {
    response.writeHead(200, {'Content-Type': 'text/html'});
    response.write(data.toString());
    response.end();
  });

}).listen(8080);

console.log('server running at http://127.0.0.1:8080/');

http````fsWebhttp8080Webindex.htmlHTTP

server.js

$ node server.js
server running at http://127.0.0.1:8080/
request comming: /index.html

c2-server.js

main.js

nodeB/Selectron````index.html

var electron = require('electron');

electron.app.on('ready', function createWindow () {

  new electron.BrowserWindow(
      {width: 800, height: 600}
    ).loadURL('file://' + __dirname + "/index.html")

} );

main.jsURLURL

.loadURL('file://' + __dirname + "/index.html")

loadURL````electron````var electron = require('electron');

electron

app: app.on('ready', function () {})
BrowserWindow: new electron.BrowserWindow() loadURLhtml

node main.js````electronnodenpm

$ node main.js

Error: Cannot find module 'electron'
    at Function.Module._resolveFilename (module.js:325:15)
    at Function.Module._load (module.js:276:25)

npm````node.js````maven````java````maven````pom.xml````npm````package.json

package.json

{
  "name": "hello-electron",
  "version": "0.0.1-SNAPSHOT",
  "description": "HelloWorld electron",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "~1.6.2"
  }
}

meta: name````version
****main.js````electron .````electron````npm````npm install -g electron -g
****electron-1.6.2

$ npm start

electron .

c3-main.js

index.html````CSS````javascript

<body>
  <h1>Hello World!</h1>
  <textarea rows="10"></textarea>
  <button onclick="alert('you click write');">Write</button>
</body>

<head>
  <style type="text/css">
  body {
    margin: 0;
  }

  textarea {
    width: 100%;
    border: none;
    background: #eee;
    margin: 10px 0;
    padding: 0;
    outline: none;
  }
  </style>
</head>

gitc4-interaction

node

electron````.html````node.js

renderer.js


var fs = require('fs');

var myTextarea = document.getElementsByTagName('textarea')[0];
var myButton = document.getElementsByTagName('button')[0];

// get input from textarea and write it into message.txt

function writeFile() {
  var text = myTextarea.value;
  fs.writeFileSync('message.txt',
  text, 'utf8');
}

myButton.onclick = writeFile;

javascriptnodeDOMelectron

index.htmlJS

<body>
  <h1>Hello World!</h1>
  <textarea rows="10"></textarea>
  <button>Write</button>
</body>

<script>
   require('./renderer.js')
</script>

gitc5-callnode

electron

electron node.js````chromium

``````Runtime``JavaScriptAPI

npm install electron --save-prod
npm install electron-packager -g

package.json

"dependencies": {
    "electron": "^1.6.11",
}

npm

npm installnpm install

electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]

$ electron-packager .

$ tree helloworld-electron-darwin-x64 -L 1
helloworld-electron-darwin-x64
 LICENSE
 LICENSES.chromium.html
 helloworld-electron.app   // Mac 
 version

sourcedir app````app
appname: package.json````productName````name````name````productName
``````electronMacWindows````Linux````--platform=````--arch=``
- ****--platform````--arch````Mac````Mac
- ****: --all3
- ****--platform=darwin --arch=x64````Mac64--platform=win32 --arch=x64````Win
Flags3
- --overwrite
- --icon=./img/hello ****windowshello.icoMachello.icns````.icnsWindows
- --out ./target

--platform: linux, win32, darwin, mas, all

--arch: ia32, x64, armv7l, all

package.json

"scripts": {
	"start": "electron .",
	"package": "electron-packager . --overwrite --out=target  --icon=img/hello",
	"package-mac": "electron-packager . --overwrite --platform=darwin --arch=x64 --out=target  --icon=img/hello.icns",
	"package-win": "electron-packager . --overwrite --platform=win32 --arch=ia32 --out=target  --icon=img/hello.ico",
	"package-linux": "electron-packager . --overwrite --platform=linux --arch=x64 --out=target  --icon=img/hello.png"
},

$ npm run package-linux   // Linux
$ npm run package-win   // Windows
$ npm run package-mac		// Mac

icon.ico````.png````.icns

installer

mac installer

$ npm run installer-mac

package````npm run package-mac

: installer-made.md

jquery-electron

jquery

<script src="js/jquery.js">
</script>

electron issues-1

jquery electron


<!-- Insert this line above script imports  -->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>

<!-- normal script imports etc  -->
<script src="js/jquery.js">
</script>

<!-- Insert this line after script imports -->
<script>if (window.module) module = window.module;</script>

jquery-electron-demo.html

-1 git

commit ebe00af32992041    c1-index.html
commit b730d4a1c605f6     c2-server.js
commit 230a72cac9104364   c3-main.js
commit be3f65bce233fd     c4-interaction
commit b6f9befb7ac67c5    c5-callnode
commit 25093f4ba4ccd13    c6-electron-summary

c3-main.js