5.創(chuàng)建屬性和命令

本小節(jié)主要內(nèi)容包括：

• 在Element節(jié)點(diǎn)上創(chuàng)建屬性數(shù)據(jù)
• 在Element節(jié)點(diǎn)上創(chuàng)建命令數(shù)據(jù)

5.1.在Element節(jié)點(diǎn)上創(chuàng)建屬性數(shù)據(jù)

在這里，我們首先為L(zhǎng)ogin節(jié)點(diǎn)中的屬性（Properties）部分添加一個(gè)新的屬性，該屬性為String型，名為UserName。

首先選中Login節(jié)點(diǎn)，點(diǎn)擊Properties右邊的“+”號(hào)按鈕，此時(shí)我們可以發(fā)現(xiàn)Properties區(qū)域已經(jīng)增加了一個(gè)新的屬性。

如果需要修改屬性的名字，直接點(diǎn)擊當(dāng)前的屬性名即可進(jìn)入編輯狀態(tài)。若要修改屬性的類型，則點(diǎn)擊當(dāng)前屬性，會(huì)彈出一個(gè)屬性的選擇菜單。

這樣，我們就在Login節(jié)點(diǎn)上增加了一條名為UserName的數(shù)據(jù)了。

5.2.在Element節(jié)點(diǎn)上創(chuàng)建命令數(shù)據(jù)

為ViewModel添加了一條屬性數(shù)據(jù)之后，我們接下來(lái)再為ViewModel添加第一條命令，用來(lái)實(shí)現(xiàn)點(diǎn)擊登錄按鈕之后登錄功能的實(shí)現(xiàn)。

同樣，點(diǎn)擊Commands旁邊的“+”按鈕，就可以在Commands區(qū)域添加一個(gè)新的命令。

和屬性數(shù)據(jù)類似，我們也可以修改命令的返回類型和命令的名字。

6.綁定View和ViewModel

本小節(jié)主要內(nèi)容包括：

• 創(chuàng)建View和ViewModel的連接
• 在View中綁定ViewModel上定義的屬性或命令，進(jìn)行監(jiān)聽

6.1.連接View和ViewModel

接下來(lái)，我們就來(lái)創(chuàng)建ViewModel的輸出和View的輸入之間的連接。如圖，選中一個(gè)節(jié)點(diǎn)，我們都可以看到節(jié)點(diǎn)左側(cè)的各個(gè)部分都分別有一個(gè)三角形標(biāo)識(shí)，那些代表的是輸入，其中需要指出的是，在節(jié)點(diǎn)最上面的輸入是表示繼承自某某節(jié)點(diǎn)的，而右側(cè)則是各個(gè)輸出口。

左鍵點(diǎn)擊Login節(jié)點(diǎn)的輸出口，拖拽到LoginView的Element輸入點(diǎn)，View和ViewModel之間的鏈接便被建立了。

這個(gè)鏈接被創(chuàng)建完畢之后，即意味著View可以將ViewModel中的數(shù)據(jù)用可見的方式在游戲世界中表現(xiàn)出來(lái)。

不過(guò)這里要提醒大家需要注意的是一個(gè)ViewModel可以連接很多不同的View，因?yàn)橄嗤臄?shù)據(jù)有可能會(huì)有不同的使用場(chǎng)景，這也從一個(gè)側(cè)面反映出了這種架構(gòu)方式對(duì)具體的使用場(chǎng)景不關(guān)心，數(shù)據(jù)和表現(xiàn)之間是解耦的，相同的數(shù)據(jù)可能有不同的表現(xiàn)形式，例如玩家身上的某件物品的數(shù)據(jù)既可以用來(lái)表現(xiàn)為背包的內(nèi)容，也可以表現(xiàn)為裝備的屬性等等。這樣做的結(jié)果就是使我們的數(shù)據(jù)具備了移植和復(fù)用的可能。

6.2.監(jiān)聽屬性變化或命令觸發(fā)

View和ViewModel之間的鏈接建立完畢之后，我們就可以在View中綁定一些我們感興趣的數(shù)據(jù)、訂閱一些我們關(guān)心的事件了。

首先選中LoginView節(jié)點(diǎn)，之后可以看到Bindings區(qū)域，點(diǎn)擊Bindings旁邊的“+”按鈕會(huì)有一個(gè)選擇框彈出

，我們可以在選擇框中設(shè)置我們關(guān)心的操作，列表中所有備選的數(shù)據(jù)和命令都來(lái)自上一步中鏈接的ViewModel。

我們選擇Login To Button的選項(xiàng)，將Login命令和某個(gè)按鈕進(jìn)行綁定，一旦該按鈕被按下，會(huì)觸發(fā)Login命令。

還選擇UserName To Input Field，將UserName這條屬性顯示在一個(gè)輸入框中。

完成之后，View的Bindings的內(nèi)容如下圖：

當(dāng)然，現(xiàn)在還沒有這樣的按鈕和輸入框，我們會(huì)在后面制作它們。

現(xiàn)在在uFrame的可視化設(shè)計(jì)器中的設(shè)計(jì)工作已經(jīng)接近尾聲了，下一步我們就要將這個(gè)可視化工程保存并編譯生成對(duì)應(yīng)的模板代碼。

7.保存及編譯設(shè)計(jì)圖工程

本小節(jié)主要內(nèi)容包括：

• 保存并編譯設(shè)計(jì)圖工程
• 創(chuàng)建工程中的uFrame Kernel

7.1.保存并編譯設(shè)計(jì)圖工程

在可視化設(shè)計(jì)器中將工程的邏輯關(guān)系設(shè)計(jì)完畢之后，我們就可以生成uFrame的模板代碼了。

我們點(diǎn)擊可視化設(shè)計(jì)器右上角的Save & Compile按鈕即可進(jìn)入編譯過(guò)程。

編譯完畢之后，在工程目錄下生成了模板代碼，模板代碼包括兩部分： designer文件，這些文件的內(nèi)容是不可以修改的，它們是按照設(shè)計(jì)器中設(shè)計(jì)的關(guān)系生成的代碼。它在代碼層面指明了各個(gè)模塊和各個(gè)對(duì)象的關(guān)系，但是不包括具體的邏輯。 可編輯代碼文件，這些文件是我們可以修改的，uFrame只為我們生成這些文件，它們最初都是空的，需要我們自己去實(shí)現(xiàn)其內(nèi)容。

7.2.創(chuàng)建工程中的uFrame Kernel

生成uFrame的模板代碼還不是結(jié)束，我們還需要有一個(gè)和U3D交互的入口來(lái)初始化整個(gè)uFrame框架并保持一個(gè)和U3D交互的管道。所以我們接下來(lái)就要通過(guò)可視化設(shè)計(jì)器來(lái)創(chuàng)建uFrame Kernal來(lái)實(shí)現(xiàn)框架初始化的一系列工作，例如服務(wù)初始化、場(chǎng)景初始化、場(chǎng)景加載器初始化等等。

創(chuàng)建uFrame Kernal的按鈕在Save & Compile按鈕旁邊，稱為“Scaffold/Update Kernel”。我們只需要點(diǎn)擊這個(gè)按鈕就可以創(chuàng)建/更新當(dāng)前工程的Kernel。

生成的Kernel會(huì)以U3D的Prefab的形式存在于工程的文件夾中。

其中包括以下這3個(gè)部分：

• Services
• SystemLoaders
• SceneLoaders

上面都綁定了和U3D交互的腳本。 下面我們就來(lái)導(dǎo)入真正的U3D場(chǎng)景。

8.綁定場(chǎng)景

本小節(jié)內(nèi)容包括：

• 使用uFrame的SceneType節(jié)點(diǎn)創(chuàng)建新場(chǎng)景
• 將場(chǎng)景和View進(jìn)行綁定

8.1.使用SceneType節(jié)點(diǎn)創(chuàng)建新場(chǎng)景

uFrame為了便于管理和框架相關(guān)的場(chǎng)景，因此推出了一個(gè)被稱為SceneType的節(jié)點(diǎn)類型，我們?cè)诳梢暬O(shè)計(jì)器中返回最上層的環(huán)境，右鍵添加一個(gè)SceneType節(jié)點(diǎn)。

選中LoginScene，點(diǎn)擊右鍵可以在打開的菜單中選擇Create Scene。默認(rèn)會(huì)創(chuàng)建一個(gè)和SceneType節(jié)點(diǎn)同名的一個(gè)新的場(chǎng)景。

此時(shí)打開新生成的場(chǎng)景，在Hierarchy中也生成了對(duì)應(yīng)的_LoginSceneRoot，在這上面掛載了uFrame的Scene腳本，作為uFrame和U3D互動(dòng)的橋梁。

接下來(lái)，我們將View和該場(chǎng)景進(jìn)行綁定。

8.2.將場(chǎng)景和View進(jìn)行綁定

在_LoginSceneRoot下創(chuàng)建一個(gè)新的空GameObject，并在該GameObject上添加View腳本——我們的LoginView腳本。

此時(shí)，我們可以在inspector窗口中看到在設(shè)計(jì)圖中設(shè)定的兩個(gè)綁定，Login對(duì)應(yīng)的Button控件，UserName對(duì)應(yīng)的Input控件，之后我們只需在U3D中創(chuàng)建一個(gè)Button和Input（要使用uGUI），然后把兩者分別拖入選框中即可。

9.添加業(yè)務(wù)邏輯代碼

本小節(jié)內(nèi)容包括：

• 為View添加代碼
• 為ViewModel和Controller添加代碼

9.1.為View添加代碼

View的代碼存在于View文件夾下的XXXView.cs文件中，當(dāng)然我們也可以在可視化設(shè)計(jì)器中打開該文件。選中View節(jié)點(diǎn)，右鍵點(diǎn)擊Open->Designer Files->FoxMain->Views->XXXView.cs即可打開代碼文件，添加自己需要的邏輯即可。

9.2.為ViewModel和Controller添加代碼

為ViewModel和Controller添加代碼的過(guò)程也十分類似，首先選中Element節(jié)點(diǎn)，點(diǎn)擊右鍵 Open->Designer Files->FoxMain此時(shí)會(huì)分成ViewModel和Controller來(lái)選擇。

打開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方法中，我們會(huì)打印出ViewModel數(shù)據(jù)層的UserName數(shù)據(jù)，并提示登陸成功。

如圖，一個(gè)各個(gè)層沒有耦合的模塊就完成了。