国家  china

第一个Wijmo程序

概述

之前我们举行Wijmo系列的公开课,许多用户对Wijmo很不熟悉,今天我们做了一个Wijmo从下载到安装,再到第一个Wijmo应用程序上手的博客。

首先我们Wijmo官网上下载试用版本(如果您有正式版也是同样的操作)

http://wijmo.gcpowertools.com.cn/

你会得到一个压缩包如:image

直接解压缩就ok了,现在我们就拿到了Wijmo企业版的试用版。

image

现在我们来分析一下这个文件夹的结构

     \dist 是Wijmo的库文件(controls),模块互操作文件(interop),样式\主题文件(styles)

     \Intellisense 智能提示文件用来配置Visual Studio,VsCode

     \NpmImages 各个模块扩展

     \Samples 示例代码里面分为JS\TS,每个模块里面分为Angular、Angular2、Ionic、Knockout、PureJS、React、Vue、Vue2

     \VsTemplates Visual Studio扩展插件工具

     \Wijmo3 Wijmo3的核心文件

知道了这些文件分类以及作用,下来我们就来新建我们第一个Wijmo应用

首先我们新建三个文件:FirstWjApp.html、FirstWjApp.js、FirstWjApp.css到项目文件下WJApp

image

在html文件中:

   1:  <!DOCTYPE html>
   2:  <html>
   3:  <head>
   4:      <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
   5:      <meta name="robots" content="noindex, nofollow"/>
   6:      <meta name="googlebot" content="noindex, nofollow"/>
   7:      <title>FlexGrid</title>
   8:      <link rel="stylesheet" type="text/css" href="http://demo.gcpowertools.com.cn/wijmo5/resources/bootstrap.min.css"/>
   9:      <link rel="stylesheet" type="text/css" href="http://demo.gcpowertools.com.cn/wijmo5/resources/wijmo.min.css"/>
  10:      <script type="text/javascript" src="http://demo.gcpowertools.com.cn/wijmo5/resources/wijmo.min.js"></script>
  11:      <script type="text/javascript" src="http://demo.gcpowertools.com.cn/wijmo5/resources/wijmo.grid.min.js"></script>
  12:      <link rel="stylesheet" type="text/css" href="FirstWjApp.css"/>
  13:  </head>
  14:  <body>
  15:  <div class="container">
  16:   <!--目标元素-->
  17:    <h1>
  18:      FlexGrid
  19:    </h1>
  21:    <div id="therGrid">
  22:    </div>
  23:    
  24:  </div>
  25:  <script type="application/javascript" src="FirstWjApp.js"></script>
  26:  </body>
  27:  </html>

在这里面我们需要把相应的FirstWjApp.css、FirstWjApp.js引用进来。这样页面就完成了。

下来我们来编写FirstWjApp.css样式文件:

   1:  .wj-flexgrid {
   2:    max-height: 250px;
   3:    margin-bottom: 12px;
   4:  }
   5:  .header {
   6:    display: inline-block;
   7:    width: 150px;
   8:    text-align: right;
   9:    font-weight: normal;
  10:  }

主要是针对表格控件的样式在这个文件里定义

最后我们来编写FirstWjApp.js脚本:

   1:  onload = function() {
   2:   
   3:    // create some random data
   4:    var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
   5:      data = [];
   6:    for (var i = 0; i < 200; i++) {
   7:      data.push({
   8:        id: i,
   9:        country: countries[i % countries.length],
  10:        active: i % 5 != 0,
  11:        downloads: Math.round(Math.random() * 200000),
  12:        sales: Math.random() * 100000,
  13:        expenses: Math.random() * 50000
  14:      });
  15:    }
  16:    // default grid
  17:    var therGrid = new wijmo.grid.FlexGrid('#therGrid', {
  18:      itemsSource: data,
  19:    });
  20:  }

这里面我们完成两部分功能,

1、构造数据源

2、关联宿主元素

到此为止我们的第一个Wijmo的程序就ok了。运行一下吧:

image

Demo
更多信息请参照:

Wijmo产品网站:http://wijmo.gcpowertools.com.cn/products/wijmo-5/

Wijmo中文文档:http://wijmo.gcpowertools.com.cn/5/docs/

Wijmo中文学习教程:http://demo.gcpowertools.com.cn/wijmo5/learningwijmo/

转载声明:
欢迎将本站文章进行转载、演绎或用于商业目的,转载时请注明以下信息
文章转自:葡萄城控件产品博客,http://blog.gcpowertools.com.cn
原文地址:http://blog.gcpowertools.com.cn/post/FirstWijmoApp.aspx

不允许评论