chart控件做實時曲線顯示_jxTMS--web控件的一般定義

web控件的一般定義

在前述《web界面》一文，我們綜述了jxTMS的web界面，但沒有詳細讨論各種web界面。本文即讨論jxTMS的web界面的一般定義文法。

web控件有多種文法，目前開放的主要有兩種：web控件和引用其它web控件。

單個web控件的定義文法：

web 控件名 (bind 資料名)? (parent 父容器名)? type 控件類型 校驗? 顯示條件? (屬性 (, 屬性)*)? 描述?
           

控件名就是标準的變量名【英文字母、中文字、_、數字等組成，數字不可開頭】，建議不要使用中文，而該名必須在整個空間唯一。

資料名同樣是标準變量名且建議不要使用中文，但不需要空間唯一，而隻要在一個整體顯示的web界面中不重複即可。不綁定資料名，則控件無法在python代碼中指派與讀取。

如果指定了父容器，則本控件就是父容器的一個組成部分，一般隻有容器型控件才需要，如div和table。

控件類型目前開放的包括：

• div，組容器，包含其它web控件用于整體顯示、控制的容器，一個web界面就是一個div控件
• table，資料表或容器表控件
• text，文本，主要用于顯示資訊以提示使用者
• input，文本輸入框，主要用于單行輸入
• textarea，多行文本輸入框，由于jxTMS前後端互動使用json，而行号會破壞json的解析，同時web中的回車是br、p标記等，是以該控件的值會被用base64編碼，同時不做任何解碼
• button，按鈕，點選則根據參數觸發相應的事件
• a，工具條，點選則根據參數觸發相應的事件
• checkbox，複選框
• checkboxGroup，複選框組
• switchGroup，可選顯示格式的複選框組
• radio，單選框
• tree，樹型菜單
• dtpicker，日期拾取器
• tag，标記
• combobox，下拉選擇框
• fileInput，檔案上傳
• map，高德地圖
• h5ss，h5ss視訊顯示
• chart，圖表
• codeEditor，代碼編輯器

校驗

校驗是發送到前端浏覽器的表達式，對該web控件的使用者輸入值在必要時【如點選了按鈕之後】進行合規性檢測：jxTMS的js代碼會執行這些表達式來判斷web控件的目前值是否能通過核驗，如果不能通過核驗，js代碼會彈出提示框并标紅該控件以提示使用者其輸入不符合要求。

校驗文法如下：

verify=[ 校驗子句 (, 校驗子句)* ]
           

其中校驗子句的文法如下：

校驗子句 (, 校驗子句)*      //校驗子句可以是多個校驗子句的或連接配接
資料校驗 (and  資料校驗)*   //單個校驗子句是多個資料校驗的與連接配接
           

其中資料校驗的文法包括：

比較符 值                   //web控件的目前值和某個值進行比較
值 比較符 值             //兩個值的比較
len 比較符 整數              //輸入的字元串的長度和整數的比較
validity 比較符 日期值        //把使用者輸入的字元串和日期值以【yyyy-MM-DD hh:mm:ss，ss可省略】的格式轉換為日期，然後進行比較
is num                      //判斷使用者輸入的字元串是否是數字
is integer                  //判斷使用者輸入的字元串是否是整數
is dateTime                 //判斷使用者輸入的字元串是否是日期
rule= 字元串               //字元串是用單雙引号框起來的javascript的正規表達式，根據該正規表達式來判斷使用者輸入的字元串是否相符
           

注：如果值是VAR開頭的【形如VARvn，如VARmyID】，則為引用上下文發送到前端的本地變量vn的值，如VARmyID即比較目前使用者的ID

其中的比較符和sql資料源中的定義是一樣的，包括：等于【==】、不等【!=】、大于【>】、大于等于【>=】、小于【<】、小于等于【<=】、相似【like】共七種。

注：使用者輸入的自然都是字元串，但jxTMS的js代碼如果是值比較，則會在比較前将其轉換為相應的格式，如果無法轉換成相同的格式，則其比較請檢視javascript的相應比較規則，jxTMS無法保證。是以建議如果是值比較，最好在比較前先and一個類型判斷的資料校驗子句

顯示條件

顯示條件是也發送到前端浏覽器的表達式，jxTMS在接收到背景發送過來的該web控件的json描述時，會執行該表達式，如果不通過就不再建立該控件。但在後來的應用中，筆者從未使用過該特性，而且在測試過程中發現由于不顯示該控件會影響控件布局不可預知，同時也可能會影響到背景邏輯的一緻性，是以此處就不再加以介紹。建議如有此種情況，可由背景通過控制該控件的enable屬性來使其失能，這樣該控件既不會使用者使用到，同時仍然占位不影響布局和背景邏輯。

描述

在開始設計jxTMS時，筆者希望能提供一種實時的幫助能力以便于使用者在遇到使用問題時能盡快了解該如何操作，而減少對維護人員的打擾。是以就設計了控件的描述功能，當開發者對該控件設定了描述後，在滑鼠移動到該控件時，就會彈出一個黃色的小tip顯示這個描述。但這一設計後來基本不再使用，原因是筆者發現：

• 對于業務應用系統，使用者上崗前應通過正式教育訓練才能操作，而不能以這種自己學習的方式胡亂試錯
• 對于已經足夠熟練的使用者，滑鼠移過彈出的黃色tip是非常讓人惱火的、會分散注意力無法高效的專心工作
• 如果想達到足夠了解程度的說明，需要大量的字元，那就為了這麼個隻有負面效果的功能還必須每次都發送大量的文字到前端浪費了記憶體和帶寬

有鑒于此，該功能雖未取消，但jxTMS前端已經将這一功能預設禁止掉了，也不建議開發者對控件加描述。如果需要說明，則開發者應編寫界面設計說明文檔。

引用其它web控件

有些界面可能有相當多的控件是相同的，而且還是一一對應的相同，即如果我要改你也必須改。如錄入産品台賬和編輯産品台賬，可能除了産品代碼/編号之類一個有資訊一個沒資訊、最後點選觸發背景事件的按鈕所對應的cmd事件不同，其它都是一樣的。

這種情況下如果需要修改，則必須同時修改兩個界面，而且更頭疼的是各個控件的名字還不能重複。是以如果有修改的需求，潛在的各種bug就會較大機率出現。

考慮到這個問題，jxTMS提供了引用其它控件的能力。比如，錄入産品台賬界面是由一個個不同的子div組成，而編輯産品台賬界面也是由一個個的子div組成，但這些子div大多是引用了錄入産品台賬界面中對應的子div，隻有包含确認按鈕的子div不引用其它子div，而是真實定義的子div，其包含了觸發【cmd.editProduct】事件的按鈕，而錄入産品台賬界面中的這個子div則是包含觸發【cmd.newProduct】事件的按鈕。

引用其它web控件的文法為：

web 控件名 (parent 父容器名)? ref originalName? 被引用控件名 (屬性 (, 屬性)*)?
           

jxTMS支援引用一個已經定義好的控件，用新名重新命名後并添加屬性後作為一個新的控件使用。這一能力主要用來引用其它的容器控件以避免修改業務邏輯後由于需要修改的界面太多而誘發各種bug。

如果設定了originalName，則控件名不會修改而就是被引用控件名，如果沒有設定，則會用控件名來取代被引用控件名重新命名。

注：引用是複制被引用的控件，然後修改後使用的，是以被引用的控件和引用後的控件是兩個不同的控件，引用後的屬性修改不影響被引用的控件的定義

目前，jxTMS已經打包為雲伺服器鏡像，開發者開箱即用：

jxTMS-騰訊雲市場​market.cloud.tencent.com