Wijmo 2021 v2 출시 > 새로운 소식

본문 바로가기

Wijmo

새로운 소식

정식출시 Wijmo 2021 v2 출시

페이지 정보

작성자 GrapeCity 작성일 21-08-06 15:29 조회 69회 댓글 0건

본문

Wijmo 2021 v2 가 출시되었습니다! 이번 출시에는 FlexMap의 공식 출시, Excel 메모 지원 및 새로운 ColumnGroups API가 포함되어있습니다. 아래에서 자세히 살펴보겠습니다.

FlexMap 공식 출시!

더 이상 FlexMap을 베타 버전으로 사용하지 않아도 됨을 알려드리게 되어 기쁩니다. FlexMap은 지리 데이터를 아름답게 시각화할 수 있는 새로운 맵 컨트롤입니다. 맵 컨트롤을 사용하면 데이터를 불러와 분석하는 일이 훨씬 쉬워질 수 있습니다. 이 JavaScript UI 컴포넌트를 통해 지리 데이터를 손쉽게 놀라운 시각화 자료로 만들 수 있습니다.


FlexMap은 분산형(Scatter) 및 버블(Bubble) 맵과 같은 단계구분도(Choropleth) 및 포인트 맵 렌더링을 지원합니다. 맵은 GeoJSON을 사용하여 지리적 특징 레이어와 포인트 레이어를 바인딩합니다.


NaturalEarthData를 공용 도메인인 GeoJSON 데이터의 소스로 권장하며, MapShaper를 필요에 따라 사용자 정의할 수 있습니다. 물론, 다른 많은 소스들이 있고, 이미 여러분만의 소스를 가지고 있을지도 모릅니다.


flexmap


XLSX에서 Excel 메모 기능 추가

고객 요청을 기반으로, 우리는 wijmo.xslx 모듈에 Excel 메모 기능을 추가하였습니다. 이제 FlexGrid로 가져오거나 내보내는 경우, 또는 XLSX 모듈을 사용하여 통합 문서로 작업할 때 Excel 메모를 포함할 수 있습니다. WorkbookCell 클래스와 IWorkbookCell 인터페이스에도 메모 기능을 추가하였습니다.


WorkbookNote 클래스와 IWorkbookNote 인터페이스도 추가했습니다. 메모의 작성자, 텍스트, 위치 및 크기를 설정하는 사용자 정의가 가능합니다. 불러오기와 내보내기 기능도 더욱 향상되었습니다!


excel notes

FlexGrid에서 새로 개선된 ColumnGroups API

이제 FlexGrid의 ColumnGroups는 ColumnGroupCollection 및 ColumnGroup 객체로 구성된 형식화된 객체 모델로 정의할 수 있습니다. 이전 ColumnGroups는 POJO를 통해서만 정의할 수 있었지만, 이제는 ColumnGroups를 정의하거나 선언할 수 있는 훨씬 강력한 방법이 생겼습니다.


flexgrid


Angular, React 및 Vue용 Interop 모듈은 새로운 ColumnGroup 클래스도 지원합니다. 원하는 JS 프레임워크의 마크업에서 ColumnGroups를 바로 선언할 수 있습니다.


ColumnGroup 속성 변경으로, ColumnGroup 객체의 추가/삭제/재정렬을 통해 FlexGrid가 자동으로 레이아웃 업데이트 할 수 있게 되었습니다.


기본적으로 columnGroups 속성은 첫 번째 단계의 ColumnGroup 객체를 추가할 수 있는 빈 ColumnGroupCollection 컬렉션을 반환합니다. 각 ColumnGroup 객체에는 하위 ColumnGroup 객체를 추가하여 열 그룹 트리를 생성할 수 있는 자체 '열' 컬렉션이 있습니다.


사용 예시:

let theGrid = new FlexGrid('#theGrid', {
        headersVisibility: 'Column',
        alternatingRowStep: 0,
        showMarquee: true,
        showSelectedHeaders: 'All',
        autoGenerateColumns: false,
        columnGroups: new ColumnGroupCollection([
            new ColumnGroup({ binding: 'name', header: 'Name', width: 150 }),
            new ColumnGroup({ binding: 'currency', header: 'Curr', width: 80, align: 'center' }),
            new ColumnGroup({ header: 'Allocation', align: 'center', collapseTo: 'alloc.amount', columns: new ColumnGroupCollection([
                    new ColumnGroup({ binding: 'alloc.stock', header: 'Stocks', format: 'p0', width: 80 }),
                    new ColumnGroup({ binding: 'alloc.bond', header: 'Bonds', format: 'p0', width: 80 }),
                    new ColumnGroup({ header: 'Detail', align: 'center', columns: new ColumnGroupCollection([
                            new ColumnGroup({ binding: 'alloc.cash', header: 'Cash', format: 'p0', width: 80 }),
                            new ColumnGroup({ binding: 'alloc.other', header: 'Other', format: 'p0', width: 80 }),
                        ]) }),
                    new ColumnGroup({ binding: 'alloc.amount', header: 'Amount', format: 'c0', width: 100, cssClass: 'main-column' }),
                ]) }),
            new ColumnGroup({ header: 'Perf', align: 'center', columns: new ColumnGroupCollection([
                    new ColumnGroup({ header: 'Short', align: 'center', collapseTo: 'perf.ytd', isCollapsed: true, columns: new ColumnGroupCollection([
                            new ColumnGroup({ binding: 'perf.ytd', header: 'YTD', format: 'p2', width: 100, cssClass: 'main-column' }),
                            new ColumnGroup({ binding: 'perf.m1', header: '1 M', format: 'p2', width: 80 }),
                        ]) }),
                    new ColumnGroup({ header: 'Long', align: 'center', collapseTo: 'perf.m12', isCollapsed: true, columns: new ColumnGroupCollection([
                            new ColumnGroup({ binding: 'perf.m6', header: '6 M', format: 'p2', width: 80 }),
                            new ColumnGroup({ binding: 'perf.m12', header: '12 M', format: 'p2', width: 100, cssClassAll: 'main-column' }),
                        ]) }),
                ]) }),
        ]),
        itemsSource: DataService.getData(),
    });

드래그하여 ColumnGroups 재정렬

드래그 앤 드롭을 사용하여 ColumnGroups를 재정렬할 수 있는 기능도 추가되었습니다. 또한 ColumnGroup 내에서도 재정렬이 가능합니다. 이를 통해 최종 사용자가 그리드 열과 그룹이 정렬되는 방식을 완전히 컨트롤할 수 있게 됩니다.

Angular, React, Vue에서 ColumnGroups를 위한 CellTemplates 지원

ColumnGroups에 대한 선언 컴포넌트를 추가하는 것과 더불어, Angular, React 및 Vue에 대한 강력한 CellTemplate 지원을 추가했습니다. CellTemplates 사용으로 FlexGrid에서 특정 셀이 렌더링되는 모든 방식에 대해 사용자 정의가 가능합니다. CellTemplates는 HTML 요소, Wijmo 컴포넌트, 프레임워크 바인딩과 조건문을 지원합니다. 그리드의 각 셀을 사용자의 필요에 따라 정의할 수 있습니다.


예를 들어, 다음은 ColumnHeader 셀에서 ColumnGroups를 확장/축소하기 위해 체크박스를 사용하기 위한 몇 가지 Angular 마크업입니다.

<wj-flex-grid-column-group #allocGr header="Allocation" align="center" collapseTo="alloc.amount">
        <ng-template wjFlexGridCellTemplate [cellType]="'ColumnHeader'" [autoSizeRows]="false" let-cell="cell" *ngIf="useCellTemplates">   
            <input type="checkbox" [(ngModel)]="allocGr.isCollapsed">
        </ng-template>
</wj-flex-grid-column-group>


결과는 다음과 같습니다(Allocation 열 머리글을 확인하세요.):


flexgrid

UndoStack에서 지원하는 ColumnGroups에서의 확장, 축소 및 재정렬 이벤트

당사의 UndoStack은 어플리케이션의 실행 취소/재실행 동작을 편리하게 추가할 수 있는 방법을 제공합니다. FlexGrid는 다양한 작업에 대해 실행 취소/재실행을 지원하는데, 이번 버전에서는 FlexGrid를 사용할 때 ColumnGroups 확장 및 축소 실행을 취소/다시 실행하는 기능을 추가했습니다.

ColumnGroups 저장과 유지

FlexGrid의 columnLayout 속성은 사용자가 정의한 열 레이아웃을 유지하는 데 사용할 수 있으므로 세션 간에 보존되며, 사용자가 열 레이아웃을 수정할 수 있도록 하는 어플리케이션에서 실행 취소/재실행 기능을 구현하는 데 사용할 수도 있습니다.


ColumnGroups에 대한 모든 변경 사항이 유지될 수 있도록 ColumnGroup 구성을 ColumnLayout 속성에 추가했습니다.


DataMap은 배열 및 객체 유형 속성을 지원합니다.


변경 로그

  • [wijmo.xlsx] Excel 메모 기능이 추가되었습니다. 메모는 WorkbookCell.note 속성을 통해 검색과 설정을 할 수 있습니다. wijmo.xlsx는 다음과 같이 변경되었습니다.
  • WorkbookCell 클래스 및 IWorkbookCell 인터페이스에 메모 속성을 추가했습니다.
  • WorkbookNote 클래스 및 IWorkbookNote 인터페이스를 추가했습니다. "Excel/Workbook Viewer" 샘플은 간단한 메모 지원 구현으로 업데이트되었습니다.
  • [FlexGrid] 이제 FlexGrid의 ColumnGroups는 ColumnGroupCollection 및 ColumnGroup 객체로 구성된 형식화된 객체 모델로 정의할 수 있습니다. ColumnGroup 속성 변경으로, ColumnGroup 객체의 추가/삭제/재정렬을 통해 FlexGrid가 자동으로 레이아웃 업데이트 할 수 있게 되었습니다.
    기본적으로 columnGroups 속성은 첫 번째 단계의 ColumnGroup 객체를 추가할 수 있는 빈 ColumnGroupCollection 컬렉션을 반환합니다. 각 ColumnGroup 객체에는 하위 ColumnGroup 객체를 추가하여 열 그룹 트리를 생성할 수 있는 자체 '열' 컬렉션이 있습니다. 기존의 POJO 배열을 사용하여 columnGroups를 정의하는 방식도 지원됩니다. 자세한 내용은 하단의 주요 변경 사항 섹션을 참조하십시오. "그리드 > 열 > 그룹화(객체 모델)" 샘플에서 기능을 확인하실 수 있습니다.
  • [FlexGrid] getColumn 메서드에 includeAllColumnTypes 매개 변수를 포함한 두번째 옵션이 추가되었습니다. 이를 통해, 이름이나 바인딩으로 columnGroups 트리에서 열 그룹을 찾을 수 있습니다.
  • [FlexGrid]columnGroups가 POJO 배열을 사용하여 정의된 경우에도 그리드에서 사용되는 효과적인 ColumnGroupCollection 컬렉션을 반환하는 getColumnGroups() 메서드가 추가되었습니다.
  • [FlexGrid] 마우스를 이용해 드래그함으로써 열 그룹의 위치를 변경(순서를 바꾸거나 다른 그룹으로 옮기는 등)하는데 추가적인 도움을 줍니다. 자세한 내용은 하단의 주요 변경 사항 섹션을 참조하십시오.
  • [FlexGrid] getColumn(true) 메서드 호출은 formatItem 또는 columnGroupCollapsedChanged와 같은 일부 이벤트에서 사용되는 CellRangeEventArgs 객체와 HitTestInfo 객체에 대해 수행되며, 영향을 받는 영역이 그룹 셀인 경우 그룹을 나타내는 ColumnGroup 객체(자식 열 포함)를 반환합니다. 이전에는 이 메서드가 columnGroups 트리의 리프 객체(바운드된 열)만 반환했습니다.
  • [FlexGrid] columnLayout 속성에서 columnGroups 저장 및 복원을 지원하는 기능이 추가되었습니다.
  • [UndoStack] 열 그룹의 재정렬 및 축소/확장 작업에 대한 기능이 추가되었습니다.
  • [Angular] 각 템플릿에서 열 그룹 간 계층을 정의하기 위해 wj-flex-grid-column-group 컴포넌트가 추가되었으며, 이를 활용하여 그룹의 셀 템플릿을 정의할 수 있습니다. "그리드 > 열 > 그룹화(객체 모델)" 샘플에서 기능을 확인하실 수 있습니다.
  • [React] 추가된 FlexGridColumnGroup 기능은 React 'render' 함수에서 열 그룹 계층을 정의하며, 그룹에 대한 셀 템플릿을 정의할 수 있습니다. "그리드 > 열 > 그룹화(객체 모델)" 샘플에서 기능을 확인하실 수 있습니다.
  • [Vue] 추가된 wj-flex-grid-column-group 컴포넌트를 활용하여 Vue 템플릿에서 문단 간 계층을 정리하고 그룹에 대한 셀 템플릿을 정의할 수 있습니다. "그리드 > 열 > 그룹화(객체 모델)" 샘플에서 기능을 확인하실 수 있습니다.
  • [PivotPanel] ivotPanel.deferUpdate 속성이 추가되었습니다. 이 속성은 기본 엔진이 지연된 업데이트 상태인지 여부를 정의합니다. (WJM-20028)
  • [FlexGrid] DataMap은 이제 새롭게 추가된 'serializeKeys' 부울 속성을 false로 설정하여 복잡한 객체 또는 복잡한 객체의 배열인 key를 통해 올바른 방식으로 작동할 수 있습니다. 이러한 경우, DataMap은 key를 문자열로 변환하지 않으며, 브라우저의 Map class를 사용하여 키-값 쌍을 저장합니다.

 

주요 변경 사항

  • [FlexSheet] 셀을 업데이트할 때 열의 데이터 유형이 DataType.String인 경우 강제로 문자열을 날짜로 변환하지 마십시오.
  • [FlexGrid] columnGroups 속성 기본값이 정의되지 않은 상태에서 빈 ColumnGroupCollection 객체로 변경됩니다. 이 속성에 대한 POJO 배열 할당은 계속해서 지원됩니다.
  • [FlexGrid] 이제 기본적으로 드래그&드롭을 사용하여 열 그룹의 위치를 변경할 수 있습니다. FlexGrid.allowDragging 속성을 false로 설정하면 이 기능을 비활성화시킬 수 있습니다.
  • [FlexGrid] getColumn(true) 메서드 호출은 formatItem 또는 columnGroupCollapsedChanged와 같은 일부 이벤트에서 사용되는 CellRangeEventArgs 객체와 HitTestInfo 객체에 대해 수행되며, 영향을 받는 영역이 그룹 셀인 경우 그룹을 나타내는 ColumnGroup 객체(자식 열 포함)를 반환합니다. 이전에는 이 메서드가 columnGroups 트리의 리프 객체(바운드된 열)만 반환했습니다.
  • [OLAP] PivotGrid의 rowHeaders.columns.defaultSize 속성에 대한 기본값은 이제 cells.columns.defaultSize 속성과 동일합니다.
  • [InputDate] 컨트롤의 입력 요소에 유효하지 않은 값이 포함되어 있고,드롭-다운 캘린더가 열려 있으면 입력 요소의 텍스트가 변경되지 않습니다. 컨트롤이 포커스를 잃은 후에만 텍스트 변경이 가능합니다. 이전 빌드에서, invalidinput 이벤트가 사용되지 않거나 e.cancel을 false로 설정한 경우 텍스트가 현재 컨트롤 값으로 변경되었습니다.

 
  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
  • 카카오톡으로 보내기
그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

인기글

더보기
  • 인기 게시물이 없습니다.
그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@grapecity.com | 전화 : 1670-0583 | 경기도 안양시 동안구 시민대로 230, B-703(관양동, 아크로타워) 그레이프시티(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 Copyright ⓒ 2021 GrapeCity inc.