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

UIFactoryII技术框架介绍UI层设计目录1. 功能节点加载机制 11.1 NC界面模拟 11.1.1 窗口 21.1.2 顶层面板（工作台） 31.1.3 工作台—NClogo与快捷搜索面板 51.1.4 工作台-所有打开的功能节点页签面板 71.1.5 功能节点面板 81.1.6 功能窗口部件 101.1.7 FuncletWidget（重要理解部分） 111.2 加载机制 121.2.1 示例 121.2.2 需要做的工作 131.2.3 查看代码入口 141.2.4 菜单项响应件 141.2.5 创建界面元素组件容器FuncletWidgetContainer 151.2.6 构造ifunlet面板的元素和菜单栏的按钮 181.2.7构造状态栏 271.3 按钮定义、配置 271.3.1 增加自定义按钮 271.3.2 按钮可用性的影响因素 311.3.3 常用按钮介绍 331.3.4 按钮布局方式： 331.4 UI事件框架 371.4.1 常用事件 371.4.2 Xml配置方式 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.3 Composite模式来实现组装 433.3 常用元素介绍 433.3.1 模型层元素 433.3.2 视图层元素 443.3.3 常用的接口介绍 453.3.4 NC的action事件 46功能节点加载机制NC界面模拟以下的演示示例类的命名，我均采用NC产品已有的命名方式。通过该部分的学习重点理解NC界面之间的层级管理。开发过程中理解每级模板自主能动的概念（父模板负责组装，具体功能由各自来实现）重点理解FuncletWidget界面元素组成，前面的部分了解就可以窗口实现样式代码规划nc.desktop.ui.NcWindowextendsJFrame代码示例显示效果顶层面板（工作台）实现样式代码规划：容器面板（nc.desktop.ui.Workbench），使用borderlayout布局North面板（nc.desktop.ui.WorkbenchTopPanelextendsJPanel）Center面板（nc.desktop.ui.WorkbenchSpaceextendsJPanel）考虑单例代码示例将其增长到父面板中增长其子面板显示效果由于子面板中，还是空的，所以看到效果如下。但是我们代码中知道，已经增长了两级面板工作台—NClogo与快捷搜索面板实现样式代码示例其没有子面板，需要实现如下功能需要增长底图以及NClogo图标代码如下：备注：通过代码可以知道，NC界面样式主题位于NCHOME/resource/themeroot/途径下，使用绿色主题，实现样式如下显示效果工作台-所有打开的功能节点页签面板实现样式代码规划父面板（nc.desktop.ui.WorkbenchSpace）容器面板（nc.ui.pub.beans.ExtTabbedPaneextendsjavax.swing.JTabbedPane），代码示例增长面板到其父面板中功能节点面板实现样式代码规划每个tab页签面板为一个功能节点（nc.funcnode.ui.FuncNodePanel）制定接口（nc.funcnode.ui.IFuncletWindow），每个功能节点都需要实现该接口中的方法：显示功能节点窗口（publicvoidshowWindow()）和关闭功能节点窗口（publicbooleancloseWindow()）代码示例登陆成功，默认增长功能导航和消息中心两个功能功能节点tab显示效果功能窗口部件每个功能节点，界面展示的元素都不相同，NC采用如下结构展示每个FuncNodePanel，使用一个界面元素组件容器（FuncletWidgetContainerextendsJPanel）来显示其拥有的元素。每个(FuncletWidgetContainerextendsJPanel)，其使用卡片布局，默认包含一个FuncletWidgetFuncletWidget（重要理解部分）每个FuncletWidget包含三部分,容纳菜单栏、界面信息、状态栏代码结构如下FuncletWidget—North放按钮面板FuncletWidget—Center放信息面板信息面板—SOUTH放状态栏目信息面板—CENTER放界面信息（funclet）xml加载机制示例以下演示使用的的配置文献由uap_studio自动生成的主子表结构配置文献如下图需要做的工作接上面的介绍，在导航菜单双击或者右键打开菜单节点的时候，我们可以预测其响应要做的事件创建FuncletWidgetContainer需要为其创建一个子面板FuncletWidget。为了创建一个FuncletWidget,需要：创建子面板-菜单栏（放置按钮条）创建子面板—界面信息，放置界面元素（按钮条，界面元素）创建子面板--ifunclet实现类创建子面板—任务栏运用创建的FuncletWidgetContainer来构造FuncNodePanel将FuncNodePanel作为一个父面板ExtTabbedPane的一个页署名来展示查看代码入口在你对NC产品还不熟悉的时候，可以采用如下的方式删除xml配置文献中的所有信息，双击功能节点这个时候功能节点应当是打不开的，查看控制台的异常信息。通过异常我们可以看到功能节点打开代码执行顺序菜单项响应件nc.funcnode.ui.FuncletWindowEngine.openNode(OpenParamopenParam)方法由导航菜单项事件响应机制调用：重要是启动线程，执行功能节点打开方法openNodeImple（）。在openNodeImple（）中执行如下的工作创建界面元素组件容器FuncletWidgetContainer环节1即下图的第1部分需要做的工作创建环节与简朴主子面板的创建环节同样一方面要得到一个FuncletWidgetContainer面板然后得到一个FuncletWidget子面板建立主子面板的关系：将子面板添加到父面板中产品代码实现根据功能节点注册信息frvo,调用FuncletWidgetContainerFactory，创建一个FuncletWidgetContainer每次创建一个FuncletWidgetContainer，根据功能节点注册信息frvo,创建一个FuncletWidget，并将其添加到FuncletWidgetContainer中环节2即下图的第2部分需要做的工作创建环节与简朴主子面板的创建环节同样一方面要创建一个FuncletWidget面板（前面已经创建）然后创建子面板：菜单栏和界面信息建立主子面板的关系：将子面板添加到父面板中产品代码实现构造ifunlet面板的元素和菜单栏的按钮实例化看代码可以了解，根据功能节点注册处指定的功能类名称，来实例化成一个Ifunclet类型的对象使用uap_studio自动生成的功能类名基类使用nc.ui.pubapp.uif2app.ToftPanelAdaptorEx类，便于二次开发扩展，其为IFunclet的实现类的子类还要给节点注册一个参数，参数名为：BeanConfigFilePath，值为配置单据界面的xml文献的途径，在打开节点的时候会读取并解析该途径下的xml文献配置的布局信息代码实现以下初始化的，就是读取xml文献信息。加载顺序理解Composite模式,通SpringIOC实现组件的任意组装，达成如下的模式：产品=零件+总装表，零件=小零件+装配表初始化—1加载xml文献关注点：参数名称必须为BeanConfigFilePath初始化—2加载登陆环境信息产品代码：通过代码可以看到，是加载了xml中一个id=”context”的bean对象，并使用这个对象记录：当前功能节点信息、当前登陆信息等。使用场景： 是否必须配置:是这个Bean无论何种类型的单据都需要配置XML配置示例：初始化—3加载xxxPreprocessor产品代码： 通过代码可以看到，加载了xml中所有以id已”preprocessor”结尾的bean使用场景：是否必须配置：否该属性通常使用对标准产品做二次开发的扩展开发时候使用。XML配置示例：详见配置文献\扩展开发标准bean配置.xml初始化—3加载remoteCallCombinatorCaller产品代码：通过代码可以看到，加载了xml中所有以id=”remoteCallCombinatorCaller”的beanbean中元素都实现了接口IRemoteCallCombinatorUser调用其prepare()方法业务意义：是否必须配置：否。使用场景：通常使用在加载过程中远程调用比较多的单据中，如主子表单据。所有的远程调用统一预加载。常见的远程调用：加载单据模板、加载查询模板、加载自定义项规定：放置在其中的需要预加载的远程调用都必须实现接口IRemoteCallCombinatorUserXML配置示例：初始化—4装配总表产品代码：通过代码可以看到，加载一个id=“container”的bean,业务意义：是否必须配置：是该bean是视图层元素的装配总表，指定了界面布局方式和每块布局展示的界面视图，以及按钮根据需要指定界面布局方式，每一块的布局都可作为零件随时替换。XML配置规定：init-method="initUI"，必须指定，且不能更改给containerbean添加tangramLayoutRoot属性，拟定具体布局类型。值必须接口TangramLayoutNode的一个实现类。布局类型有四种：水平布局、垂直布局、tab页签布局、面板赋值界面通常是前三种布局互换使用，划定界面分割方式，每个最小的每个框内放一个面板布局HSNode即（HorizontalSplitPaneNode）水平布局必须指定左右的布局方式VSNode即（VerticalSplitPaneNode）垂直平布局必须指定其上下的布局方式TBNode即（TabbedPaneNode）垂直平布局必须指定每个页签的布局方式可选属性showMode，可在（TabbedPane,CardLayout）选择一个，默认是TabbedPaneTabbedPane，下级的布局按照页签的方式展示。CardLayout，下级的布局按照卡片的方式展示CNode即（ComponentNode）面板必须指定其子容器面板，即component属性Xml配置示例具体见配置文献\列表型配置范文.xml配置文献\管理型配置范文.xml配置文献\树管理配置范文.xml配置文献\树卡型配置范文.xml1.2.7构造状态栏按钮定义、配置增长自定义按钮非业务按钮的定义方法不需要向后台传递数据，如单个单据的EXECL导入，EXECL导出等按钮可以继承nc.ui.uif2.NCAction。例子：nc.ui.uif2.actions.AddAction为了可以通过Spring实例化，需要显示的指定一下默认方法属性：interceptor所属类：NCAction意义：拦截器。详见下节拦截器定义实例化：通常由Spring中注入exceptionHandler所属类：NCAction意义：按钮异常解决类以上两个属性不规定配置，可以参见NCAction的actionPerformed（E）方法来查看Model所属类：这个属性要自己新增，提供get\set方法（命名习惯上都用这个，但是不规定必须是这个）V6中通常使用nc.ui.uif2.model.AbstractAppModel类型意义：把此action设立为单据model的观测者。必须的实例化：由Spring注入其他的根据自己的业务需要，定义自己的属性BtnName所属类：NCAction自定义按钮需要指定按钮名称Code所属类：NCAction自定义按钮需要指定按钮编码，注意不要跟产品已有的编码反复假如不指定code，报错如下Overwrite方法doAction()执行具体的相应动作，通常会调用model的行为isActionEnable()(设立当前action是否可用，平台会在模型发出事件告知,调用它设立按钮的可用状态)标准业务按钮的定义假如需要将变化的数据同步到后台，则按钮需要继承nc.ui.pubapp.uif2app.actions.pflow.ScriptPFlowAction（该类是NCAction的一个间接子类）产品对常用的保存、删除、提交、审批、弃审等增长了标准的实现类。属性： 菜单按钮的定义通常在xml中配置一个nc.funcnode.ui.action.GroupAction或者nc.funcnode.ui.action.MenuAction的bean就可以了。GroupAction：系统自动复制其第一个子按钮的名称和相应事件、控制状态到菜单按钮。即在xml中对菜单按钮指定名称是不能生效的点击该菜单按钮可以指定其复制的子按钮的业务操作这个菜单按钮也是可以有可用状态控制MenuAction：只作为一个显示的菜单按钮，一直可用，没有响应事件按钮可用性的影响因素在NC产品中通常有以下两个因素影响按钮的可用性：界面状态、业务状态界面状态即当前UI界面所处的状态V6设立如下几种状态Init:初始态，功能节点新打开状态.Add新增态,EDIT编辑态NOT_EDIT非编辑通常按钮的操作，需要通过modle业务状态在单据上我们通常叫单据状态。有些流程相关的按钮不同的单据状态，按钮的可用性应当是不同的。如提交按钮，只针对自由态的单据。审批和收回按钮只针对提交态的单据，弃审按钮只针对审批通过的单据。如下图提交态按钮示例V63预先指定了一些状态，假如你要使用产品标准的按钮，则单据状态的设立，必须按照其规划来设立。即自由态的单据，单据状态值必须是-1常用按钮介绍V63已经实现的标准按钮存放在如下的结构中Actions:标准操作按钮Actions.Batch:批解决按钮（通常用在单表中，需要批量解决的地方）Actions.billlist:列表界面操作按钮Actions.Interceptor：已经实现的常用按钮拦截器Actions.Pagination：分页解决相关Actions.Pflow：需要平台流解决（通常是审批流相关:保存、提交、审批、弃审等）的按钮按钮布局方式节点级次布局页面位置：页签顶部可见方式：一直可见展现形式：菜单应用场景：假如tangramLayoutRoot相应的布局管理，只有一个页签（VSNode、HSNode、CNode布局）则可考虑这种方式假如tangramLayoutRoot相应的布局管理，即便有多个页签（TBNode），但是显示的按钮不需要根据页签的改变发生变化，也可以考虑这种方式实现方式：配置在TangramContainer中。可以配置浏览态按钮和编辑态按钮元素actions：配置浏览状态下任何页签都可见按钮元素editActons:配置编辑状态下任何页签都可见的按钮。假如没有编辑态，可不配置页签级布局显示位置：页面顶部可见方式：随页签的激活状态决定其可见性展现形式：菜单应用场景：假如顶层容器tangramLayoutRoot采用TBNode布局，且需要根据页签的改变显示不同的按钮，则采用这种方式实现方式：分为绝对布局和相对布局绝对布局将按钮和视图层元素运用StandAloneToftPanelActionContainer来包装注意<constructor-argref="xxx"/>参数要传入相应的视图层元素，(如listView\billFormEditor)且视图元素控件必须实现ITabbedPaneAwareComponent接口，当页签切换时告知外层容器实现Action的切换。即<constructor-argref="xxx"/>指定的视图层显示的时候，才显示其中配置的按钮运用toftpanelActionContributors对包装成的对象进行组织。id=”toftpanelActionContributors”的bean，不需要再做配置，程序会自动加载相对布局这种布局方式不常见，作为了解将按钮和视图层元素运用PlugableTangramContainer来包装参数constraints传入相应的视图层元素参数“actions”传送相应的按钮运用toftpanelActionContributors对包装成的对象进行组织。Container也要修改成相对布局后面的布局要指定参照targetComponent,并制定相对位置视图级布局显示位置：视图所在tab的右上侧可见方式：一直可见展现形式：工具栏应用场景：假如上层布局采用了TBNode，则根据需要考虑增长视图按钮实现方式：视图元素控件必须实现IComponentWithActions接口。视图层所在的上级布局必须采用了TBNode，由于视图级的元素是显示在页签的右上侧，只有TBNode才有这个位置当前卡片视图nc.ui.pubapp.uif2app.view.ShowUpableBillForm已经实现了该接口UI事件框架常用事件NC产品针对自己的界面常用的事件做了封装，常见的有卡片列表各种编辑事件、组织改变事件、新增事件、排序事件、页签切换事件、行改变事件、合计事件等。已经实现的事件放在重要是：Event:公共的事件或者接口Event.card:卡片界面常用事件Event.list:列表界面常用事件Xml配置方式一方面配置nc.ui.pubapp.uif2app.event.EventHandlerGroup属性evnent：取值为具体的event类；属性picky：取值可实现IPickyEventHandler接口来过滤是否派发事件。假如不需要，则赋值例如ChildrenPicky类则表达按默认的指定VO类方式来过滤，即只有bodyVoClasses中配置的VO类才会派发到相应的事件解决中；属性handler：取值必须实现IAppEventHandler接口，接口参数相应具体的event类。如下图运用AppEventHandlerMediator来组织事件和模型model.注意将其beanid以Mediator结尾，这样系统才干自动加载1.4.3练习：增长一个自己的事件树型单据设计一方面要先生成标准的管理型单据，然后将其改导致数管理型单据建立树面板，修改布局组装表增长树面板树面板可以使用ponents.TreePanel或者其子类更改界面总装表（container）指定其布局位置。我们需要替换本来的快捷查询区域，将本来的替换掉为树面板，增长应用模型（model）模型实例化：树面板配合使用的model是通常使用nc.ui.uif2.model.HierachicalDataAppModel或者其子类模型属性初始化：模型服务类（service）、树构造器策略（treeCreateStrategy）、登陆环境（context）模型服务类（service），模型用来向后台同步数据。可以实现nc.ui.uif2.model.IAppModelService或者扩展自己的方法树构造器策略（treeCreateStrategy）：用来将查询出来数据组织成树结构。可使用nc.vo.bd.meta.BDObjectTreeCreateStrategy。构造器策略需要指定根节点名称和VO转换工厂定义VO转换工厂：通常属性结构是查询一个单VO。可以使用nc.vo.bd.meta.BDObjectAdpaterFactory来转换模型管理器：通常用来调用模型的service服务，为模型初始化提供数据每个树的数据初始方式不同，产品没条提供标准模型管理器。需要实现nc.ui.uif2.model.IAppModelDataManager接口，实现其initModel()方法通常树节点的左侧的树数据，在model加载完毕就要查询出来。可以在此完毕创建一个名字如：xxxMediator类。作为左侧树的模型和右侧的管理模型的协调者Mediator类在功能节点打开的时候就能自动加载。在这个类中为两个模型注册事件监听,抓取到两个模型的变化事件例：我们可以抓取到右侧模型模型初始化事件，同时完毕我们的左侧树模型初始化。也可以抓取左侧树模型的选择节点变化事件，来同步右侧模型的数据的变化UI设计归纳总结(复制自陈伟文档)背景NC5.X系列，采用UIFactoryINC6.X系列，采用UIFactoryIITempletMethod模式，UI、EventHandler、Controler分工，典型的节点可以快速适配，快速开发Composite模式,通SpringIOC实现组件的任意组装，达成如下的模式：产品=零件+总装表，零件=小零件+装配表非典型的界面不能很好的适配存储大量代码复制很好的解决界面多样性的问题并且实现松耦合的代码结构+高重用的组件设计思绪分离的展显逻辑将一个我们在屏幕上看到的GUI元素也按照MVC的思想来解决，提成展现对象（VIEW）和模型对象（MODEL）展现对象，即是封装后的容器类，用来直观的展现数据模型对象，用来控制展现对象。一个领域对象通常通常持有持久化信息（VO、services）来培训，将展现层数据和后台持久化服务连通V依赖M，M不依赖V，一个M可以服务多个VV之间互不依赖，V只和M打交道，对V的操作会触发M的行为，V对M的实现进行响应M之间假如要进行通信，通常设计xxxMediator（协调者），用来协调M之间信息传递自助能动的Action元素Action应当是细力度的，即功能单一，便于扩展Action能自身决定可用性，符合面向对象的特性，通过ActionContributors进行组织，以方便SpringIOC相应用元素的拼装Composite模式来实现组装统一的UI入口类ToftPanelAdapter，自动装配;Spring依赖注入，XML界面配置组装视图层、模型层、和按钮;TangramLayout灵活布局;常用元素介绍模型层元素appModel均是nc.ui.uif2.model.IAppModel的直接或间接实现类，不同的业务场景有不同的实现，本次只介绍常用的模型模型名称应用场景特点HierachicalDataAppModel存储有层次关系的数据模型运用内部维护的DefaultTreeModel来存储树型数据可以获得当前选中的节点和选中的数据可以发出MODEL_INITIALIZED、SELECTION_CHANGED以及UISTATE_CHANGED事件BillManageModel存储平面数据的模型应用最多的一个模型支持单行和多行选择可以发出MODEL_INITIALIZED、SELECTION_CHANGED、UISTATE_CHANGED、DATA_INSERTED、DATA_DELETED、SELECTED_DATE_CHANGED等事件BatchBillTableModel支持进行批量增、删、改等操作的平面型数据模型只有编辑和非编辑两种状态需要配套的服务类IBatchAppModelService与视图层元素BatchBillTable配合使用可以发出MODEL_INITIALIZED、SELECTION_CHANGED、UISTATE_CHANGED、DATA_UPDATED、DATA_DELETED、DATA_INSERTED等事件视图层元素常见的NC视图均直接或间接集成自javax.swing.JPanel（JPanel参见JDK_API）常见的如下平面视图V6产品通常使用nc.ui.pubapp.uif2app.view下的类;特殊视图（树、参照等）通常使用ponents下的类模型名称应用场景特点TreePanel树型控件的展现面板与HierachicalDataAppModel模型配合使用，响应此模型的事件BillForm表单界面的展现控件运用单据模板的卡片视图（BillCardPanel）进行展现，支持单表头的卡片也支持标准的卡片视图（聚合VO的上卡片下列表形式）暂时只与BillManageModel配合，实现对模型数据的展现以及事件的相应在V6中常使用其子类ShowUpableBillFormBill