Unity3D框架插件uFrame實用參考手冊（二）

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數據，並提示登錄成功。
如圖，一個各個層沒有耦合的模塊就完成了。