【表單系統】OneCode在復雜場景下的表單解決方案
當前位置：點晴教程→知識管理交流
→『 技術文檔交流 』
前言表單在我們的日常工作中經常會用到，一個優質的表單可以提高我們的工作效率，完成一些更多的業務，提高產品體驗，在實際應用中，根據不同場景表單、表格、圖表，其中表單涉及到聯動、校驗、布局等復雜場景，經常是開發者的需要耗費精力去解決的點。本文作為《OneCode表單系統》介紹的續篇，將著重介紹OneCode在復雜場景下的表單解決方案。 一，復雜表單系統難點1，數據動態聯動數據聯動是表單系統中最常見的動態組件，在組件定義過程中會預先設定好關聯規則，當規則中對應的元素發生變化時會處罰與之相關聯的數據自動執行變化。我們將這一類的組件根據場景不同進行了以下3個方面的細分。 （1）常用字典表聯動
用戶在做表單錄入時針對一些數據量比較大選擇項時通常會引導用戶通過分類來完成， 例如在錄入用戶居住地時，會依次完成省、市、區三級的選擇這期間就是一個基本的聯動關系，在不同的應用場景中級聯的選項以及對應的字典數據也會有所不同。我們將這一類以分類引導為主的關系型數據輸入統稱為“常用字典表聯動”； （2）表格計算聯動
在實際應用中還有一類表格計算型數據聯動也是非常常見的比如：在財務、建筑等系統中各種數據匯總表，在醫療系統中患者的藥品匯總單，等等都會涉及到表單輸入項的一些匯總求和等及時計算，我們將這一類的聯動統一歸類為“表格計算”。 （3）自定義公式聯動
在表單的實際應用場景中，同樣的數據錄入往往會因為，輸入的人員角色不同，權限不同以及表單數據狀態不同，而表現出不同的狀態，這些跟具體的業務場景以及數據內容相關的數據聯動，在實際開發中一般會選擇類似于exelc公式的動態DSL語法來完成一些小型的腳本邏輯嵌入，我們將這一類的聯動需求統稱為：“自定義公式聯動”。 2， 數據效驗在大多數的表單系統中面向的用戶是一些非專業的IT人員，在設計輸入選項時為避免用戶的輸入錯誤需要針對用戶輸入的數據格式、大小、范圍等進行一些基礎的校驗，規范數據采集，避免數據問題造成數據無效。在表單系統設計方面，一般會根據業務對象的數據類型自動完成一些基礎類型的校驗，同時根據業務的一些特殊場景也需要用戶自定義一些業務效驗規則。
（1）基礎類型效驗 在基礎數據效驗方面，通常會優先一些基礎類型的校驗，比如：文本、數字、日期甚至在前端輸入控件上使用一些特定的輸入方式，規范用戶輸入，同時再輔助一些大小范圍等業務定義輔助校驗。 （2）自定義效驗 在實際的業務場景中，都需要根據具體的業務場景來擴展數據效驗。比如在一些建筑類表單中運用的土方計算、醫療應用中專有的血壓、體溫等等數據都會根據，數據對象的不同而表現為不同的效驗規則。 3，融合展現表單的基本功能是負責數據的輸入輸出，在輸入端面向數據錄入者提供交互頁面，在數據展示端則負責面向數據的接受者展示數據的結果。隨著業務場景的多樣化以及業務數據應用的逐步深入。數據端輸入要求的精度以及便捷度在逐步提高，在數據的接收展示端也越來越多的要求數據呈現的多樣性。簡單數據數字數據表格已經很難以承載日益復雜的數據模型展現。這就要求表單在數據展現層面支持多樣化的結果展示。這其中最為常用的幾塊包括：圖形、圖標混排，更高層次的展現數據；將數據結果直接以版式文件模式展示方便最終結果的成文歸檔。支持數據錄入、展示為一體的嵌套混搭展示，提供一體化的輸入輸入載體。 （1）圖形、圖表混排
（2）版式文件格式支持 在國內很多的業務數據系統，來源于傳統的業務的無紙化辦公應用，
（3）錄入展示混搭嵌套
4，智能輸入輔助在表單應用中，有很大一部分是在高頻高強度輸入的強度使用的，比如醫療系統中醫師的病例診斷錄入，工商稅務等系統中直接面向個人或商戶的“窗口應用”。這些應用在設計上通常都需要一些常用場景的預設錄入，在操作者掌握一定的規則之后便可快捷方便的完成常用場景的快捷輸入以及數據的批量錄入。這就對表單系統提出了更高的要求。
（1）專業詞匯字典
（2）模糊智能推薦檢索
（3）個性化交互推薦操作
二，OneCode簡介OneCode表單是基于OneCode開源低代碼引擎，開發的一款。面向復雜應用的表單可視化解決方案產品。 onecode表單系統是建立在OneCode低代碼引擎的一個重要組成部分，由設計器，表單引擎、以及領域設計工具組成。
（1）可視化設計器設計器是表單系統統一入口，onecode 設計器本身是一套開放的設計，用戶可以通過，OneCode語言指定擴展。設計器，采用的是拖拽引擎+插件的構造模型，用戶可以通過開放的低代碼協議編寫插件。支持JS和JAVA兩種擴展語言。樣式構建提供了標準CSS3編輯器，支持事件動作以及函數動態擴展。支持自定義函數庫擴展，支持阿里字體圖片等資源庫。
（2）表單引擎表單引擎由三塊自成體系的可獨立部署運行的部分組成。前端引擎負責界面建模并按低代碼協議協議生成標準JSON，中后臺OneCode通過讀取標準JSON協議，完成后端的視圖建模，合并DSM后端服務建模系統，完成完整的后端服務建模應用，通過代碼工程完成前后端一體的出碼應用。JDSCloud是OneCode的協同支撐系統，除了常規的資源代碼空間管理外，提供了獨立的沙箱運行環境。為OneCode 提供工程化的仿真版本Ops等服務。
（3）DDD領域設計工具OneCode-DSM(以下簡稱DSM)工具集是建立是以OneCode低代碼引擎為基礎專注于低代碼建模應用的高階建模工具。在OneCode引擎中，出了為普通用戶提供無代碼的拖動設計器，低代碼的業務邏輯編排器，之外還提供了供專業業務領域專家的使用的DSM建模工具。
三，OneCode標準表單輸入控件（1）頁面布局表單系統，依然采用的是，OneCode低代碼引擎的布局結構。使用工程結構來完成項目代碼的管理及復用。
在主體布局上默認采用的表格布局，支持行列的自由拖動，以及行列合并操作。
允許以，整行、整列、獨立單元格獨立設置樣式。
OneCode也提供了，常用的嵌套布局容器組件。方便進行復雜頁面組合。 （2）表單輸入基于OneCode的通用輸入控件，是經過OneCode封裝后統一輸出的，包括前端用戶展現控制以及OneCode后端定義語法及DSM工具。
四，OneCode圖表支持1，圖表配置器
2， FusionChartsXT
(3) ECharts
(4) SVGPaper
五，OneCode 前端設計器UI組件擴展（1）設計器功能介紹
（2）物料庫
"物料"：低代碼引擎的核心目的之一是建設跨行業的低代碼框架，而每個行業由于其應用的領域不同，使用的人員以及方法方式不同，在一些底層組件方面會有會有加大差距。比如：政府業務中會大量使用的非規則表單元素，企業應用中各個行業自有的圖標體系，物聯網行業大量的設備圖標圖片以及實時聯網圖。 （3）組件庫組件定義：可以用于低代碼平臺的組件，包含了搭建體驗增強配置，可以在設計器中 進行拖拽、配置等操作。有兩種分類方式：按照場景可以分為基礎組件、業務組件、圖 表組件、布局組件和復合組件等。通常用戶可以自主完成相關設定，并根據業務特點在視圖引擎中進行自行擴展（后續章節中會演示實際注冊示例）
（4）樣式體系
DOM樹透視樣式盒
DOM樹透視
配圖示例代碼 {
"alias":"BuildTreeTreeView",
"key":"xui.UI.TreeView",
"host":this,
"properties":{
"name":"BuildTreeTreeGrid",
"items":[
{
"borderType":"none",
"caption":"JAVA樹",
"dynDestory":false,
"hidden":false,
"id":"getBuildTree",
"imageClass":"bpmfont bpmgongzuoliuxitongpeizhi",
"tagVar":{ }
}
],
"iniFold":false,
"dynDestory":true
},
"CS":{
"KEY":{
"color":"#000000",
"font-weight":"lighter",
"border-radius":"0px 2px 0px 0px"
},
"BAR":{
"font-family":"tahoma,geneva,sans-serif"
}
}
}代碼配置示例 {
"alias":"xui_ui_cssbox1",
"key":"xui.UI.CSSBox",
"host":this,
"properties":{
"className":"xui-css-ame",
"normalStatus":{
"color":"#eeeeee",
"border-radius":"6px",
"box-shadow":"inset 0px 1px 0px #87C1DD",
"text-shadow":"0 1px 0 #297192",
"$gradient":{
"stops":[
{
"pos":"0%",
"clr":"#4BA3CC"
},
{
"pos":"70%",
"clr":"#3289B2"
}
],
"type":"linear",
"orient":"T"
},
"cursor":"pointer",
"border-top":"solid #3899C6 1px",
"border-right":"solid #3899C6 1px",
"border-bottom":"solid #3899C6 1px",
"border-left":"solid #3899C6 1px"
},
"hoverStatus":{
"border-radius":"0px 3px 0px 0px"
}
}
}（5）事件框架
配置代碼示例： {
"alias":"BuildTreeTreeView",
"key":"xui.UI.TreeView",
"host":this,
"properties":{
"name":"BuildTreeTreeGrid",
"items":[
{
"borderType":"none",
"caption":"JAVA樹",
"dynDestory":false,
"hidden":false,
"id":"getBuildTree",
"imageClass":"bpmfont bpmgongzuoliuxitongpeizhi",
"tagVar":{ }
}
],
"iniFold":false,
"dynDestory":true
},
"events":{
//獲取數據
"onGetContent":{
"actions":[
{
"args":[
"{page.ReloadChild.setQueryData()}",
null,
null,
"{args[1].tagVar}",
""
],
"desc":"設置擴展參數",
"method":"setQueryData",
"redirection":"other:callback:call",
"target":"ReloadChild",
"type":"control"
}
]
},//數據項選擇
"onItemSelected":{
"actions":[
{
"args":[
"{args[1].id}"
],
"conditions":[
{
"symbol":"non-empty",
"right":"",
"conditionId":"_nonempty_{args[1].className}",
"left":"{args[1].className}"
}
],
"desc":"刪除存在頁",
"method":"removeItems",
"target":"BuildTreeTab",
"type":"control"
}
]
}
}
}（6）動作編排框架
動作設計概覽 在OneCode白皮書中參數了OneCode工作原理，其中有一個章節就是允許用戶將邏輯片段以及動作函數序列化為特定的JSON字符串。動作（邏輯）概覽則是針對邏輯片段可視化的入口工具。打開任意頁面便可以直觀的將該頁面的代碼片段以直觀的方式展現出來。并且可以直接插入，編輯事件，修改動作。同時也可以在調試期動態的中斷、跳出終止等功能。
動作概覽入口
動作概覽功能 六，OneCode前后端一體化建模擴展（1）運行原理用戶通過，拖拽完成頁面建模序列化為按標準協議序列化JSON文件,后端OneCode服務支撐系統解析JSON文件并混合DSM建模信息以及后端服務邏輯后，通過混合編譯，通過代碼工廠指定出碼模板，完成前后端一體的編譯文件。
運行原理
原型原理
(2) 一體化建模流程
（3）Java原生語言擴展OneCode 本身基于JAVA語言體系，是在Java Spring 注解基礎上的一套擴展子集，混合編譯引擎器通過擴展注解構建完整的Domain模型，通過讀取標準Spring 注解完成普通Web數據交付及調度過程，通過Domin域模型動態渲染JS文件輸出為JSON交付給前端引擎構建頁面。
（4）領域建模工具
OneCode語法編輯
屬性配置
表單交互AJAX設定
后端聚合配置
（5）配置運行實例：
配置項示例：
OneCode配置
按鈕綁定服務OneCode代碼
七，工程發布總覽（1）發布服務組成
工程發布，需要三方面的資源做支撐，分別是用戶通過設計完成的頁面及功能交互，通過特定的特定的出碼模板完成相應的技術棧前端轉換形成的前端頁面目錄。而后端應用則根據則是用戶通過基礎數據建模形成的領域模型文件，這些領域模型文件通常會按照，資源庫、支撐域工程域等模型方式來獨立打包方便后期版本管理及個體更新。另外第三塊則是方便工程啟動運行以及訪問控制，對外暴露監控等相關的工程配置信息。 （2）發布配置本地
發布遠程
工程配置
（3）前端庫
（4）后端服務
（5）通用域打包
該文章在 2024/2/28 10:08:13 編輯過 |
關鍵字查詢
相關文章
正在查詢... 
|
400 186 1886
