Wijmo의 2019년 세 번째 릴리스가 출시되었습니다. Wijmo에서는 모든 프레임워크를 위한 빠르고 유연한 JavaScript 구성 요소를 제공합니다. 이 주요 릴리스에는 React 및 Vue 용 FlexGrid 셀 템플릿(당사가 Angular에서 제공하는 것과 유사)이 포함되어 있습니다. 새 column.cellTemplate 속성을 사용하여 PureJS에서 셀 템플릿을 작성할 수도 있습니다. 입력 양식 작성을 단순화하는 Vue 구성 요소에 양방향 바인딩도 추가했습니다. 열 핀 고정에서 다중 열 정렬 등에 이르기까지 FlexGrid의 몇 가지 사항을 개선했습니다. VSCode에서 Wijmo를 더 쉽게 사용할 수 있도록 TypeScript 입력도 개선했습니다.

이 제품은 훌륭하고 새로운 기능이 포함된 중요한 릴리스입니다! 자세히 알아보겠습니다.

Angular 9와 Ivy Compiler를 지원하는 Wijmo

Wijmo의 Angular 9 지원을 발표하게 되어 정말 기쁩니다. 이 릴리스(Wijmo 빌드 5.20193.637)에서는 Angular v9.0.0-rc.2 릴리스에 대한 지원이 추가되었습니다. Wijmo는 이제 새로운 Ivy Compiler와 호환됩니다. 당사는 새로운 Ivy Compiler를 지원하여 Angular v9 출시 시 고객이 사용할 수 있도록 하기 위해 Angular 팀과 긴밀히 협력해 왔습니다. Angular 팀은 모듈 패키징에 대한 몇 가지 권장 사항을 지원하고 일부 컴파일러 문제도 수정했습니다.

따라서 Angular 팀과 Wijmo 팀 덕분에 Ivy Compiler로 훨씬 더 빠른 엔터프라이즈 응용 프로그램을 작성할 수 있게 되었습니다.

React FlexGrid 셀 템플릿

Angular FlexGrid에서 가장 인기 있는 기능 중 하나는 셀 템플릿입니다. 이제 React FlexGrid 및 Vue FlexGrid에서 이 강력한 기능을 사용할 수 있습니다.

셀 템플릿을 사용하면 그리드의 모든 셀에서 선언적인 마크업 및 바인딩 식이 있는 템플릿을 무제한으로 이용할 수 있습니다.

또한 셀 템플릿을 사용하면 FlexGrid의 모든 셀을 매우 쉽게 사용자 정의할 수 있습니다. 다음은 국가 열에서 국기 이미지를 렌더링하는 예입니다.

    <wjGrid.FlexGridColumn header="Country" binding="country" width="\*">
        <wjGrid.FlexGridCellTemplate
            cellType="Cell"
            template=(context) => {
                return <React.Fragment>
                    <img src={`resources/${context.item.country}.png`} />
                    {context.item.country}
                </React.Fragment>
            } />
    </wjGrid.FlexGridColumn>

보이는 바와 같이 셀 템플릿의 조각에는 HTML, 바인딩 및 기타 구성 요소를 포함한 모든 마크업이 포함될 수 있습니다.

• React 셀 템플릿에 대해 자세히 알아보십시오.
• React 셀 템플릿 데모를 방문하십시오.

Vue FlexGrid 셀 템플릿

Angular 및 React와 마찬가지로 이제 Vue FlexGrid에서 셀 템플릿을 사용할 수 있습니다. 이 셀 템플릿을 사용하면 Vue DataGrid의 모든 셀에 사용자 정의 콘텐츠를 추가할 수 있습니다.

다음은 국가 열에서 국기 이미지를 렌더링하는 예(위의 React 예와 유사)입니다.

    <wj-flex-grid-column header="Country" binding="country" width="*">
        <wj-flex-grid-cell-template cellType="Cell" v-if="customCell" v-slot="cell">
            <img :src="'resources/' + cell.item.country + '.png'" />
        </wj-flex-grid-cell-templatecellType="Cell">
    </wj-flex-grid-column>

• Vue 셀 템플릿에 대해 자세히 알아보십시오.
• Vue 셀 템플릿 데모를 방문하십시오.

Wijmo Vue 구성 요소의 양방향 바인딩 

양방향 바인딩은 입력 양식 작성을 단순화하는 강력한 메커니즘입니다. Vue는 양방향 바인딩을 선언하기 위해 두 개의 서로 다른 구문, 즉 v-model 지시문과 sync 바인딩 수정자를 제공합니다. Vue 입력 구성 요소용 Wijmo는 두 가지를 모두 지원하므로 필요에 따라 둘 중에서 선택할 수 있습니다.

이 실제 샘플에서 Wijmo 양방향 바인딩 컨트롤의 예를 찾을 수 있습니다. 여기에서 ComboBox 및 InputNumber는 셀 편집 템플릿에서 사용됩니다.

• Vue 양방향 바인딩 데모
• Wijmo Vue 구성 요소의 양방향 바인딩에 대해 자세히 알아보십시오.

PureJS FlexGrid 셀 템플릿

Angular, React 또는 Vue 셀 템플릿과 혼동하지 않도록 Pure JS FlexGrid에 새로운 API를 추가했습니다. Column 클래스에는 formatItem 이벤트를 사용하지 않고 데이터 셀을 사용자 정의 렌더링할 수 있는 새로운 cellTemplate 속성이 있습니다.

Column.cellTemplate은 Angular, React 또는 Vue 셀 템플릿보다 훨씬 간단합니다. 이 템플릿에서는 템플릿 리터럴 문자열만 선언할 수 있습니다. HTML 요소를 넣거나 glbz 메서드로 구문 분석하고 셀에서 렌더링할 바인딩 식을 넣을 수도 있습니다.

다음은 국가 열에서 국기 이미지를 렌더링하는 예입니다.

    <pre>
        columns: [
        {
            header: 'Country', binding: 'country', width: '*',
            cellTemplate: '<img src="resources/${item.country}.png"/> ${text}'
        }]
    </pre>

• PureJS Column.cellTemplate 데모

FlexGrid 다중 열 정렬

FlexGrid는 데이터 정렬을 위해 CollectionView 클래스를 사용합니다. 이전 버전에서 그리드의 allowSorting 속성은 사용자가 머리글 셀을 클릭하여 열을 정렬할 수 있는지 여부를 결정하는 부울이었습니다. 이 메커니즘을 통해 사용자는 한 번에 하나의 열을 기준으로 정렬할 수 있었습니다.

2019 v3에서는 allowSorting 속성을 아래와 같이 Enumeration 형식으로 변경했습니다.

• AllowSorting.None: 사용자는 열 머리글을 클릭하여 그리드를 정렬할 수 없습니다. 이것은 이전 버전에서 allowSorting을 false로 설정하는 것과 같습니다.
• AllowSorting.SingleColumn: 사용자는 한 번에 하나의 열을 기준으로 그리드를 정렬할 수 있습니다. 열 머리글을 클릭하면 열이 정렬되거나 정렬 방향이 반전됩니다. Ctrl 키를 누른 상태에서 클릭하면 정렬이 제거됩니다. 이것은 이전 버전에서 allowSorting을 true로 설정하는 것과 같습니다.
• AllowSorting.MultiColumn: 사용자는 한 번에 여러 열을 기준으로 그리드를 정렬할 수 있습니다. 열 머리글을 클릭하면 열이 정렬되거나 정렬 방향이 반전됩니다. Ctrl 키를 누른 상태에서 클릭하면 해당 열에 대한 정렬이 제거됩니다. Ctrl + Shift 키를 누른 상태에서 클릭하면 모든 정렬이 제거됩니다.

다중 열을 정렬할 때 그리드는 열 머리글에 정렬 방향을 보여주며, 동시에 정렬 순서도 함께 표시합니다.

• 다중 열 정렬 데모

FlexGrid 핀 고정 열

FlexGrid는 코드를 통한 행 및 열 고정을 지원했지만 이 고정된 행 및 열을 보여주고 제어하기 위한 UI는 제공되지 않았습니다.

2019 v3에서는 열 머리글에 핀 글리프(아미콘)를 추가하는 allowPinning 속성을 추가했습니다. 이제 고정으로 하면 행 및 열에 핀 모양이 나타나며, 핀을 클릭하면 열이 고정되거나 고정이 해제됩니다.

• FlexGrid 열 핀 고정 데모

FlexGrid 전체 텍스트 검색

FlexGrid는 FlexGridFilter 컴포넌트를 통한 Excel 스타일의 열 기반 필터링을 지원했습니다.

2019 v3에서는 전체 텍스트 검색/필터링 인터페이스를 제공하는 FlexGridSearch 컨트롤이 포함된 새로운 wijmo.grid.search 모듈이 추가되었습니다. 이 모듈은 사용자가 FlexGridSearch 컨트롤에 텍스트를 입력하면 검색 텍스트를 기준으로 항목을 필터링하고 일치하는 항목을 자동으로 강조 표시합니다.

이미지에서 볼 수 있듯이 FlexGridSearch 컨트롤은 FlexGridFilter 구성 요소와 함께 사용할 수 있습니다.

FlexGridSearch 컨트롤은 Add a Data Grid Search Panel(데이터 그리드 검색 패널 추가) 블로그의 토론에서 영감을 얻어 개발되었습니다.

• FlexGrid 검색 데모

TransposedGrid

일반 그리드에서 각 항목은 항목 속성을 나타내는 열을 기준으로 행 단위로 표시됩니다. 

반전(transposed) 그리드에서 각 항목은 항목 속성을 나타내는 행을 기준으로 열 단위로 표시됩니다.

데이터 항목이 열로 표시되고 해당 속성이 행으로 표시되는 TransposedGrid 컨트롤이 포함된 새로운 wijmo.grid.transposed 모듈이 추가되었습니다. 이제 Wijmo의 새로운 TransposedGrid 컨트롤을 사용하면, 위의 예시와 같은 화면을 휠씬 쉽게 만들 수 있습니다.

• TransposedGrid 데모

CSV 파일 저장

FlexGrid는 그리드 데이터를 여러 형식으로 저장하는 기능을 항상 지원했습니다. CSV로 저장하면 추가적인 라이브러리가 필요하지 않고 출력 파일을 Excel에서 열 수 있으므로 효과적인 옵션으로 자주 사용되었습니다.

2019 v3에서는 다음 두 가지 기능을 추가하여 CSV 파일 저장 기능을 훨씬 더 쉽고 강력하게 만들었습니다.

1. Wijmo 핵심에 saveFile 메서드를 추가하여 동일한 상용구 코드를 반복해서 복사하지 않고도 텍스트 파일을 쉽게 저장할 수 있도록 했습니다.
2. 이제 그리드의 getClipString 메서드에 클립 문자열을 생성할 방법을 정확하게 지정할 수 있는 options 매개 변수가 제공됩니다. 사용 가능한 옵션은 아래에 나와 있습니다.

이 변경 사항에 따라 두 줄의 코드를 사용하여 CSV 파일을 저장할 수 있습니다.

    <pre>// 클립 문자열을 가져옵니다(현재 선택, 열 머리글 사용)
        const clipString = grid.getClipString(null, options, true, false);

        // 파일에 저장합니다
        saveFile(clipString, 'flexgrid.csv');</pre>

다음은 ClipStringOptions 열거에서 사용 가능한 옵션입니다.

• ClipStringOptions.Default: 기본 옵션을 사용합니다(셀 구분 기호로 탭 사용, 서식/표시/따옴표가 없는 셀). 클립보드에 복사/붙여넣기 시 내부적으로 사용되는 형식입니다.
• ClipStringOptions.CSV: 셀 구분 기호로 쉼표를 사용합니다(CSV 형식). CSV 파일을 내보내는 데 사용되는 기본 형식입니다.
• ClipStringOptions.QuoteAll: 모든 셀을 따옴표로 묶습니다. 쉼표와 따옴표가 있는 셀에만 따옴표를 추가하는 것이 아니라 모든 셀을 따옴표로 묶습니다. 출력 파일을 좀 더 쉽게 구문 분석할 수 있습니다.
• ClipStringOptions.SkipMerged: Excel처럼 병합된 셀을 건너뜁니다. 따라서 경우에 따라 출력 파일을 조금 더 쉽게 읽을 수 있습니다.
• ClipStringOptions.Unformatted: 서식이 지정되지 않은 값을 내보냅니다. 이 형식은 서식이 지정된 값만 저장하는 것이 아니라 숫자 값의 전체 정밀도를 유지합니다.
• ClipStringOptions.InvisibleRows: 출력에 숨겨졌거나 축소된 행을 포함합니다. 기본적으로 숨겨진 행과 축소된 행은 포함되지 않습니다.
• ClipStringOptions.InvisibleColumns: 출력에 숨겨진 열을 포함합니다. 기본적으로 숨겨진 열은 포함되지 않습니다.
• ClipStringOptions.InvisibleCells: 출력에 숨겨진 행과 열을 포함합니다.

기타 FlexGrid 개선 사항

• 축소 가능한 열 그룹: 축소 가능한 열 그룹을 선언적으로 작성하는 기능을 추가했습니다. 이 작업은 열 속성(또는 columnGroups 속성)을 자식 열의 열 컬렉션을 포함하고 있다는 정의를 배열에 설정함으로써 수행됩니다.

축소 가능한 열 그룹 데모

• 데이터 유형에 따라 자동 생성된 그리드 열의 기본 너비를 지정할 수 있는 defaultTypeWidth 정적 속성을 추가했습니다.
• 개선된 클립보드 지원: 데이터를 클립보드에 복사할 때 그리드에 행 및/또는 열 머리글을 포함할지 여부를 지정할 수 있는 copyHeaders 속성을 추가했습니다.
• RowDetail 고정 셀 지원: 세부 정보 셀이 고정된 경계를 넘어 확장되도록 허용합니다.

MultiRow 개선 사항

• MultiRow 집계 그룹: 머리글 행이 여러 개인 머리글을 허용하는 multiRowGroupHeaders 속성을 추가했습니다(특히 집계 표시에 유용함).
  MultiRow 집계 그룹 데모
• MultiRow 열 머리글 레이아웃: 열 머리글에 대한 사용자 정의 레이아웃을 정의할 수 있는 headerLayoutDefinition 속성을 추가했습니다.
  MultiRow 열 머리글 레이아웃 데모

StepLine 차트

StepLine 차트는 특정 시점의 변화를 시각화하는 데 가장 일반적으로 사용됩니다. 이 차트는 시간이 지남에 따라 변화하는 패턴뿐만 아니라 가치 변화의 크기를 확인하는 데 유용합니다. 최근에 새로운 Step, StepSymbols 및 StepArea 차트 유형을 FlexChart 컨트롤에 추가했습니다.

계단형

StepLine 차트 샘플 - JavaScript, Angular, React 및 Vue:

CollectionView 필터

필터 함수 배열을 포함하는 filters 속성을 추가했습니다. 이 속성을 사용하면 필터를 여러 개의 독립적인 필터 함수와 연결할 수 있습니다.

• CollectionView 필터 데모

입력 개선

Wijmo에서 유형 정보를 크게 개선했습니다. 이 변경 사항 덕분에 Wijmo를 더 쉽게 사용할 수 있으며 여러분의 코드에서 버그를 훨씬 더 쉽게 찾을 수 있습니다.

이제 아래과 같이 콜백(callback) 매개 변수(이전의 제네릭 Any 유형임)의 상세한 속성 정보를 볼 수 있습니다.

이 릴리스의 기타 변경 사항은 다음과 같습니다.

• 유형이 'any'였던 몇 가지 콜백 및 속성에 유형 정보를 추가했습니다.
• Event 클래스의 sender와 arguments에 generic type을 추가했습니다.
• CollectionView 및 ObservableArray 클래스에 generic type을 추가했습니다. 따라서 다음과 같이 쓸 수 있습니다.

  var cv = new CollectionView(data);
  var customer = cv.currentItem; // customer는 고객 인스턴스입니다.

• 추가적인 유형 정보는 향상된 컴파일 타임 오류 검사 및 IntelliSense를 제공합니다. 따라서 더 나은 코드를 더 빨리 작성할 수 있습니다.