Qlik Sense学习笔记之Mashup开发（二）

date: 2019-01-26 11:28:07

updated: 2019-01-26 11:28:07

Qlik Sense学习笔记之Mashup开发（二）

1.Mobile SPA UI Framework

Bootstrap

https://getbootstrap.com/
Onsen UI 推荐

https://onsen.io/

可自动侦测IOS和Andriod等设备，自动适应设备的不同相应模式

Leonardo-UI

https://github.com/qlik-oss/leonardo-ui

基于 Qlik Sense 自身的一个UI，不需要引入相关的 js、css 文件，只需要保证使用的类是一致的，就可以得到和 Qlik Sense 一样的UI样式，主要是用来开发 Extensions

jQuery Mobile

https://jquerymobile.com/
Material-UI

https://material-ui.com/

2.实战

2.1 从零到一

2.1.1 建立 Mashup Project

方法一：

本地Qlik Desktop 中打开Dev Hub -> Mashup Editor -> Basic Template，之后在我的电脑 -> 文档 -> Qlik -> Extensions 中可以找到刚才创建的模板，然后复制整个文件夹到WebStorm或IDEA的workplace下打开。

方法二：

打开Dev Hub -> Mashup Editor -> Basic Template，之后在服务器端下载刚刚创建的模板，会自动打包成zip文件，然后复制整个文件夹到WebStorm或IDEA的workplace下打开。

2.1.2 配置数据

安装sense-go

https://github.com/stefanwalther/sense-go

 cnpm install -g sense-go

 使用 -g 设置sense-go到全局变量 只需安装这一次

报错：

 F:\IDEA Workspace\mxxct_demo>npm install -g sense-go

 npm ERR! code 1

 npm ERR! Command failed: F:\Git\cmd\git.EXE checkout 4.0

 npm ERR! error: pathspec '4.0' did not match any file(s) known to git

 npm ERR!

 npm ERR! A complete log of this run can be found in:

 npm ERR!     C:\Users\Lenovo\AppData\Roaming\npm-cache\_logs\2019-01-17T13_39_08_763Z-debug.log

更新安装方式：

 在 C 盘下新建一个文件夹，命名为 patch，并将 sense-go.zip 复制到该文件夹下，

 解压缩到 sense-go 文件夹，执行命名 npm install sense-go -g C:\patch\sense-go

新建配置文件

打开上面网址，将 sense-go/lib/default-config.yml 中的内容复制下来，在自己项目的根目录下新建一个 yml 文件，文件命名为 .sense-go.yml （注意最前面有一个点），并将内容拷贝进去。

修改项目目录结构

sense-go官方文档推荐的项目结构如下：

 | PROJECT-ROOT

 |-- build         <= all builds, including source code or zipped files

     |-- dev       <= target for the development build

     |-- release   <= target for the release build

 |-- docs          <= documentation files, then used by verb

 |-- src           <= all source files

     |-- lib

     |-- css       <= see below *

         |-- less  <= less files

 | .sense-go.yml   <= sense-go configuration file (OPTIONAL)

 | .verb.md        <= verbs readme template

 | package.json

 build文件夹会自动生成，不需要关心

 docs文件夹下的文件可以自己管理一下，但是 sense-go 本身不会过多的关心这个目录下的内容

 src文件夹存放的是所有的源代码，需要自己创建 lib、css等文件夹

配置 yml 文件

修改 packgeName，值为项目名称
可以添加一下 version 信息

修改 deployment -> toLocal -> enabled 为true，这样就可以使用本地所创建的APP，并把本地 Extensions 路径复制到 localExtensionsBaseDir 下

  deployment:

    toLocal:

      enabled: true

      pathFetching: true              # By default the path will be automatically fetched.

      localExtensionsBaseDir: "C:/Users/Lenovo/Documents/Qlik/Sense/Extensions"

  									注意，要把路径中的 '\' 换成 '/' !!!

                                      # defaults to the local extension directory of Qlik Sense,

                                      # if pathFetching is enabled, this path will be determined automatically

      extensionDirOverride:           # Define the extensionDir if you want to deploy to another directory than defined in packageName

    qrs:                              # Not implemented, yet

      enabled: false

      url: null

    toSsh:                            # Upload via SSH

      enabled: false

      host: "192.168.56.11"

      port: 22

      username: "usr"

      password: "foobar"

      dest: "/c/Users/usr/Documents/Qlik/Sense/Extensions/whatever-extension"

    viaShell:

      enabled: false

qrs：在项目发布的时候会同步推到Qlik Sense服务器上，尽量不要将 enabled 置为true，可能会导致服务器压力过大

修改 lessReduce 中的配置

  lessReduce:

  # src: "./src/lib/less/main.less"

    src: "./src/css/less/main.less"

  # 这里 main.less 和项目中的文件名必须一致，要不然会找不到文件导致生成的 build 目录下没有 css 样式文件

  #  dest: "./.tmp/lib/css"

    dest: "./.tmp/css"

添加 main.less 和 qlik.less 文件在 src/lib/css/less 文件夹下

less 文件夹如果不需要是可以不去配置的，不过因为 less 文件夹会在 build 过程中经过一次编译，并且可以设置一些常用变量，所以配置一下有利于开发。

在 main.less 中添加以下代码，引入 qlik.less文件
```
 @import "qlik";
```
并且将 mxxct_demo.css 文件中的内容拷贝到 qlik.less 文件中，其中的内容是一些 qlik 默认模板的一些样式设置，然后可以将 mxxct_demo.css 文件删除。
删除 wbfolder.wbl 文件，其保存的是当前项目中的文件列表，不过是默认的文件列表，所以并没有什么用
修改 mxxct_demo.html 中对 mxxct_demo.js 和 mxxct_demo.css的引用路径，其中 mxxct_demo.css 需要改成 main.less，同时 css 文件夹只有在 build 的时候才会生成，所以这里的路径应该修改为生成 build 之后的文件路径
输入命令 sense-go build 来自动生成项目，生成的 build 文件夹会出现在本地 Qlik/Extensions/mxxct_demo 文件夹下，同时会同步在 mashup 当中，可以在 mashup 中点击预览查看，也可以输入 localhost:8848/extensions/mxxct_demo/mxxct_demo.html 进行预览
输入命令 sense-go watch:build 来自动监测 .sense-go.yml 从而自动生成 build 文件夹

2.1.3 Hello Qlik

在 mxxct_demo.js 文件中，引入 APP

 var app = qlik.openApp("XXX.qvf"，config)

 app.getObject("div的id，比如QV01","object的id");

 如果需要调用两个服务器上的APP，那么就需要配置两个 config，以及两个 require.config，一般来说是不太需要这种情况的。

 XXX 指的是本地 Qlik/Sense/Apps 下的文件名称，是从QMC中export出来的文件名（仅限于本地运行）

 当放到服务器上的时候需要将 XXX.qvf 换成服务器上打开 App 时 url 后的字符串，不带qvf，qvf指的是本地运行的文件。

 所以尽量写一个 json 文件或者配置文件来配置变量，在上线的时候只需要修改配置即可

查看官方API插入到 mxxct_demo.js 文件中来使用

2.1.4 加入类库

第一种方法是静态加载：直接在 mxxct_demo.html 文件中添加，以OnsenUI为例,将对应的js、css文件放到 lib 文件夹下
```
 <script src="lib/onsen.ui.js"></script>
```

第二种方法是动态加载：首先在 lib 文件夹下创建一个 mxxct_lib.js 文件，然后在 mxxct_demo.js 文件夹中的 require 函数那里，添加在 "js/qlik" 之后，逗号隔开，并且在后面的 function 那里写出对应的引用变量名称。要注意的是，由于 require 已经修改了自己的一个 baseUrl 地址，所以在引用的时候需要使用绝对路径而不能是相对路径，不然会找到文件。

 var prefix = window.location.pathname.substr( 0, window.location.pathname.toLowerCase().lastIndexOf( "/extensions" ) + 1 );

 var config = {

 	host: window.location.hostname,

 	prefix: prefix,

 	port: window.location.port,

 	isSecure: window.location.protocol === "https:"

 };

 // 在这里默认会把 require.js 中的 baseUrl 给修改掉，所以下面需要改成绝对路径

 require.config( {

 	baseUrl: ( config.isSecure ? "https://" : "http://" ) + config.host + (config.port ? ":" + config.port : "") + config.prefix + "resources"

 } );

 // 在 require 中添加引用是不需要在文件后添加 .js 的

 // 将 require 调整成如下格式，方便查看

 require( [

 	"js/qlik",

 	"../extensions/mxxct_demo/lib/mxxct_lib"

 ], function (

 	qlik,

 	mxxctLib, // 这里设置的引用名称是不支持带 '-' '_' 之类的

 ) {

 	qlik.setOnError( function ( error ) {

 		$( '#popupText' ).append( error.message + "<br>" );

 		$( '#popup' ).fadeIn( 1000 );

 	} );

 	$( "#closePopup" ).click( function () {

 		$( '#popup' ).hide();

 	} );

 	//callbacks -- inserted here --

 	//open apps -- inserted here --

 	//get objects -- inserted here --

 	//create cubes and lists -- inserted here --

 } );

每引用一个文件，就需要写一次绝对路径，会略显麻烦，所以可以通过以下方法：引用某一个主 lib.js 文件，然后通过这个文件去引用其他的 js 文件。

在 mxxct_lib.js 文件中添加如下代码

 alert("调用mxxct_lib.js文件成功");

 // 这里的 define 函数类似于 mxxct_demo.js 文件中的 require 函数，需要一个数组存放调用的依赖，再加上一个回调函数

 define([

     "./sub_lib1", // 因为 sub_lib1.js 相对于 mxxct_lib.js 文件是在同一级文件夹下，所以不需要再写绝对路径，通过 ./ 写一个相对路径（当前文件夹下的 sub_lib1.js文件）即可，注意不需要写出来最后的 .js，不然会找不到文件

 ],function(

     subLib1

 ){

     subLib1.whoAmI();

 });

在 sub_lib1.js 文件中添加如下代码

 define([],function(){

     return{

         whoAmI:function () {

             alert("mxxct");

             console.log("调用sub_lib1.js文件")

         }

     }

 });

Qlik Sense学习笔记之Mashup开发（二）

保证类名一样的情况下，使用 Leonnardo UI 可以直接获得和 Qlik Sense 中一样的样式

2.2 渐入佳境

首先需要获取到对应的 APP 的appid

打开 Qlik Desktop -> Dev Hub -> 修改 url 中的 dev-hub 为 hub -> 打开 app -> 打开其中一个子 app -> 在 url 的最后添加 /options/developer -> 右键 object 选择 Developer，可以直接查看到 objectID

2.2.1 动态切换 Object

在获取 Object 的时候，必须要有高度，尽量不要用 min-height，没有高度会不显示，但是可以没有宽度，但是如果要保证换行效果的话，需要加上宽度限制，不然切换到手机屏幕的时候宽度会根据图表的宽度来自动匹配，有可能会导致失去图表效果
getObject() 的呈现效果和 visualization.get() 的呈现效果是一样的，都是获取 object 并且呈现，但是 visualization.get() 如果不 show 的话，vis 会一直存在，并且 vis 保存的是整个 object 的一个 datamodal 形式，可以查看到 object 的相关信息，比如图表的类型，组合模式，标题等等，在 layout -- qHyperCube 下，可以查看 object 的数据内容，可以单独拿出这部分的数据来单独呈现或生成表格等等。
```
 var app = qlik.openApp('xxxName.qvf',config);

 	app.getObject('QV01', 'TT');

 var app = qlik.openApp('xxxName.qvf',config);

     app.visualization.get('TT').then(function(vis){

         vis.show("QV01");

     });
```
动态切换

方式一：

button 后面添加函数：onclick="window.fn.getFirst()"，需要把函数写到静态中，然后在主JS文件中写入函数体。

方式二：

通过 jQuery 来绑定 button 的点击事件

var app = qlik.openApp('xxxName.qvf',config);

var chart = [];

var promises = [];

promises.push(app.visualization.get('TT').then(function(vis){

    // vis.show("QV01");

    // 返回 promise 的处理结果，但是不知道处理结果是成功还是失败

    return Promise.resolve(chart.push(vis));

}));

promises.push(app.visualization.get('EJpVXek').then(function(vis){

    // vis.show("QV02");

    return Promise.resolve(chart.push(vis));

}));

$("#btn1").on("click",function () {

   $("#btn1").addClass("lui-button--info");

   $("#btn2").removeClass("lui-button--info");

   chart[0].show("QV01");

});

$("#btn2").on("click",function () {

    $("#btn1").removeClass("lui-button--info");

    $("#btn2").addClass("lui-button--info");

    chart[1].show("QV01");

});

// 先把所有的 button 都置为不可选

// 当且仅当 promises 中的所有处理结果都存放进来了，即所有获取数据的函数都已经走完了，再执行以下函数

Promise.all(promises).then(function () {

    chart[0].show("QV01");

    $("#btn1").removeAttr("disabled");

    $("#btn2").removeAttr("disabled");

});

// 需要注意的是，如果在获取 'TT'、'EJpVXek' 之间也存在因为数据量而产生先后顺序错乱的问题，可以固定数组下标来保证先后顺序一致，推荐修改为下面的形式：

var app = qlik.openApp('xxxName.qvf',config);

var chart = [];

var promises = [];

promises.push(app.visualization.get('TT').then(function(vis){

    // vis.show("QV01");

    // 返回 promise 的处理结果，但是不知道处理结果是成功还是失败

    return Promise.resolve(vis);

}));

promises.push(app.visualization.get('EJpVXek').then(function(vis){

    // vis.show("QV02");

    return Promise.resolve(vis);

}));

// 先把所有的 button 都置为不可选

// 当且仅当 promises 中的所有处理结果都存放进来了，即所有获取数据的函数都已经走完了，再执行以下函数

// 变量 chart 里面的内容可能是异步的，但是通过 Promise.all(promises) 函数对 promises 会再做一次同步操作，会将 chart 的顺序和 promises 的顺序保持一致

Promise.all(promises).then(function (chart) {

    chart[0].show("QV01");

	$("#btn1").on("click",function () {

       $("#btn1").addClass("lui-button--info");

       $("#btn2").removeClass("lui-button--info");

       chart[0].show("QV01");

    });

    $("#btn2").on("click",function () {

        $("#btn1").removeClass("lui-button--info");

        $("#btn2").addClass("lui-button--info");

        chart[1].show("QV01");

    });

    $("#btn1").removeAttr("disabled");

    $("#btn2").removeAttr("disabled");

});

2.2.2 Selection 与 Clear

在筛选项中有一个比较有意思的点，就是可以通过 API 来设置某几个图表或者筛选项的 Alternate State，通过这个 State 的值可以将某些图表和筛选项固定住，比如原先所有的数据都会造成整个 APP 的数据联动，现在要看1月份和2月份的一个饼图对比，在设置了 State 的值之后，这两个饼图的数据不会联动，只会各自根据筛选项进行联动，在保证饼图的算法是一致的情况下，可以获得对照的一个效果。
clearAll() 是对整个 APP 来清楚筛选项，所以是 app.clearAll()，Selection 是对某个 Filed 来进行选择，所以是 app.field("name").select([0, 1, 2], true, true)
qlik.app.field.select(Array, toggle, softlock)
- toggle：true 表示之前做的选择会累加不会被清除掉，false 表示之前做的选择全部清除只保留本次的选择，选择 true 的时候如果一个选择 button 点两次会恢复到初始状态，需要根据情况来决定
- softlock：如果是 true，之前锁住的选择会被覆写掉

查看要选择的 field 中的数据

 var field = app.field('实体公司');

 field.getData();

 console.log(field);

选择最大值

 $("#btn6").on("click",function () {

     // app.field("实体公司").select([0], true, true);

     var field = app.field('实体公司');

     field.getData();

     // console.log(field);

 	// 因为获取数据的问题，刚点击的时候，field.getDdata() 还没获取到数据的时候就已经进行选择了，为了避免这个问题就要加一个延时

     setTimeout(function () {

         var res = getMaxValueIndex(field.rows);

         app.field("实体公司").selectValues(res, false, true);

     },500);

     //field.getData();

     //after data is loaded fieldvalues will be in rows array

     //field.rows[0].select();

 });

 function getMaxValueIndex(paramArray) {

     console.log(paramArray);

     var names = [];

     var tmpMaxValue = Number.MIN_VALUE;

     for(var i = 0; i < paramArray.length; i++){

         if(Number(paramArray[i].qFrequency) > tmpMaxValue){

             tmpMaxValue = Number(paramArray[i].qFrequency);

             names = [];

             names.push(paramArray[i].qText);

         }else if(Number(paramArray[i].qFrequency) == tmpMaxValue){

             names.push(paramArray[i].qText);

         }

     }

     console.log(names);

     return names;

 }

2.2.3 变量控制

Qlik 中数据大多以 ( num,string ) 的方式存在，通过 app.variable.setStringValue(qName, qVal) 和 app.variable.setNumValue(qName, qVal) 这两个方法可以对任意一端进行赋值，Qlik 会自动对另一端的值进行改动，不需要再去手动修改

当 APP 中同一个 objectID 被三个 button 复用来进行筛选，比如 "30天内"、"90天内"、"全部"，那么就可以通过 app.variable.setStringValue("qName","qValue") 来进行筛选

 $("#btn7").on("click",function () {

     app.variable.setStringValue("vTimeRanges","in30days");

     $("#btn7").addClass("lui-button--info");

     $("#btn8").removeClass("lui-button--info");

     $("#btn9").removeClass("lui-button--info");

 });

获取变量中的值，通过 app.variable.getContent() 来获取，并且需要有一个异步函数调用的过程，来对获取到的值进行处理
```
 app.variable.getContent('MYVAR',function ( reply ) {

 		alert( JSON.stringify( reply ) );

 } );
```

2.3 深入浅出

2.3.1 Hypercube

Qlik 中所有的数据存储方式都是 qHyperCube，不再是数据表中的二维形式。
表格的数据是动态加载的，当用户在向下滑动表格的时候，会不断去获取数据动态加载到表格中，其他的 object 是静态加载到前台页面的。
通过
```
 app.visualization.get("id").then(function(vis){

     console.log(vis);

 });
```
来输出 dataModal，在 modal --> layout --> qHyperCube --> qDataPages --> qMatrix 下可以找到当前 object 的所有数据

通过 qHyperCube --> qGrandTotalRow 可以得到这个 object 某个维度的总数

通过 qHyperCube --> qDimensionInfo 可以得到这个 object 某个维度的描述和字段值
如果只是从 qHyperCube 中获取到某些值，展示出来的值是静态的，需要再添加数据联动的效果。

2.3.2 数据联动

通过 vis.table.OnData.bind(listener) 方法来把 vis 的值绑定到 object 上去，但是会遇到一个问题，就是如果这个 object 之前没有被 show 过的话，是无法联动的，所以需要在 .html 中添加一个 style="display:none" 的一个 div，用来存放需要被联动的 kpi

具体代码 copy from demo.js

 // 在 demo.js 中先添加下面的赋值函数

 function renderKpi(kpi) {

     $("#QV02").text(kpi.model.layout.qHyperCube.qDataPages[0].qMatrix[0][0].qText);

     $("#QV03").text(kpi.model.layout.qHyperCube.qDataPages[0].qMatrix[0][1].qText);

     $("#QV05").text(kpi.model.layout.title).css("background-color", kpi.model.layout.subtitle);

 }

 // kpi

 // 在获取到 kpi 之后，将 vis 的值 render 到 object

 promises.push(app.visualization.get('UtxwSV').then(function (vis) {

     console.log(vis);

     var listener = function () {

         renderKpi(vis);

 		// 分页的时候，避免内存溢出将 vis 关闭并且解绑 listener

         // vis.close();

         // vis.table.OnData.unbind(listener);

     };

     vis.table.OnData.bind(listener);

     return Promise.resolve(vis);

 }));

 // 需要在 demo.html 中添加一个 style="display:none" 的 div，为了让 object 先 show 一下，但是需要隐藏掉，因为不是为了查看某个 object

 <div id="cachePool" style="display:none">

 	<div id="QV04"></div>

 </div>

 // 在 demo.js 中的 Promise.all() 函数中添加以下部分

 Promise.all(promises).then(function (charts) {

 	 // 将 object 先 show 一下

 	charts[2].show("QV04");

 	// 在第一次获取到数据之后把 kpi 放到 div 中

 	var kpi = charts[2];

     renderKpi(kpi);

 	// Selection 的侦听

     var selState = app.selectionState();

     var listener = function () {

         if (selState.selections.length > 0) {

             $("#QV06").text(selState.selections[0].qSelected);

         }

     };

     selState.OnData.bind(listener);

 });

如果联动特别多，那么每一个 visualization 都需要绑定一个 listener，所以最好把需要联动的数据集中在一个 object 中，一次性获取到所有的需要联动数据

2.3.3 Selection的侦听

查看上方代码，需要注意的是，在 chart 上一次性最多选择6个，大于6个就会显示 n of totalNum（n > 6），所以需要显示更多的选项，就需要去添加一个筛选下拉列表，然后侦听筛选器的选中状态

2.4 更上层楼

2.4.1 Object 预读

预读其实就相当于把 object 先放到了 promise 里面，当所有的 object 都已经放到 promise 中之后，再

2.4.2 Config JSON

把所有的静态变量写在一个 config 文件中，然后在 js 文件中通过 ajax 来调用

 $.ajax({

     'type': 'get',

     'url': "config/system.json",

 }).done(function (reply) {

 	...

 })

2.4.3 SPA 的实现

如果是多个页面进行跳转的话，server 端需要不断提供新的链接信息，socket、session等等，所以 Qlik 推荐使用 SPA 的方式来实现 mashup，可以通过对 div 的 show / hide 或者通过框架对页面重新渲染等

秒客网

Qlik Sense学习笔记之Mashup开发（二）