JavaScript – GIS Developer

웹에서 제공하는 표준 UI는 상당히 투박해서 거의 사용하지 않고, jQuery UI 등과 같이 유명한 라이브러리를 사용해 웹 어플을 개발합니다. 그러나 필자는 기존의 웹 UI 라이브러리를 사용하지 않는데.. 이유는 내가 원하는 UI의 형태와 느낌을 표현하기 위해 상당이 많은 시간과 노력이 투자되어야 하거나, 불가능한 경우라고 포기하며 타협하게 되기 때문입니다.

이번에 웹에서 접고 펼치는 Accordion UI가 필요해서, 직접 만들어 사용하고 있는데요. 아래는 그 UI에 대한 샘플 결과 이미지입니다.

뭐, 그닥 이쁘다거나 세련된 모양은 아닙니다. 하지만 UI의 멋은 Content으로 완성된다고 믿는 저에겐 충분합니다. 아래는 위의 UI를 구성하기 위한 Javascript 코드입니다.

<div id="div"></div>

<script>
var ui = new XrUI.accordion("div",
    {
        width: "320px",
        height: "400px",
        top: "50px",
        left: "60px",
        title: "어코디언 UI"
    }
);

ui.addItem("item1");
ui.itemTitle("item1").innerHTML = "<span style='color:yellow'>Title1</span>";
ui.itemContent("item1").innerHTML = "<span style='display:inline-block;color:red;height:200px'>Content1</span>";

ui.addItem("item2")
ui.itemTitle("item2").innerHTML = "<span style='color:yellow'>Title2</span>";
ui.itemContent("item2").innerHTML = "<span style='display:inline-block;color:red;height:150px'>Content2</span>";

ui.addItem("item3")
ui.itemTitle("item3").innerHTML = "<span style='color:yellow'>Title3</span>";
ui.itemContent("item3").innerHTML = "<span style='display:inline-block;color:red;height:200px'>Content3</span>";
</script>

var ui = new XrUI.accordion("div",

{

width: "320px",

height: "400px",

top: "50px",

left: "60px",

title: "어코디언 UI"

}

);

ui.addItem("item1");

ui.itemTitle("item1").innerHTML = "<span style='color:yellow'>Title1</span>";

ui.itemContent("item1").innerHTML = "<span style='display:inline-block;color:red;height:200px'>Content1</span>";

ui.addItem("item2")

ui.itemTitle("item2").innerHTML = "<span style='color:yellow'>Title2</span>";

ui.itemContent("item2").innerHTML = "<span style='display:inline-block;color:red;height:150px'>Content2</span>";

ui.addItem("item3")

ui.itemTitle("item3").innerHTML = "<span style='color:yellow'>Title3</span>";

ui.itemContent("item3").innerHTML = "<span style='display:inline-block;color:red;height:200px'>Content3</span>";

</script>

어코디언을 구성하는 항목의 제목과 내용을 직접 innerHTML 등으로 구성할 수 있도록 DOM 요소를 노출하고 있는데요. 이 부분이 향후 이 어코디언 UI를 내가 원하는 형태과 내용으로 자유롭게 구성할 수 있는 통로가 됩니다. 향후 이 UI를 통해 실제 웹 어플에서 어떻게 활용되었는지 보여 드리도록 하겠습니다.

웹에서 JS 언어만으로 로컬에 저장된 텍스트 파일을 읽어 오는 코드를 정리한 글이다. 먼저 아래는 예제 코드 실행을 위한 DOM 구성에 대한 코드이다.

<button onclick="openTextFile()">Open</button>
<div id='output'>...</div>

1 2	<button onclick="openTextFile()">Open</button> <div id='output'>...</div>

Open 버튼을 클릭하면 텍스트 파일을 선택할 수 있는 대화상자가 표시되도록 하며, 여기서 읽고자 하는 파일을 사용자가 선택하면 id가 output인 div에 텍스트 파일의 내용을 출력한다. 이에 대한 코드는 아래와 같다.

function openTextFile() {
    var input = document.createElement("input");

    input.type = "file";
    input.accept = "text/plain";

    input.onchange = function (event) {
        processFile(event.target.files[0]);
    };

    input.click();
}

function processFile(file) {
    var reader = new FileReader();

    reader.onload = function () {
        output.innerText = reader.result;
    };

    reader.readAsText(file, /* optional */ "euc-kr");
}

function openTextFile() {

var input = document.createElement("input");

input.type = "file";

input.accept = "text/plain";

input.onchange = function (event) {

processFile(event.target.files[0]);

};

input.click();

}

function processFile(file) {

var reader = new FileReader();

reader.onload = function () {

output.innerText = reader.result;

};

reader.readAsText(file, /* optional */ "euc-kr");

}

openTextFile은 Open 버튼 클릭시 호출하는 함수이다. processFile은 openTextFile에서 호출되는 함수로 선택된 파일을 읽어 div에 그 내용을 출력한다. IE와 Chrome 모두에서 정상적으로 작동하는 것을 확인했다.

카테고리: JavaScript

웹 UI ㅡ Accordion

웹에서 Javascript 만으로 텍스트 파일 읽기