自定控件

# FastWeb 自定控件

适用平台：WEB(桌面)

自定控件提供了一种方式来将jQuery与FastWeb数据库进行连接展示。自定控件在功能上分为两大块内容，分别为控件管理与控件引用。

# 1. 自定控件

使用开发用户登录至FastWeb，点击[系统工具]-[自定控件(JS)]，打开自定控件(JS)标签页面。

添加自定控件

点击[添加]按钮，打开添加jQuery对话框，在其中选择容器控件，输入描述与备注信息，设置完成后，点击[保存]按钮保存。

修改控件描述

选择要修改的控件项，点击[修改]按钮，打开修改jQuery组件选项，修改其中的字段信息。修改完成后，点击[保存]按钮完成修改。

删除自定控件

选择要删除的自定控件项，点击[删除]按钮，在下方弹出的删除确认对话框中点击[是]按钮，选择的自定控件项将被删除，如果不需要删除，点击[否]按钮。

# 2. 配置自定控件

在自定控件创建完成后，选择创建的组件，点击[配置]按钮，打开管理器界面。

在模板页面填写HTML的信息，其中需要注意的是，如果需要引用的文件需放置于本地的，请将文件按照目录放置于FastWeb中，在HTML中逐个引用。请注意，在填写的HTML一栏不能有注释的内容，否则会导致保存过程中出现报错。

将标签页面切换至参数页，添加一行参数，按照图示进行设置。设置完成后，返回至模板标签页，将其中设置数值的位置使用参数param_value进行替换。比如原先用于显示数值的data-value = "0" 修改为data-value = "param_value"。

将标签页切换至数据，选择其绑定的数据集的数据节点信息。输入SQL绑定相应的字段。格式示例为SELECT (字段名) AS param_value。可点击[测试]按钮查看填写的SQL信息是否准确。

填写完成后，点击[OK]按钮完成配置。

# 3. 引入自定控件

通过上述方式设置自定控件后，接下来在示例中引入自定控件。

根据FastWeb快速上手的指导创建模块进入模块设计页面后，从控件盘的附加的选项中将TUgJQueryFrame拖动放置于设计页面上。双击控件打开ugJQueryManager画面，选择刚才创建的组件，点击[OK]按钮。

在程序中输入以下内容：

//JScript
  UgJQueryFrame01.Init;

1
2

//PasScript
  UgJQueryFrame01.Init;

1
2

// Make sure to add code blocks to your code group

启动运行，查看组件，此时的组件已显示。

如需要动态引入自定控件的配置信息，可从刚才设置的控件的GUID中获取到自定控件的GUID信息，使用以下方式实现动态引入：

//JScript
  UgJQueryFrame01.Init("E65E69B8-D584-4199-AC82-F0A4D37902FF");

1
2

//PasScript
  UgJQueryFrame01.Init('E65E69B8-D584-4199-AC82-F0A4D37902FF');

1
2

// Make sure to add code blocks to your code group

# 4. JQuery组件数据传递

如需要从程序中动态传递数据给JQuery组件，可使用TUgJQueryFrame中的JSONTOData方法，将数据导入至参数中。示例如下：

//JScript
  UgJQueryFrame01.JSONTOData("{\"param_value\":\"11\"}");

1
2

//PasScript
  UgJQueryFrame01.JSONTOData('{"param_value":"11"}');

1
2

// Make sure to add code blocks to your code group

其中的param_value是在参数中设置的参数名称，如有多个参数则按照参数的顺序依次以JSON方式排列。

//JScript
  UgJQueryFrame01.JSONTOData("{\"param_value1\":\"11\"},{\"param_value2\":\"22\"}");

1
2

//PasScript
  UgJQueryFrame01.JSONTOData('{"param_value1":"11"},{"param_value2":"22"}');

1
2

// Make sure to add code blocks to your code group

通过上述方式，可将其中的数据值修改为11。

# 5. 示例

以下的示例假设您已经了解上述添加组件的流程，接下来会介绍自定控件的扩展方法。

# 5.1. Canvas Gauges

Canvas Gauges是一套JS仪表库，点击https://github.com/Mikhus/canvas-gauges/archive/refs/tags/v2.1.7.zip (opens new window)以下载库，建议将其解压缩放置于FastWeb目录的library/js文件夹中。

# 5.1.1. 确认参数

首先，我们先获取相关的示例。从https://canvas-gauges.com/documentation/user-guide/ (opens new window)中获取到以下示例：

<!doctype html>
<html>
<head>
    <title>Gauges as Components</title>
    <script src="gauge.min.js"></script>
</head>
<body>
<!-- Injecting linear gauge -->
<canvas data-type="linear-gauge"
        data-width="160"
        data-height="600"
        data-border-radius="20"
        data-borders="0"
        data-bar-stroke-width="20"
        data-minor-ticks="10"
        data-major-ticks="0,10,20,30,40,50,60,70,80,90,100"
        data-value="22.3"
        data-units="°C"
        data-color-value-box-shadow="false"
></canvas>

<!-- Injecting radial gauge -->
<canvas data-type="radial-gauge"
        data-width="400"
        data-height="400"
        data-units="Km/h"
        data-title="false"
        data-value="0"
        data-min-value="0"
        data-max-value="220"
        data-major-ticks="0,20,40,60,80,100,120,140,160,180,200,220"
        data-minor-ticks="2"
        data-stroke-ticks="false"
        data-highlights='[
            { "from": 0, "to": 50, "color": "rgba(0,255,0,.15)" },
            { "from": 50, "to": 100, "color": "rgba(255,255,0,.15)" },
            { "from": 100, "to": 150, "color": "rgba(255,30,0,.25)" },
            { "from": 150, "to": 200, "color": "rgba(255,0,225,.25)" },
            { "from": 200, "to": 220, "color": "rgba(0,0,255,.25)" }
        ]'
        data-color-plate="#222"
        data-color-major-ticks="#f5f5f5"
        data-color-minor-ticks="#ddd"
        data-color-title="#fff"
        data-color-units="#ccc"
        data-color-numbers="#eee"
        data-color-needle-start="rgba(240, 128, 128, 1)"
        data-color-needle-end="rgba(255, 160, 122, .9)"
        data-value-box="true"
        data-animation-rule="bounce"
        data-animation-duration="500"
        data-font-value="Led"
        data-animated-value="true"
></canvas>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

从中可以看出，仪表参数的部分被canvas标签携带，其中最重要的数值显示部分均有data-value字样，此参数就是参与显示数值的，故在接下来的设置中我们要为此参数进行自定义操作。

# 5.1.2. 修改模板

上述模板不能直接引入JQuery组件中使用，需要经过修改后才可以使用。

将所有外部链接本地化

将模板中所有的外部链接的文件引入至本地来实现。

在上文的内容中查找到以下引用外部链接的语句：

<script src="gauge.min.js"></script>

我们在下载的安装包中找到上述名称的js文件，将其放置于指定的位置，比如library/js/canvas-gauge/gauge.min.js，然后我们将上述链接的地址同步修改为：

<script src="library/js/canvas-gauge/gauge.min.js"></script>

标记参数

在需要设置参数的位置，将设定的值用参数名称来替换，参数的名称可以自己任意定义，在后续设置参数时要将这些定义的参数录入。

在上述示例中，将两处data-value字样后赋值的数值分别用param_value1与param_value2来代替。

经过上述修改后，显示内容如下：

<!doctype html>
<html>
<head>
    <title></title>
    <script src="library/js/canvas-gauge/gauge.min.js"></script>
</head>
<body>
<!-- Injecting linear gauge -->
<canvas data-type="linear-gauge"
        data-width="160"
        data-height="600"
        data-border-radius="20"
        data-borders="0"
        data-bar-stroke-width="20"
        data-minor-ticks="10"
        data-major-ticks="0,10,20,30,40,50,60,70,80,90,100"
        data-value="param_value1"
        data-units="°C"
        data-color-value-box-shadow="false"
></canvas>

<!-- Injecting radial gauge -->
<canvas data-type="radial-gauge"
        data-width="400"
        data-height="400"
        data-units="Km/h"
        data-title="false"
        data-value="param_value2"
        data-min-value="0"
        data-max-value="220"
        data-major-ticks="0,20,40,60,80,100,120,140,160,180,200,220"
        data-minor-ticks="2"
        data-stroke-ticks="false"
        data-highlights='[
            { "from": 0, "to": 50, "color": "rgba(0,255,0,.15)" },
            { "from": 50, "to": 100, "color": "rgba(255,255,0,.15)" },
            { "from": 100, "to": 150, "color": "rgba(255,30,0,.25)" },
            { "from": 150, "to": 200, "color": "rgba(255,0,225,.25)" },
            { "from": 200, "to": 220, "color": "rgba(0,0,255,.25)" }
        ]'
        data-color-plate="#222"
        data-color-major-ticks="#f5f5f5"
        data-color-minor-ticks="#ddd"
        data-color-title="#fff"
        data-color-units="#ccc"
        data-color-numbers="#eee"
        data-color-needle-start="rgba(240, 128, 128, 1)"
        data-color-needle-end="rgba(255, 160, 122, .9)"
        data-value-box="true"
        data-animation-rule="bounce"
        data-animation-duration="500"
        data-font-value="Led"
        data-animated-value="true"
></canvas>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

上述内容可填写至模板中使用。

在参数栏中设置刚才定义的两个参数。

与数据库字段联动

在数据选项卡中，选择连接的数据类型为json，连接的名称为demo，在下方输入以参数名为字段的SQL语句，将参数引入。

← 模块列表 SVG编辑器→