12-23 00:00
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 4 - Using Node.JS File System 본문

Programming/Web App

[WebApp / Node Webkit] Example 4 - Using Node.JS File System

cinema4dr12 2016. 1. 27. 22:50


시리즈 목차


이번 글에서는 Node-Webkit에서 Node.JS의 File System(fs)을 활용한 예제를 소개하도록 하겠다. 본 예제는 지정된 경로 내의 폴더들 및 파일들을 리스트 형식으로 보여주는 것이다.


Codes

package.json:

{
  "name": "file system",
  "main": "index.html",
  "window": {
      "toolbar": false
  }
}


index.html:

<!DOCTYPE html>
<html>
<head>
  <title>Show Files</title>
</head>

<script>
    var fs = require('fs');
    var path = 'C:/';
    
    var ulTag = document.createElement('ul');
    
    function generateListTagItem(file) {
        var liTag = document.createElement('li');
        liTag.textContent = file;
        ulTag.appendChild(liTag);
    }
    
    function readFilesInPath() {
        var bodyTag = document.getElementsByTagName('body')[0];
        
        fs.readdir(path, function(err, files) {
            if(err) throw err;
            
            files.forEach(generateListTagItem);
            
            bodyTag.appendChild(ulTag);
        });
    }
</script>

<body>
    <h1>Files in the path</h1>
    <a href="#" onclick="readFilesInPath();">Show me the files in the path.</a>
</body>
</html>


var fs = require('fs');


Node.js의 filesystem 라이브러리를 로딩한다.


var ulTag = document.createElement('ul');

function generateListTagItem(file) {
    var liTag = document.createElement('li');
    liTag.textContent = file;
    ulTag.appendChild(liTag);
}


<ul> 태그를 생성하고 generateListTagItem() 함수에서 <li> 태그를 자식 태그로 붙인다.


function readFilesInPath() {
    var bodyTag = document.getElementsByTagName('body')[0];
    
    fs.readdir(path, function(err, files) {
        if(err) throw err;
        
        files.forEach(generateListTagItem);
        
        bodyTag.appendChild(ulTag);
    });
}


readFileInput() 함수를 호출하면 <body> 태그에 generateListTagItem() 함수를 통해 생성된 아이템들을 붙인다. 이 아이템들은 지정된 경로(여기서는 C 드라이브)의 폴더 및 파일들을 의미한다.

Results

Windows 환경에서 실행한 화면 예는 다음과 같다.



물론 Windows 외에 Linux나 Mac OS에서도 동일한 코드로 경로 내 폴더들을 보여 주는 기능이 가능하다. 단, 지정된 경로가 해당 OS에서 유효한지는 확인해야 한다. 예를 들어,  Mac OS에서는 다음의 경로에 있는 파일들을 보여줄 수 있도록 코드를 수정할 수 있다.


index.html:

<!DOCTYPE html>
<html>
<head>
  <title>Show Files</title>
</head>

<script>
    var fs = require('fs');
    var path = '/Users/gchoi/Documents/WebApp/Examples/node-webkit/';
    
    var ulTag = document.createElement('ul');
    
    function generateListTagItem(file) {
        var liTag = document.createElement('li');
        liTag.textContent = file;
        ulTag.appendChild(liTag);
    }
    
    function readFilesInPath() {
        var bodyTag = document.getElementsByTagName('body')[0];
        
        fs.readdir(path, function(err, files) {
            if(err) throw err;
            
            files.forEach(generateListTagItem);
            
            bodyTag.appendChild(ulTag);
        });
    }
</script>

<body>
    <h1>Files in the path</h1>
    <a href="#" onclick="readFilesInPath();">Show me the files in path.</a>
</body>
</html>



Mac에서 실행한 실행 화면의 예는 위와 같다.



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

[WebApp / Node Webkit] Example 6 - Tray Icon  (0) 2016.01.30
[WebApp / Node Webkit] Example 5 - Submenu  (0) 2016.01.30
[WebApp / Node Webkit] Example 3 - Using Node.JS API  (0) 2016.01.24
[WebApp / Node Webkit] Example 2 - Context Menu  (0) 2016.01.23
[WebApp / Node Webkit] Example 1 - HelloWorld  (0) 2016.01.20
공유하기 링크
'Programming/Web App' Related Articles more
Comments