V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
powertoolsteam
V2EX  ›  推广

使用 Npm 来创建 WijmoJS 的 React 的应用

  •  
  •   powertoolsteam · 2019-03-29 08:59:37 +08:00 · 1250 次点击
    这是一个创建于 2068 天前的主题,其中的信息可能已经有所发展或是发生改变。

    概述

    在本文中,我们将展示如何使用 WijmoJS 与 NPM 和 Webpack 一起来创建最流行的基于 JavaScript 应用程序框架的 Web 应用。 该博客专注于 Facebook 的框架 React,该框架被称为“用于构建用户界面的 JavaScript 库”。它使用 HTML 类语法扩展 JavaScript,以创建组合到应用程序中的组件。 详细了解 WijmoJS 的 React 支持

    本文中我们不会详细介绍 NPM,Webpack 或 React 本身。 这些工具都非常受欢迎,并且有完整的帮助文档,您可以阅读我们关于框架的技术博客,以获得良好的概述。 相反,我们将专注于将 WijmoJS 添加到用 React 编写的简单应用程序中。

    在所有框架中创建和维护应用程序的基本步骤都是类似的:

    • 安装适当的 CLI (命令行界面实用程序)以生成,运行,维护和部署应用程序。
    • 使用 CLI 创建应用程序。
    • 使用 NPM 将 Wijmo 添加到应用程序。
    • 导入您要使用的组件并添加适当的标记。 具体步骤如下:

    第 1 步,创建一个新的 React 应用程序

    按照以下步骤创建一个新的 React 应用,启动并运行。

    第 2 步,添加 WijmoJS 模块

    在 VS Code 中打开“ src / App.js ”文件并导入你想要使用的元素。在这里,我们将导入 WijmoJS 的 css 样式以及 CollectionView,FlexGrid,FlexChart 和 FlexChartSeries 组件:

    import React, { Component } from 'react';
    import logo from './logo.svg';
    import './App.css';
    
    // import Wijmo styles and components
    import 'wijmo/styles/wijmo.css';
    import { CollectionView } from 'wijmo/wijmo';
    import { FlexGrid } from 'wijmo/wijmo.react.grid';
    import { FlexChart, FlexChartSeries } from 'wijmo/wijmo.react.chart';
    
    // apply Wijmo license key
    import { setLicenseKey } from 'wijmo/wijmo';
    setLicenseKey('your key goes here'); 
    
    class App extends Component {}
    

    除了导入我们想要的 WijmoJS 模块外,这段代码还会自动匹配 WijmoJS 许可证密钥从应用程序中删除保护水印。如果您没有许可证密钥,则可以跳过此步骤。

    第 3 步,向控件添加数据

    现在你已经可以在应用程序中使用 WijmoJS 了。为了帮助演示,让我们开始给应用程序一些基础数据:

    class App extends Component {
      constructor(props) {
        super(props);
        this.state = { 
          data: this.getData()
        };
      }
      getData() {
        var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
            data = [];
        for (var i = 0; i < countries.length; i++) {
          data.push({
            country: countries[i],
            sales: Math.random() * 10000,
            expenses: Math.random() * 5000,
            downloads: Math.round(Math.random() * 20000),
          });
        }
        return new CollectionView(data);
      }
      render() {}
    

    这段代码的目的是:将“数据”成员添加到 App 组件中。注意 getData 返回一个 CollectionView 而不是一个常规数组。CollectionView 类支持排序,筛选,分组,货币和通知。在这个例子中,我们将它用作网格和图表的数据源。

    第 4 步,将 React 控件添加到应用程序

    将表格和图表添加到应用程序,请编辑“ src / App.js ”文件,如下所示:

    class App extends Component {
      constructor(props) {
        // … no change
      }
      getData() {
        // no change
      }
      render() {
        return (
          <div className="App">
            <header className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <h1 className="App-title">Welcome to React and Wijmo</h1>
            </header>
            <p className="App-intro">
              To get started, edit <code>src/App.js</code> and save to reload.
            </p>
            <div className="App-panel">
              <FlexGrid itemsSource={this.state.data}/>
              <FlexChart itemsSource={this.state.data} bindingX="country">
                <FlexChartSeries name="Sales" binding="sales"/>
                <FlexChartSeries name="Expenses" binding="expenses"/>
                <FlexChartSeries name="Downloads" binding="downloads"/>
              </FlexChart>
            </div>
          </div>
        );
      }
    }
    

    第 5 步,更新样式表

    在保存文件之前,编辑“ src / App.css ”文件以定义“ App-panel ”元素使用的布局:

    .App-intro {
      font-size: large;
    }
    
    .App-panel {
      margin: 0 48pt;
    }
    .App-panel .wj-control {
      display: inline-block;
      vertical-align: top;
      width: 400px;
      height: 300px;
    }
    @keyframes App-logo-spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    

    第 6 步,在浏览器中运行

    现在按 ctrl + S 保存更改并切换回浏览器以查看更改的结果:React app

    由于表格和图表绑定到同一个 CollectionView,因此对表格中的数据所做的任何更改都会自动反映在图表中。例如,您可以单击列标题对数据进行排序或使用键盘编辑一些值。

    总结

    1. 将 WijmoJS 集成到现代 JavaScript 应用程序中只需要使用 NPM 进行安装并从库中导入所需的组件即可。
    2. 使用 WijmoJS 能够确保 Web 应用在不同的框架中使用完全相同的 UI 组件,以便您可以更轻松地使用两个或多个框架,或者在未来随意切换框架。

    扩展阅读

    使用 Npm 来创建 WijmoJS 的 Angular6 及各版本的应用

    使用 Npm 来创建 WijmoJS 的 Ionic 的应用

    使用 Npm 来创建 Wijmo 的 VueJs 的应用

    WijmoJS | 下载试用

    快如闪电,触控优先。纯前端控件集 WijmoJS,为您的企业应用提供更加灵活的操作体验,在全球率先支持 AngularJS,并提供性能卓越、零依赖的 FlexGrid 和金融图表等多个控件,为您提供易用、轻松的操作体验,全面满足开发所需。

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1004 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 21:42 · PVG 05:42 · LAX 13:42 · JFK 16:42
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.