2022年2022年利用FLEX技术建立服务器关系图 .pdf

《2022年2022年利用FLEX技术建立服务器关系图 .pdf》由会员分享，可在线阅读，更多相关《2022年2022年利用FLEX技术建立服务器关系图 .pdf（15页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。

1、利用 FLEX 技术建立服务器关系图中国人寿保险股份有限公司重庆市分公司信息技术部桂林【摘要】随着公司对 IT 处理能力和容量的要求的不断增长，各单位信息中心拥有的服务器的数量也越来越多。随着应用系统的复杂化，这些服务器之间的相互调用和相互依赖变得越来越复杂，逐渐形成了“牵一发而动全身”的局面。缺乏有效的服务器关系展示工具成为系统管理人员的一道难题。 本文从技术角度出发， 讲述了利用 Adobe公司的 FLEX工具来开发一套图形化的、直观的服务器关系展示工具的过程，希望能为理清服务器之间千头万绪的联系，简化系统管理员的工作做出些微的贡献。关键词：服务器关系、系统管理、FLEX Building

2、 the Servers Relationship Map through FLEX Platform Guilin, IT Department of Chongqing Branch, ChinaLife Co.Ltd 【Abstract】 As the demand for the process ability and capacity from the company is gradually increasing, the quantity of servers is increasing fast in every company s information center. An

3、ymore, the application system is becoming more and more complicated. As a result, the calls and dependencies between the servers become highly intricate, and even an error on only one spot may cause huge catastrophe in a large range. Lack of effective tools on servers relationship management comes a

4、s a big 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 15 页 - - - - - - - - - problem to the system managers. This paper tries to illustrate that how to build a visual relationship displayer on the platform of Adobe s FLEX. Wish this can make a little contribut

5、ion to the rationalization of servers relationships and the simplification of system managers work. Key Words: Servers Relationships, System Management, FLEX 0 引言随着信息中心服务器数量的不断增长，应用程序架构复杂度的不断增加， 系统管理员和IT 经理对服务器之间的相互依赖和调用关系逐渐重视。因为服务器之间的这些错综复杂的关系，会影响到服务器的升级、扩容、改造、调整等各种管理操作，如果在没有对服务器的关联关系有充分掌握的情况下进行操作，

6、可能出现波及效应，导致与该服务器相关联的机器服务中断，系统宕机，甚至企业关键数据丢失、出错等灾难性后果。因此，信息中心需要一个简单直观而又形象生动的工具，能够将服务器之间的关联关系展示出来，为服务器的调整提供科学的依据。同时，又需要该工具部署简单，访问方便，以便系统内每个员工查看。传统的B/S 结构能满足部署和访问的便利性要求，但是在展示动态交互图形方面，仅凭 HTML 网页不能满足服务器关系动态展示的要求。而使用 Adobe 公司的 FLEX 技术平台则可以很好地解决这个名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心

7、整理 - - - - - - - 第 2 页，共 15 页 - - - - - - - - - 问题。1 FLEX 技术Flex 是 Adobe 公司推出的针对企业级富互联网应用的表示层解决方案。Flex 是一个应用框架, 以 ActionScript 作为其核心编程语言, 并被编译成swf 文件 , 运行于Flashplayer 虚拟机里 , 嵌入到WEB 浏览器 , 再通过一些企业级的解决方案来与后台应用服务器通信, 用户的浏览器只需安装flash 播放器插件就可以进行观看。Flex 有以下的特性: 继承了Flash 的矢量图形表达功能, 具备方便的矢量图形、 动画和媒体处理接口 , 提供

8、了丰富的组件库, 对多媒体的广泛支持。与此同时， FLEX 平台使用的ActionScript 语言具有强大的 OOP 特性，支持继承、 封装、多态、代码重用等等。 FLEX平台也提供了丰富的控件，这些控件也有着完整全面的事件响应机制。 通过 FLEX ，可以将 FLASH 的绚丽效果和面向对象的编程方法完美地结合起来。2 设计思路首先需要把服务器的关联关系录入到数据库中，然后使用ASP 读取数据库里的关系数据并生成XML数据流，再在ActionScript 中调用 ASP 生成的 XML 数据，并用图形的方式名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - -

9、 - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 15 页 - - - - - - - - - 将这些数据展示出来。2.1.数据库设计：服务器表：存储服务器的信息， 一条记录表示一台服务器。主要字段有服务器机器ID 号，服务器IP 地址，服务器用途等。服务器关系表： 存储服务器之间的关系信息，一条记录表示一个关系。由于在服务器之间的关系中，总是体现为一台机器提供服务（如数据库服务、应用服务、FTP 服务、存储空间服务等） ，另一台机器调用该服务，所以本文将服务器关系定义为一对服务器-客户端的组合， 如果两台机器互为客户端和服务器端，则在关系表中分别插入两条

10、记录即可。关系表的字段有关系ID 号，服务器端机器ID 号，客户端机器ID 号，关系类型，关系描述等。如下图所示：服务器表PK机器 ID号IP地址主机名服务器用途服务器关系表PK关系 ID号关系类别关系描述FK1服务器端机器ID 号FK2客户端机器 ID号图 1：数据库设计 -实体关系图2.2.ASP 设计：服务器信息已经全部录入到服务器表中。录入关系：使用如下界面将关系录入到数据库中。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 15 页 - - - - - - -

11、- - 图 2：关系录入界面使用 ASP 返回关系数据XML 文件：为了保持界面的整洁清晰，本文设计为在服务器图标上双击鼠标时，打开与这台服务器相关的其他机器的示意图，并用带方向箭头的线条与被双击的服务器连接起来。为了实现这一目的，需要有一个后台的 ASP 程序，这个程序的输入参数是服务器的IP 地址，输出数据是一个包含该IP 地址的服务器的所有关系数据的XML 文件。该 XML 文件设计格式如下： 服务器 IP 客户端 IP 关系描述 实际返回的XML 文件中，应该既有输入IP 为服务器的结点，也有输入IP 为客户端的结点。2.3.动态交互关系展示图：设计关系箭头由客户端指向服务器端。当鼠标

12、移到某台服务器上时，该服务器到其服务器端的关系箭头变红色，其他名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 15 页 - - - - - - - - - 服务器调用该服务器的箭头变绿色。为了查看方便，图形应该支持拖拽，并且在鼠标移到关系箭头上时应该显示该关系的描述。服务器 1服务器 2服务器 3服务器 4图 3：动态交互关系示意图3 FLEX 设计3.1.设计关系（箭头）类本文中，利用FLEX 的开发语言ActionScript 的绘图功能来 绘 制 表 示 关 系 的

13、 带 箭 头 的 线 条 。 首 先 建 立 一 个 名 为MyTriangle 的类，该类为UIComponent 的继承类。该类的代码框架如下：public class MyTriangle extends UIComponent public function MyTriangle() super(); /箭头的大小名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 15 页 - - - - - - - - - public var Radius:int=12; /关系

14、线条的起点坐标public var FromPoint:Point; /关系线条的终点坐标public var ToPoint:Point; /关系线条的颜色public var LineColor:uint=0 xFFFF00; /线的粗细：public var LineThick:int=1; public function Draw():void this.graphics.clear(); /如果不做清除则形成大量的拖影/绘制线条/绘制箭头 这样，只需新建一个MyTriangle 实例，设定其FromPoint和 ToPoint 两个坐标，再调用该实例的Draw() 函数，就能在场景中

15、绘制一条关系线。在服务器图标被拖拽的过程中，只需不断变换关系线实例的起点和终点坐标并执行Draw() 函数，就能让关系线跟随服务器图标而移动变化。由 于继承自UIComponent类 ， 所 以可以 很方便 地给MyTriangle 实例添加鼠标事件函数，以实现在鼠标飘过关系线时的变色、显示描述信息等效果。/为关系线添加鼠标飘过事件relation2.get_MyTriangle_withoutdraw().addEventListener(MouseEvent.MOUSE_OVER,new com.EventFuncExtent().EFunExtent(show_relation_info

16、,relation2); /为关系线添加鼠标飘出事件relation2.get_MyTriangle_withoutdraw().addEventListener(MouseEvent.MOUSE_OUT,new com.EventFuncExtent().EFunExtent(hide_relation_info,relation2); 3.2.与 ASP 的交互名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 7 页，共 15 页 - - - - - - - - - 3.2.1.获

17、取 ASP 返回的 XML ：在 ActionScript 中，可以使用 . URLLoader 对象来访问 ASP 等后台 WEB 应用程序。首先建立一个URLLoader 实例：var urlLoader:URLLoader=new URLLoader(); 建立一个要访问的ASP 程序的 URL 的字符串：var url:String=srvrelqry.asp?upip=+rootnode.ip+&rannum=+Math.random()*9999; 这里有一个小技巧： 为了防止浏览器的缓存造成取到的数据不是最新，在URL 字串的最后加上一个随机变量，这样浏览器就不会使用缓存数据，而

18、是每次都去服务器去更新数据。访 问 该URL地 址 并 加 载 数 据 ， 加 载 成 功 后 执 行onCompleted 函数处理得到的数据：urlLoader.load(new URLRequest(url); /添加加载成功后执行的事件urlLoader.addEventListener(Event.COMPLETE,new com.EventFuncExtent().EFunExtent( onCompleted,rootnode); 这里又有一个技巧问题：ActionScript在添加事件监听的时候，除了事件句柄 （Event.COMPLETE ） ，是不能给监听函数 传 递 参

19、数 的 ， 而 这 里 又 必 须 将 被 双 击 的 服 务 器 图 标rootnode 传递给 onCompleted 函数，才能从这个结点展开，绘制与其有关系的新结点及他们之间的关系线。为了解决这个问题，本文引入了一个扩展类EventFuncExtent，通过这个扩展类的使用，就能实现给监听函数传递参数的功能。该扩展类的代码如下：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 8 页，共 15 页 - - - - - - - - - public class EventFunc

20、Extent public function EventFuncExtent() /* * 监听器添加函数添加参数,通过这个函数可以实现对监听事件函数的参数传递* 调用示例：new com.EventFuncExtent().EFunExtent(show_relation_info,relation2) * param f 函数名称* param arg 传给这个被代理函数的参数1，参数 2，参数 3. * return */ public function EFunExtent(f:Function,. arg):Function var F:Boolean=false; var _f:F

21、unction=function(e:*,._arg):void _arg=arg if(!F) F=true _arg.unshift(e) f.apply(null,_arg) ; return _f; 这样，在onCompleted 函数中，就能根据ASP 程序返回的数据和 rootnode 来绘制关系结点和关系线了。以下是 onCompleted 函数中的部分代码：读取 XML 文件中的关系数据：var url:URLLoader=event.target as URLLoader; var temp:XML=XML(url.data); var xmlListCollection:X

22、MLListCollection = MYXML_GetNodeCollection(temp,relation); /对每一个关系进行绘制：for (var i:int=0; i xmlListCollection.length; i+) /从 XML 中获取这个关系的客户端名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 9 页，共 15 页 - - - - - - - - - var xmlListCollection2:XMLListCollection = MYXML_Get

23、NodeCollection(xmlListCollectioni,clientnode); var _XML_clientnode:String=xmlListCollection2.getItemAt(0).toString(); /从 XML 中获取这个关系的服务器端xmlListCollection2 = MYXML_GetNodeCollection(xmlListCollectioni,servernode); var _XML_servernode:String=xmlListCollection2.getItemAt(0).toString(); /从 XML 中获取这个关系的

24、描述xmlListCollection2 = MYXML_GetNodeCollection(xmlListCollectioni,relation_desc); var _XML_relation_desc:String=xmlListCollection2.getItemAt(0).toString(); if(服务器端机器图标不存在) 建立服务器端机器图标 if(客户端机器图标不存在 ) 建立客户端机器图标 if(关系线不存在 ) 绘制关系线 本文中使用FLEX的按钮组件加上背景图片作为服务器图标，将访问 ASP 程序并加载数据和绘制图形的程序加入服务器图标的双击事件监听函数，这样就实现

25、了双击服务器后实时展现其关联结点的功能。3.2.2.ASP 页面传递参数给SWF；名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 10 页，共 15 页 - - - - - - - - - ActionScript 代码在 FLEX 中编译生成的SWF 文件可以直接嵌入到ASP 网页中，要实现通过给ASP 程序传递参数来查看指定的服务器的关联图，就需要将该参数传递给SWF文件。在 ASP 页面中， 使用 Javascript 脚本将参数传递过去，FLEX 编译生成的HTML 文件里面

26、有完整的Javascript脚本，修改其中的AC_FL_RunContent 函数调用，将要传递的参数加入参数中，如下面代码中的蓝色部分：AC_FL_RunContent( FlashVars, upid=& , src, relshow, width, 100%, height, 100%, align, middle, id, relshow, quality, high, bgcolor, #869ca7, name, relshow, allowScriptAccess,sameDomain, type, application/x-shockwave-flash, pluginspa

27、ge, http:/ ); FLEX这边，在主程序的代码中使用this.parameters.upid调用传进来的upid 参数。3.3.支持拖拽FLEX 内臵了拖拽功能， 使用场景的dragEnter、 dragOver、dragDrop 三个事件并和DragManager 结合使用就可以进行拖拽开始、拖拽、拖拽结束的处理。首先在“ mx:Application ”标签中添加这3 个事件的处理函数：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 11 页，共 15 页 - - -

28、- - - - - - mx:Application dragDrop=complete(event) dragEnter=enter(event) dragOver=dragover(event) 在 ActionScript 代码中定义这些函数：private function enter(e:DragEvent):void DragManager.acceptDragDrop(Application(e.target); private function dragover(e:DragEvent):void var xy:Object=e.dragSource.dataForFormat

29、(xy); var DraggingButton:Button=e.dragSource.dataForFormat(DraggingButton) as Button; DraggingButton.x=this.contentMouseX - xy.x; DraggingButton.y=this.contentMouseY - xy.y; this.drawlines2(DraggingButton); /重新绘制关系线 private function complete(e:DragEvent):void this._isDragging=false; /拖动时动态绘制关系线priva

30、te function drawlines2(node:Button):void for (var i:int=0;ithis._relations.length;i+) var rel:Relationship=this._relationsi as Relationship; if(rel.get_clientnode()=node) /和服务器端的联系画成红色rel.get_MyTriangle_withoutdraw().set_LineColor(0 xFF0000); else if(rel.get_servernode()=node) /和客户端的联系画成绿色rel.get_My

31、Triangle_withoutdraw().set_LineColor(0 x00FF00); 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 12 页，共 15 页 - - - - - - - - - rel.get_MyTriangle().Draw(); 为每一个服务器图标（Button 组件）建立鼠标按下并拖动的监听事件函数：private function doDrag(e:MouseEvent):void /当鼠标被按下时并不拖动，而只是记录鼠标按下事件this._is

32、Dragging=true; private function mousemove(e:MouseEvent):void /当鼠标左键被按下并移动时开始拖动if(this._isDragging) var ds:DragSource=new DragSource; /记录拖拽刚开始时鼠标的位臵,在拖动时减去，才能保持物体被拖动时鼠标和物体的相对位臵不变ds.addData(x: e.localX, y: e.localY, xy); ds.addData(e.currentTarget as Button,DraggingButton); var dragProxy:Image=new Ima

33、ge(); /使用 DragManager静态方法 doDrag开始拖拽DragManager.doDrag(e.currentTarget as Button, ds, e,dragProxy); this._isDragging=false; 这样，利用 FLEX 完善的事件监听机制，我们快速地建立起来一个直观形象的、交互的服务器关系展示图。3.4.效果图名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 13 页，共 15 页 - - - - - - - - - 图 4：服务器关系

34、展示效果图 5：服务器关系展示拖拽效果名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 14 页，共 15 页 - - - - - - - - - 图 6：鼠标飘过显示关系详情4 结语RIA 以其高效快捷的切换反应和引人入胜的可视化特性, 给 WEB 应用程序用户带来全新的体验。FLEX 以直观的编程方式 , 在处理复杂交互、改善用户体验等方面有很大的优势, 必将成为互联网发展的趋势。在IT管理中不断发掘FLEX 的展现力优势， 建立基于 FLEX 的 IT 资源管理和监控系统，将大大

35、减少系统管理员乃至IT 经理的工作量， 提升工作效率。【参考文献】 1 黄曦 . Flex 3.0 RIA 开发详解 : 基于 ActionScript 3.0 实现 M. 北京 : 电子工业出版社 , 2008. 2 王瑞玲 1 RIA 及其基于 Flex 的应用开发 J 1 科技情报开发与经济, 2007 , 17 (14) : 2062071 3 Tretola R , Simon , EricksonAdobe R1 Flex 高级编程 M 1 北京 : 清华大学出版社, 20081 4 邱彦林 1 Flex 第一步基于Actionscript 31 0 的Flex2 应用程序开发 M 1 北京: 清华大学出版社, 20071 5 王睿 1 Flex 与ActionScript 编程 M 1 北京 : 机械工业出版社, 20081 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 15 页，共 15 页 - - - - - - - - -