Wijmo 2020 v3가 출시되었습니다. 2020년 3번째 주요 릴리스에서는 품질 향상에 주력했습니다. 자동 및 수동 테스트 개선에 상당한 노력을 기울였습니다. Wijmo를 시장에서 가장 품질이 좋은 JavaScript라고 믿고 있으며 지속적으로 개선해 나갈 것입니다. 이 릴리스에는 새로운 InputDateRange 컴포넌트, 상당히 개선된 CollectionView 등이 포함되어 있습니다. 또한 Vue 3, React 17, Angular 11 RC에 대한 지원도 제공합니다!

Wijmo의 Vue 3 지원

Wijmo에 Vue 3 공식 릴리스(버전 3.0.0)에 대한 지원이 추가되었습니다. Vue 3를 지원하도록 wijmo.vue2.* 모듈을 업그레이드했으므로 동일한 Vue interop 라이브러리를 Wijmo에서 계속 사용할 수 있습니다.

Wijmo 엔지니어링 팀의 블로그에서 Wijmo의 Vue 3 지원 방식에 대해 자세히 알아보세요!

Wijmo의 React 17 지원

Wijmo는 React 버전 17도 지원합니다. 최신 버전의 React를 지원하도록 wijmo.react.* 모듈을 업데이트했으며, 이제 Wijmo 패키지를 업데이트하고 React 17로 업그레이드할 수 있습니다!

Wijmo뿐 아니라 그 외 많은 것을 포괄하는 React에서 DataGrid를 사용하는 방법에 대한 가이드도 게시했습니다.

Wijmo UI 컴포넌트에 대해 자세히 알아보십시오.

Wijmo의 Angular 11 RC 지원

또한 Wijmo는 최근에 Angular 11 RC1를 테스트했는데 아무 문제가 없었습니다. 이제 Angular 11 RC에서 기존 wijmo.angular2.* 모듈을 사용할 수 있습니다. GrapeCity 문서에서 Angular 11에서 Wijmo를 시작하는 방법을 읽어보십시오.

Wijmo UI 컴포넌트에 대해 자세히 알아보십시오.

새로운 날짜 범위 선택기

응용 프로그램에 날짜 범위 선택을 쉽게 추가할 수 있도록 새로운 InputDateRange 컨트롤을 추가했습니다.

사용자가 선택할 수 있는 사용자 정의 날짜 범위(예: “어제”, “이번 주”, “지난 달” 등)를 지정할 수 있습니다.

아니면 사용자가 드롭다운에서 여러 달 달력을 사용해 마우스나 키보드로 날짜 범위를 선택할 수 있습니다.

InputDateRange를 통해 날짜 범위를 쉽게 선택할 수 있습니다! 사용자가 쉽게 날짜 범위를 선택할 수 있는 방법을 제공하십시오.

아래에서 새로운 날짜 범위 선택기의 실시간 데모를 사용해 보십시오.

• JavaScript InputDateRange 데모
• Angular InputDateRange 데모
• React InputDateRange 데모
• Vue InputDateRange 데모

여러 원형 차트를 위한 유연한 레이아웃

FlexPie는 상당 기간 하나의 차트에서 여러 원형 차트를 지원했습니다. 이제 차트의 레이아웃을 제어할 수 있는 기능이 추가되었습니다. 즉, chartsPerLine 옵션을 추가하여 다음 줄로 줄 바꿈하기 전에 표시할 차트의 수를 정의할 수 있게 했습니다.

다음은 4개의 차트가 들어 있는 FlexPie의 기본 렌더링입니다.

chartsPerLine을 2로 설정하면 다음과 같은 결과가 나옵니다.

이 옵션을 통해 FlexPie가 응용 프로그램에 맞추는 방식을 훨씬 더 세부적으로 제어할 수 있습니다.

아래에서 여러 원형 차트 레이아웃에 대한 실시간 데모를 사용해 보십시오.

• JavaScript 여러 원형 차트 레이아웃 데모
• Angular 여러 원형 차트 레이아웃 데모
• React 여러 원형 차트 레이아웃 데모
• Vue 여러 원형 차트 레이아웃 데모

CollectionView의 계산된 필드

이제 CollectionView에는 데이터 집합에 계산된 필드를 추가할 수 있는 강력한 새 기능이 포함되었습니다.

계산된 필드에서는 데이터 변경에 따라 자동으로 업데이트되는 동적 값을 제공합니다! CollectionView의 calculatedFields 속성을 계산된 필드의 이름과 필드 값 획득에 사용되는 함수를 포함하는 값으로 설정하면 이 기능을 사용할 수 있습니다.

이 함수는 현재 데이터 항목을 인수로 받아들이거나 현재 데이터 항목을 나타내는 "$" 값이 있는 문자열 식으로 받아들이는 일반 JavaScript 함수로 지정할 수 있습니다.

예를 들어 다음은 JS 함수를 사용하는 calculatedFields 정의입니다.

calculatedFields: {  
  fullName: ($) => [$.brand, $.product].join(' '),  
  allCaps: ($) => $.fullName.toUpperCase(),  
  totalPrice: ($) => ($.unitPrice * $.qty) * (1 - $.discount),  
  tax: ($) => $.totalPrice * 0.12  
 }

이 코드는 다음과 같은 결과를 산출합니다(보라색 셀은 모두 CollectionView 데이터를 기반으로 계산됨).

CollectionView에 바인딩되는 모든 Wijmo 컨트롤에서 이 강력한 새 기능을 사용할 수 있습니다!

• JavaScript의 계산된 필드
• Angular의 계산된 필드
• React의 계산된 필드
• Vue의 계산된 필드

calculatedFields 블로그에서 자세히 알아보십시오.

CollectionView의 여러 오류 보고

CollectionView 유효성 검사는 현재까지 일시적으로 지원되어 왔습니다. 하지만 고객 중 한 분이 FlexGrid의 한 행에서 여러 가지 오류가 발생한 경우(드문 사례) rowHeader 오류 도구 설명에 첫 번째 오류 메시지만 표시된다는 점을 지적해 주셨습니다.

따라서 기본적으로 오류 메시지에 전체 데이터 항목의 모든 오류가 포함되도록 개선했습니다. 이 메시지를 통해 정보가 더 유용해지고 데이터 그리드의 사용 편의성도 높아집니다.

한 행에 여러 가지 오류가 발생한 경우 기본 메시지는 다음과 같습니다.

“유연한 철학(flex philosophy)”과 마찬가지로 이 메시지를 원하는 대로 사용자 정의할 수 있습니다. 다음 예시는 모든 오류를 나열하는 대신에 오류 수로 오류를 요약한 것입니다.

제안해 주셔서 감사합니다! 이 기능은 훌륭한 Wijmo 개선 사항이라고 생각합니다.

아래에서 CollectionView 유효성 검사의 실시간 데모를 사용해 보십시오.

• JavaScript의 CollectionView 유효성 검사
• Angular의 CollectionView 유효성 검사
• React의 CollectionView 유효성 검사
• Vue의 CollectionView 유효성 검사

변경 로그

• [CollectionView] 동일한 데이터 항목의 다른 필드를 기반으로 계산된 읽기 전용, 동적 필드를 추가할 수 있게 해주는 calculatedFields 속성을 추가했습니다.
• [Calendar, InputDate] 사용자가 날짜 범위를 선택할 수 있게 해주는 DateSelectionMode.Range 선택 모드를 추가했습니다. 선택되는 범위는 "value" 및 "rangeEnd" 속성으로 정의됩니다. "rangeMin" 및 "rangeMax" 속성으로 최소 및 최대 유효 범위 길이를 지정할 수 있습니다.
• [Calendar, InputDate] 동일한 달력 컨트롤에서 여러 달을 표시할 수 있게 해주는 "monthCount" 속성을 추가했습니다.
• [Calendar, InputDate] 현재 달 이전 및 이후의 추가 주를 표시할 수 있게 해주는 "weeksBefore" 및 "weeksAfter" 속성을 추가했습니다.
• [Calendar] 현재 표시된 달이 최대/최소 한도에 도달하면 이전/다음 달 버튼이 비활성화됩니다.
• [CollectionView] 위치가 동일하더라도 현재 항목이 변경되면 currentChanged 이벤트를 발생시킵니다(예: 필터링 또는 페이지 크기 변경 후).
• [CollectionView] 특정 속성 없이 getError 메서드를 호출하여 전체 데이터 항목에서 오류를 확인할 수 있습니다(반환된 오류 메시지가 FlexGrid의 행 헤더 셀에 표시됨).
• [InputNumber] 값이 최대/최소 한도에 도달하면 증가/감소 버튼이 비활성화됩니다.
• [Menu] 명령 속성에 유형 정보를 추가했습니다.
• [MultiSelect, MultiSelectListBox] AutoComplete 컨트롤을 이용해 유연성을 높이고 일관성을 향상할 수 있는 지연 및 caseSensitiveSearch 속성이 추가되었습니다.
• [MultiSelectListBox] selectedIndex 속성(일반 ListBox와 유사함)이 추가되었습니다.
• [MultiSelect, Menu] 이제 headerPath 속성 설정을 따릅니다.
• [ColorPicker] 색을 나타내지 않는 문자열로 값을 설정하는 것은 무시합니다.
• [InputColor] valueChanged 이벤트를 두 번(한 번은 잘못된 값으로, 한 번은 복원된 원래 값으로) 발생시키는 데 사용되는 색을 나타내지 않는 문자열로 값 속성을 설정합니다. 이제 null 할당은 무시하고 이벤트를 표시하지 않습니다.
• [FlexGrid] Column.cellTemplate으로 작업할 수 있도록 Column.editor 속성을 개선했습니다. 이전 버전에서는 cellTemplate != null인 열은 사용자 정의 편집기가 있는 열의 드롭다운 버튼을 표시하지 않았습니다.
• [FlexGrid] dataMaps로 셀을 편집할 때 caseSensitiveSearch 속성 설정을 따릅니다.
• [FlexGrid] 행 헤더 셀의 사용자 정의 또는 여러 오류를 표시할 수 있도록 유효성 검사 메커니즘을 개선했습니다.
• [FlexGridFilter] 이제 조건 필터는 FlexGrid.caseSensitiveSearch 속성을 따릅니다.
• [FlexPie] 여러 원형 차트의 레이아웃을 제어할 수 있게 해주는 chartsPerLine 속성을 추가했습니다. (TFS 466046)
• [Vue] Pure JS 클래스의 Tooltip.position property 속성을 나타내기 위해 wjTooltip 지시문에 'position' 속성을 추가했습니다. wjTooltip 지시문에 추가 속성을 지정하도록 허용하기 위해 이제 여러 속성이 있는 개체를 값으로 받아들입니다. 예는 다음과 같습니다.
  

   <div v-wjTooltip="{tooltip: 'Some hint', position: 'Right'}">Some content</div>

  
  
• [Vue] Pure JS 도구 설명 클래스의 'position' 속성을 나타내기 위해 wjTooltip 지시문에 wjTooltipPosition 속성을 추가했습니다.