　　揭秘了，U-Agent，遠傳的低代碼開發(fā)平臺。

　　1、大致的印象

　　U-Agent低代碼平臺是一款基于Web的快速業(yè)務(wù)實現(xiàn)平臺。使用U-Agent低代碼平臺配合U-Agent強大的平臺基礎(chǔ)能力，可以快速實現(xiàn)客戶的業(yè)務(wù)頁面。在U-Agent低代碼平臺的后端，有完整的組織結(jié)構(gòu)、權(quán)限、工作流、數(shù)據(jù)管理、ES集成等功能支撐。使得U-Agent低代碼平臺能夠發(fā)揮強大的界面編輯能力，快速實現(xiàn)和調(diào)整業(yè)務(wù)，縮短項目周期。

　　直接上頁面！

　　1）登錄

　　2）菜單進入

　　系統(tǒng)運行環(huán)境和低代碼開發(fā)環(huán)境一體化。

　　3）頁面編輯

　　4）頁面導(dǎo)航區(qū)

　　頁面導(dǎo)航區(qū)分為4部分：標題欄、頂部工具欄、頁面導(dǎo)航樹、底部工具欄。

　　5）頁面編輯區(qū)

　　頁面編輯區(qū)主要分為兩大部分：頁面標簽和頁面編輯器。頁面標簽用于切換正在編輯的頁面。頁面編輯器用于編輯頁面。

　　2、頁面編輯

　　頁面編輯器分為兩個區(qū)域：工具欄、操作區(qū)。

　　1）工具欄

　　工具欄分為左右兩個區(qū)域。左側(cè)排列著多個功能按鈕包括保存、預(yù)覽等。右側(cè)用于不同編輯視圖的切換，包括：界面、腳本和數(shù)據(jù)服務(wù)。功能按鈕：

保存。用于保存頁面。保存的同時，會在歷史版本庫中生成臨時的歷史版本。
標簽并保存。保存頁面的同時，設(shè)置版本標簽。一旦設(shè)置標簽并保存了頁面，在歷史版本庫中的臨時歷史版本將被清理。只保留設(shè)置了標簽的歷史版本。
撤銷和重做。撤銷按鈕和重做按鈕，用于對界面編輯操作進行撤銷和重做。
預(yù)覽。點擊預(yù)覽按鈕，會在新的瀏覽器窗口中預(yù)覽當前頁面。預(yù)覽前必須保存。
接口配置。如果需要把當前頁面作為組件提供給其他頁面，并且需要對外暴露方法和事件，可以在接口配置中進行設(shè)置。
引入JS。當頁面中需要用到第三方的js文件時，可以在這里設(shè)置應(yīng)用js的URL。頁面加載時會將JS同時加載。
一鍵綁定。當頁面中存在未綁定數(shù)據(jù)項的表單控件時，使用一鍵綁定功能，將自動為未綁定的控件生成數(shù)據(jù)項，并做綁定數(shù)據(jù)項的操作。
重新加載。用于刷新當前編輯的頁面。所有未保存的修改將作廢。
歷史版本。瀏覽歷史版本庫中的版本，可以打開指定的歷史版本。

　　2）界面視圖

　　用于編輯頁面的界面。分為三個區(qū)域：編輯區(qū)、左側(cè)邊欄和右側(cè)邊欄。

　　3、控件和布局

　　1）創(chuàng)建

　　用鼠標從控件箱拖拽控件到頁面，可以將控件添加到頁面上。頁面中已經(jīng)存在的控件，也可以拖拽調(diào)整位置。

　　拖拽的結(jié)果分為三種：放到某個容器內(nèi)、放到某個控件之前、放到某個控件之后。

　　A、拖放到容器內(nèi)

　　控件拖放到容器內(nèi)時，容器會高亮顯示。如下圖。

　　B、拖放到某個控件前

　　拖放到某個控件之前時，會在該控件前面的位置顯示藍色的位置標識。如下圖：

　　C、拖放到某個控件后

　　拖放到某個控件之后時，會在該控件后面的位置顯示藍色的位置標識。如下圖：

　　2）編輯控件內(nèi)元素

　　對于某些控件，控件內(nèi)的一些元素是可以編輯的。比如文本框的標題、面板的標題等。根據(jù)控件內(nèi)元素的不同，可以有兩種編輯操作：編輯內(nèi)容、編輯樣式。

　　所有控件內(nèi)元素，都可以單獨編輯樣式。但是只有某些有文本內(nèi)容的控件內(nèi)元素才可以編輯內(nèi)容。

　　如果要編輯控件內(nèi)元素，首先要選中控件（參考控件選中模式）。在控件選中狀態(tài)下，在控件上移動鼠標。如果鼠標當前位置不可編輯，會顯示““鼠標指針。如果可編輯，會顯示”“鼠標指針。如下圖所示。

　　當鼠標移動到可編輯的元素上時，點擊鼠標，會選中這個元素。選中的元素會顯示虛線邊框。元素選中后，可以做內(nèi)容編輯和樣式編輯操作。如下圖。

內(nèi)容編輯：

　　元素被選中后，再次點擊元素，會出現(xiàn)內(nèi)容輸入框，可以編輯內(nèi)容。編輯完成后按回車鍵，或者點擊其他區(qū)域，可以使內(nèi)容生效。

樣式編輯：

　　元素被選中后，在樣式面板中可以編輯元素的樣式。此時樣式面板上方會顯示正在編輯的元素的名稱。

　　3)調(diào)整控件尺寸

　　在低代碼平臺中可以通過兩種方式調(diào)整控件尺寸：可視化方式、屬性方式。不同的控件支持的方式不同，調(diào)整的維度也不同。

　　A、可視化方式

　　低代碼平臺提供了可視化調(diào)整尺寸的方式。在控件選中并且顯示”位置標識線“狀態(tài)下（參考控件選中模式），可以通過拖動“位置標識線”來調(diào)整尺寸。紅色“位置標識線”標識禁止調(diào)整尺寸，藍色“位置標識線”標識允許調(diào)整尺寸。

　　當拖動位置標識線時，如果拖動中的位置標識線顯示綠色，表示尺寸合法。如果拖動中的位置標識線顯示紅色，表示尺寸非法。

　　不同的控件對可視化尺寸調(diào)整方式支持程度不同。例如支持柵格數(shù)屬性的控件，可以使用可視化方式調(diào)整柵格。

　　支持寬高屬性的，一般可以用可視化方式調(diào)整寬高。

　　但是，并不是所有控件都開放可視化尺寸調(diào)整。某些控件，根據(jù)條件開放可視化尺寸調(diào)整。例如超級面板控件，父面板的模式不同，子面板支持的調(diào)整維度也不同。當父面板處于縱向維度（頂部欄、上-中-下、底部欄）模式下時，可以調(diào)整頂部欄和底部欄的高度。當父面板處于橫向維度（左側(cè)欄、左-中-右、右側(cè)欄）模式下時，可以調(diào)整左側(cè)欄和右側(cè)欄的寬度。

　　B、屬性方式

　　可以通過設(shè)置控件提供的屬性來改變控件的尺寸。不同控件提供不同的屬性。

　　以超級面板控件為例。提供了高度、寬度屬性，可以以像素或百分百為單位，設(shè)置寬高。而當一個超級面板放入流布局模式的面板中時，這個面板也支持柵格數(shù)屬性，可以設(shè)置面板支持的柵格數(shù)。