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

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

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

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 配置数据
  1. 安装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
  2. 新建配置文件

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

  3. 修改项目目录结构

    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等文件夹
  4. 配置 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"
  5. 添加 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 文件删除。

  6. 删除 wbfolder.wbl 文件,其保存的是当前项目中的文件列表,不过是默认的文件列表,所以并没有什么用

  7. 修改 mxxct_demo.html 中对 mxxct_demo.js 和 mxxct_demo.css的引用路径,其中 mxxct_demo.css 需要改成 main.less,同时 css 文件夹只有在 build 的时候才会生成,所以这里的路径应该修改为生成 build 之后的文件路径

  8. 输入命令 sense-go build 来自动生成项目,生成的 build 文件夹会出现在本地 Qlik/Extensions/mxxct_demo 文件夹下,同时会同步在 mashup 当中,可以在 mashup 中点击预览查看,也可以输入 localhost:8848/extensions/mxxct_demo/mxxct_demo.html 进行预览

  9. 输入命令 sense-go watch:build 来自动监测 .sense-go.yml 从而自动生成 build 文件夹

2.1.3 Hello Qlik
  1. 在 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 文件或者配置文件来配置变量,在上线的时候只需要修改配置即可
  2. 查看官方API插入到 mxxct_demo.js 文件中来使用

2.1.4 加入类库
  1. 第一种方法是静态加载:直接在 mxxct_demo.html 文件中添加,以OnsenUI为例,将对应的js、css文件放到 lib 文件夹下

     <script src="lib/onsen.ui.js"></script>
  2. 第二种方法是动态加载:首先在 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开发(二)

  3. 保证类名一样的情况下,使用 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
  1. 在获取 Object 的时候,必须要有高度,尽量不要用 min-height,没有高度会不显示,但是可以没有宽度,但是如果要保证换行效果的话,需要加上宽度限制,不然切换到手机屏幕的时候宽度会根据图表的宽度来自动匹配,有可能会导致失去图表效果

  2. 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");
    });
  3. 动态切换

方式一:

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
  1. 在筛选项中有一个比较有意思的点,就是可以通过 API 来设置某几个图表或者筛选项的 Alternate State,通过这个 State 的值可以将某些图表和筛选项固定住,比如原先所有的数据都会造成整个 APP 的数据联动,现在要看1月份和2月份的一个饼图对比,在设置了 State 的值之后,这两个饼图的数据不会联动,只会各自根据筛选项进行联动,在保证饼图的算法是一致的情况下,可以获得对照的一个效果。

  2. clearAll() 是对整个 APP 来清楚筛选项,所以是 app.clearAll(),Selection 是对某个 Filed 来进行选择,所以是 app.field("name").select([0, 1, 2], true, true)

  3. qlik.app.field.select(Array, toggle, softlock)

    • toggle:true 表示之前做的选择会累加不会被清除掉,false 表示之前做的选择全部清除只保留本次的选择,选择 true 的时候如果一个选择 button 点两次会恢复到初始状态,需要根据情况来决定

    • softlock:如果是 true,之前锁住的选择会被覆写掉

  4. 查看要选择的 field 中的数据

     var field = app.field('实体公司');
    field.getData();
    console.log(field);
  5. 选择最大值

     $("#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 变量控制
  1. Qlik 中数据大多以 ( num,string ) 的方式存在,通过 app.variable.setStringValue(qName, qVal) 和 app.variable.setNumValue(qName, qVal) 这两个方法可以对任意一端进行赋值,Qlik 会自动对另一端的值进行改动,不需要再去手动修改

  2. 当 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");
    });
  3. 获取变量中的值,通过 app.variable.getContent() 来获取,并且需要有一个异步函数调用的过程,来对获取到的值进行处理

     app.variable.getContent('MYVAR',function ( reply ) {
    alert( JSON.stringify( reply ) );
    } );
2.3 深入浅出
2.3.1 Hypercube
  1. Qlik 中所有的数据存储方式都是 qHyperCube,不再是数据表中的二维形式。

  2. 表格的数据是动态加载的,当用户在向下滑动表格的时候,会不断去获取数据动态加载到表格中,其他的 object 是静态加载到前台页面的。

  3. 通过

     app.visualization.get("id").then(function(vis){
    console.log(vis);
    });

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

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

    通过 qHyperCube --> qDimensionInfo 可以得到这个 object 某个维度的描述和字段值

  4. 如果只是从 qHyperCube 中获取到某些值,展示出来的值是静态的,需要再添加数据联动的效果。

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

  2. 具体代码 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的侦听
  1. 查看上方代码,需要注意的是,在 chart 上一次性最多选择6个,大于6个就会显示 n of totalNum(n > 6),所以需要显示更多的选项,就需要去添加一个筛选下拉列表,然后侦听筛选器的选中状态
2.4 更上层楼
2.4.1 Object 预读
  1. 预读其实就相当于把 object 先放到了 promise 里面,当所有的 object 都已经放到 promise 中之后,再
2.4.2 Config JSON
  1. 把所有的静态变量写在一个 config 文件中,然后在 js 文件中通过 ajax 来调用

     $.ajax({
    'type': 'get',
    'url': "config/system.json",
    }).done(function (reply) {
    ...
    })
2.4.3 SPA 的实现
  1. 如果是多个页面进行跳转的话,server 端需要不断提供新的链接信息,socket、session等等,所以 Qlik 推荐使用 SPA 的方式来实现 mashup,可以通过对 div 的 show / hide 或者通过框架对页面重新渲染等
2.5 登峰造极
2.5.1 Websocket 与 Engine API
  1. 辅助工具 socket.io
2.5.2 QRS API 的应用
2.5.3 综合应用

3.DEMO

上一篇:计算机网络(9)-----TCP可靠传输的实现


下一篇:Java入门基础,必读!Java单行、多行和文档注释!