guide Getting Started

설치

개발자 페이지나 기타 전달 받은 모듈을 앱 페이지에 include한다.

<html>
<head>
    <link href="/styles/realgrid-touch-style.css" rel="stylesheet">
    <script type="text/javascript" src="/lib/realgrid-touch-lic.js"></script>
    <script type="text/javascript" src="/lib/realgrid-touch.1.x.x.min.js"></script>
</head>
</html>

npm

    npm i realgrid-touch
    yarn add realgrid-touch

컨트롤 생성

먼저, 앱 페이지에 리스트 컨트롤이 생성될 container 요소가 준비돼야 한다. 또, 어떤 방식으로든 container의 높이가 지정되어야 한다.

<!-- 화면 전체를 리스트 컨트롤로 채운다. -->
<div id="realtouch" style="position: absolute; width: 100%; height: 100%">
</div>
<!-- 위치와 크기를 지정한다. -->
<div id="realtouch" style="position: relative; width: 90%; height: 500px; top: 50px; margin: auto;">
</div>

Full 모드인 경우 리스트 컨트롤의 내용이 모두 표시되도록 container의 높이를 설정하지 않는다.

<!-- full 모드일때 높이를 지정하지 않는다. -->
<div id="realtouch" style="width: 90%; border: 1px solid gray;">
</div>

컨트롤 설정 및 데이터 연결

HTML windowDOMContentLoaded 이벤트 등에서 리스트 컨트롤을 초기화 한다.

var realtouch;
var data;

window.addEventListener('DOMContentLoaded', function () {
    try {
        initRt();
    } catch (err) {
        alert(err);
        console.error(err);
    }
});

function initRt() {
    const data = data = RealTouch.createListData('data', {});
    // html에서 준비한 container의 id를 지정한다.
    const list = realtouch = RealTouch.craeteListControl(document, 'realtouch');

    // 컨트롤 설정 및 옵션
    list.setConfig({
        ...
    });
    // 데이터 연결
    list.data = data;
    // 데이터 로드
    loadData(data);
}

function loadData(data) {
    // 로컬/원격 데이터 로딩
    $.ajax(...);
}

See Also

주요 기능들
데이터 개요
구성 영역들
템플릿
레이아웃