使用“kintone UI Component​”轻松创建kintone风格的UI组件

betsy_yan发表于:2019年01月11日 14:34:31更新于:2019年02月11日 18:08:41

Index

概要

2018年5月,“kintone UI Component”在以下GitHub上发布了。
“Kintone UI Component”是为kintone工程师开发的程序库,使用它就可以轻松创建kintone风格的UI组件。

GitHub

文档

通过使用“kintone UI Component”,可以在JavaScript中编写HTML元素和属性;使用 css时可以轻松创建kintone风格的UI组件,而无需更改颜色,大小等。
本文将目前使用的传统代码编写方法和使用“kintone UI Component”的代码编写方法作比较,同时介绍“kintone UI Component”的使用方法。


如果您想跳过比较,请阅读“使用kintone UI Component制作复选框”。

注意事项

  • 本范例程序,不保证运行绝对正确。

  • 关于代码的更改、再发布以及商业用途,请遵照相应的使用许可协议。

kintone风格复选框的设置流程

第1步:设置普通的复选框

首先,使用JavaScript制作一个复选框。

(function() {
    'use strict';
    function createCheckElemet(value, checkedflg, disabledflg) {
        var checkElm = document.createElement('div');
        var checkSpan = document.createElement('span');
        var checkInput = document.createElement('input');
        var checkLabel = document.createElement('label');
        checkInput.type = 'checkbox';
        checkInput.checked = checkedflg;
        checkInput.disabled = disabledflg;
        checkLabel.innerText = value;
        checkElm.appendChild(checkSpan);
        checkSpan.appendChild(checkInput);
        checkSpan.appendChild(checkLabel);
        return checkElm;
    }
    kintone.events.on('app.record.detail.show', function(event) {
        var orangediv = createCheckElemet('Orange', true, false);
        var bananadiv = createCheckElemet('Banana', false, false);
        var lemondiv = createCheckElemet('Lemon', false, true);
        kintone.app.record.getSpaceElement('nativeUI').appendChild(orangediv);
        kintone.app.record.getSpaceElement('nativeUI').appendChild(bananadiv);
        kintone.app.record.getSpaceElement('nativeUI').appendChild(lemondiv);
    });
})();

在这个阶段,代码并不难,但设计与kintone不匹配。
下一步,使用CSS更改设计。

0015c3bfa66df50cd9fd6baa2dd924a

第2步:使用modern default css

为了使之前制作的复选框的设计成为kintone风格的UI,需要应用css来更改设计。
kintone风格的CSS在GitHub上名为“51-modern-default.css”, 需要下载此文件并将其应用于应用程序,并参考这篇文章以重现JavaScript代码中复选框的DOM结构。

(function() {
    'use strict';
    function createCheckElemet(value, checkedflg, disabledflg, id) {
        var checkElm = document.createElement('div');
        var checkSpan = document.createElement('span');
        var checkInput = document.createElement('input');
        var checkLabel = document.createElement('label');
        checkElm.className = 'kintoneplugin-input-checkbox';
        checkSpan.className = 'kintoneplugin-input-checkbox-item';
        checkInput.type = 'checkbox';
        checkInput.checked = checkedflg;
        checkInput.disabled = disabledflg;
        checkInput.id = id;
        checkLabel.innerText = value;
        checkLabel.htmlFor = id;
        checkElm.appendChild(checkSpan);
        checkSpan.appendChild(checkInput);
        checkSpan.appendChild(checkLabel);
        return checkElm;
    }
    kintone.events.on('app.record.detail.show', function(event) {
        var orangediv = createCheckElemet('Orange', true, false, 'checkbox-0');
        var bananadiv = createCheckElemet('Banana', false, false, 'checkbox-1');
        var lemondiv = createCheckElemet('Lemon', false, true, 'checkbox-2');
        kintone.app.record.getSpaceElement('modern-default-UI').appendChild(orangediv);
        kintone.app.record.getSpaceElement('modern-default-UI').appendChild(bananadiv);
        kintone.app.record.getSpaceElement('modern-default-UI').appendChild(lemondiv);
    });
})();

0015c3bfbe4333b0f6da19908ce84af
虽然我们能创建kintone风格的UI,但需要在代码中声明HTML元素的各个属性,代码就变得复杂冗长了。

第3步:使用jQuery

接下来,为了便于阅读代码,请尝试使用cybozu CDN上提供的jQuery。

jQuery.noConflict();
(function($) {
    'use strict';
    function createCheckElemet(value, checkedflg, disabledflg, id) {
        var $checkElm = $('<div>', {
            'class': 'kintoneplugin-input-checkbox'
        });
        var $checkSpan = $('<span>', {
            'class': 'kintoneplugin-input-checkbox-item'
        });
        var $checkInput = $('<input>', {
            type: 'checkbox',
            checked: checkedflg,
            disabled: disabledflg,
            id: id
        });
        var $checkLabel = $('<label>', {
            For: id,
            text: value
        });
        $checkElm.append($checkSpan);
        $checkSpan.append($checkInput);
        $checkSpan.append($checkLabel);
        return $checkElm;
    }
    kintone.events.on('app.record.detail.show', function(event) {
        var $orangediv = createCheckElemet('Orange', true, false, 'checkbox-0');
        var $bananadiv = createCheckElemet('Banana', false, false, 'checkbox-1');
        var $lemondiv = createCheckElemet('Lemon', false, true, 'checkbox-2');
        $(kintone.app.record.getSpaceElement('jQuery-UI')).append($orangediv);
        $(kintone.app.record.getSpaceElement('jQuery-UI')).append($bananadiv);
        $(kintone.app.record.getSpaceElement('jQuery-UI')).append($lemondiv);
    });
})(jQuery);

比之前更易读了,但仍然需要指定class和具体的HTML元素,这都需要花些时间。

使用kintone UI Component制作复选框

下载kintone UI Component

通过使用此次发布的kintone UI Component,可以比以往更轻松地创建kintone风格的UI组件。
这里的GitHub下载:

  • kintone-UI-component.min.css

  • kintone-UI-component.min.js

并将其应用于kintone应用程序。

示例代码

(function() {
    'use strict';
    kintone.events.on('app.record.detail.show', function(event) {
        var checkbox = new kintoneUIComponent.CheckBox ({
            items: [
                {
                    label: 'Orange',
                    value: 'Orange',
                    isDisabled: false
                },
                {
                    label: 'Banana',
                    value: 'Banana',
                    isDisabled: false
                },
                {
                    label: 'Lemon',
                    value: 'Lemon',
                    isDisabled: true
                },
            ],
            value: ['Orange']
        });
        kintone.app.record.getSpaceElement('component-UI').appendChild(checkbox.render());
    });
})();

0015c3bfbe4333b0f6da19908ce84af

怎么样?是不是和我们之前使用的方法完全不同?用了这个方法可以轻松创建kintone风格的UI组件,而无需指定HTML元素和属性。
简单的解释代码:
可以通过在第5行的“items”中添加元素,轻松增加复选框的元素数量。
另外,在第22行,可以将“items”里的元素添加到“value”中来改变初始状态。
可以通过kintone UI Component的函数“render()”将创建的元素转为DOM元素。

关于kintone UI component专用函数

在kintone UI component中,除了先前复选框中引入的“render()”之外, 还有其他操作组件的专用函数。
以之前创建的复选框为例,我们来介绍一下组件的专用函数。
关于其他的UI请参阅文档

render()

它是将创建的组件转为DOM元素处理的函数。

console.log(checkbox.render());

0015c3c00d5cfae5da1a59f279d27ea

addItem(item)

增加复选框中的选项数量。

var item = {
    label: 'Grape',
    value: 'Grape',
    isDisabled: false
};
checkbox.addItem(item);

0015c3c031822013f62a4f97e11ce58

getItem(index)、getItems()

获取复选框选项。

console.log(checkbox.getItem(0));
console.log(checkbox.getItems());

0015c3c043427d71405a234519cb05e

removeItem(index)

删除复选框选项。

checkbox.removeItem(0);

0015c3c04b4639736edbd69e62c1544

getValue()、setValue(value)

获取或设置已勾选的选项值。

console.log(checkbox.getValue());
checkbox.setValue(['Banana']);

0015c3c07564bbd0f80fe45e12e2db2

disableItem(value)、enableItem(value)

设置选项的禁用或启用。

checkbox.disableItem('Orange');
checkbox.enableItem('Lemon');

0015c3c259b10b238b66964432b4628

on(eventName, callBack)

callBack是指在组件发生特定事件时触发的函数。
在复选框中,“eventName”是“change”时,在更改复选框选项时触发。
在其他组建中同样也有“on(eventName, callBack)”。
例如,按钮中的“eventName”是“click”时,单击按钮会触发。
因为其他组件也有这个事件,详情请参阅文档

checkbox.on('change', function(value) {
    console.log(value);
});

0015c3c262d23fbc00d450b59bd2522

show()、hide()

设置组件为显示或隐藏。

checkbox.hide();

0015c3c2746af2aa5b620607968292d

disable()、enable()

设置复选框整体的禁用或启用。

checkbox.disable();

0015c3c27a072579f36ca94bb16c20e

关于复选框以外的UI(部分)

除了本文中介绍的复选框,我们还可以轻松实现复杂的Table以及“51-modern-default.css”未实现的UI。
详细的实现方法请参阅文档

Table

var table = new kintoneUIComponent.Table({
    rowTemplate: [radioBtn, dropdown],
    header: ['Fruit', 'Color']
});
kintone.app.record.getSpaceElement('component-UI').appendChild(table.render());

0015c3c358c08ce24653ed48857e2b7

Table的callBack函数,在on()上实现了各种事件。

rowAdd

添加行时触发,事件返回对象包含Table的值和按下添加按钮的行号。

rowRemove

删除行时触发,事件返回对象包含Table的值。

cellChange

更改单元格的值时触发。事件返回对象包含Table的值、单元格的值以及更改的单元格的位置。

cellClick

单击单元格时触发。事件返回对象包含Table的值、单元格的值以及单击的单元格的位置。
有关回调函数接收的数据详情,请参阅此文档
通过使用上述事件,可以实现各种动作。

NotifyPopup

var notifyPopup = new kintoneUIComponent.NotifyPopup({
    text: 'Submitted successfully',
    type: 'success'
});
kintone.app.record.getSpaceElement('component-UI').appendChild(notifyPopup.render());

0015c3c2b97818560d8c954113e26cd

弹出窗口也能轻松实现。

Spinner

var spinner = new kintoneUIComponent.Spinner();
kintone.app.record.getSpaceElement('component-UI').appendChild(spinner.render());
spinner.show();

0015c3c2ccc58e454694937c320a9c2

使用kintone UI Componet也能轻松创建可用于加载画面的Spinner。

IconButton

var insertBtn = new kintoneUIComponent.IconButton({
    type: 'insert',
    color: 'blue', 
    size: 'large'
});
kintone.app.record.getSpaceElement('component-UI').appendChild(insertBtn.render());

0015c3c2dd94ea1777db9e5f16ec456

可以制作“+”、“ - ”、“×”按钮。
由于IconButton的on()函数具有click事件,因此按下按钮时的处理也能轻松实现。

结束语

kintone UI Componet不仅可以轻松创建kintone风格的UI控件,而且还具有与UI动作相bang'ding的事件,因此可以实现各种处理。
请在查阅文档时使用。

    注意:贴代码时请注意格式并使用"代码语言",与本文无关的问题请至“讨论社区”提问。
    您需要登录后才可以回复