Liferay DXP Soy portlet系列（二） 利用NodeJS，在Soy portlet中使用Chart.js

本文的目的在于学习如何在soy portlet中使用第三方js类库，并且在ES6脚本中使用。

在Liferay DXP中，已经内置了大量的js类库。JQuery、AlloyUI、metal还有Lexicon组件等等。

这些类库都是一些知名的框架，但是真正项目开发中，仅仅用这些类库是远远不够用的。当今世界，技术变革很快，需求也变化的很快，Liferay的框架正是为应对这种变化而设计的，让开发者一直可以使用新鲜技术。

我们可以利用NodeJS来获取管理第三方类库，并且整合到Liferay中。

 

本文将带你一瞥Liferay整合技术的强大功能。

 

所需知识:

    Google Closure Soy template.

    Liferay Soy Portlet.

    ECMA script 2015(ES6)

    Chart.js

 

在上一篇文章中，我们已经学会类如何使用LiferayIDE创建一个metal soy portlet。

 

基于我们所学的知识，我们将会进一步开发我们的portlet -- 创建一个图表。在我的工作中所遇到的大多数需求都有一定程度的报表需求，这种需求相当普遍。我们自己手动发明表格很不现实（UI大神除外）。所以我们需要利用js类库来创建表格，Chart.js就是一个不错的选择，节省时间节省成本。

接下来我们就来创建一个显示chartjs的soy portlet吧。

 

第一步，创建soy portlet

 

根据我们 上一篇文章 创建一个Soy Portlet，项目结构如下图：

 

 

第二步，添加ChartJS的依赖

 

为了使用ChartJS，我们需要在package.json中添加NodeJS依赖，或者你也可以手动在项目中添加一个Chart.js的类库。

 

"chart.js": "^2.4.0"

 

第三步，将类库导入进你的运行环境中

 

由于Chart.js是第三方类库，在原系统中并不存在类库（这是基于chartjs还没被任何组件使用过的前提下）。我们需要将类库包含进最终的jar中。

接下来我们来配置我们的bnd.bnd来将js包含进所需要的目录下。添加/修改下面的代码到你项目的bnd.bnd文件中：

 

Include-Resource: package.json,\ META-INF/resources/js/Chart.js = node_modules/chart.js/dist/Chart.js

这句话的含义是，我希望在jar中的META-INF/resources/js目录下存放一个Chart.js文件，这个文件的源在项目目录中的node_modules/chart.js/dist/Chart.js位置。

也可以在bnd.bnd中添加一个项目上下文路径：

Web-ContextPath: /chartjs-soy

 

 

第四步，Soy模板

Step 4, Work with soy template

 

接下来，我们会在soy模板中添加一个canvas作为报表的容器，添加下面的代码到ChartjsSoy.soy文件中：

{namespace ChartjsSoy}/** * Display Chart canvas */{template .render} <canvas id="chartjs-soy"> </canvas>{/template}

 

 

第五步，在组件中导入Chart.js

 

我相信本文的读者中一定知道我们一般在html中怎么写ChartJS，大概是这样：

<script src="Chart.js"></script><script> var myChart = new Chart({...})</script>

但是这并不是我们要使用的方法。我们会利用ES6来使用Chart类，正好借机会学习下ES6啦 ：）

将下面的代码添加到ChartjsSor.es.js头中：

 

import Chart from 'chartjs-soy/js/Chart';

 

可以看到chartjs-soy是我们在bnd.bnd中定义的上下文路径，/js/Chart是我们的资源文件夹。

 

 

第六步， 使用Chart.js创建报表

将下面的代码添加到组件中： 

/**
     * Create Chart
     *
     * @protected
     */
    createChart_() {
        let chartcanvas = document.getElementById("chartjs-soy");

        let data = {
            labels: ["January", "February", "March", "April", "May", "June", "July"],
            datasets: [
                {
                    label: "My First dataset",
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255,99,132,1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1,
                    data: [65, 59, 80, 81, 56, 55, 40],
                }
            ]
        };

        let options = {
            scales: {
                xAxes: [{
                    stacked: true
                }],
                yAxes: [{
                    stacked: true
                }]
            }
        };

        let myBarChart = new Chart(chartcanvas, {
            type: 'bar',
            data: data,
            options: options
        });

    }

 

第七步，构造方法

 

接下来我们添加一个构造方法来调用我们创建的createChart方法

 

    constructor(opt_config) {
        super(opt_config);

        this.createChart_();

    }

 

 

第八步，编译、部署、测试、调试和熟悉

 

如果上述步骤正确的话，你会看到一个报表，如下图：

 

 

现在你终于见到如何在项目中轻松的使用第三方js类库来改善用户体验了吧。别局限于这个类库，熟悉下这个过程，试试其他的类库！

希望你喜欢

整个项目的代码和编译好的jar在 这里