前言：
低代碼平臺最大的一個特點就是可視化，將代碼采用可視化的方式展示管理。一時間擁有圖形化界面的各類系統都掛上了低代碼的標簽。但更多的代碼從業者在使用中卻發現，在眾多的低代碼平臺中都是“別人家的代碼”其可視化主要是別人家的代碼圖形化做的好。而自身如果想實現圖形化還是得從圖形化入手再重新學習別人家的代碼。 這其實對于當前的低代碼提出了一個新的挑戰，圖形化究竟是灌輸給大家一種適合圖形化展示的代碼組合和撰寫方法，讓大家去學習以便于做出更好的支持圖形化展示的代碼軟件，還是從根本上構建一種圖形化的工具體系成為事實代碼標準，徹底分離設計與代碼從業者。Onion 圖生代碼系列博文，將從這個問題入手，從圖形表現以及代碼設計方面去探討，圖形（可視化）與代碼涉及的一些基礎關系，并視圖從“圖生代碼”這個角度去考慮怎么去規范“圖形可視化設計”以及如何邏輯成為嚴謹的設計代碼。
本文作為系列博文的開始，首先從現狀做一個簡要的分析。
一，常用視圖
（1）表單
在可視化系統最初的應用中，都是以表單來作為載體的。其早期的形式也形成了一些智能表單、電子表單等應用直到現在很多主流的低代碼系統仍然會保留這一基礎的表單載體作為，工作流程的載體。
常用視圖中，主要包括：
（1）輸入組件，組件配置屬性這期間會將展示、數據類型、校驗進行分類整理
添加圖片注釋，不超過 140 字（可選）
添加圖片注釋，不超過 140 字（可選）
（2）布局組件，表單的布局通常成為表格。以行列方式根據數據順序、重要性可操作性進行行列合并操作。
添加圖片注釋，不超過 140 字（可選）
（2）列表
列表是由“行”以及“格”來組成的，行是一個數據集合，格式是具體的一個數據表現。表單是一維數據的展現行則是集合數據的展現。而操作和展現上也更多的表現出了集合處理的特征。
添加圖片注釋，不超過 140 字（可選）
列表視圖其集成度也更高，在領域以及實體應用上包含了更多的屬性。
添加圖片注釋，不超過 140 字（可選）
集合屬性操作示意
添加圖片注釋，不超過 140 字（可選）
集合功能應用
添加圖片注釋，不超過 140 字（可選）
（3）圖表
在常用視圖中，圖表是一種特殊的存在。其往往會應用在獨立系統的后期，作為數據更高維度的載體。使得數據的所有者能夠對于系統、數據、過程、結果有更直觀的概念。這些使用中，對于關鍵性數據的篩選、組織以及在關鍵點上能夠增加關聯事件，實現數據的“溯源”。其重在數據展現形式以及數據內在關聯性設計。
添加圖片注釋，不超過 140 字（可選）
添加圖片注釋，不超過 140 字（可選）
添加圖片注釋，不超過 140 字（可選）
（4）繪圖
在常用視圖中，有一個另類繪圖類應用，自定義“繪圖”這類應用在常用系統中應用比較少，但隨著移動設備以及物聯網設備帶來的大量的觸控類操作將自定義繪圖提高了一個應用的登記。在后續的章節中也會但多作為一個部分來講解。
添加圖片注釋，不超過 140 字（可選）
添加圖片注釋，不超過 140 字（可選）
添加圖片注釋，不超過 140 字（可選）
二，動作邏輯
動作邏輯是讓頁面數據動起來連起來的關鍵部分，web應用中建立了很好的事件冒泡和處理機制。但其發展速度遠遠超過了應用的推進。在很大程度上與應用產生了割裂。這就需要再應用層有更好的貼近理論層設計來彌補裂痕。
（1）事件
添加圖片注釋，不超過 140 字（可選）
添加圖片注釋，不超過 140 字（可選）
添加圖片注釋，不超過 140 字（可選）
（2）動作
添加圖片注釋，不超過 140 字（可選）
添加圖片注釋，不超過 140 字（可選）
添加圖片注釋，不超過 140 字（可選）
添加圖片注釋，不超過 140 字（可選）
三，代碼設計
（1）元數據擴展定義：
在低代碼平臺中元數據的使用也是非常廣泛，從前端可視化的組件的prop 屬性定義，后端OR Maping數據庫表映射,以及支撐系統模塊關聯關系，權限分配支撐等等都是基礎性的元數據。而對于低代碼平臺及工具而言，其最主要的一個功能也是配置管理低代碼組件的元數據信息。在業務組件發生需求變更時盡量通過修改元數配置的方式來改變組件的業務特性。
在模型（Module）類中中添加 @DBTable實現數據庫表映射，或者在實體類中增加Aggregation聚合注解實現實體向聚合類的轉換。
在控制器中（Controller）中添加Web路由注解@RequestMapping來完成Controller向web 容器的注入實現。
視圖（View）中增加可被可視化設計器識別的視圖注解代碼。
添加圖片注釋，不超過 140 字（可選）
（1）視圖注解
元數據轉換匹配關系
添加圖片注釋，不超過 140 字（可選）
元數據編輯器
添加圖片注釋，不超過 140 字（可選）
添加圖片注釋，不超過 140 字（可選）
添加圖片注釋，不超過 140 字（可選）
添加圖片注釋，不超過 140 字（可選）
（2）web訪問數據路由
添加圖片注釋，不超過 140 字（可選）
@Controller @RequestMapping("/admin/org/deparment/") @MethodChinaName(cname = "部門管理", imageClass = "bpmfont bpmgongzuoliuzuhuzicaidan") @Aggregation(sourceClass = IDeparmentService.class, rootClass = Org.class) public interface IDeparmentAPI { @RequestMapping(method = RequestMethod.POST, value = "Persons") @GridViewAnnotation() @ModuleAnnotation(caption = "人員列表") @APIEventAnnotation(bindMenu = {CustomMenuItem.treeNodeEditor}) @ResponseBody public <K extends IPersonGrid> ListResultModel<List<K>> getPersons(String orgId); }
添加圖片注釋，不超過 140 字（可選）
添加圖片注釋，不超過 140 字（可選）
（3）動作事件注解
添加圖片注釋，不超過 140 字（可選）
添加圖片注釋，不超過 140 字（可選）
添加圖片注釋，不超過 140 字（可選）
添加圖片注釋，不超過 140 字（可選）
(4)常用注解
| 注解名稱 | 用途 | 實例 |
| @RequestMapping | 直接使用的SpringMvc注解用于將當前方法標識為,web可訪問 | @RequestMapping(value = {"AggAPITree"}, method = {RequestMethod.GET, RequestMethod.POST}) |
| @ModuleAnnotation | 視圖標識，在方法上標識改注解后會被模型編譯器識別為視圖模型將其內部對象渲染為視圖。 | @ModuleAnnotation(dynLoad = true, imageClass = "spafont spa-icon-moveforward", caption = "模塊授權") |
| @ResponseBody | 直接使用的SpringMvc注解，標識為JSON數據返回 | @ResponseBody |
| @DialogAnnotation | 添加該標識時，當前端路由到當前方法時，以獨立窗口的方式返回 | @DialogAnnotation(width = "850", height = "750") |
| @Aggregation | 領域標識，在類注解中添加該標識，會被DSM引擎自動索引并根據注解中指定類型加載到相關的實體列表中 | @Aggregation(type = AggregationType.customDomain,sourceClass = PersonService.class,rootClass = Person.class) |
| @*Domain | 通用域標識 | @OrgDomain@BpmDomain@VfsDomain@MsgDomain@NavDomain |
| @*TreeView | 樹形注解包括了，導航樹、彈出字典樹，折疊分組樹等注解集合 | @TreeViewAnnotation@NavTreeViewAnnotation@NavFoldingTreeViewAnnotation@PopTreeViewAnnotation |
| @GridViewAnnotation | 數據列表注解 | |
| @GalleryView*Annotation | 詳情圖形混合注解 | @GalleryViewAnnotation@NavGalleryViewAnnotation |
| @*TabsViewAnnotation | Tab切換頁 | @TabsViewAnnotation@NavTabsViewAnnotation@NavFoldingTabsViewAnnotation |
| @PopMenuViewAnnotation | 菜單導航 | @PopMenuViewAnnotation |
| @NavGroupViewAnnotation | 分組表單 | @NavGroupViewAnnotation |
| @FormViewAnnotation | 表單注解 | @FormViewAnnotation |
| @*ButtonViewsViewAnnotation | 按鈕欄視圖 | @ButtonViewsAnnotation@NavButtonViewsAnnotation |
常用視圖注解
| 注解名稱 | 視圖類型 | 示例 |
| @FormAnnotation | 表單視圖 | @FormAnnotation(customMenu = {CustomFormMenu.Save, CustomFormMenu.Close}, customService = ColService.class) |
| @GridAnnotation | 列表視圖 | @GridAnnotation(rowHeight = "4em", customMenu = {GridMenu.Reload, GridMenu.Add, GridMenu.Delete}, customService = {LocalFormulaService.class}, event = CustomGridEvent.editor) |
| @TreeAnnotation | 樹形視圖 | @TreeAnnotation(heplBar = true, caption = "選擇人員", selMode =SelModeType.singlecheckbox) |
| @NavTreeAnnotation | 樹形導航視圖 | @NavTreeAnnotation(bottombarMenu = {CustomFormMenu.Save, CustomFormMenu.Close}, customService = AggWebSiteSelectService.class) |
| @GalleryAnnotation | 圖文列表視圖 | @GalleryAnnotation(customMenu = {GridMenu.Reload, GridMenu.Add, GridMenu.Delete}) |
| @TabsAnnotation | Tab頁視圖 | @TabsAnnotation(singleOpen = true) |
| @ButtonViewsAnnotation | 按鈕組導航 | @ButtonViewsAnnotation(barLocation = BarLocationType.left, barVAlign = VAlignType.top, autoReload = false) |
| @NavGroupAnnotation | 分組容器視圖 | @NavGroupAnnotation(bottombarMenu = {CustomFormMenu.Save, CustomFormMenu.Close}) |
| @NavGalleryAnnotation | 卡片導航 | @NavGalleryAnnotation |
| @NavFoldingAnnotation | 折疊頁導航 | @NavFoldingAnnotation(bottombarMenu = CustomFormMenu.Close) |
| @NavMenuBarAnnotation | 菜單頁導航 | @NavMenuBarAnnotation |
常用注解列表實例
| 注解名稱 | 用途 | 示例 |
| GridAnnotation | 列表視圖配置 | @GridAnnotation(rowHeight = "4em", customService = {LocalFormulaService.class}, event = CustomGridEvent.editor) |
| PageBar | 分頁欄 | @PageBar(pageCount = 100) |
| ToolBarMenu | 工具欄 | @ToolBarMenu |
| MenuBarMenu | 菜單欄 | @MenuBarMenu |
| BottomBarMenu | 底部工具欄 | @BottomBarMenu |
常用注解列表行子域示例
| 注解名稱 | 用途 | 實例 |
| @GridRowCmd | 表格行按鈕 | @GridRowCmd(tagCmdsAlign = TagCmdsAlign.left, menuClass = {DBColAction.class}) |
| @RowHead | 行頭配置 | @RowHead(selMode = SelModeType.none, gridHandlerCaption = "刪除|排序", rowHandlerWidth = "10em", rowNumbered = false) |
