05-01 19:18
Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
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 11 - Using Third Party Modules 본문

Programming/Web App

[WebApp / Node Webkit] Example 11 - Using Third Party Modules

cinema4dr12 2016. 2. 9. 00:42

목 차


이번 글에서는 Node Module의 Third Party Module을 활용하는 방법을 알아보도록 하겠다.

Third module 중 하나인 mkdirp를 이용하여 디렉토리를 생성하는 예제이며, mkdirp는 다음 경로에서 다운 받을 수 있다:


mkdirp Github page


또는 npm을 이용하여 다운로드 할 수 있다 (우선 terminal에서 project 경로로 이동한다):


$ sudo npm install -l mkdirp


옵션 -l은 로컬 경로에 패키지를 설치한다는 의미이다.

Codes

package.json

{
    "main": "index.html",
    "name": "using thrid party node modules",
    "window":
    {
        "toolbar": false,
        "frame": false,
        "icon": "./icons/icon.png"
    }
}

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!doctype html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>Using Third Party Node Modules Example</title>
    <link rel='stylesheet' href='reset.css'>
    <link rel='stylesheet' href='style.css'>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
 
    <script>
 
        var nw = require('nw.gui');
        var win = nw.Window.get();
        win.isMaximized = false;
        
        var htmlContent = '';
        
        // Recursive mkdir
        var mkdirp = require('mkdirp');
        
        $(document).ready(function() {
            // Create a folder, recursively
            mkdirp('./a/b/c', function(err) {
                if (err) {
                    alert('Error creating directories');
                }
                else {
                    htmlContent = '<p>&nbsp Directory successfully created.</p>';
                    $("body").append(htmlContent);
                }
                    
            });
        });
    
    </script>
 
</head>
 
<body>
    <header>
        <ul>
            <li><a href='#' title='Minimize' id='windowControlMinimize'></a></li>
            <li><a href='#' title='Maximize' id='windowControlMaximize'></a></li>
            <li><a href='#' title='Close'    id='windowControlClose'   ></a></li>
        </ul>
    </header>
 
    <script>
 
        // Min
        document.getElementById('windowControlMinimize').onclick = function()
        {
            win.minimize();
        };
 
        // Close
        document.getElementById('windowControlClose').onclick = function()
        {
            win.close();
        };
 
        // Max
        document.getElementById('windowControlMaximize').onclick = function()
        {
            if (win.isMaximized)
                win.unmaximize();
            else
                win.maximize();
        };
 
        win.on('maximize', function(){
            win.isMaximized = true;
        });
 
        win.on('unmaximize', function(){
            win.isMaximized = false;
        });
 
    </script>
 
    </body>
</html>
cs

Results

실행을 하면 ./a/b/c/ 디렉토리가 생성되고, 아래 이미지와 같이 "성공적으로 디렉토리가 생성되었다"는 메시지가 출력될 것이다.


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

[WebApp / Electron] Creating Desktop Apps with Electron - YouTUbe Tutorials  (0) 2016.06.24
[WebApp / Node Webkit] Example 12 - Notifications Example  (0) 2016.02.13
[WebApp / Node Webkit] Example 10 - Using Node Modules  (0) 2016.02.08
[WebApp / Node Webkit] Example 9 - Window Menus  (0) 2016.02.08
[WebApp / Node Webkit] Example 8 - Context Menus  (0) 2016.02.08
공유하기 링크
'Programming/Web App' Related Articles more
Comments