Wijmo 5

완벽한 ReactJS 컴포넌트 컬렉션

Wijmo의 완벽한 JavaScript 컴포넌트 컬렉션으로 React UI 옵션을 확장합니다. 고성능 데이터 그리드, 차트, 계기 및 입력 컨트롤은 React 앱과 원활하게 통합되며, JSX를 사용하여 컴포넌트를 완전히 구성할 수 있습니다. 이는 사용자가 진정 원하는 React 컨트롤입니다.


Wijmo의 ReactJS 컨트롤 탐색

Wijmo의 그리드, 차트, 입력 및 계기는 기능이 풍부하고 확장 가능하며 빠릅니다. 또한 이제는 React를 지원합니다.

  • 경량: React interop 모듈의 크기는 7K 미만이며 가장 널리 사용되는 당사의 컨트롤인 FlexGrid의 기본 크기는 113KB입니다.
  • 종속성 없음: 진정한 JavaScript 컨트롤은 TypeScript로 작성되었으며, React에서 TSX를 사용할 수 있습니다.
  • 읽기 쉽고 유연한 API: 진API를 통해 학습 곡선을 완화할 수 있습니다.
  • 확장 가능: 컨트롤의 핵심은 단순하며 최대한 많은 확장 지점이 있습니다.
  • 친숙함: 그리드 및 차트는 Excel과 유사한 환경으로 디자인되었습니다.
  • 최상의 지원: GrapeCity 팀은 React 컨트롤에 대한 최상의 지원 및 리소스를 제공합니다.
    Read Angular 2 Explorer for Wijmo 5 소개 읽어보기

React 컴포넌트 및 Wijmo에 대해 설명하는 Chris Bannon 및 Bernardo de Castilho


React 컨트롤에 대해 자세히 살펴보기

FlexGrid: 최상의 React 데이터 그리드 사용 가능

React의 모든 이점을 누리면서 업계에서 가장 유연하고 가벼운 데이터 그리드를 사용할 수 있습니다.

기본 기능

  • 행 및 열 머리글
  • 가상화된 DOM
  • 선택 및 선택 모드
  • 열 크기 조정 및 자동 크기 조정
  • 열 순서 지정 및 끌기
  • 정렬
  • 페이징
  • 편집
  • 셀 서식 지정
  • 사용자 지정 셀
  • 고정 영역
  • 기본 데모의 모든 기능 탐색
    (이 데모는 Angular에 있지만 React에서 모든 기능을 사용할 수 있습니다.)

확장

  • 필터링
  • 그룹화
  • 계층 구조 데이터
  • 집계 및 부분합
  • 유효성 검사
  • 변경 내용 추적
  • 심층 바인딩
  • 값 매핑
  • 마퀴 및 선택한 머리글
  • 스티커 요소
  • 셀 병합
  • 열 바닥글

FlexGrid: ReactJS 데이터 그리드

데모 실행 문서


 

FlexChart: 빠르고 유연한 JavaScript 차트 컨트롤

이 가벼운 ReactJS 차트 컨트롤에는 사용자에게 필요한 모든 주요 기능 및 Excel과 유사한 차트 유형이 포함되어 있습니다.

기본 제공 기능

  • 유연한 바인딩
  • 머리글 및 바닥글
  • 지역화
  • Hit Test
  • 레이블
  • 확대/축소
  • 줄 표식 및 영역

차트 유형

  • 세로 막대형
  • 막대형
  • 분산형
  • 꺾은선형
  • 영역형
  • 스플라인
  • 재무 차트

FlexChart의 혼합 차트 유형, ReactJS 차트 컨트롤

데모 실행 문서


 

입력: 모바일 우선 입력 컨트롤

ReactJS 입력 컨트롤을 사용하면 서식 있는 양식으로 하이브리드 앱을 만들 수 있습니다.

기본 제공 기능

  • 유연한 데이터 바인딩
  • 깔끔하고 세련된 UI
  • 날짜 및 숫자에 대한 최소/최대 범위
  • 시간 간격
  • 팝업의 HTML 요소
  • 메뉴 선택 시 MVVM 명령 실행

입력 유형

  • 목록 상자
  • 콤보 상자
  • 자동 완성
  • 다중 선택
  • 메뉴
  • 날짜/시간
  • 숫자
  • 색상
  • 마스킹된 입력
  • 팝업

Wijmo의 ReactJS 입력 컨트롤에 있는 색 선택기

데모 실행 문서


계기: 터치 우선 애니메이션 계기 컨트롤

ReactJS 계기 컨트롤에는 터치 기능 및 애니메이션이 기본 제공됩니다.

기본 제공 기능

  • 터치 우선 상호 작용
  • 범위
  • 레이블
  • 그림자
  • 애니메이션
  • 현재 값 강조
  • 시작 및 스윕 각도
  • 방향
  • 텍스트
  • 스타일 사용자 지정

계기 유형

  • 선형
  • 방사형
  • BulletGraph

선형 및 방사형 React 계기의 범위

데모 실행 문서



Wijmo 5, ReactJS 및 TypeScript

TypeScript로 작성된 진정한 JavaScript 컨트롤

  • Wijmo 컨트롤에서 ReactJS로 원활하게 전환할 수 있습니다.
  • TypeScript에서IntelliSense가 지원됩니다.
  • 디자인 타임 오류 확인 기능을 사용할 수 있습니다.
  • XAML과 유사한 언어와 동일한 개체 모델을 가진 CollectionView 클래스와 함께, 진정한 개체 지향 같은 ES6의 이점을 활용할 수 있습니다.
  • Wijmo 5는 프레임워크에 구애받지 않는 진정한 JavaScript 컨트롤을 포함하고 있습니다. 따라서 프레임워크 간에 쉽게 마이그레이션할 수 있으며 새로운 컨트롤이 필요하지 않습니다.

TypeScript로 작성된 진정한 JavaScript 컨트롤

  • Wijmo 컨트롤에서 Angular 2로 원활하게 전환할 수 있습니다.
  • IntelliSense가 지원됩니다.
  • 디자인 타임 오류 확인 기능을 사용할 수 있습니다.
  • XAML과 유사한 언어와 동일한 개체 모델을 가진 CollectionView 클래스와 함께, 진정한 개체 지향 같은 ES6의 이점을 활용할 수 있습니다.
  • Wijmo 5는 프레임워크에 구애받지 않는 진정한 JavaScript 컨트롤을 포함하고 있습니다. 따라서 프레임워크 간에 쉽게 마이그레이션할 수 있으며 새로운 컨트롤이 필요하지 않습니다.

ReactJS의 FlexGrid업

여정: Wijmo 5 및 ReactJS

  • ReactJS에 대한 전체 지원
  • 또한 다른 JavaScript 프레임워크도 지원합니다. Wijmo 5 컨트롤은 프레임워크에 구애받지 않으므로 쉽게 마이그레이션할 수 있습니다. 다음과 같은 프레임워크가 포함됩니다.

로드맵 보기