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数据，并提示登录成功。
如图，一个各个层没有耦合的模块就完成了。