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

UIFactory II技术框架介绍 UI层设计 目录 TOC \o 1-3 \h \z \u 1. 功能节点加载机制 1 1.1 NC界面模拟 1 1.1.1 窗口 2 1.1.2 顶层面板（工作台） 3 1.1.3 工作台—NC logo与快捷搜索面板 5 1.1.4 工作台-所有打开的功能节点页签面板 7 1.1.5 功能节点面板 8 1.1.6 功能窗口部件 10 1.1.7 FuncletWidget（重要理解部分） 11 1.2 加载机制 12 1.2.1 示例 12 1.2.2 需要做的工作 13 1.2.3 查看代码入口 14 1.2.4 菜单项响应件 14 1.2.5 创建界面元素组件容器FuncletWidgetContainer 15 1.2.6 构造ifunlet面板的元素和菜单栏的按钮 18 1.2.7构造状态栏 27 1.3 按钮定义、配置 27 1.3.1 增加自定义按钮 27 1.3.2 按钮可用性的影响因素 31 1.3.3 常用按钮介绍 33 1.3.4 按钮布局方式： 33 1.4 UI事件框架 37 1.4.1 常用事件 37 1.4.2 Xml配置方式 37 1.4.3练习：增加一个自己的事件 38 2. 树型单据设计 39 2.1.1 建立树面板，修改布局组装表 39 2.1.2 为树面板，增加应用模型（model） 40 3. UI设计归纳总结 42 3.1 背景 42 3.2 设计思路 42 3.2.1 分离的展显逻辑 42 3.2.2 自助能动的Action元素 43 3.2.3 Composite模式来实现组装 43 3.3 常用元素介绍 43 3.3.1 模型层元素 43 3.3.2 视图层元素 44 3.3.3 常用的接口介绍 45 3.3.4 NC的action事件 46 功能节点加载机制 NC界面模拟 以下的演示示例 类的命名，我均采用NC产品已经有的命名方式。 通过该部分的学习 重点理解NC界面之间的层级管理。 开发过程中理解 每级模板自主能动的概念（父模板负责组装，具体功能由各自来实现） 重点理解FuncletWidget界面元素组成，前面的部分了解就可以 窗口 实现样式 代码规划 nc.desktop.ui.NcWindow extends JFrame 代码示例 显示效果 顶层面板（工作台） 实现样式 代码规划： 容器面板（nc.desktop.ui.Workbench），使用borderlayout布局 North面板（nc.desktop.ui.WorkbenchTopPanel extends JPanel） Center面板（nc.desktop.ui.WorkbenchSpace extends JPanel） 考虑单例 代码示例 将其增加到父面板中 增加其子面板 显示效果 因为子面板中，还是空的，所以看到效果如下。但是我们代码中知道，已经增加了两级面板 工作台—NC logo与快捷搜索面板 实现样式 代码示例 其没有子面板，需要实现如下功能 需要增加底图以及NC logo图标代码如下： 备注：通过代码可以知道，NC界面样式主题位于NCHOME/resource/themeroot/ 路径下， 使用绿色主题，实现样式如下 显示效果 工作台-所有打开的功能节点页签面板 实现样式 代码规划 父面板（nc.desktop.ui.WorkbenchSpace） 容器面板（nc.ui.pub.beans.ExtTabbedPane extends javax.swing.JTabbedPane）， 代码示例 增加面板到其父面板中 功能节点面板 实现样式 代码规划 每个tab页签面板 为一个功能节点（nc.funcnode.ui.FuncNodePanel） 制定接口（nc.funcnode.ui.IFuncletWindow），每个功能节点都需要实现该接口中的方法： 显示功能节点窗口（public void showWindow()）和关闭功能节点窗口（public boolean closeWindow()） 代码示例 登陆成功，默认增加功能导航和消息中心两个功能功能节点 tab 显示效果 功能窗口部件 每个功能节点，界面展示的元素都不相同，NC采用如下结构展示 每个FuncNodePanel，使用一个界面元素组件容器（FuncletWidgetContainer extends JPanel）来显示