基于模型驅動的低代碼平台，将資料模型與展現模型做了有機的整合大幅降低了開發者的工作量。使程式員可以從繁重的業務程式設計和UI展現等技術細節上脫離出來。但在具體的項目當中，客戶對于展現界面都會有自身獨特的展示展現風格。特别是類似于門戶首頁、功能菜單架構等方面基本上都是定制應用方案。針對于類似的需求在低代碼領域中也是一個應用難點，但也不乏優秀的低代碼引擎在“全棧”支援上提供了很不錯的解決方案。今天我們就選取了一個典型的例子，如何利用OneCode低代碼引擎建構自定義應用。
一，需求描述
在官網示範的首頁中，我們有兩處的，動态菜單應用。
如圖所示标号“1，2，3”是一個典型的滑鼠懸停菜單。
根據主題風格的不同，我們将在後續章節中陸續講解如何在無代碼的情況下，修改比對菜單跟樣式，懸停菜單樣式以及利用OneCode SVG畫布繪制自定義過渡“形狀”動畫。
添加圖檔注釋，不超過 140 字（可選）
标号“4”是一獨立的懸停搜尋框設計，也是在UI/UE中非常常見的互動設計。後續章節中我們也将做一個無代碼展示說明。
*用例示範位址：
歡迎使用 OneCode 工具1.0
二，菜單樣式元件準備
（1）快速進入頁面設計器
添加圖檔注釋，不超過 140 字（可選）
（2）跟菜單
添加圖檔注釋，不超過 140 字（可選）
添加圖檔注釋，不超過 140 字（可選）
跟菜單，由一個（1）占位符，（2）一個使用者名标簽 和一個（3）下拉标簽組成
添加圖檔注釋，不超過 140 字（可選）
添加圖檔注釋，不超過 140 字（可選）
（3）彈出菜單
添加圖檔注釋，不超過 140 字（可選）
List元件獨立樣式配置：
添加圖檔注釋，不超過 140 字（可選）
添加圖檔注釋，不超過 140 字（可選）
添加圖檔注釋，不超過 140 字（可選）
添加圖檔注釋，不超過 140 字（可選）
添加圖檔注釋，不超過 140 字（可選）
添加圖檔注釋，不超過 140 字（可選）
（4）SVG矢量圖過渡動畫
在目前用例中，我們利用SVGPage 繪制了一個，透明的下拉三角矢量圖。
添加圖檔注釋，不超過 140 字（可選）
三，動作關聯配置
OneCode SVGPager是一個強大的繪圖控件，在SVGPager中，使用者可以自行利用畫筆自行繪制矢量圖，可以利用内制的矢量圖庫組合應用，下圖是兩個典型的應用。
添加圖檔注釋，不超過 140 字（可選）
添加圖檔注釋，不超過 140 字（可選）
動作編輯器
（1）跟菜單懸停
選中跟菜單組合，在DOCK懸停屬性上選擇，SVG矢量動畫。
添加圖檔注釋，不超過 140 字（可選）
（2）菜單點選動作
添加圖檔注釋，不超過 140 字（可選）
四，延伸閱讀
在上述示例中，主要使用到了OneCode兩個關鍵的通用元件
（1）OneCode 通用樣式管理器。
DOM樹透視樣式盒
DOM樹透視
添加圖檔注釋，不超過 140 字（可選）
添加圖檔注釋，不超過 140 字（可選）
（2）OneCode動作管理器
動作可視化，邏輯片段的歸類管理
在項目實施過程中業務需求是多變的而這些需求的變更與實作絕大多數情況下是通過在已有的設計中添加特定的動作監聽，添加邏輯片段來實作。需求的變化是不容易預估的，這就造成了後期添加的的這些邏輯片段非常随機分散。如何管理并前并合理的歸類展現這些邏輯将會是低代碼邏輯編排實作的一個重點。
動作概覽
動作邏輯片段的複用管理
在實際項目衆多的動作與邏輯分析中會發現，頁面大都是以表單、清單，詳情為主，而其中90%的業務邏輯基本上都圍繞在表單(校驗，取值，指派，送出)，對話框（顯隐、提示），發送請求，消息提示，資料處理，路由跳轉，條件判斷等。這些邏輯複用度很高，對于程式員而言大量重複性的工作會極大的抵銷其工作的積極性。這就需要将這些邏輯功能前置，通過動作的可視化以及智能導航将這一部分工作交由産品經理或者需求人員前置使用。
複雜邏輯編排支援
實際項目中，業務複雜度是非常高的，每個頁面會包含很多的的獨立元件，每個元件都有其獨立的動作邏輯，而實際的使用場景中往往是衆多頁面相關關聯甚至嵌套，這期間元件與元件間，元件與頁面間，頁面與頁面間會形成非常複雜的關聯關系。這些關聯關系的管理需要一套行之有效的管理方法和理論支援。