터치 지원

SpreadJS는 컨트롤의 여러 영역에서 터치 제스처를 지원합니다. 필터링, 크기 조절, 선택, 그룹화 등 다양한 종류의 상호작용에 터치 제스처를 사용할 수 있습니다. 이를 위해 터치 스크린이 필요하며, 터치 모니터나 터치 스크린이 장착된 스마트북형 노트북이 이에 해당합니다.

지원되는 브라우저 및 플랫폼은 다음과 같습니다:

Windows 데스크톱 (Microsoft Internet Explorer 9 이상, Google Chrome, Mozilla Firefox, Opera)
태블릿 PC - Surface (Microsoft Internet Explorer 10 이상)

터치 지원을 위해서는 위젯이 기본 터치 제스처를 지원해야 합니다. 기본 또는 일반 제스처, 핀치나 확대 같은 여러 종류의 터치 제스처가 있습니다.

기본 터치 제스처에는 다음이 포함됩니다:

제스처	설명
탭 (Tap)	한 손가락으로 화면을 터치한 후 뗍니다.
누르고 유지하기 (Press and hold)	한 손가락으로 화면을 터치한 채 그대로 유지합니다.
슬라이드 (Slide)	한 개 이상의 손가락이 화면을 터치한 후 같은 방향으로 움직입니다.
스와이프 (Swipe)	한 개 이상의 손가락이 화면을 터치한 후 같은 방향으로 짧게 움직입니다.
핀치 (Pinch)	두 개 이상의 손가락이 화면을 터치한 후 서로 멀어지거나 가까워집니다.
회전 (Rotate)	두 개 이상의 손가락이 화면을 터치한 후 시계 방향 또는 반시계 방향으로 움직입니다.
스위치 (Switch)	두 개 이상의 손가락이 화면을 터치한 후 서로 멀어집니다.

SpreadJS는 확대/축소할 때 표준 “핀치 앤 스트레치” 제스처를 사용합니다.

터치 지원은 여러 영역과 다양한 유형의 위젯 상호작용에서 사용할 수 있습니다. 다음 섹션에서는 터치 지원이 가능한 위치를 설명합니다.

자동 맞춤

AutoFit에서 터치 제스처를 사용할 수 있습니다.

열 머리글을 탭하면 열 머리글 오른쪽 가장자리에 크기 조절 표시기가 나타납니다. 행 머리글의 아래쪽 가장자리를 탭하면 행 크기 조절 표시기가 나타납니다.

크기 조절 표시기를 더블탭하면, 열 또는 행이 텍스트에 맞게 자동으로 크기 조절됩니다.

셀 유형

셀 유형이 표시 모드 또는 편집 모드일 때 터치 제스처를 사용할 수 있습니다.

셀을 더블탭하면 편집 모드로 전환됩니다.

셀을 탭하면 선택됩니다. 빈 영역을 탭하면 하이퍼링크 및 콤보 박스 셀의 도구 모음이 표시됩니다. 버튼이나 체크박스와 같은 셀 유형은 다음 이미지에서 보여주듯 선택 표시기 위를 탭해야 도구 모음이 표시됩니다.

드래그하여 채우기

드래그 및 채우기 시 터치 도구 모음을 사용할 수 있습니다.

셀을 선택하면 도구 모음이 표시됩니다.

도구 모음에서 “자동 채우기(AutoFill)”를 선택하면 오른쪽 아래 모서리에 채우기 표시기가 나타납니다. 선택용 그리퍼는 더 이상 표시되지 않습니다.
채우기 표시기를 누른 상태에서 슬라이드합니다.
손가락을 떼면 셀들이 채워집니다.

편집 가능한 셀

편집이 가능한 셀은 터치 제스처로 편집할 수 있습니다.

셀을 더블탭하면 편집 모드로 전환됩니다.

필터링

터치 제스처로 필터링할 수 있습니다.

필터 아이콘을 탭하면 필터 대화상자가 표시됩니다. 그런 다음 탭하여 필터 옵션을 선택합니다.

다음 코드 샘플은 필터를 생성하는 예시입니다.

var cellrange =new GC.Spread.Sheets.Range(0, 2, 5, 1);
var hideRowFilter =new GC.Spread.Sheets.Filter.HideRowFilter(cellrange);
activeSheet.rowFilter(hideRowFilter);

그룹화

그룹을 확장하거나 축소할 때 터치 제스처를 사용할 수 있습니다.

그룹 버튼 또는 그룹 헤더 버튼을 탭하여 그룹을 확장하거나 축소합니다.

다음 코드 샘플은 열 그룹과 행 그룹을 생성합니다.

activeSheet.suspendPaint();
activeSheet.setRowCount(34);
activeSheet.setValue(0,0,"Western");
activeSheet.setValue(0,1,"Western");
activeSheet.setValue(0,2,"Western");
activeSheet.setValue(1,0,"A");
activeSheet.setValue(1,1,"B");
activeSheet.setValue(1,2,"C");
activeSheet.setValue(2,0,"A");
activeSheet.setValue(2,1,"B");
activeSheet.setValue(2,2,"C");
activeSheet.rowOutlines.group(0,2);
activeSheet.columnOutlines.group(0,1);
activeSheet.resumePaint();

열 또는 행 크기 조절

터치 제스처로 열이나 행의 크기를 조절할 수 있습니다.

열 또는 행을 선택(탭하여 선택)한 후, 크기 조절 핸들을 누르고 슬라이드하여 너비나 높이를 변경한 다음 손가락을 떼면 됩니다.

스크롤

터치 지원 제스처로 스크롤할 수 있습니다. 여기에는 느리게 스크롤하기와 관성 스크롤이 포함됩니다.

스크롤은 한 방향(위, 아래, 왼쪽 또는 오른쪽)으로만 지원됩니다.

뷰포트에서 손가락을 누른 채 원하는 방향으로 천천히 스크롤할 수 있으며, 손가락을 떼면 스크롤이 멈춥니다. 관성 스크롤은 뷰포트에서 손가락을 누른 후 짧은 거리를 빠르게 움직여(flick) 손가락을 떼면 동작합니다.

탭 스트립

탭 스트립에서도 터치 제스처를 사용할 수 있습니다. 탭을 변경하고, 시트를 선택하거나 편집하며, 탭 스트립 크기를 조절하고, 스크롤할 수 있습니다.

탭 스트립 버튼을 탭하여 탭 스트립을 탐색합니다. 탭 스트립에서 시트 이름을 탭하면 해당 시트를 선택할 수 있습니다. 시트 이름을 더블탭하면 시트 이름을 편집할 수 있습니다. 이름을 편집하려면 options.tabEditable 메서드가 true여야 합니다. 새 탭(New tab)을 탭하면 시트를 생성합니다.

크기 조절 바를 드래그하여 탭 스트립 크기를 조절할 수 있습니다. 크기 조절 바를 누른 상태에서 오른쪽으로 드래그한 후 손가락을 떼면 탭 스트립 크기가 조절됩니다.

탭 스트립 영역에 표시할 수 있는 시트 수보다 더 많은 시트가 있을 경우, 팬(panning) 제스처로 탭 스트립 내 시트를 스크롤할 수 있습니다.

터치 도구 모음

기본 터치 도구 모음을 사용하여 셀을 잘라내기, 복사, 붙여넣기 또는 자동 채우기할 수 있습니다.

선택한 범위를 탭하면 터치 도구 모음이 표시됩니다. 아래 이미지는 기본 터치 도구 모음을 보여줍니다.

도구 모음에 항목을 추가하거나 제거할 수 있습니다. 도구 모음의 이미지와 텍스트도 사용자 지정할 수 있으며, 구분선(separator)도 추가할 수 있습니다. 아래 이미지는 사용자 지정된 터치 도구 모음을 보여줍니다.

다음 코드 샘플은 터치 도구 모음에 사용자 지정 항목과 이미지를 추가하는 예시입니다.

spread.touchToolStrip.add(new GC.Spread.Sheets.Touch.TouchToolStripItem("Cut", "Delete", "cut.png", function(){ }))
spread.touchToolStrip.getItem("Cut").font("15px Arial").foreColor("red");
spread.touchToolStrip.add(new GC.Spread.Sheets.Touch.TouchToolStripSeparator());

확대/축소

확대/축소할 때 터치 지원 제스처를 사용할 수 있습니다.

SpreadJS에서 두 손가락을 누른 상태로, 손가락을 벌리면 화면이 확대되고, 손가락을 모으면 화면이 축소됩니다.

위 이미지는 터치 제스처로 확대되어 더 큰 화면이 표시된 상태입니다.