5.創建屬性和命令
本小節主要內容包括：
- 在Element節點上創建屬性數據
- 在Element節點上創建命令數據
5.1.在Element節點上創建屬性數據
在這里，我們首先為Login節點中的屬性（Properties）部分添加一個新的屬性，該屬性為String型，名為UserName。
首先選中Login節點，點擊Properties右邊的“+”號按鈕，此時我們可以發現Properties區域已經增加了一個新的屬性。
如果需要修改屬性的名字，直接點擊當前的屬性名即可進入編輯狀態。若要修改屬性的類型，則點擊當前屬性，會彈出一個屬性的選擇菜單。
這樣，我們就在Login節點上增加了一條名為UserName的數據了。
5.2.在Element節點上創建命令數據
為ViewModel添加了一條屬性數據之后，我們接下來再為ViewModel添加第一條命令，用來實現點擊登錄按鈕之后登錄功能的實現。
同樣，點擊Commands旁邊的“+”按鈕，就可以在Commands區域添加一個新的命令。
和屬性數據類似，我們也可以修改命令的返回類型和命令的名字。
6.綁定View和ViewModel
本小節主要內容包括：
- 創建View和ViewModel的連接
- 在View中綁定ViewModel上定義的屬性或命令，進行監聽
6.1.連接View和ViewModel
接下來，我們就來創建ViewModel的輸出和View的輸入之間的連接。如圖，選中一個節點，我們都可以看到節點左側的各個部分都分別有一個三角形標識，那些代表的是輸入，其中需要指出的是，在節點最上面的輸入是表示繼承自某某節點的，而右側則是各個輸出口。
左鍵點擊Login節點的輸出口，拖拽到LoginView的Element輸入點，View和ViewModel之間的鏈接便被建立了。
這個鏈接被創建完畢之后，即意味着View可以將ViewModel中的數據用可見的方式在游戲世界中表現出來。
不過這里要提醒大家需要注意的是一個ViewModel可以連接很多不同的View，因為相同的數據有可能會有不同的使用場景，這也從一個側面反映出了這種架構方式對具體的使用場景不關心，數據和表現之間是解耦的，相同的數據可能有不同的表現形式，例如玩家身上的某件物品的數據既可以用來表現為背包的內容，也可以表現為裝備的屬性等等。這樣做的結果就是使我們的數據具備了移植和復用的可能。
6.2.監聽屬性變化或命令觸發
View和ViewModel之間的鏈接建立完畢之后，我們就可以在View中綁定一些我們感興趣的數據、訂閱一些我們關心的事件了。
首先選中LoginView節點，之后可以看到Bindings區域，點擊Bindings旁邊的“+”按鈕會有一個選擇框彈出
，我們可以在選擇框中設置我們關心的操作，列表中所有備選的數據和命令都來自上一步中鏈接的ViewModel。
我們選擇Login To Button的選項，將Login命令和某個按鈕進行綁定，一旦該按鈕被按下，會觸發Login命令。
還選擇UserName To Input Field，將UserName這條屬性顯示在一個輸入框中。
完成之后，View的Bindings的內容如下圖：
當然，現在還沒有這樣的按鈕和輸入框，我們會在后面制作它們。
現在在uFrame的可視化設計器中的設計工作已經接近尾聲了，下一步我們就要將這個可視化工程保存並編譯生成對應的模板代碼。
7.保存及編譯設計圖工程
本小節主要內容包括：
- 保存並編譯設計圖工程
- 創建工程中的uFrame Kernel
7.1.保存並編譯設計圖工程
在可視化設計器中將工程的邏輯關系設計完畢之后，我們就可以生成uFrame的模板代碼了。
我們點擊可視化設計器右上角的Save & Compile按鈕即可進入編譯過程。
編譯完畢之后，在工程目錄下生成了模板代碼，模板代碼包括兩部分：
- designer文件，這些文件的內容是不可以修改的，它們是按照設計器中設計的關系生成的代碼。它在代碼層面指明了各個模塊和各個對象的關系，但是不包括具體的邏輯。
- 可編輯代碼文件，這些文件是我們可以修改的，uFrame只為我們生成這些文件，它們最初都是空的，需要我們自己去實現其內容。
7.2.創建工程中的uFrame Kernel
生成uFrame的模板代碼還不是結束，我們還需要有一個和U3D交互的入口來初始化整個uFrame框架並保持一個和U3D交互的管道。所以我們接下來就要通過可視化設計器來創建uFrame Kernal來實現框架初始化的一系列工作，例如服務初始化、場景初始化、場景加載器初始化等等。
創建uFrame Kernal的按鈕在Save & Compile按鈕旁邊，稱為“Scaffold/Update Kernel”。我們只需要點擊這個按鈕就可以創建/更新當前工程的Kernel。
生成的Kernel會以U3D的Prefab的形式存在於工程的文件夾中。
其中包括以下這3個部分：
- Services
- SystemLoaders
- SceneLoaders
上面都綁定了和U3D交互的腳本。
下面我們就來導入真正的U3D場景。
8.綁定場景
本小節內容包括：
- 使用uFrame的SceneType節點創建新場景
- 將場景和View進行綁定
8.1.使用SceneType節點創建新場景
uFrame為了便於管理和框架相關的場景，因此推出了一個被稱為SceneType的節點類型，我們在可視化設計器中返回最上層的環境，右鍵添加一個SceneType節點。
選中LoginScene，點擊右鍵可以在打開的菜單中選擇Create Scene。默認會創建一個和SceneType節點同名的一個新的場景。
此時打開新生成的場景，在Hierarchy中也生成了對應的_LoginSceneRoot，在這上面掛載了uFrame的Scene腳本，作為uFrame和U3D互動的橋梁。
接下來，我們將View和該場景進行綁定。
8.2.將場景和View進行綁定
在_LoginSceneRoot下創建一個新的空GameObject，並在該GameObject上添加View腳本——我們的LoginView腳本。
此時，我們可以在inspector窗口中看到在設計圖中設定的兩個綁定，Login對應的Button控件，UserName對應的Input控件，之后我們只需在U3D中創建一個Button和Input（要使用uGUI），然后把兩者分別拖入選框中即可。
9.添加業務邏輯代碼
本小節內容包括：
- 為View添加代碼
- 為ViewModel和Controller添加代碼
9.1.為View添加代碼
View的代碼存在於View文件夾下的XXXView.cs文件中，當然我們也可以在可視化設計器中打開該文件。選中View節點，右鍵點擊Open->Designer Files->FoxMain->Views->XXXView.cs即可打開代碼文件，添加自己需要的邏輯即可。
9.2.為ViewModel和Controller添加代碼
為ViewModel和Controller添加代碼的過程也十分類似，首先選中Element節點，點擊右鍵 Open->Designer Files->FoxMain此時會分成ViewModel和Controller來選擇。
打開LoginController.cs文件之后，就可以添加Controller中的邏輯了。
public class LoginController : LoginControllerBase {
public override void InitializeLogin(LoginViewModel viewModel) {
base.InitializeLogin(viewModel);
// This is called when a LoginViewModel is created
}
public override void Login(LoginViewModel viewModel) {
base.Login(viewModel);
UnityEngine.Debug.Log("登陸用戶名：" + viewModel.UserName);
UnityEngine.Debug.Log("登陸成功！！！！！");
}
}
在Login方法中，我們會打印出ViewModel數據層的UserName數據，並提示登陸成功。
如圖，一個各個層沒有耦合的模塊就完成了。
