自定控制元件

# 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編輯器→