Accordion
요약 |
|
|---|---|
기능 및 특징 |
|
주요 용도 | 검색용 키워드 입력 상자 |
YouTube 동영상 |
|
모든 패널 열기
unCollapseAll="false"
unCollapseAll="true"
YouTube 동영상 (https://youtu.be/FObIC3iWy_4)
Enter 키로 패널 열고 닫기
enterKeyPanelToggle="true" 속성 설정을 추가하면, Enter 키를 눌러 패널을 열고 닫을 수 있습니다.
예제 파일
인터넷에서 다운로드 혹은
WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기
(/Accordion/enterKeyPanelToggle_Accordion.xml)
YouTube 동영상 (https://youtu.be/1fSpSevuwGA)
열린 패널 속성 확인
특정 열린 패널의 속성 확인 (getOpenPanelInfo())
$r_title(사용 예) // 열려 있는 패널 중 첫번째 패널에 대한 속성을 반환. accordion1.getOpenPanelInfo(); // 열려 있는 패널 중 두번째 패널에 대한 속성을 반환. accordion1.getOpenPanelInfo(1);
YouTube 동영상 (https://youtu.be/1O4RTyEfGwg)
모든 열린 패널의 속성 확인 (getOpenPanelListInfo())
예제 파일
인터넷에서 다운로드 혹은
WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기
(/Accordion/getOpenPanelListInfo_Accordion.xml)
YouTube 동영상 (https://youtu.be/yWgZuaPL_JQ)
패널의 열린 상태를 유지
independentPanel="true" 속성 설정을 추가하면, 여러 패널들을 열린 상태로 유지할 수 있습니다. 즉, 한 패널을 연 후에 다른 패널을 열어도 처음 연 패널(들)이 닫히지 않고 열린 상태로 유지됩니다.
YouTube 동영상 (https://youtu.be/KHSd1h2JA6s)
이벤트
onpanelload & onpanelunload
Accordion의 패널이 (완전히 로딩되어) 열리거나 (패널이 완전이 언로딩되어) 닫히는 시점에 onpanelload 및 onpanelunload 이벤트가 각각 아래 파라미터 반환하면서 발생합니다.
panlID: 로딩/언로딩된 패널의 ID로 엔진 내부에서 사용하는 ID.userID: 로딩/언로딩된 패널의 사용자 ID.
$r_title(사용 예)
scwin.accordion1_onpanelload = function(panlID, userID) {
alert(panlID + userID);
};
scwin.accordion1_onpanelunload = function(panlID, userID) {
alert(panlID + userID);
};예제 파일
인터넷에서 다운로드 혹은
WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기
(/Accordion/onpanelload_onpanelunload_Accordion.xml)
YouTube 동영상 (https://youtu.be/CdnZZKNvhYk)
PageControl
요약 | 페이지 이동용 UI를 제공. |
|---|---|
기능 및 특징 | 단순히 앞으로 가기 및 뒤로 가기의 기능만 제공. |
주요 용도 | 전체 페이지 수 및 페이지 당 표시하고 싶은 데이터 수는 직접 구현해야 함. |
PageControl
PageList
요약 | 페이지 수와 페이지를 선택하는 인터페이스를 제공 |
|---|---|
YouTube 동영상 |
|
PageList
페이지 이동
displaySearchbox="true" 속성 설정을 통해 페이지 번호 입력란을 추가할 수 있습니다. 최종 사용자가 페이지 번호 입력 란에 페이지 번호를 입력 후 엔터키를 치거나 입력 상자를 빠져나올 경우 해당 페이지가 바로 출력됩니다.
displaySearchbox="true" Vs. displaySearchbox="false"
YouTube 동영상 (https://youtu.be/iWo8SKPH_-0)
페이지 이동 버튼 표시
- 페이지 이동 버튼 지정
buttonShowType="0": 이전/다음 목록 버튼만 표시 (2개)
buttonShowType="1" (기본 값): 이전/다음 페이지 + 이전/다음 목록 버튼 (4개)
buttonShowType="2": 이전/다음 페이지 버튼만 표시 (2개)
buttonShowType="3": 이전/처음 목록 + 첫/끝 페이지 버튼 (4개)
buttonShowType="4": 첫/이전 페이지 + 다음/끝 페이지 버튼 (4개)
buttonShowType 속성을 통해 페이지 이동 버튼의 종류를 지정할 수 있습니다.
|◀ | 11 12 13 14 15 | ▶| | ||
(이전 목록으로 이동) | (다음 목록으로 이동) |
|◀ | ◀ | 11 12 13 14 15 | ▶ | ▶| |
(이전 목록으로 이동) | (이전 페이지로 이동) | (다음 페이지로 이동) | (다음 목록으로 이동) |
|◀ | 11 12 13 14 15 | ▶| | ||
(이전 페이지로 이동) | (다음 페이지로 이동) |
|◀ | ◀ | 11 12 13 14 15 | ▶ | ▶| |
(첫 페이지로 이동) | (이전 목록으로 이동) | (다음 목록으로 이동) | (끝 페이지로 이동) |
|◀ | ◀ | 8 9 10 11 12 | ▶ | ▶| |
(첫 페이지로 이동) | (이전 페이지로 이동) | (다음 페이지로 이동) | (끝 페이지로 이동) |
예제 (페이지 번호 구현)
PageControl 컴포넌트는 단순히 앞으로가기, 뒤로가기의 기능만 제공합니다. 즉, 개발자가 직접 전체 페이지 수, 페이지당 표시하고 싶은 데이터 수 등을 구현해야 합니다.
- DataCollection의 경우,
(1) 데이터를 포함하고 있는 DataCollection에서 원하는 양의 데이터를 가져와,
(2) 새로운 DataCollection을 만들고,
(3) 그 안에 넣어 GridView 컴포넌트에 바인딩 시켜줘야 합니다.
- 예를 들어,
25개의 데이터를 포함하고 있는 DataCollection이 있고,
GridView 컴포넌트에 페이지당 5개의 데이터를 표시하고 싶다면,
(1) PageControl 컴포넌트 이벤트를 통해 DataCollection에서 데이터 5개를 가져와서,
(2) 새로운 DataCollection에 넣어주고,
(3) 새로 만든 DataCollection을 GridView와 바인딩해야 합니다.
$r_title(PageControl)
<head>
<script type="javascript"><![CDATA[
var dataObject = $p.data.dataList1.getAllJSON();
var dataObject1 = [];
var i = 0;
var columnNum = 19;
var row = 5;
var start = 0;
function init(){
//화면이 처음 생성되면 초기화
if(dataObject.length % row == 0){
var pageConNum = dataObject.length/row;
}
else{
var pageConNum = (dataObject.length/row)+1;
}
pageControl2.setCount( pageConNum );
dataSwitch(1,0);
}
function dataSwitch(current, before){
//데이터를 포함하고 있는 DataCollection의 데이터를 원하는 만큼 복사
dataObject1 = [];
if(before == 0){
start = 0;
}
else {
start = row*before;
}
for(i=start; i<(row*current); i++){
dataObject1.push(dataObject[i]);
}
dataList2.setJSON(dataObject1);
}
scwin.pageControl2_onchange = function(current,before){
// 페이지컨트롤 컴포넌트의 버튼이 클릭되면 이벤트 발생
if(current != before){
dataSwitch(current, before);
}
};
init();
]]></script>
</head>
<body>
<w2:pageControl ev:onchange="scwin.pageControl2_onchange" rotation="false" pagingType="1" id="pageControl2" class="">
</w2:pageControl>
</body>TreeView
요약 | 계층적인 데이터를 트리 형태로 표시 |
|---|---|
기능 및 특징 |
|
YouTube 동영상 |
|
데이터 입력 (Inner XML / ItemSet)
Innter XML
아래와 같이 데이터 입력 방법을 선택한 후, 각 노드의 정보를 설정하고 [OK] 버튼을 클릭하십시오.
Inner XML: 데이터를 직접 입력
ItemSet: DataList와 바인딩
(1) | Inner XML | ItemSet |
|---|---|---|
(2) | 아래의 버튼으로 구성한 TreeView를 표시 | |
(3) |
| |
(4) | TreeView 상에 표시된 각 노드의 정보
|
|
(5) |
|
아래 함수를 사용하여 해당 노드는 물론 자녀 노드까지 선택/해제 할 수 있습니다.
동적 노드 선택 및 해제
- checkByIndex( index , checkValue , childCheck )
index: 노드 인덱스.
checkValue: 선택 및 해제 여부
childCheck: 자녀 노드의 선택 및 해제 여부
$r_title(사용 예 (Index가 1인 노드 및 하위 노드를 모두 선택)) treeview1.checkByIndex( 1 , true, true);
노드 정보 확인
아래 함수를 사용하여 노드의 자식 포함 여부를 확인할 수 있습니다.
$r_title(사용 예 (1)) treeview1.findNodeByIndex(1).hasChild();
$r_title(사용 예 (2))
treeview1.findNodeByValue('menu02').hasChild();혹은 노드가 자식인지를 확인할 수 있습니다.
$r_title(사용 예 (1)) treeview1.findNodeByIndex(1).isLeaf();
노드 라벨 포맷
customFormatter 속성에 각 노드의 label 값을 포맷하는 함수명을 지정할 수 있습니다. 단, 해당 함수는 별도의 스크립트로 직접 작성해야 합니다.
$r_title(사용 예) treeViewFormatter = function(orgLabel, label, node ) { return node.label+"_"+node.index; }; (중략) <w2:treeview ... customFormatter="treeViewFormatter">
노드 접기/펼치기
항목 | 설명 |
|---|---|
관련 함수 |
|
전체 트리 접기/펼치기 (spanAll())
$r_title(사용 예)
// 전체 노드를 닫음.
treeView1.spanAll(false);
// 전체 노드를 열어서 표시.
treeView1.spanAll(true);YouTube 동영상 (https://youtu.be/i6isWpeG4Bg)
특정 노드 접기/펼치기 (spanNode())
$r_title(사용 예) // index="1" 노드를 열거나 닫음. treeView1.spanNode(1); // index="1" 노드를 열어서 표시. treeView1.spanNode(1, true); // index="1" 노드를 열되 자식 노들들도 모두 열여서 표시. treeView1.spanNode(1, true, true);
YouTube 동영상 (https://youtu.be/zs1aRFTlUHc)
체크박스
표시하기
showCheckbox 속성을 사용하여 TreeView 각 항목 앞에 체크박스를 표시할 수 있습니다. 또한, showCheckbox 속성은 setShowChecBox() 함수를 사용하여 동적으로 설정할 수 있습니다.
showCheckbox="false"
showCheckbox="true"
$r_title(사용 예) // showCheckbox 속성을 "true"로 설정 treeview1.setShowCheckBox(true); // showCheckbox 속성을 "false"로 설정 treeview1.setShowCheckBox(false);
예제 파일
인터넷에서 다운로드 혹은
WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기
(/TreeView/showCheckbox_setShowCheckBox_TreeView.xml)
YouTube 동영상 (https://youtu.be/WpGLtdALi3U)
계층 적용하기
hierarchy="true" 속성을 추가하면, 부모의 체크박스를 선택할 때 자식 노드를 모두 한번에 선택할 수 있습니다. 또한 자식 일부만 선택될 경우, 부모의 체크박스는 부분 선택으로 표시됩니다.
showCheckBox="true" hierarchy="true"
showCheckBox="true" hierarchy="false"
예제 파일
인터넷에서 다운로드 혹은
WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기
(/TreeView/showCheckbox_hierarchy_TreeView.xml)
YouTube 동영상 (https://youtu.be/5lO3ZLmhBHc)
지정한 노드에 스타일 적용 및 해제
setNodeClass() 및 removeNodeClass() 함수를 사용하여 지정한 TreeView 노드에 특정 스타일을 적용할 수 있습니다.
예제 파일
인터넷에서 다운로드 혹은
WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기
(/TreeView/setNodeClass_removeNodeClass_TreeView.xml)
YouTube 동영상 (https://youtu.be/gWexCY9D70Y)