! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

[Wijmo 시작하기] CollectionView 사용법 > 온라인 스터디

본문 바로가기

기초튜토리얼 [Wijmo 시작하기] CollectionView 사용법

페이지 정보

작성자 GCK루시 작성일 2023-03-09 10:15 조회 445회 댓글 0건

본문

Wijmo (위즈모)는 비즈니스 애플리케이션의 다양한 요구 조건을 충족할 수 있는 UI 자바스크립트 라이브러리 제품으로, 그리드(Grid), 차트(Chart), OLAP 피벗, Input (텍스트박스, 콤보박스, 달력 등..)과 같이 데이터를 시각화하고 관리할 수 있는 다양한 UI 컨트롤을 제공하고 있습니다.


Wijmo에서는「FlexGrid(플렉스그리드)」또는 「FlexChart(플렉스차트)」라는 하이 퍼포먼스를 지닌 UI 컨트롤 사용이 가능하지만 해당 컨트롤의 데이터를 관리하는 기능으로서 「CollectionView(컬렉션 뷰)」를 제공하고 있습니다. 이번 포스팅에서는 Wijmo의 뒤에서 지원하는 데이터 관리 클래스 "CollectionView"에 대해 설명하도록 하겠습니다.


 목차 


1. 개발 환경

2. CollectionView란?

    1) XAML 플랫폼의 CollectionView

    2) Wijmo의 CollectionView

3. CollectionView 사용해보기

    1) Wijmo 참조

    2) 초기화 처리 및 데이터 표시

4. FlexGrid와 함께 사용해보기

    1) 참조 추가

    2) 더미 배열 데이터 설정

5. CollectionView에서 변경 내용 추적

6. 마치며






 개발 환경 

이번 포스팅에서는 아래 개발 환경을 사용하였습니다.


 CollectionView란? 

 1) XAML 플랫폼의 CollectionView 

WPF등 XAML 플랫폼에서의 개발 경험이 있는 분이라면 .NET의 데이터 관리 함수에 대해 익숙하실 거라 생각합니다.
WPF 등에서 사용할 수 있는 CollectionView는 이름 그대로 컬렉션 뷰의 역할을 하며 요소의 정렬, 필터링 및 그룹화 할 수 있습니다.

Wijmo가 제공하는 CollectionView는 XAML 플랫폼의 CollectionView의 JavaScript 버전으로 .NET에서의 개발 경험이 있는 분에게는 더욱 익숙한 기능입니다.

 2) Wijmo의 CollectionView 

Wijmo의 CollectionView는 마찬가지로 MVVM 친화적인 방식으로 데이터를 UI 요소에 연결할 수 있으며 주로 다음 세 가지 인터페이스를 구현합니다.

<Wijmo의 CollectionView가 구현하는 인터페이스>

 ICollectionView

 현재 레코드 관리, 사용자정의 정렬, 필터링, 그룹화를 제공합니다.

 IEditableCollectionView

 항목을 편집, 추가, 삭제하는 메소드를 제공합니다.

 IPagedCollectionView

 페이징을 제공합니다.




 CollectionView 시작하기 

지금 바로 CollectionView 구현을 시작하도록 하겠습니다. CollectionView는 Wijmo 컨트롤과 함께 사용할 때 진가를 발휘하지만 일반적인 JavaScript 배열과 JSON 데이터 정렬 및 필터링에도 사용할 수 있습니다.

아래 2개 파일을 준비하여 CollectionView의 기능을 구현해 보겠습니다.

 index.html

 페이지 메인. 페이지의 요소로 다양한 컨트롤을 배치합니다.

 app.js

 CollectionView의 다양한 기능을 구현하기 위한 코드를 입력합니다.



1) Wijmo 참조 

먼저 CollectionView를 사용하는 데 필요한 라이브러리의 참조 설정을 HTML 파일에 추가합니다. CollectionView는 UI를 포함하지 않는 기능이지만, Wijmo의 함수는 브라우저에서 사용할 수 있도록 설계되었기 때문에 HTML 파일을 준비합니다.

또한 Wijmo의 모듈 외에 CollectionView의 각종 처리를 입력하는 "app.js"에 대한 참조를 추가하고 ul 태그로 CollectionView 작업의 결과를 표시하는 리스트를 정의합니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>CollectionView 시작하기</title>

    <!-- Wijmo 핵심 모듈(필수) -->
    <script src="scripts/wijmo.min.js"></script>
    <script src="scripts/app.js"></script>
</head>
<body>
    <ul id="product_list"></ul>
</body>
</html>

위와 같이 직접 프로젝트에 모듈을 배치하는 방법 이외에 CDN에서 참조하거나 NPM 패키지를 사용할 수도 있습니다.


 2) 초기화 처리 및 데이터 표시 

다음으로 「app.js」에 연관 배열 데이터의 정의와 CollectionView를 사용해 정렬, 필터링하는 처리를 작성합니다.
이번에는 "unitprice"가 "200"보다 큰 항목을 내림차순으로 정렬합니다.

정렬된 결과는 createElement를 사용하여 목록에 추가됩니다.
let products = [
    { productId: 1, productName: "과즙100% 오렌지", unitPrice: 200 },
    { productId: 2, productName: "과즙100% 포도", unitPrice: 200 },
    { productId: 3, productName: "과즙100% 레몬", unitPrice: 1000 },
    { productId: 4, productName: "과즙100% 복숭아", unitPrice: 1000 },
    { productId: 5, productName: "커피", unitPrice: 1000 },
    { productId: 6, productName: "에스프레소", unitPrice: 1000 },
    { productId: 7, productName: "커피우유", unitPrice: 500 },
    { productId: 8, productName: "맥주", unitPrice: 100 },
    { productId: 9, productName: "탄산수", unitPrice: 2500 },
    { productId: 10, productName: "와인", unitPrice: 210 }
]

document.addEventListener("DOMContentLoaded", function () {
    // 데이터 배열을 기반으로 CollectionView 생성
    let view = new wijmo.collections.CollectionView(products);

    // unitPrice의 내림차순으로 정렬
    let sortDesc = new wijmo.collections.SortDescription('unitPrice', false);
    view.sortDescriptions.push(sortDesc);

    // unitPrice가 200보다 큰 항목만 표시
    view.filter = (item) => { return item.unitPrice > 200 };

    // 정렬 및 필터링 처리한 결과를 목록에 추가
    view.items.forEach((item) => {
        var newlist = document.createElement("li");
        var newtxt = document.createTextNode(item.productId + ': ' + item.productName + ' ' + item.unitPrice);
        newlist.appendChild(newtxt);
        document.getElementById("product_list").appendChild(newlist);
    });
});

설정이 완료되었으며 Visual Studio Code에서 index.html을 마우스 오른쪽 단추로 클릭하고 Open with Live Server를 실행합니다.

실행 후 브라우저에 정렬되고 필터링된 결과 목록이 아래와 같이 표시됩니다.

665d67cd6daf2f3ac80cb1d95543b03d_1678421491_3582.png
 FlexGrid와 함께 사용해보기 

CollectionView는 Wijmo에서 제공하는 다양한 컨트롤의 데이터 소스로 직접 설정할 수 있습니다. 이번에는 데이터 그리드 컨트롤인 "FlexGrid"와 함께 사용하는 방법을 소개하도록 하겠습니다. FlexGrid의 기본 사용법은 아래를 참조하시기 바랍니다.



 1) 참조 추가 

FlexGrid를 사용하기 위해 Wijmo 라이브러리 참조를 추가해야 합니다. Wijmo 스타일, FlexGrid, 문화(Culture) 모듈을 추가한 뒤 body에 FlexGrid를 표시하는 컨테이너 부분을 div 태그로 정의합니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>CollectionView 시작하기</title>

    <!-- Wijmo 스타일(필수) -->
    <link href="css/wijmo.min.css" rel="stylesheet" />

    <!-- Wijmo 핵심 모듈(필수) -->
    <script src="scripts/wijmo.min.js"></script>
    <!-- FlexGrid 모듈(필수) -->
    <script src="scripts/wijmo.grid.min.js"></script>
    <!-- Wijmo custom culture (옵션, 원하는 문화권을 추가) ->
    <script src="scripts/wijmo.culture.ko.min.js"></script>

    <script src="scripts/app.js"></script>
</head>
<body>
    <div id="Wijmo_FlexGrid" style="height: 400px; width:800px"></div> 
</body>
</html>

 2) 더미 배열 데이터 설정 

본 포스팅의 앞부분에서 사용된 더미 배열 데이터를 표시해보도록 하겠습니다.

다음과 같이 "app.js"의 내용을 다시 작성하고 CollectionView를 FlexGrid의 itemSource 속성으로 설정합니다.
・・・(생략)
document.addEventListener("DOMContentLoaded", function () {
    // 데이터 배열을 기반으로 CollectionView 생성
    let view = new wijmo.collections.CollectionView(products);

    let flexGrid = new wijmo.grid.FlexGrid('#Wijmo_FlexGrid', {
        itemsSource: view,
    })
});

실행하면 이전 데이터를 아래와 같이 FlexGrid에 표시할 수 있습니다.

665d67cd6daf2f3ac80cb1d95543b03d_1678421402_2934.png
FlexGrid에 데이터를 표시하는 경우, 이전 포스팅에서 소개한 방법과 같이, CollectionView를 작성하지 않고, itemSource 속성에 직접 배열 데이터를 설정하는 방법도 있습니다. 실제로 이 경우에도 FlexGrid의 내부에서는 암시적으로 CollectionView가 설정됩니다.

단순히 데이터를 표시하려는 경우 위와 같이 CollectionView를 암시적으로 사용하는 방법도 있지만, CollectionView를  명시적으로 사용하면 사용자 작업 없이 정렬이나 필터링할 수 있으며 업데이트된 데이터를 추적할 수 있습니다. 이와 관련해서는 이후에 설명하도록 하겠습니다.

다음은 FlexGrid에서 미리 정렬되고 필터링된 데이터를 표시하는 예입니다.

・・・(생략)
document.addEventListener("DOMContentLoaded", function () {
    // 데이터 배열을 기반으로 CollectionView 생성
    let view = new wijmo.collections.CollectionView(products);

    // unitPrice의 내림차순으로 정렬
    let sortDesc = new wijmo.collections.SortDescription('unitPrice', false);
    view.sortDescriptions.push(sortDesc);

    // unitPrice가 200보다 큰 항목만 표시
    view.filter = (item) => { return item.unitPrice > 200 };

    let flexGrid = new wijmo.grid.FlexGrid('#Wijmo_FlexGrid', {
        itemsSource: view,
    })
});

코드 실행 시, 글 전반부에서 목록을 볼 때와 마찬가지로 아래 이미지와 같이 정렬, 필터링된 데이터를 볼 수 있습니다.

665d67cd6daf2f3ac80cb1d95543b03d_1678421422_8259.png
아래 샘플에서 자세한 코드를 확인하실 수 있습니다.




 CollectionView에서 변경 내용 추적 

CollectionView는 데이터 변경을 추적할 수 있는 기능이 있어 이러한 CRUD 처리를 수행하는 애플리케이션을 개발할 때 매우 유용합니다. 변경된 내용은 각각 다음 컬렉션에 저장됩니다.

 itemsAdded

 변경 추적을 사용하도록 설정한 다음 컬렉션에 추가된 레코드가 포함된 배열을 가져옵니다.

 itemsEdited

 변경 추적을 사용하도록 설정한 다음 컬렉션에서 편집된 레코드가 포함된 배열을 가져옵니다.

 itemsRemoved

 변경 추적을 사용하도록 설정한 다음 컬렉션에서 삭제된 레코드가 포함된 배열을 가져옵니다.



변경 추적을 사용하려면 CollectionView의 trackChanges 속성을 true로 설정해주셔야 합니다.
더불어 그리드 상에서 신규 생성, 삭제가 실행될 수 있도록, FlexGrid의 allowAddNew 속성과 allowDelete 속성도 true로 설정합니다.

자세한 코드의 경우, 저희 변경 추적 데모 페이지를 방문하여 확인하여 주시기 바랍니다.

 마치며 

Wijmo의 주요 컨트롤 중 하나인 CollectionView의 기능에 대해 소개했습니다. 비즈니스 애플리케이션에 요구되는 세세한 요건을 구현하는 기능을 풍부하게 갖추고 있으므로 데이터 그리드가 필요하실 때 Wijmo를 이용하여 개발해보시기 바랍니다.

다음 포스팅에서는 기본 기능을 넘어 FlexGrid를 다양하게 활용하는 방법에 대해 소개하도록 하겠습니다.

다음 시리즈 글도 기대해주세요!
 




지금 바로 Wijmo를 다운로드하여 직접 테스트해보세요!

wj.png

 
  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

태그1

인기글

더보기
  • 인기 게시물이 없습니다.
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.