데모페이지 작성요령

데모페이지 작성요령에 대해 설명합니다.

메뉴 및 제목 표시하기

왼쪽에 보이는 메뉴영역에는 굵은글씨로 카테고리(category)가 표시되고 그 아래 해당 카테고리에 포함된 데모페이지들이 프론트메터의 order의 순서로 표시됩니다.

사이드바에는 각 데모페이지의 title이 표시됩니다. 만약 부제목을 사이드바에 표시하고 싶다면, 문서 작성시 ##(샵샵)을 이용해 제목을 작성합니다. 문서에 포함된 ##(샵샵) 타이틀은 자동으로 사이드바에 표시되며, 이후 ###(샵샵샵) 과 같이 하위 제목을 표시 할 수 있습니다.

사이드바에 표시되는 제목은 문서의 타이틀과 ##(샵샵) ###(샵샵샵) 까지 입니다. 그 이하는 표시되지 않습니다.

하지만, 권장하건데 그리드 데모가 위주인 데모페이지에서는 사용자의 시선을 데모에 집중시키기 위해 부제목을 표시하지 않는 것이 좋습니다. 아래 제목표시 포멧을 확인하고 문서에 활용하세요.

제목 Title 2 : 샵샵

제목 2의 폰트 크기는 26px 입니다.

제목 Title 3 : 샵샵샵

제목 3의 폰트 크기는 22px 입니다.

제목 Title 4 : 샵샵샵샵

제목 4의 폰트 크기는 20px 입니다.

프론트메터(front-matter)

데모페이지 작성시 프론트메터는 문서의 상단에 반드시 기입해야 합니다. 프론트메터는 아래와 같은 기준으로 작성합니다.

layout: page
title: 상단 제목
description: 제목 아래에 표시할 부제목 또는 페이지 설명을 입력합니다.
order: 사이드바 제목 표시 순번입니다.
devbox: devbox 표시여부를 true 또는 false로 입력합니다.
devboxfile: devbox에 표시될 markdown filename, ./devbox 폴더 밑에 해당 파일이 있어야 합니다.
categories: 데모 페이지 카테고리명
tags: 페이지검색용 태그

데모페이지 프론트메터 작성 예

---
layout: page
title: 인디케이터
order: 1
devbox: true
devboxfile: indicator-dbox.md
categories:
  - 그리드 구성요소
tags: ['indicator', 'item', 'number', '행번호']
---

버튼 표시하기

버튼은 html의 <a> 태그를 이용해 화면에 추가하며, javascript 함수를 호출하는 방식으로 동작을 구현할 수 있습니다.

기본 버튼

devbox등 문서에서 사용되는 기본 버튼 입니다.

<a class="btn primary small round lowercase">primary</a>
<a class="btn secondary small round lowercase">secondary</a>
<a class="btn tertiary small round lowercase">tertiary</a>
<a class="btn ancillary small round lowercase">ancillary</a>
<a class="btn orange small round lowercase">orange</a>
<a class="btn danger small round lowercase">danger</a>

위 코드를 페이지에 입력하면 아래와 같은 버튼이 표시됩니다.

primary secondary tertiary ancillary orange danger

특별한 경우가 아니면 아래 기본 버튼 만 사용하세요.

primary

추가 버튼(특수용도)

특수용도로 사용하기 위해 만든 버튼 입니다. 문서내에서는 사용하지 마세요.

<a class="btn primary small lowercase">primary</a>
<a class="btn secondary small lowercase">secondary</a>
<a class="btn tertiary small lowercase">tertiary</a>
<a class="btn ancillary small lowercase">ancillary</a>
<a class="btn orange small lowercase">orange</a>
<a class="btn danger small lowercase">danger</a>

위 코드를 페이지에 입력하면 아래와 같은 버튼이 표시됩니다.

primary secondary tertiary ancillary orange danger

체크 라디오박스

체크박스는 아래와 같은 형식으로 입력합니다.

<div class="checkbox">
  <label>
    <input type="checkbox" id="checkRecursive"> 모든 자식 노드에 적용(recursive)
  </label>
</div>
<div class="checkbox">
  <label>
    <input type="checkbox" id="checkForce"> 접혀있는 노드에 적용(force)
  </label>
</div>

그러면 아래와 같이 표시되고,

모든 자식 노드에 적용(recursive)

접혀있는 노드에 적용(force)

스크립트에서는 jQuery를 이용해 아래와 같이 가져올 수 있습니다.

var recursive = document.getElementById("checkRecursive").checked;
var force = document.getElementById("checkForce").checked;
treeView.expand(current.itemIndex, recursive, force);

라디오버튼은 아래와 같은 형식으로 입력합니다.

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    첫 번째 라디오 선택
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    두 번째 라디오 선택
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    기타 라디오 선택 불가
  </label>
</div>

그러면 아래와 같이 보여집니다.

첫 번째 라디오 선택

두 번째 라디오 선택

기타 라디오 선택 불가

값을

링크 표시하기

페이지에 링크를 삽입하려면 마크다운 문법을 사용하시면 됩니다.

[네이버 링크](http://www.naver.com/){:target="_blank"}

예를 들어 페이지에 아래와 같이 입력하면 아래와 같은 링크가 표시됩니다. 뒤에 붙은 {:target="_blank"}은 새창으로 링크를 열것인지 결정합니다.

네이버 링크

다른 데모 페이지와 같이 demo.realgrid.com 프로젝트 내에 포함된 페이지나 파일의 링크를 표시할 때에는 아래와 같이 baseurl을 해당 경로의 앞에 붙여주기 위해 prepend필터를 사용한 리퀴드 템플릿 문법을 사용해야 합니다.

즉, _config.yml 에 입력되어 있는 baseurl 값을 렌더링 시점에 해당 링크의 앞에 붙여주는 겁니다.

[인디케이터 데모 페이지 링크]({{ "/GridComponent/Indicator/" | prepend: site.baseurl }})

우리는 현재 /demo라는 baseurl을 사용하기 때문에 위 코드는 /demo/GridComponent/Indicator 로 렌더링 됩니다.

인디케이터 데모 페이지 링크

이미지 표시하기

데모 페이지에서 사용하는 이미지는 resource/image/폴더에 해당 데모의 카테고리 영문명을 폴더로 만들어 추가합니다. 이미지를 페이지에 표시할때에도 baseurl을 prepend해 주어야 합니다.

이미지를 표시하는 방법은 markdown 문법으로 아래와 같이 작성 합니다.

![이미지타이틀]({{ "/resource/image/sampleimage.png" | prepend: site.baseurl }})

위 코드를 입력하면 아래와 같이 이미지가 표시됩니다.

이미지타이틀

코드 표시하기

데모페이지의 코드표시기(highlighter)는 rouge 입니다.

문서내부에 코드를 표시할때에는 아래와 같이 ` (백틱 backtick)마크를 연속으로 3개 입력하고, 그 뒤에 표현할 언어를 입력하면 됩니다. 코드를 표시할 수 있는 여러가지 방법이 있지만, 데모사이트 문서를 작성할 때에는 반드시 아래의 방법을 따라 주시기 바랍니다.

```js
function funcExample(param1, param2) {
  var strParam = 'param';
  var intParam = 0;

  return param1;
}
```

javascript 코드를 위와 같이 입력하면 아래와 같이 표시됩니다.

function funcExample(param1, param2) {
  var strParam = 'param';
  var intParam = 0;

  return param1;
}

HTML코드의 경우 language 영역에 ‘html’ 을 입력합니다.

```html
<!DOCTYPE html>
<html>
<body>

<p id="demo">Click the button to display the cookies associated with this document.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
    document.getElementById("demo").innerHTML =
    "Cookies associated with this document: " + document.cookie;
}
</script>

</body>
</html>
```

위 코드는 아래와 같이 표시됩니다.

<!DOCTYPE html>
<html>
<body>

<p id="demo">Click the button to display the cookies associated with this document.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
    document.getElementById("demo").innerHTML =
    "Cookies associated with this document: " + document.cookie;
}
</script>

</body>
</html>

그리드 표시하기

그리드를 페이지에 표시하는 기본방법은 페이지에 아래와 같은 코드를 입력하면 됩니다. 아래 코드는 jekyll 템플릿으로 완성된 그리드를 미리 렌더링 하여 페이지에 그리드가 표시되게 하고 원하는 데이터까지 불러 올 수 있습니다. 물론, 그리드의 레이아웃이나 데이터는 모두 별도의 파일로 미리 정의 되어 있어야 합니다.

원격으로 데이터를 불러온 다음 그리드에 데이터를 넣는 과정은 직접 코드를 작성해서 처리해야 합니다. 이 부분은 처음과 변경된 부분입니다. 아래 코드에서 onTreeSuccessDataSet() 함수를 콜백으로 처리하여 setRows()호출 하는 과정을 참고하세요.

<script>
  var onTreeSuccessDataSet = function(data, textStatus, jqXHR) {
    dataProvider.setRows(data);
  }

  var onDoneDataSet = function() {
  }
</script>

{% include realgrid.html

  gridVar="gridView"
  dpVar="dataProvider"
  gridId="realgrid"

  fieldSet="fieldset1"
  successFieldSet="onSuccessFieldSet"
  doneFieldSet="onDoneFieldSet"
  failFieldSet="onFailFieldSet"

  columnSet="columnset1"
  dpOptionSet="dataProviderOption1"
  gridOptionSet="gridOption1"
  styleSet="defaultStyle"

  dataSet="griddata1.json"
  showProgress="true"
  successDataSet="onGridSuccessDataSet"

  gridWidth="100%"
  gridHeight="300px" %}

각 인자에 대한 설명

include: 템플릿 파일명으로 항상 realgrid.html을 입력합니다.
변수
gridVar: 페이지 전체에서 사용할 grid 변수
dpVar: 페이지에서 사용할 data provider 변수
gridId: 그리드가 위치할 <div> tag id attribute
필드 정보
fieldSet: 그리드의 field 정보를 담고 있는 json 파일의 이름
successFieldSet: 필드파일을 성공적으로 읽어온 경우 호출됩니다.
doneFieldSet: 필드파일을 성공적으로 읽어온 경우 successFieldSet()이 호출된후 호출됩니다.
failFieldSet: 필드파일 읽어오기 실패한 경우 호출됩니다.
컬럼 정보
columnSet: 그리드의 column 정보를 담고 있는 json 파일의 이름
successColumnSet: 컬럼파일을 성공적으로 읽어온 경우 호출됩니다.
doneColumnSet: 컬럼파일을 성공적으로 읽어온 경우 successColumnSet()이 호출된후 호출됩니다.
failColumnSet: 컬럼파일 읽어오기 실패한 경우 호출됩니다.
DataProvider 옵션정보
dpOptionSet: 그리드의 data provider option 정보를 담고 있는 json 파일의 이름
successDpOptionSet: 옵션파일을 성공적으로 읽어온 경우 호출됩니다.
doneDpOptionSet: 옵션파일을 성공적으로 읽어온 경우 successDpOptionSet()이 호출된후 호출됩니다.
failDpOptionSet: 옵션파일 읽어오기 실패한 경우 호출됩니다.
GridView 옵션정보
gridOptionSet: 그리드의 option 정보를 담고 있는 json 파일의 이름
successGridOptionSet: 옵션파일을 성공적으로 읽어온 경우 호출됩니다.
doneGridOptionSet: 옵션파일을 성공적으로 읽어온 경우 successGridOptionSet()이 호출된후 호출됩니다.
failGridOptionSet: 옵션파일 읽어오기 실패한 경우 호출됩니다.
스타일 정보
styleSet: 그리드의 style 정보를 담고 있는 json 파일의 이름
successStyleSet: 스타일파일을 성공적으로 읽어온 경우 호출됩니다.
doneStyleSet: 스타일파일을 성공적으로 읽어온 경우 successStyleSet()이 호출된후 호출됩니다.
failStyleSet: 스타일파일을 읽어오기 실패한 경우 호출됩니다.
데이터 정보
dataSet: 그리드의 data 를 담고 있는 json 파일의 이름
showProgress: true면 데이터를 가져오는 동안 프로그래스를 보여줍니다.
successDataSet: 데이터파일을 성공적으로 읽어온 경우 호출됩니다.
doneDataSet: 데이터파일을 성공적으로 읽어온 경우 successDataSet()이 호출된후 호출됩니다.
failDataSet: 데이터파일을 읽어오기 실패한 경우 호출됩니다.
기타 정보
showToolbox: false가 아니면 무조건 툴박스 보여줍니다.
gridWidth: grid width style
gridHeight: grid height style

그리드의 레이아웃이나 데이터는 모두 \resource 폴더에 각각 data, layout, option, style 이라 이름의 하위 폴더에 json 포멧의 파일로 작성합니다. 작성된 json파일의 파일명을 해당 인자의 값으로 넘겨주면 됩니다.

물리적인 파일 위치 `\resource` 폴더

위 코드중 마킹된 영역의 파일에 해당하는 인자들이 실제 어떤 경로에 위치해야 하는지 정보를 정리해 보겠습니다.

fieldSet="fieldset1": \resource\layout\fieldset1.json
columnSet="columnset1": \resource\layout\columnset1.json
dpOptionSet="dataProviderOption1": \resource\option\dataProviderOption1.json
gridOptionSet="gridOption1": \resource\option\gridOption1.json
styleSet="style1": \resource\style\style1.json
dataSet="griddata1.json": \resource\data\griddata1.json

그리드 구성시 콜백 처리방법

field, column, dataProviderOption, gridOption, style은 각각 인자로 넘겨준 파일에서 그 정보를 읽어 그리드에 적용됩니다. 이때 각각의 파일은 jquery.getJSON()함수를 통해 불러오는데, success, done, fail이 발생한 이후 처리를 위해 콜백함수를 인자로 넘겨줄수 있습니다.

콜백함수는 {% include ..%} 명령 이전에 정의되어야 하며 아래와 같이 <script>태그를 이용해 콜백함수를 정의하고 include 명령의 인자로 넘겨주면 됩니다.

콜백함수의 인자는 jquery XHR function의 인자와 동일한 구조입니다.


<script>
var onGridSuccessDataSet = function(data, textStatus, jqXHR) {
  dataProvider.setRows(data);
}
var onSuccessFieldSet = function(data, textStatus, jqXHR) {
    console.log('[EVENT LOG] onSuccessFieldSet');
}
var onDoneFieldSet = function(data, textStatus, jqXHR) {
    console.log('[EVENT LOG] onDoneFieldSet');
}
var onFailFieldSet = function(jqxhr, textStatus, error) {
    console.log('[EVENT LOG] onFailFieldSet');
}
</script>

{% include realgrid.html
gridVar="gridView"
dpVar="dataProvider"
gridId="realgrid"

fieldSet="fieldset1"
successFieldSet="onSuccessFieldSet"
doneFieldSet="onDoneFieldSet"
failFieldSet="onFailFieldSet"

columnSet="columnset1"
dpOptionSet="dataProviderOption1"
gridOptionSet="gridOption1"
styleSet="defaultStyle"

dataSet="griddata1.json"
successDataSet="onGridSuccessDataSet"

gridWidth="100%"
gridHeight="300px" %}

설명 보이기 필드 컬럼 Provider 옵션 Grid 옵션 스타일

트리 표시하기

트리도 그리드와 동일한 방법으로 페이지에 추가합니다. dataSet의 데이터를 ajax()로 읽어오고, success 시 successDataSet에 연결된 함수를 호출합니다. 따라서 트리에 데이터를 입력하는 코드는 아래와 같이 onSuccessdDataSet() 함수내에서 처리해 주면 됩니다.

한 화면에 그리드나 트리가 여러개인 경우 함수형 변수의 이름이 중복되지 않도록 주의하세요.

<script>
  var onTreeSuccessDataSet = function(data, textStatus, jqXHR) {
    treeDataProvider.setRows(data, "tree", true, "", "icon");
  }

  var onDoneDataSet = function() {
    // 트리에 아이콘을 추가 하는 작업등 데이터를 그리드에 뿌린 이후 작업
  }
</script>

{% include realtree.html
  treeVar="treeView"
  dpVar="treeDataProvider"
  treeId="realtree"

  fieldSet="treeFieldset1"
  columnSet="treeColumnset1"
  dpOptionSet="treeDataProviderOption1"
  treeOptionSet="treeOption1"
  styleSet="treeStyle1"

  dataSet="treedata1.json"
  successDataSet="onTreeSuccessDataSet"
  doneDataSet="onDoneDataSet"

  treeWidth="100%"
  treeHeight="300px" %}

위 코드를 입력하면 트리는 아래와 같이 표시됩니다.

설명 보이기 필드 컬럼 Provider 옵션 Tree 옵션 스타일

그리드(또는 트리)는 인자로 입력했던 변수명(위에서 treeView 또는 treeDataProvider)을 이용해 그리드를 컨트롤 할 수 있습니다. 아래 버튼을 눌러 위에 표시된 트리에 아이콘을 입력하는 동작을 실행해 보도록 하겠습니다.

트리에 아이콘 넣기

위 버튼을 눌렀을때 트리에 아이콘을 추가하는 동작을 작동시키기 위해 아래 코드를 페이지에 삽입합니다.

<a class="btn primary small round lowercase" id="btnAddTreeIcons">트리에 아이콘 넣기</a>

<script>
$('#btnAddTreeIcons').click(function() {
  var imgFiles = [
                "ar.png",
                "br.png",
                "fr.png",
                "mx.png",
                "pt.png",
                "es.png",
                "gb.png",
                "us.png",
                "ve.png"
    ];
    
    var imageList = new RealGridJS.ImageList("images", <mark>"{{"/resource/image/smallflag/" | prepend: site.baseurl}}"</mark>);
    
    imageList.addUrls(imgFiles);
    treeView.registerImageList(imageList);

    treeView.setTreeOptions({
        iconImages: imageList.getName(),
        iconWidth: 20
    });
});
</script>

여기서 아이콘 이미지를 불러오기 위해 resource/image 폴더를 참조 한다는 것과 prepend필터를 사용해야 한다는 것을 주의해서 작성 하시면 됩니다.

데브 박스(dev. box)

데브박스는 오른쪽에 표시되는 코드 입력창이며, 기본적으로 지킬에 의해 markdown 렌더링 되기 때문에 위에 작성한 문서 작성방법과 동일한 방법으로 문서를 작성 하시면 됩니다.

버튼 동작의 경우 첫 번째 기본버튼만 사용하세요.

프론트메터의 devboxfile에 기록된 파일을 ./devbox 폴더에 넣어 두면 자동으로 로드됩니다.

데브박스에 부제목 넣기: 데브박스 작성시 부제목은 ####(샵샵샵샵)을 사용하면 됩니다.
데브박스에 버튼 및 체크박스 넣기: 트리노드 페이지 참조

그리드 툴 박스

그리드 툴 박스는 각각의 그리드에 대한 정보를 조회할 수 있는 툴버튼과 공통기능 동작을 위한 버튼으로 구성됩니다.

툴 박스는 그리드나 트리의 아래쪽에 표시됩니다.

필드정보 보기
컬럼정보 보기
옵션정보 보기
스타일정보 보기
데이터 보기

툴 박스 없는 그리드 만들기

툴 박스를 보이지 않기 위해서는 showToolbox=false로 인자의 값을 입력하시면 됩니다.

Bootstrap

Bootstrap UI는 부분적으로만 적용합니다.

2016년 11월 현재 CSS의 row와 column 관련 스타일만 적용하고 있습니다.

RealGrid

RealPivot

데모페이지 작성요령

목차

메뉴 및 제목 표시하기

제목 Title 2 : 샵샵

제목 Title 3 : 샵샵샵

제목 Title 4 : 샵샵샵샵

프론트메터(front-matter)

버튼 표시하기

기본 버튼

추가 버튼(특수용도)

체크 라디오박스

링크 표시하기

이미지 표시하기

코드 표시하기

그리드 표시하기

각 인자에 대한 설명

변수

필드 정보

컬럼 정보

DataProvider 옵션정보

GridView 옵션정보

스타일 정보

데이터 정보

기타 정보

물리적인 파일 위치 `\resource` 폴더

그리드 구성시 콜백 처리방법

트리 표시하기

데브 박스(dev. box)

그리드 툴 박스

툴 박스 없는 그리드 만들기

Bootstrap

RealGrid

RealPivot

데모페이지 작성요령

목차

메뉴 및 제목 표시하기

제목 Title 2 : 샵샵

제목 Title 3 : 샵샵샵

제목 Title 4 : 샵샵샵샵

프론트메터(front-matter)

버튼 표시하기

기본 버튼

추가 버튼(특수용도)

체크 라디오박스

링크 표시하기

이미지 표시하기

코드 표시하기

그리드 표시하기

각 인자에 대한 설명

변수

필드 정보

컬럼 정보

DataProvider 옵션정보

GridView 옵션정보

스타일 정보

데이터 정보

기타 정보

물리적인 파일 위치 \resource 폴더

그리드 구성시 콜백 처리방법

트리 표시하기

데브 박스(dev. box)

그리드 툴 박스

툴 박스 없는 그리드 만들기

Bootstrap

물리적인 파일 위치 `\resource` 폴더