강좌 & 팁
글 수 2,412
2014.02.25 11:46:38 (*.52.177.249)
40652
node-webkit 에서 제공하는 win 클래스는 몇가지 이벤트를 제공합니다.
이 이벤트들은 앞으로 프로그램을 작성할 때 활용하게 됩니다.
오늘은
이 이벤트를 단순하게 로그 하는 것을 보여 드리겠습니다.
이런 루틴들을 미리 만들어 두면 타이핑량이 줄어 들고
이벤트 목록 찾으러 다니지 않아도 됩니다. ^^
어떤 이벤트들이 있고 어떤 기능인지를 보여 주는 프로그램을 작성할 겁니다.
그래서 오늘은 순수하게 소스만 보여 줄겁니다.
아..
저도 편해 지지 않겠습니까?
한가지 조심해야 하는 것이
close 이벤트와
closed 이벤트 입니다.
이때 이 부분을 로그만 보여 주면 프로그램이 동작하지 않을 수 있습니다.
요 부분을 어떻게 처리했는지 잘 살펴 보시기 바랍니다.
다음과 같이 package.json 파일을 만듭니다.
----[package.json]--------------------------------------------------------------
{
"name": "window event",
"main": "index.html",
"window":
{
"toolbar" : false
}
}
--------------------------------------------------------------------------------
그다음 index.html을 다음과 같이 만듭니다.
----[index.html]----------------------------------------------------------------
<html>
<head>
<meta http-equiv="content-Type" content="text/html; charset=utf-8" />
<title>윈도우 이벤트</title>
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
</head>
<body>
<h1>윈도우 이벤트</h1>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
--------------------------------------------------------------------------------
main.js을 만들어 봅시다.
----[main.js]-------------------------------------------------------------------
$(function(){
var gui = require('nw.gui');
var win = gui.Window.get();
win.showDevTools();
console.log( "메뉴 프로그램 시작" );
win.on('minimize', function() {
console.log("윈도우가 최소화 되엇습니다.");
});
win.on('close', function() {
console.log("윈도우가 종료 요구 되었습니다.");
this.hide();
if (win != null) win.close(true);
this.close(true);
});
win.on('closed', function() {
console.log("윈도우가 종료 되었습니다.");
win = null;
});
win.on('loaded', function() {
console.log("윈도우가 로드 되었습니다.");
});
win.on('focus', function() {
console.log("윈도우가 입력 포커스를 얻었습니다.");
});
win.on('blur', function() {
console.log("윈도우가 입력 포커스를 잃었습니다.");
});
win.on('minimize', function() {
console.log("윈도우가 최소화 되었습니다.");
});
win.on('restore', function() {
console.log("윈도우가 최소화 상태에서 원래 상태로 돌아 왔습니다.");
});
win.on('maximize', function() {
console.log("윈도우가 최대화 되었습니다.");
});
win.on('unmaximize', function() {
console.log("윈도우가 최대화 상태에서 원래 상태로 돌아 왔습니다.");
});
win.on('enter-fullscreen', function() {
console.log("윈도우가 전체 화면 상태가 되었습니다.");
});
win.on('leave-fullscreen', function() {
console.log("윈도우가 전체 화면 상태에서 원래 상태로 돌아 왔습니다.");
});
win.on('zoom', function() {
console.log("윈도우의 ZOOM 상태가 변경되었습니다.");
});
win.on('capturepagedone', function() {
console.log("화면 캡쳐 데이터가 준비되어습니다.");
});
win.on('devtools-opened', function() {
console.log("devtools 윈도우가 열렸습니다.");
});
win.on('devtools-closed', function() {
console.log("devtools 윈도우가 닫혔습니다.");
});
win.on('Issues', function() {
console.log("윈도우의 상태가 변경되었습니다.");
});
});
--------------------------------------------------------------------------------
아마 소스만 봐도 어떻게 사용하는지 알 수 있을 겁니다. ^^
이런 예는 저에게 화면 캡쳐하는 수고를 하지 않게 정말 정말 너무 좋습니다.
ㅋㅋ
쉽죠?