一个界面框架的设计

一个界面框架的设计

文/陈刚  from http://blog.chengang.com.cn

一、需求

前段时间写了一个JMX浏览器，通过浏览器，可以调用JBoss的MBean，界面和功能类似MC4J（如下图）。



neil上月提出了新需求，希望我能在JMX浏览器基础，做一个界面框架，以便于以后程序员的扩展。我做了两周的设计和实现了一个Demo，不过被neil否决了。需求真的很重要，需求不对或理解不到位，返工的可能性很大。neil平时太忙，说得也太快，有时需求时又夹杂着一些设计想法，弄得我也很模糊。开始一直朝着XUL思路用文本描述界面的方向走，后来又转到指定界面class的思路。。。。过了两三周后设计才基本敲定。转过头来，我才发现我对他的需求并没有深入的了解，这个框架要在JMX上再抽象，它所需面对的是服务（Service）而不仅仅是MBean。

这个框架需求是这样的：
（1）左边有一个树型导航栏。以前结点都是MBean，现在要求结点可以自定义。并且可以把多个服务绑定在一个结点上。
（2）右边是一个View视图。以前视图是MBean的属性(Attribute)窗和操作(Opreation）窗口，自动根据MBean来生成。现在要求可以自定义，指向某个具体的界面class。这样就可以提供一些更友好界面元素，而不象自动生成的界面那样死板了。
（3）可配置左边的结点和右边的视图的关联关系。


二、设计

1、用例图

设计的第一步是理解用户需求，而用例图是用户需求的提炼，用例很多时候可以理解成功能的意思。用例图如下：


说明：这里主要包含五个用例：
（1）show view显示视图(包含读数据的子用例 )
（2）view button click单击视图中确定按钮(包含写数据的子用例)
（3）configure view配置视图的参数
（4）configure group配置组（树结点）参数
（5）mapping group&view映射组和视图的关系（包含检查依赖关系的了用例）


2、类图

类图反映了设计的数据模型，应该是在设计时第二步所要做的。这里不需要做得很详细，先画一个大概，能表达各类之间的联系即可。

说明：
（1）GroupNode是左边树的组结点。不同的Service类型有不同的组结点，现在暂时实现的是MBean的组结点。
（2）视图View和GroupNode之间的关系由ViewManager管理。
（3）ServiceInvoker是用于调用服务的类，现在主要是实现MBean服务的调用，以后可能有纯XML的服务调用。
（4）ViewModel是View中的数据。数据的读取和写入都需要调用ServiceInvoker，所以提供一个ViewModelProxy，这样就隔离了View和SericeInvoker的关系。


3、时序图

如果说类图是一种静态的模型关系，那么时序图就是一种动态的模型关系。一般来说一个用例对应于一个时序图，时序图中用到了类图中的类。这里给出最主要的两个用例的时序图：show view、view button click

（1）show view时序图


（2）view button click时序图



三、后记

在设计中最重要的就是上面的三个图：用例图、类图、时序图。设计时做得太详细了也没必要，画个大概，在开发时照着图做不至于迷乱了即可。

设计基本定型了，但我依然有困惑：这个界面框架真的需要在JMX再抽象到Serivce吗（这也是我和Neil最大的分歧点，也是我的设计被多次否决的根本原因）？象我们的系统都是基于JMX来构建的，虽然也曾有引用SOAP，放弃远程调用而改用XML传递的想法。但那似乎还很遥远，挺大的改变，伤筋动骨的。也许这个界面框架的Service抽象，所带来的灵活性永远也不会被用到，具体如何还得看以后系统开发的发展了。