SVG + Javascript + ASP.NET + WebService开发楼宇管理系统(三)

SVG + Javascript + ASP.NET + WebService开发楼宇管理系统(三)
                                                                                                                               ————工作流

接上一篇SVG + Javascript + ASP.NET + WebService开发楼宇管理系统(二)

下面开始写第二篇，也就是提供给维护方的程序。
主要的构想是提供一个WORK FLOW，维护方可以通过这个工作流来导入这个系统。其实说白了就是让维护方来设定初始化数据，因为这些数据根据大楼不同而不同。现在主要的构想是以下一些部分：

 

简单说明：

STEP：1

主要先确定该幢大楼的具体构造。从数据的角度来说，取得大楼的层数，每一层名字，每层有几间房间，每间房间的名字。(暂时考虑用文件浏览器的方式来实现)

STEP：2  ，STEP：3

根据STEP：1中所设定的楼层数以及每层的房间数，来生成空的Visio文件。其中文件的命名值得推敲，为方便起见，
楼层图采取，楼层ID + ‘.svg’；
房间图采取，楼层ID + ‘-’+ 房间ID + ‘.svg’；

STEP：4  ，STEP：5

为了能够操纵图上的某些部件来达到动态变化的效果，先要自己做一些自定义的部件，并在这些自定义部件中定义一些自定义属性。例如： 27  C    用以动态显示温度的Label部件。其中设置三个自定义属性，一个是部件的种别；另一个是图形ID；还有就是房间ID，一个房间里可以拥有多个空调或者其他设备。事先告知客户(注1)在画平面图的时候，如果是普通部件的话用一般的Visio控件就可以了，如果需要动态变化的部件，则请他使用事先做好的自定义部件。

STEP：6

在SVG + Javascript + ASP.NET + WebService开发楼宇管理系统 - 杂记1 中我已经谈到过
下述变化无法在Visio中实现，

<rect x="0" y="0" rx="5" ry="5" width="100" height="16">
                                        ↓
<rect  id="ttr" x="0" y="0" rx="5" ry="5" width="100" height="16">

但是这一步又是非做不可的(否则就无法操纵单个SVG的TAG)，所以最后决定再做一个变换工具来实现这个功能。另外从楼层画面到房间画面的跳转无非就是一个超级连接的问题，为了让用户方便，这个超级连接也一并放在变换工具里来实现。最后还有一个问题是，在房间画面上，要求点击某个自定义的部件弹出设定窗口，允许用户来设定空调或者其他设备的值。

总结一下就是：
变换前文件(楼层图SVG文件，房间图SVG文件)
           变换工具
变换后文件
                ・     向房间图SVG文件追加图形ID
                ・     向楼层图SVG文件追加跳转到房间图SVG文件的超级连接
                ・     向房间图SVG文件追加弹出设定窗口的Javascript
                ・     将楼层信息，房间信息，图形ID登陆至后台数据库

STEP：7

最后由于将生成的文件拷贝至WEB工程的虚拟目录下，以备调用。

 这是一个工作流，我建议用Wizard向导来实现，每个Step可以作为Wizard的一个画面。实现方式的话，基本采用Window Application。构架的话，采用面向对象的方式(Boundary,Entity,Control)。比较复杂的是Step。6，自定义部件有好几种，每种部件中追加图形ID的地方都不相同，而且将来还很有可能追加自定义部件。我目前的设想是这样的，每个部件设一个部件种类，由于SVG文件是XML格式的，所以考虑用XPath来记录将来要追加ID的路径。变换的时候根据部件种类去取XPath，随后用XPath来找结点，找到之后追加图形ID。XPath作为Master信息事先存到数据库中。


注1：
 在这里客户是指：程序的维护方，也就是用这个工作流来导入这套系统的人。
 这里的用户是指：通过Web界面来使用这套系统的人，也就是最终用户。