开发平台学习手册ui层设计理解学习.docx

UIFactory II技术框架介绍UI层设计目录1.功能节点加载机制11.1NC界面模拟11.1.1窗口21.1.2顶层面板（工作台）31.1.3工作台NC logo与快捷搜索面板51.1.4工作台-所有打开的功能节点页签面板71.1.5功能节点面板81.1.6功能窗口部件101.1.7FuncletWidget（重要理解部分）111.2加载机制121.2.1示例121.2.2需要做的工作131.2.3查看代码入口141.2.4菜单项响应件141.2.5创建界面元素组件容器FuncletWidgetContainer151.2.6构造ifunlet面板的元素和菜单栏的按钮181.2.7构造状态栏271.3按钮定义、配置271.3.1增加自定义按钮271.3.2按钮可用性的影响因素311.3.3常用按钮介绍331.3.4按钮布局方式：331.4UI事件框架371.4.1常用事件371.4.2Xml配置方式371.4.3练习：增加一个自己的事件382.树型单据设计392.1.1建立树面板，修改布局组装表392.1.2为树面板，增加应用模型（model）403.UI设计归纳总结423.1背景423.2设计思路423.2.1分离的展显逻辑423.2.2自助能动的Action元素433.2.3Composite模式来实现组装433.3常用元素介绍433.3.1模型层元素433.3.2视图层元素443.3.3常用的接口介绍453.3.4NC的action事件461. 功能节点加载机制1.1 NC界面模拟 以下的演示示例 类的命名，我均采用NC产品已有的命名方式。通过该部分的学习 重点理解NC界面之间的层级管理。 开发过程中理解 每级模板自主能动的概念（父模板负责组装，具体功能由各自来实现） 重点理解FuncletWidget界面元素组成，前面的部分了解就可以 1.1.1 窗口1.1.1.1 实现样式1.1.1.2 代码规划 nc.desktop.ui.NcWindow extends JFrame1.1.1.3 代码示例1.1.1.1 显示效果1.1.2 顶层面板（工作台）1.1.2.1 实现样式1.1.1.1 代码规划： 容器面板（nc.desktop.ui.Workbench），使用borderlayout布局 North面板（nc.desktop.ui.WorkbenchTopPanel extends JPanel） Center面板（nc.desktop.ui.WorkbenchSpace extends JPanel） 考虑单例1.1.1.2 代码示例将其增长到父面板中增长其子面板1.1.1.3 显示效果由于子面板中，还是空的，所以看到效果如下。但是我们代码中知道，已经增长了两级面板1.1.3 工作台NC logo与快捷搜索面板1.1.3.1 实现样式1.1.3.2 代码示例其没有子面板，需要实现如下功能需要增长底图以及NC logo图标代码如下：备注：通过代码可以知道，NC界面样式主题位于NCHOME/resource/themeroot/ 途径下， 使用绿色主题，实现样式如下1.1.3.3 显示效果1.1.4 工作台-所有打开的功能节点页签面板1.1.4.1 实现样式1.1.4.2 代码规划 父面板（nc.desktop.ui.WorkbenchSpace） 容器面板（nc.ui.pub.beans.ExtTabbedPane extends javax.swing.JTabbedPane），1.1.4.3 代码示例增长面板到其父面板中1.1.5 功能节点面板1.1.5.1 实现样式1.1.5.2 代码规划 每个tab页签面板 为一个功能节点（nc.funcnode.ui.FuncNodePanel） 制定接口（nc.funcnode.ui.IFuncletWindow），每个功能节点都需要实现该接口中的方法：显示功能节点窗口（public void showWindow()）和关闭功能节点窗口（public boolean closeWindow()）1.1.5.3 代码示例 登陆成功，默认增长功能导航和消息中心两个功能功能节点 tab1.1.5.4 显示效果1.1.6 功能窗口部件每个功能节点，界面展示的元素都不相同，NC采用如下结构展示 每个FuncNodePanel，使用一个界面元素组件容器（FuncletWidgetContainer extends JPanel）来显示其拥有的元素 。 每个(FuncletWidgetContainer extends JPanel)，其使用卡片布局，默认包含一个 FuncletWidget1.1.7 FuncletWidget（重要理解部分） 每个 FuncletWidget包含三部分,容纳菜单栏、界面信息、状态栏代码结构如下FuncletWidgetNorth放按钮面板FuncletWidgetCenter放信息面板信息面板SOUTH 放状态栏目信息面板CENTER 放界面信息（funclet）1.2 xml加载机制1.2.1 示例以下演示使用的的配置文献由uap_studio自动生成的主子表结构配置文献如下图1.2.2 需要做的工作接上面的介绍， 在导航菜单双击或者右键打开菜单节点的时候，我们可以预测其响应要做的事件 创建FuncletWidgetContainer需要为其创建一个子面板FuncletWidget。为了创建一个FuncletWidget,需要：a. 创建子面板-菜单栏（放置按钮条）b. 创建子面板界面信息，放置界面元素（按钮条，界面元素）a) 创建子面板-ifunclet实现类b) 创建子面板任务栏 运用创建的FuncletWidgetContainer来构造FuncNodePanel 将FuncNodePanel作为一个父面板ExtTabbedPane的一个页署名来展示1.2.3 查看代码入口 在你对NC产品还不熟悉的时候，可以采用如下的方式1. 删除xml配置文献中的所有信息，2. 双击功能节点3. 这个时候 功能节点应当是打不开的，查看控制台的异常信息。通过异常我们可以看到功能节点打开代码执行顺序 1.2.4 菜单项响应件 nc.funcnode.ui.FuncletWindowEngine.openNode(OpenParam openParam) 方法由导航菜单项事件响应机制调用：重要是启动线程，执行功能节点打开方法openNodeImple（）。在openNodeImple（）中执行如下的工作1.2.5 创建界面元素组件容器FuncletWidgetContainer1.2.5.1 环节1即下图的第1部分1.2.5.1.1 需要做的工作创建环节与简朴主子面板的创建环节同样1. 一方面要得到一个FuncletWidgetContainer面板2. 然后得到一个 FuncletWidget子面板3. 建立主子面板的关系：将子面板添加到父面板中1.2.5.1.2 产品代码实现1. 根据功能节点注册信息frvo,调用FuncletWidgetContainerFactory，创建一个FuncletWidgetContainer2. 每次创建一个FuncletWidgetContainer，根据功能节点注册信息frvo,创建一个FuncletWidget，并将其添加到FuncletWidgetContainer中1.2.5.2 环节2即下图的第2部分1.2.5.2.1 需要做的工作创建环节与简朴主子面板的创建环节同样1. 一方面要创建一个FuncletWidget面板（前面已经创建）2. 然后创建子面板： 菜单栏和界面信息3. 建立主子面板的关系：将子面板添加到父面板中1.2.5.2.2 产品代码实现 1.2.6 构造ifunlet面板的元素和菜单栏的按钮1.2.6.1 实例化 看代码可以了解，根据功能节点注册处指定的功能类名称，来实例化成一个Ifunclet类型的对象使用uap_studio自动生成的功 能 类 名 基 类 使 用nc.ui.pubapp.uif2app.ToftPanelAdaptorEx 类， 便于二次开发扩展，其为IFunclet的实现类的子类还要给节点注册一个参数， 参数名为： BeanConfigFilePath， 值为配置单据界面的 xml 文献的途径，在打开节点的时候会读取并解析该途径下的 xml 文献配置的布局信息代码实现以下初始化的，就是读取xml文献信息。加载顺序理解Composite模式,通Spring IOC 实现组件的任意组装，达成如下的模式：产品=零件+总装表，零件=小零件+装配表1.2.6.2 初始化1加载xml文献关注点：参数名称必须为BeanConfigFilePath1.2.6.3 初始化2加载登陆环境信息产品代码： 通过代码可以看到，是加载了xml中一个 id=”context”的 bean对象，并使用这个对象记录：当前功能节点信息、当前登陆信息等。使用场景： 是否必须配置:是这个Bean无论何种类型的单据都需要配置XML配置示例：1.2.6.4 初始化3加载xxxPreprocessor产品代码： 通过代码可以看到，加载了xml中所有以 id已 ”preprocessor”结尾的bean 使用场景： 是否必须配置：否 该属性通常使用对标准产品做二次开发的扩展开发时候使用。XML配置示例： 详见配置文献扩展开发标准bean配置.xml1.2.6.5 初始化3加载remoteCallCombinatorCaller产品代码：通过代码可以看到，加载了xml中所有以 id= ”remoteCallCombinatorCaller”的beanbean中元素都实现了接口IRemoteCallCombinatorUser调用其 prepare()方法业务意义：是否必须配置： 否。使用场景：通常使用在加载过程中远程调用比较多的单据中，如主子表单据。所有的远程调用统一预加载。常见的远程调用：加载单据模板、加载查询模板、加载自定义项规定：放置在其中的需要预加载的远程调用都必须实现接口IRemoteCallCombinatorUserXML配置示例：1.2.6.6 初始化4装配总表1.2.6.6.1 产品代码： 通过代码可以看到，加载一个id=“container” 的bean ,1.2.6.6.2 业务意义： 是否必须配置：是该bean是视图层元素的装配总表，指定了界面布局方式和每块布局展示的界面视图，以及按钮根据需要指定界面布局方式，每一块的布局都可作为零件随时替换。1.2.6.6.3 XML配置规定：1. init-method=initUI，必须指定，且不能更改2. 给 container bean 添加 tangramLayoutRoot 属性，拟定具体布局类型。值必须接口TangramLayoutNode的一个实现类。3. 布局类型有四种：水平布局、垂直布局、tab 页签布局、面板赋值界面通常是前三种布局互换使用，划定界面分割方式，每个最小的每个框内放一个面板布局4. HSNode即（Horizontal SplitPane Node）水平布局必须指定左右的布局方式5. VSNode即（Vertical SplitPane Node）垂直平布局必须指定其上下的布局方式6. TBNode即（TabbedPane Node）垂直平布局必须指定每个页签的布局方式可选属性showMode，可在（TabbedPane,CardLayout）选择一个，默认是TabbedPaneTabbedPane，下级的布局按照页签的方式展示。CardLayout，下级的布局按照卡片的方式展示7. CNode即（Component Node）面板必须指定其子容器面板，即component属性1.2.6.6.4 Xml配置示例具体见配置文献列表型配置范文.xml配置文献管理型配置范文.xml配置文献树管理配置范文.xml配置文献树卡型配置范文.xml1.2.7构造状态栏1.3 按钮定义、配置 1.3.1 增长自定义按钮1.3.1.1 非业务按钮的定义方法不需要向后台传递数据，如单个单据的EXECL导入，EXECL导出等按钮可以继承nc.ui.uif2.NCAction。例子：nc.ui.uif2.actions.AddAction为了可以通过Spring实例化，需要显示的指定一下默认方法1.3.1.1.1 属性：interceptor所属类：NCAction 意义：拦截器。详见下节拦截器定义实例化：通常由Spring中注入exceptionHandler所属类：NCAction意义：按钮异常解决类以上两个属性不规定配置，可以参见NCAction的actionPerformed（E） 方法来查看Model所属类：这个属性要自己新增，提供getset方法 （命名习惯上都用这个，但是不规定必须是这个）V6中通常使用nc.ui.uif2.model.AbstractAppModel类型意义：把此action设立为单据model的观测者。必须的实例化：由Spring 注入其他的根据自己的业务需要，定义自己的属性BtnName所属类：NCAction 自定义按钮需要指定按钮名称Code所属类：NCAction 自定义按钮需要指定按钮编码，注意不要跟产品已有的编码反复假如不指定code，报错如下1.3.1.1.2 Overwrite方法doAction() 执行具体的相应动作，通常会调用model的行为isActionEnable() (设立当前 action 是否可用， 平台会在模型发出事件告知,调用它设立按钮的可用状态)1.3.1.2 标准业务按钮的定义假如需要将变化的数据同步到后台，则按钮需要继承nc.ui.pubapp.uif2app.actions.pflow.ScriptPFlowAction（该类是NCAction的一个间接子类）产品对常用的保存、删除、提交、审批、弃审等增长了标准的实现类。1.3.1.2.1 属性： 1.3.1.3 菜单按钮的定义通常在xml中配置一个nc.funcnode.ui.action.GroupAction或者nc.funcnode.ui.action.MenuAction的bean就可以了。GroupAction：系统自动复制其第一个子按钮的名称和相应事件、控制状态到菜单按钮。 即l 在xml中对菜单按钮指定名称是不能生效的l 点击该菜单按钮可以指定其 复制的子按钮的业务操作l 这个菜单按钮也是可以有可用状态控制MenuAction：只作为一个显示的菜单按钮，一直可用，没有响应事件1.3.2 按钮可用性的影响因素在NC产品中通常有以下两个因素影响按钮的可用性：界面状态、业务状态1.3.2.1 界面状态即当前UI界面所处的状态V6设立如下几种状态Init:初始态，功能节点新打开状态.Add新增态,EDIT 编辑态NOT_EDIT 非编辑通常按钮的操作，需要通过modle1.3.2.2 业务状态在单据上我们通常叫单据状态。有些流程相关的按钮不同的单据状态，按钮的可用性应当是不同的。如提交按钮，只针对自由态的单据。审批和收回按钮只针对提交态的单据，弃审按钮只针对审批通过的单据。如下图提交态按钮示例V63预先指定了一些状态，假如你要使用产品标准的按钮，则单据状态的设立，必须按照其规划来设立。即自由态的单据，单据状态值必须是-11.3.3 常用按钮介绍V63已经实现的标准按钮存放在如下的结构中Actions:标准操作按钮Actions.Batch:批解决按钮（通常用在单表中，需要批量解决的地方）Actions.billlist:列表界面操作按钮Actions. Interceptor：已经实现的常用按钮拦截器Actions. Pagination：分页解决相关Actions. Pflow：需要平台流解决（通常是审批流相关:保存、提交、审批、弃审等）的按钮1.3.4 按钮布局方式1.3.4.1 节点级次布局页面位置：页签顶部 可见方式：一直可见 展现形式：菜单应用场景：1. 假如tangramLayoutRoot相应的布局管理，只有一个页签（VSNode、HSNode、CNode布局）则可考虑这种方式2. 假如tangramLayoutRoot相应的布局管理，即便有多个页签（TBNode），但是显示的按钮不需要根据页签的改变发生变化，也可以考虑这种方式实现方式：配置在TangramContainer中。可以配置浏览态按钮和编辑态按钮l 元素actions：配置浏览状态下任何页签都可见按钮l 元素editActons:配置编辑状态下任何页签都可见的按钮。假如没有编辑态，可不配置1.3.4.2 页签级布局显示位置：页面顶部 可见方式：随页签的激活状态决定其可见性 展现形式：菜单 应用场景：假如顶层容器tangramLayoutRoot采用TBNode布局，且需要根据页签的改变显示不同的按钮，则采 用这种方式实现方式：分为绝对布局和相对布局1.3.4.2.1 绝对布局1) 将按钮和视图层元素 运用StandAloneToftPanelActionContainer来包装l 注意参数要传入相应的视图层元素，(如listViewbillFormEditor)l 且视图元素控件必须实现 ITabbedPaneAwareComponent接 口，当页签切换时告知外层容器实现Action的切换。l 即指定的视图层显示的时候，才显示其中配置的按钮2) 运用 toftpanelActionContributors对包装成的对象进行组织。id=” toftpanelActionContributors” 的bean，不需要再做配置，程序会自动加载1.3.4.2.2 相对布局 这种布局方式不常见，作为了解1) 将按钮和视图层元素 运用PlugableTangramContainer来包装参数constraints传入相应的视图层元素参数“actions” 传送相应的按钮2) 运用 toftpanelActionContributors对包装成的对象进行组织。3) Container也要修改成相对布局后面的布局要指定参照targetComponent,并制定相对位置1.3.4.3 视图级布局显示位置：视图所在tab的右上侧 可见方式：一直可见展现形式：工具栏应用场景：假如上层布局采用了TBNode，则根据需要考虑增长视图按钮实现方式：1. 视图元素控件必须实现 IComponentWithActions接 口。2. 视图层所在的上级布局必须采用了TBNode，由于视图级的元素是显示在页签的右上侧，只有TBNode才有这个位置3. 当前卡片视图nc.ui.pubapp.uif2app.view.ShowUpableBillForm已经实现了该接口1.4 UI事件框架1.4.1 常用事件NC 产品针对自己的界面常用的事件做了封装，常见的有卡片列表各种编辑事件、组织改变事件、 新增事件、 排序事件、页签切换事件、行改变事件、合计事件等。已经实现的事件放在重要是：Event:公共的事件或者接口Event.card:卡片界面常用事件Event.list:列表界面常用事件1.4.2 Xml配置方式2. 一方面配置nc.ui.pubapp.uif2app.event.EventHandlerGroup属性evnent： 取值为具体的 event 类；属性 picky： 取值可实现 IPickyEventHandler 接口来过滤是否派发事件。假如不需要，则赋值例如 ChildrenPicky 类则表达按默认的指定 VO 类方式来过滤，即只有bodyVoClasses 中配置的 VO 类才会派发到相应的事件解决中； 属性 handler： 取值必须实现 IAppEventHandler 接口，接口参数相应具体的event 类。如下图 3. 运用AppEventHandlerMediator来组织事件和模型model.注意将其bean id 以Mediator结尾，这样系统才干自动加载1.4.3练习：增长一个自己的事件2. 树型单据设计一方面要先生成标准的管理型单据，然后将其改导致数管理型单据2.1.1 建立树面板，修改布局组装表2.1.1.1 增长树面板 树面板可以使用ponents.TreePanel或者其子类2.1.1.2 更改界面总装表（container）指定其布局位置。我们需要替换本来的快捷查询区域，将本来的替换掉2.1.2 为树面板，增长应用模型（model）1. 模型实例化：树面板配合使用的model是通常使用nc.ui.uif2.model.HierachicalDataAppModel或者其子类2. 模型属性初始化：模型服务类（service）、树构造器策略（treeCreateStrategy）、登陆环境（context）3. 模型服务类（service），模型用来向后台同步数据。可以实现nc.ui.uif2.model.IAppModelService或者扩展自己的方法4. 树构造器策略（treeCreateStrategy）：用来将查询出来数据组织成树结构。可使用nc.vo.bd.meta.BDObjectTreeCreateStrategy。构造器策略需要指定根节点名称和VO转换工厂5. 定义VO转换工厂：通常属性结构是查询一个单VO。可以使用nc.vo.bd.meta.BDObjectAdpaterFactory来转换6. 模型管理器：通常用来调用模型的service服务，为模型初始化提供数据每个树的数据初始方式不同，产品没条提供标准模型管理器。需要实现nc.ui.uif2.model.IAppModelDataManager接口，实现其initModel()方法通常树节点的左侧的树数据，在model加载完毕就要查询出来。可以在此完毕7. 创建一个名字如：xxxMediator类。作为左侧树的模型和右侧的管理模型的协调者l Mediator类在功能节点打开的时候就能自动加载。l 在这个类中为两个模型注册事件监听,抓取到两个模型的变化事件l 例：我们可以抓取到右侧模型 模型初始化事件，同时完毕我们的左侧树模型初始化。也可以抓取左侧树模型的选择节点变化事件，来同步右侧模型的数据的变化3. UI设计归纳总结(复制自陈伟文档)3.1 背景NC5.X系列，采用UIFactory INC6.X系列，采用UIFactory IITemplet Method模式，UI、EventHandler、Controler分工，典型的节点可以快速适配，快速开发Composite模式,通Spring IOC 实现组件的任意组装，达成如下的模式：产品=零件+总装表，零件=小零件+装配表非典型的界面不能很好的适配存储大量代码复制很好的解决界面多样性的问题并且实现松耦合的代码结构+高重用的组件3.2 设计思绪3.2.1 分离的展显逻辑a. 将一个我们在屏幕上看到的GUI元素也按照MVC的思想来解决，提成 展现对象（VIEW）和模型对象（MODEL）b. 展现对象，即是封装后的容器类，用来直观的展现数据c. 模型对象，用来控制展现对象。一个领域对象通常通常持有持久化信息（VO、services）来培训，将展现层数据和后台持久化服务连通d. V依赖M，M不依赖V，一个M可以服务多个Ve. V之间 互不依赖，V只和M打交道，对V的操作会触发M的行为，V对M的实现进行响应f. M之间假如要进行通信，通常设计xxx Mediator（协调者），用来协调M之间信息传递3.2.2 自助能动的Action元素Action 应当是细力度的，即功能单一，便于扩展Action 能自身决定可用性，符合面向对象的特性，通过ActionContributors进行组织，以方便Spring IOC 相应用元素的拼装3.2.3 Composite模式来实现组装统一的UI入口类ToftPanelAdapter，自动装配;Spring依赖注入，XML界面配置组装视图层、模型层、和按钮; TangramLayout灵活布局;3.3 常用元素介绍3.3.1 模型层元素appModel均是nc.ui.uif2.model.IAppModel的直接或间接实现类，不同的业务场景有不同的实现，本次只介绍常用的模型模型名称应用场景特点HierachicalDataAppModel存储有层次关系的数据模型l 运用内部维护的 DefaultTreeModel 来存储树型数据l 可以获得当前选中的节点和选中的数据l 可以发出MODEL_INITIALIZED、SELECTION_CHANGED 以及 UISTATE_CHANGED事件BillManageModel存储平面数据的模型 l 应用最多的一个模型l 支持单行和多行选择l 可以发出 MODEL_INITIALIZED、 SELECTION_CHANGED、UISTATE_CHANGED、DATA_INSERTED、DATA_DELETED、SELECTED_DATE_CHANGED 等事件 lBatchBillTableModel支持进行批量增、删、改等操作的平面型数据模型l 只有编辑和非编辑两种状态l 需要配套的服务类IBatchAppModelServicel 与视图层元素BatchBillTable配合使用l 可以发出 MODEL_INITIALIZED、 SELECTION_CHANGED、 UISTATE_CHANGED、DATA_UPDATED、DATA_DELETED、DATA_INSERTED 等事件3.3.2 视图层元素常见的NC视图均直接或间接集成自javax.swing.JPanel（JPanel参见JDK_API）常见的如下平面视图V6产品通常使用nc.ui.pubapp.uif2app.view下的类;特殊视图（树、参照等）通常使用ponents下的类模型名称应用场景特点TreePanel树型控件的展现面板l 与 HierachicalDataAppModel 模型配合使用，响应此模型的事件BillForm表单界面的展现控件l 运用单据模板的卡片视图（BillCardPanel）进行展现，l 支持单表头的卡片也支持标准的卡片视图（聚合 VO 的上卡片下列表形式）l 暂时只与 BillManageModel 配合，实现对模型数据的展现以及事件的相应l 在V6中常使用其子类 ShowUpableBillFormBillCardPanelForm表单界面的展现控件l 与上者的不同是，它只支持单表头的卡片单据，即只有上部的表单，没有下部列表l 在V6中常使用其子类ShowUpableBillCardPanelFormBillListView数据的列表展现l 运用单据模板的列表视图（BillListPanel）进行展现，即支持单表头也支持 标准的单据l 暂时只与 BillManageModel 配合，实现对模型数据的展现以及事件的相应l 在V6中常使用其子类ShowUpableBillListViewBatchBillTable支持批量操作的列表编辑器，支持数据的展现和编辑l 运用单据模板的卡片视图（BillCardPanel）进行展现，运用单据模板的单表体形式实现，因此需要使用单表体的单据模板l 与BatchBillTableModel配合，实现对 模型数据的展现及事件的响应l 在V6中常使用其子类ShowUpableBatchBillTablel 与 BatchEditAction、BatchAddLineAction、BatchDelLineAction 等动作配合使用3.3.3 常用的接口介绍重要讲解下 模型层、视图层实现的接口接口名称作用实现IAutoShowUpComponent将实现该接口的控件转换到可视状态控件实现该接口，通常运用 AutoShowUpEventSource 作为委托代理 类，将所有接口行为委托给该类实例来实现。ITabbedPaneAwareComponent控制实现该接口控件是否可以隐藏；告知外层容器该控件的可见性的切换。控件实现该接口，通常运用 TabbedPaneAwareCompnonetDelegate 作为委托代理类，将该接口行为委托给该代理类实例完毕。IComponentWithActions使实现该接口的控件具有提供和展现 Action 的能力，一般用于提供视图级别的 Action，容器会将该控件以 Tab 签的形式展现，并将其 Action 展现在 Tab 签的右侧。需要达成该效果的控件实现该接口即可，通过配置文献注射需要展现的 Action3.3.4 NC的action事件Nc继承javax.swing.AbstractAction增长了自己的抽象类nc.funcnode.ui.action.AbstractNCAction，所有的action均集成自该类。NC中常见的aciton如下图所示，根据业务不同，均是对javax.swing.Action不同实现形式建议查看JDK_API或者相关视频先了解Action事件的特性，再来看NC具体的实现NC封装的后的action假如有业务操作，通常会持有一个model元素将该action事件注册到按钮上后，该action响应按钮事件就可以操作model元素，并将响应间接传递到视图层展现出来