12-23 03:50
Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags more
Archives
Today
Total
관리 메뉴

Scientific Computing & Data Science

[WebApp / Node Webkit] Example 3 - Using Node.JS API 본문

Programming/Web App

[WebApp / Node Webkit] Example 3 - Using Node.JS API

cinema4dr12 2016. 1. 24. 20:13

시리즈 목차

 

이번 글에서는 Node-Webkit에서 Node.JS API를 활용하는 간단한 어플리케이션을 작성해 보도록 하겠다. 본 예제 또한 Node-Webkit의 공식 사이트의 예제를 기반으로 한 것이다.


Codes

index.html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<span style="font-size: 12pt;"><!DOCTYPE html>
 
<head>
  <title>Using NW API</title>
</head>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 
 
 
<button id="MaxWin">Maximize Window</button>
<br><br>
<button id="RestoreWin">Restore Window</button>
<br><br>
<button id="MinWin">Minimize Window</button>
<br><br>
 
<script>
    // get the system platform using node.js
    var nw = require('nw.gui');
    var os = require('os');
    document.write('Your PC Name: ', os.hostname());
    
    var win = nw.Window.get();
    
    $(document).ready(function() {
        // enter fullscreen mode
        $('#MaxWin').click(function() {
            win.enterFullscreen();
        });
        
        // enter fullscreen mode
        $('#MinWin').click(function() {
            win.minimize();
        });
        
        // restore window to default size
        $('#RestoreWin').click(function() {
            win.leaveFullscreen();
        });
    });
</script>
 
 
 
</span>
cs



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>


CDN으로 jQuery 라이브러리를 로딩한다.


<button id="MaxWin">Maximize Window</button>
<br><br>
<button id="RestoreWin">Restore Window</button>
<br><br>
<button id="MinWin">Minimize Window</button>
<br><br>


버튼을 세 개 만들고 간격을 두 칸씩 띄웠다. 세 개의 버튼들은 각각 Application Window를 최대화, 최소화, 원래 크기로 돌리는 기능과 연결된다. 각각에 적당한 ID를 부여하였다.


// get the system platform using node.js
var os = require('os');
document.write('Your PC Name: ', os.hostname());


Node.js의 os 라이브러리를 불러오고, hostname을 출력한다.


var nw = require('nw.gui');
var win = nw.Window.get();

$(document).ready(function() {
    // enter fullscreen mode
    $('#MaxWin').click(function() {
        win.enterFullscreen();
    });
    
    // minimize window
    $('#MinWin').click(function() {
        win.minimize();
    });
    
    // restore window to default size
    $('#RestoreWin').click(function() {
        win.leaveFullscreen();
    });
});

Application Window의 인스턴스를 얻어 오고, 각 버튼에 대한 동작을 처리한다.


Result


'Programming > Web App' 카테고리의 다른 글

[WebApp / Node Webkit] Example 5 - Submenu  (0) 2016.01.30
[WebApp / Node Webkit] Example 4 - Using Node.JS File System  (0) 2016.01.27
[WebApp / Node Webkit] Example 2 - Context Menu  (0) 2016.01.23
[WebApp / Node Webkit] Example 1 - HelloWorld  (0) 2016.01.20
[WebApp / Express] Cookie를 사용하여 데이터 저장하기  (2) 2015.12.26
공유하기 링크
'Programming/Web App' Related Articles more
Comments