AppBox拖拽設計增刪改查用戶界面
??之前為了應對客制化大屏設計的需求,在框架內實現了拖拽方式(動態化)生成用戶界面的功能,跟大部分實現方式差不多,設計時生成配置json,然后在運行時解析json生成用戶界面。這次完善了一下該功能,支持類似于零代碼平臺生成增刪改查界面,下面簡單介紹一下操作步驟。
一、準備數據結構
??參考之前的文章準備好所需的實體模型。
二、詳情視圖
??進入開發后臺后,主菜單New->View,參考下圖選擇Dynamic類型的視圖。
可以參考之前的可視化大屏設計視頻了解一下如何布局組件。

1. 創建數據狀態
??點擊右上部State旁的添加按鈕,添加類型為DataRow,名稱為customer的狀態,點擊右側修改按紐參考下圖選擇對應的Customer實體,并選擇相應的列。

2. 詳情表單布局
??參考下圖大綱結構設計表單。

3. 綁定表單至狀態
??在設計界面依次選擇表單輸入項,然后點擊右側屬性面板內Text屬性面側的綁定按鈕,在彈出的對話框內選擇綁定的數據狀態對應的列(綁定成功后綁定按紐為變為綠色)。

4. 綁定保存按紐事件
??在設計界面選擇保存按紐,然后點擊右側屬性面板內的OnTap事件,在彈出對話框內選擇SaveData事件操作,并勾選customer數據狀態。
三、列表視圖
1. 創建數據狀態
??先添加類型為String,名稱為qName的狀態,用于綁定查詢過濾條件,然后再添加DataTable類型名為customers的狀態,參考下圖分別設置查詢返回的列及過濾條件。


2. 列表視圖布局
??參考下圖大綱結構設計列表視圖。

3. 綁定按鈕事件
??分別綁定新建、編輯、刪除、搜索按紐的事件操作,其中新建與刪除按鈕都是綁定至ShowDialog操作,不同的是向目標視圖CustomerEdit傳入的視圖參數分別是CreateRow及FetchRow類型,FetchRow視圖參數請參考下圖設置主鍵字段來源于當前視圖的哪個狀態。


四、測試運行
??保存并發布上述模型后,就可以在應用端測試運行了(如下圖所示)。

五、待實現功能
- 目前查詢與保存暫未做權限驗證,后續將在實體模型設計時提供是否允許動態化查詢與保存的相關權限設計;
- 需要完善如實體關聯選擇等動態化組件;
- 事件支持腳本或圖形化腳本;
六、本篇小結
??作者個人能力實在有限Bug在所難免,如有問題請郵件聯系或Github Issue,歡迎感興趣的小伙伴們加入共同完善,當然更歡迎贊助項目或給作者介紹工作(目前找工作中)。

浙公網安備 33010602011771號