webix #
Find similar titles

2016-05-01 11:52:07 (rev. 7)
sypark-intern@insilicogen.com
Edit

Structured data

Category: Programming

webix #

webix는 웹이나 모바일 환경에서 메뉴나 테이블 등의 UI를 쉽고 간편하게 구현할 수 있도록 도와주는 프레임워크로, 자바스크립트와 HTML5를 기반으로 하여 구축되었다(JavaScript Framework & HTML5 UI library for web). 기본적으로는 오픈소스 GNU GPLv3라이센스를 따르고 있지만, 일부 추가 기능은 상업용 라이센스가 있어야만 사용할 수 있다. 다양한 종류의 예제 코드가 제공되고 있고, 간단한 코딩만으로도 웹이나 모바일 등 구동 환경에 관계없이 어디서나 동일한 화면을 보여줄 수 있다는 장점이 있다. 반면에 정해져있는 형식의 테두리에서 크게 벗어나기 어렵다는 한계점도 존재한다.

webix사용을 위한 준비 #

webix를 사용하려면 우선 html문서의 head부분에 다음과 같은 내용을 넣어준다.

 <html>
    <head>
    <link rel="stylesheet" href="http://cdn.webix.com/edge/webix.css"           type="text/css"> 
    <script src="http://cdn.webix.com/edge/webix.js"                
    type="text/javascript"></script>  
    </head>

    <body>
        <script type="text/javascript" charset="utf-8">

        /* 구현하고자 하는 내용은 이곳에 작성 */

        </script>
    </body>
 </html>

기본 구성 #

webix.ui({
    view:"...",
    id:”...”,
    container:”...”
});

view : 실제 화면에 나타나는 요소들을 구현
id : view의 요소를 인식하고 제어하기 위한 속성(view객체를 하나의 변수로 보고 이에 대한 변수이름을 지정해줌)
container : html구문을 반영할 수 있는 요소

각각의 요소들이 실제로 구현된 예시 코드는 다음과 같다.

<body>
    <div id="dataA" style="width:500px;height:150px;"></div>
    <div id="dataB" style="width:500px;height:300px;"></div>
    <script>
    webix.ui({
        view:"dataview",
        id:"mydataview1",
        container:"dataA",
    });

    webix.ui({
        view:"dataview",
        id:"mydataview2",
        container:"dataB",
    });
    </script>         
</body>

위의 예제에서는 기본적으로 2개의 dataview를 구축하고, 이에 대한 id를 mydataview1과 2로 각각 지정하였다. container는 위에서 설정한 style을 가져와 webix의 UI에 적용할 수 있게 하는 역할을 수행하게 된다.

webix 레퍼런스 살펴보기 #

webix%20documentaion