小demo带来大项目

xiaozhonghua

浏览: 253697 次
性别:
来自: 上海

最近访客更多访客>>

wyx065747

letianmine

anttu

sam1982

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

项目管理 IT厂商中国电信电信 UI

今天心情不错，公司终于签下了一个综合业务监控系统的大单。到底有多大我也不知道，反正连软件带硬件不算小。按照销售的说法，拿下这个项目一个重要的因素就是要提供一个吸引眼球的demo，而我们做的不错！今天和大家分享一下喜悦和经验！

这个项目是一个省级电信运营商的综合业务监控系统。公司跟了好长时间了。由于是一个综合的业务监控系统，涉及的管理资源非常多，又要提供大屏幕显示，所以对系统的呈现效果要求非常高（“政绩工程”么）。前前后后提了很多“无礼”要求，陆续提过的有3D电子地图、3D机房监控、场景仿真、全动画、Google Earth、全Flash等等....弄的我们晕头转向、焦头烂额。其实很多时候，用户自己也不知道想要什么，反正对厂商的要求就是一个字：“炫”，两个字“好看”，三个字：“一定好好看！”（不对，好像是四个字哦）。

言归正传，项目跟踪过程中，商务始终告诉我们研发一定要做好一件事：如何做好呈现，尤其是综合的业务监控和呈现，这是获得项目的关键，一定要“出彩”。这个“综合呈现”说起来容易，做起来难。作为省级的电信运营商，内部的各种软硬件系统无数，要监控从上到下、从软到硬，真是烦不胜烦：

基础设施层：主要是网络上的硬件设备，包括交换机、路由器、防火墙、各种主机设备服务器等等；
软件层：这一层主要是主机上面运行的操作系统和各类业务软件系统，例如操作系统（Windows、AIX/HP-UX/LINUX/SOLARIS）、各种中间件（WebLogic、JBoss、IIS、WebSphere等）、数据库（Oracle、Sybase、MySQL）等；
应用层：这一层是指运行在软件层内部的一些细粒度资源，包括一些关键的软件进程、数据库表空间、业务连接、消息队列等等。这一层数量繁杂、数量众多。不过这些资源的状态直接会影响其上层支撑的业务。
业务层：业务层是最顶层，由以上底层资源所共同支撑起来的面向用户的各种业务。对业务最容易理解的描述就是电信提供给客户的具体“服务”。例如视频业务、短信业务、WAP业务、专网业务等等。这些业务才是用户最终关心的东西，因为这些业务才是客户的核心资产，是拿来卖钱的最终产品。一旦出问题，将直接影响money！

此外，还有一大堆机房环境监控的要求，什么配电柜供电、开关状态、UPS、蓄电池、空调、适度温度漏水消防通风门禁视频.........一大堆。所以，要对业务进行监控，就必须对业务所支撑的各个底层资源进行监控。另外，还要能够对这些资源的关系进行连接和定义，一旦发生故障和问题，能够从上到下迅速定位故障起源，在最短时间内发现问题、解决问题。如何呈现这些依赖关系，并对故障和告警进行纵向定位，是软件呈现的一个核心问题，也是用户最关心的一个问题。

用户要求我们先制作一个demo程序，看我们将如何呈现“综合监控”的效果。在充分了解了用户需求之后，经过讨论，我们想做一个完全图形化的分层、跨层的综合监控界面。界面要美观，有动画效果，能够清晰的显示资源依赖关系和告警传播定位。

需要监控和管理的资源

接下来要写代码了。肯定先用我熟悉的TWaver试试。研究了一下，TWaver中有一个平行四边形的Group对象，适合做上图中的“层”的概念。先如下封装并设置属性：

package demo;

import java.awt.Color;
import twaver.Group;
import twaver.TWaverConst;

public class LayerGroup extends Group {

    public LayerGroup() {
        init();
    }

    public LayerGroup(Object id) {
        super(id);
        init();
    }

    private void init() {
        this.setGroupType(TWaverConst.GROUP_TYPE_PARALLELOGRAM);
        this.putGroupAngle(45);

        this.putGroup3D(true);
        this.putGroupDeep(10);
        this.putGroupOutline(false);
        this.putGroupFillColor(Color.green.darker());
        this.putGroupGradient(true);
        this.putGroupGradientFactory(TWaverConst.GRADIENT_LINE_E);
        this.putGroupHandlerVisible(false);
        this.putGroupDoubleClickEnabled(false);
        this.putBorderColor(Color.white);
        this.putBorderInsets(3);
        this.putBorderAntialias(true);
        this.putBorderStroke(TWaverConst.STROKE_SOLID_4);
        this.putBorderVisible(false);
        this.putLabelHighlightable(false);

        this.setEnableAlarmPropagationFromChildren(false);
    }
}

通过这个简单的封装，再往Group里头放几个节点和连线，显示效果如下：

用Group制作的“层”效果

怎么样，有点意思吧？开头不错，继续改进！再依次排列4个Group，用不同颜色，试试效果：

createLayer(Color.orange, 50, 0, 10, "7.png", "<html><center>软件<br>业务层</center></html>");
createLayer(Color.green.darker(),180, 200, 15, "8.png", "<html><center>技术<br>应用层</center></html>");
createLayer(Color.magenta.darker(),280, 350, 5, "5.png", "<html><center>技术<br>软件层</center></html>");
createLayer(Color.cyan.darker(),400, 570, 7, "1.png", "<html><center>基础<br>设施层</center></html>");

以上代码封装了创建一个层的函数，给定颜色、坐标位置、内部节点数量、图标、文字等等。上面代码中的HTML风格字符串是为了在TWaver中（好像Swing中也是这样的）显示换行的标签。每一个层作为容器包含了很多不同类型的资源。显示效果如下图：

四层拓扑图显示效果

注意其中的连线有下垂的弯曲效果。这是我以前在做项目封装过的一个TWaver技巧：通过重写twaver的Link的UI类，重新指定path走向实现的。其实也很简单，首先获得link的from点和to点，取值中间点，再把y纵向增加20，把这个点作为quadTo的控制点画曲线即可。对TWaver熟悉的朋友可以看一下这段代码（其实这个效果也是从TWaver Java的demo源代码中学习到的）：

package demo;

import java.awt.Point;
import java.awt.geom.GeneralPath;
import twaver.network.TNetwork;
import twaver.network.ui.LinkUI;

public class InnerLinkUI extends LinkUI {

    public InnerLinkUI(TNetwork network, InnerLink link) {
        super(network, link);
    }

    @Override
    public GeneralPath getPath() {
        GeneralPath customPath = new GeneralPath();
        Point p1 = this.getFromPoint();
        Point p2 = this.getToPoint();
        customPath.moveTo(p1.x, p1.y);
        int offset = 20;
        customPath.quadTo((p1.x + p2.x) / 2, (p1.y + p2.y) / 2 + offset, p2.x, p2.y);
        return customPath;
    }
}

用这种link做出的拓扑图比较生动美观。多加几个节点连线就能看出来了：

四层复杂拓扑图显示效果

不过发现平行四边形Group一个问题：当两个Layer叠加后，下面的节点会被完全覆盖，看不见了。用户说：能不能也能看见？（晕，盖住了也要看见。谁让人家是甲方呢？）于是询问TWaver的人，一个哥们说Group有透明属性。于是试了一下，效果不还错：

this.putGroupOpaque(false);

层的透明与覆盖

下一步，关键了：要增加层与层之间资源的“依赖关系”。例如一个Oracle跑在一台主机上，而Oracle中的一个关键表空间需要重点监控，它决定了上层一个视频点播业务是否能够正常。为了体现这个依赖关系，在跨层的节点中间建立link。这个link和层内部link显示上应当有所区别：

package demo;

import java.awt.Color;
import twaver.Link;
import twaver.Node;
import twaver.TWaverConst;
import twaver.base.OrthogonalLinkDirectionType;

public class LayerLink extends Link {
    public LayerLink(Node from, Node to) {
        super(from, to);
        init();
    }

    public LayerLink(Object id, Node from, Node to) {
        super(id, from, to);
        init();
    }

    private void init() {
        this.putLink3D(true);
        this.putLinkWidth(4);
        this.putLinkOutlineWidth(0);
        this.putLinkColor(Color.lightGray);
        this.putLinkAntialias(false);
        this.setLinkType(TWaverConst.LINK_TYPE_ORTHOGONAL);
    }
}

显示出来后，效果并不理想，有点乱。主要是没有“跨层”的立体感。

跨层连线效果

图中跨层的link没有呈现出“穿透层”的感觉，多了以后反而破坏了整个拓扑图的立体感和生动感，需要再改进。最好能够显示“穿层而过”的效果。需求变态么？不弄点猛药还想拿单子么，程序员就是要与各种“不可能”说“不”嘛！经过反复研究和实验，终于做出了一个更好的效果，如下图：

连线的跨层穿透效果

注意观察其中穿层效果，不知大家是否喜欢？

连线的透明穿透

怎么做到的呢？其实也简单，一点就破，我就不点破了吧，卖个关子先。大家可以先猜猜看，源代码里头也能看到答案。接下来，可以增加一些跨层连线了！看看下图效果：

跨层连线的综合效果图

效果还不错吧？销售看过后非常满意，连说有新意。不过还有最后一个很头大的问题：需要显示告警及其传播路线，也就是告警发生后，要从底层一直沿着依赖关系传播到上层。于是开始研究TWaver的AlarmPropagator告警传播器。通过研究发现，其实告警传播也不复杂，主要原理是当告警发生后，它会根据AlarmPropagator的“指示”和定义的规则，沿着一个特定的“路径”进行告警传播。被传播过的地方，会显示一个有告警颜色的外框，标志其告警状态。

但是问题是，TWaver的告警传播器是按照“父子关系”进行传播的。也就是默认情况下，告警总是从孩子传给父亲，一直到没有parent为止。按照这个规则，这个demo中一个节点发生告警后，会传播给平行四边形这个层对象，这显然是没有意义的，不符合我的要求。我们需要告警沿着层的“依赖关系”进行跨层传播。于是重写AlarmPropagator！也不难，调试了几个小时，用一个递归法总算搞定了。代码如下：

package demo;

import java.util.Collection;
import java.util.Iterator;
import twaver.AlarmSeverity;
import twaver.Element;
import twaver.Node;

public class DemoPropagator {

    public void propagate(Element element) {
        AlarmSeverity severity = element.getAlarmState().getHighestNativeAlarmSeverity();
        if (element instanceof Node) {
            Node node = (Node) element;

            Collection links = node.getAllLinks();
            if (links != null && !links.isEmpty()) {
                Iterator it = links.iterator();
                while (it.hasNext()) {
                    Object o = it.next();
                    if (o instanceof LayerLink) {
                        LayerLink link = (LayerLink) o;
                        if (link.getAlarmState().isEmpty()) {
                            link.getAlarmState().addAcknowledgedAlarm(severity);

                            Node anotherNode = link.getFrom();

                            if (anotherNode.getAlarmState().isEmpty()) {
                                anotherNode.getAlarmState().addAcknowledgedAlarm(severity);
                                if (anotherNode != node) {
                                    propagate(anotherNode);//这里递归！
                     }
                            }
                        }
                    }
                }
            }
        }
    }
}

这里代码的逻辑主要是判断是不是跨层link，如果是就沿着它进行传播。噢吼！上面代码好像泄露了上面“穿透Layer”的秘密了，呵呵。最后，再来一个“告警模拟器”来模拟随机、随时发生告警，也就是用一个单独的线程在里面sleep然后生成Alarm并发送到拓扑图的节点上。直接上代码：

package demo;

import java.util.Iterator;
import javax.swing.SwingUtilities;
import twaver.AlarmSeverity;
import twaver.Element;
import twaver.TDataBox;
import twaver.TWaverUtil;

public class AlarmMocker extends Thread {

    private TDataBox box = null;
    private DemoPropagator propagator = new DemoPropagator();

    public AlarmMocker(TDataBox box) {
        this.box = box;
    }

    @Override
    public void run() {
        while (true) {
            try {
                Thread.sleep(1 * 1000);
            } catch (InterruptedException ex) {
                ex.printStackTrace();
            }

            SwingUtilities.invokeLater(new Runnable() {

                public void run() {

                    if (TWaverUtil.getRandomInt(5) == 1) {
                        //clear all alarm and propagation.
                        Iterator it = box.iterator();
                        while (it.hasNext()) {
                            Element e = (Element) it.next();
                            e.getAlarmState().clear();
                        }
                    }

                    Element element = box.getElementByID("4." + TWaverUtil.getRandomInt(10));
                    if (element != null) {
                        element.getAlarmState().addNewAlarm(AlarmSeverity.getRandomSeverity());
                        propagator.propagate(element);
                    }
                }
            });
        }
    }
}

告警模拟器把最底层的里面的节点随机产生告警，再随机的清除，模拟现实网络的监控状态。然后运行demo，观察其告警传播的路线是否符合预期，也就是沿着层进行传播。

注意一个细节：由于上面告警模拟器在一个单独的Thread线程中运行，在产生告警并更改界面时候，需要用SwingUtilities.invokeLater进行代码封装调用，保证它在Swing线程中执行，避免屏幕和界面“花”或不可预知的显示结果。唉，谁让Swing是单线程而且是线程不安全呢？这是个古老话题，就不罗嗦了。

废话不多说，直接上最终效果图：

demo最终运行界面

双击层动画旋转并放大

看到告警跨层传播的效果了吗？最后，根据客户的要求，又增加了一些动画效果：双击平行四边形后，平行四边形会动画变成矩形、动画飞到屏幕中间，然后动画放大内部拓扑图，供用户查看细节；再次双击，平行四边形快速旋转缩小并回到原来位置。demo程序交付并演示后，获得客户高度评价。用我们商务人员的话来说就是：“我们的demo最出彩！”作为程序员，自己做的东西能为公司创造价值和利润就是最大的肯定和成就感！

由于demo掺杂了不少公司的代码，我花了一点时间整理一下，弄出了一个干净的demo代码，请见附件，请感兴趣的朋友请直接下载，欢迎留言讨论。解压demo.zip后，中有两个jar包和run.bat，双击run.bat就可以运行demo。我是用JDK6编译的，请各位确保首先安装了JAVA 6环境。如有任何运行问题请留言。

demo所限内容仅供技术交流和参考，请慎作商业用途。

补充：

看到留言中很多朋友都说“第一次看到用程序做demo”，也把我弄“惊诧”了。因为自己从业这些年基本上都是用程序做demo，已经习以为常，甚至成为理所当然了。看到很多朋友说“用PPT和美工图片”做DEMO，确实感觉自己有点out了。在电信、电力这些行业里面，项目都比较大、复杂，没有一定的商务和技术实力以及经验是很难获得项目机会的。PPT作为产品介绍和各种交流肯定是没问题的；但如果说要做大项目的“系统演示”那可是够“空对空”的。可以想象一下：如果我们是局方、甲方或客户，要花几百万做一个项目，给各个厂商一个月的时间来准备一个技术交流和产品演示，我们是愿意把项目交给用精美PPT演示的厂商，还是愿意给效果同样漂亮但用实实在的程序或DEMO来演示的厂商呢？谁家更有实力？谁家更重视项目？谁家更有技术和人才？谁家更有想法？谁家更有经验？这个问题几乎不用回答。

一个有实力的软件公司，打大单不拿点真家伙，光靠美工弄几个花里胡哨的图片或者PPT就能拿下项目，那绝对是太不可思议了。我接触的这些公司哪个不是靠多年的行业积累和系统经验，哪次面对这样的大战役不是要抽出一两个技术好手来加班加点的做些真家伙（半真也行，老系统扣出一部分模块和代码，就算在此基础上修修改改去运行也可）去演示？甚至有的时候去演示的几乎就是可以上线的系统，或在另外一个老的类似项目紧急改进出来的半成品系统。如果没有这些项目和技术经验做沉淀和积累，一旦中标，很多时候系统上线只给3个月的时间，完全从头来个瀑布式的从需求分析、从头开发？做梦吧。现在行业竞争越来越惨烈，客户要求越来越高越复杂，技术变化快，你不能做到又快又好的提供系统和解决方案，只能靠边站了。

这是一个大的监控系统，涉及很多子系统和其他业务系统。这里仅仅是一个简洁的高层次全网监控界面，是很小一部分，是一个小UI而已。但是这个UI会被投射到一个2*4的大型液晶屏幕墙上，让全屋子的人抬头就能看到全网的链接情况、告警情况；让公司领导经常过来看到；让兄弟省市领导经常参观到。所以，它的作用不可小视（提高形象的作用不也是作用么）。这也是为什么客户这么重视的原因。另外麻雀虽小，五脏俱全；以管窥豹也可以时见一斑。我们搞技术的就是应当多思考多创新多学习多交流、踏踏实实在细节上下功夫，也许才能更好的体现我们的价值。

如果demo所体现出来的UI呈现思路和设计想法或者代码中的技巧能够给大家带来一点点启发，本人就感到非常非常满足了！

谢谢各位！