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

04-10 10:56

Notice

Recent Posts

Recent Comments

Link

« 2025/04 »
일	월	화	수	목	금	토
		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

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

목 차

1. Example 1 - HelloWorld
2. Example 2 - Context Menu

3. Example 3 - Using Node.js API

4. Example 4 - Using Node.js File System
5. Example 5 - Submenu
6. Example 6 - Tray Icons

7. Example 7 - Custom Window Control

8. Example 8 - Context Menus

9. Example 9 - Window Menus

10.Example 10 - Using Node Modules

이번 글에서는 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>
Colored by Color Scripter
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