`
jklliang
  • 浏览: 40708 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

使用IOlive快速开发拓扑图。

拓扑flexiolive关系结构图拓扑设计器 
阅读更多


           说起做拓扑图的工具了解过拓扑的并不陌生，国外有很多不错的开发组件比如Twaver.只是Twaver由于其进口的特性我们在使用的时候要支付高昂的费用。也有几个开源的做拓扑的工具只是由于其开源的特性，其不稳定性和可靠性就得不到很好的保障，并且由于是老外搞得，出了问题也很难找人。那么现在iolive或许是你的最佳选择。因为以上两个问题真的不存在。你可以不花钱使用，也可以稍微给一点服务费，国人开发你绝对有章可循。怎么用？简单吗？容易上手吗？这个不多说直接上例子：

 

            我们以很常见的一个拓扑结构为例比如一个公司的有6台PC，一个无线路由，四个微星电话，微星电话需要通过卫星电话发射器通信。我们最上层比作一个网络云。无线路由可以提供公司的笔记本，手机，pad等终端上网。（在术语定义和真正的网络结构上可能是不严格的在此仅仅这样描述来作图大致结构如下）

          internet网关（Modem） ——>无线路由--->手机（） | --->笔记本

                                                 |                                              | ---->pad 无线打印机

云                                             |--->公司pc、服务器

        微信电话发射器------卫星电话(1234个)

我们以Iolive的flex版本为例子：

1.新建flex工程OliveTest

  

 

2.然后我们需要一个能描述我们这个例子的数据：一个是节点另一个关系。

olive节点用<node>节点之间关心用<arc>

那么我们可以用一下结构来描述这个公司的网络结构：

<?xml version="1.0" ?>
<graph>
  <node id="1" text="云" tooltip="云" type="入口"  icon="assets/topo/cloud.gif"/>
  <node id="2" text="internet网关" tooltip="internet网关" type="入口"  icon="assets/topo/internet.png"/>
  <node id="3" text="卫星电话发射器" tooltip="卫星电话发射器" type="入口"  icon="assets/topo/satelite.png"/>
  <node id="4" text="无线路由" tooltip="无线路由" type="入口"  icon="assets/topo/wireless.png"/>
  <node id="5" text="PC" tooltip="PC" type="办公节点"  icon="assets/topo/pc.png"/>
  <node id="6" text="PC" tooltip="PC" type="办公节点"  icon="assets/topo/pc.png"/>
  <node id="7" text="PC" tooltip="PC" type="办公节点"  icon="assets/topo/pc.png"/>
  <node id="8" text="PC" tooltip="PC" type="办公节点"  icon="assets/topo/pc.png"/>
  <node id="9" text="PC" tooltip="PC" type="办公节点"  icon="assets/topo/pc.png"/>
  <node id="10" text="PC" tooltip="PC" type="办公节点"  icon="assets/topo/pc.png"/>
  <node id="11" text="手机" tooltip="手机" type="WIFI节点"  icon="assets/topo/phone.png"/>
  <node id="12" text="手机" tooltip="手机" type="WIFI节点"  icon="assets/topo/phone.png"/>
  <node id="13" text="手机" tooltip="手机" type="WIFI节点"  icon="assets/topo/phone.png"/>
  <node id="14" text="手机" tooltip="手机" type="WIFI节点"  icon="assets/topo/phone.png"/>
  <node id="15" text="手机" tooltip="手机" type="WIFI节点"  icon="assets/topo/phone.png"/>
  <node id="16" text="座机" tooltip="座机" type="通信节点"  icon="assets/topo/call.png"/>
  <node id="17" text="座机" tooltip="座机" type="通信节点"  icon="assets/topo/call.png"/>
  <node id="18" text="座机" tooltip="座机" type="通信节点"  icon="assets/topo/call.png"/>
  <node id="19" text="文件服务器" tooltip="文件服务器" type="服务器"  icon="assets/topo/IBM-Server.png"/>
  <node id="20" text="数据库服务器" tooltip="数据库服务器" type="服务器"  icon="assets/topo/database.png"/>
  <arc id="100" type="connectedTo" tooltip="" source="1" destination="2" selected="true" directed="false" lineType="straightline"/>
  <arc id="101" type="connectedTo" tooltip="" source="1" destination="3" lineType="straightline"/>
  <arc id="102" type="undirected" tooltip="" source="2" destination="4" lineType="BROKEN_1"/>
  <arc id="103" type="undirected" tooltip="" source="2" destination="5" lineType="BROKEN_1"/>
  <arc id="104" type="undirected" tooltip="" source="2" destination="6" lineType="BROKEN_1"/>
  <arc id="105" type="undirected" tooltip="" source="2" destination="7" lineType="BROKEN_1"/>
  <arc id="106" type="undirected" tooltip="" source="2" destination="8" lineType="BROKEN_1"/>
  <arc id="107" type="undirected" tooltip="" source="2" destination="9" lineType="BROKEN_1"/>
  <arc id="108" type="undirected" tooltip="" source="2" destination="10" lineType="BROKEN_1"/>
  <arc id="109" type="undirected" tooltip="" source="3" destination="16" lineType="BROKEN_1"/>
  <arc id="110" type="undirected" tooltip="" source="3" destination="17" lineType="BROKEN_1"/>
  <arc id="111" type="undirected" tooltip="" source="3" destination="18" lineType="BROKEN_1"/>
  <arc id="112" type="undirected" tooltip="" source="4" destination="11" lineType="BROKEN_2"/>
  <arc id="113" type="undirected" tooltip="" source="4" destination="12" lineType="BROKEN_2"/>
  <arc id="114" type="undirected" tooltip="" source="4" destination="13" lineType="BROKEN_2"/>
  <arc id="115" type="undirected" tooltip="" source="4" destination="14" lineType="BROKEN_2"/>
  <arc id="116" type="undirected" tooltip="" source="4" destination="15" lineType="BROKEN_2"/>
  <arc id="117" type="undirected" tooltip="" source="2" destination="19" lineType="BROKEN_1"/>
  <arc id="118" type="undirected" tooltip="" source="2" destination="20"lineType="BROKEN_1"/>
</graph>

 其中node描述了每一个物理的设备，arc描述了设备之间是什么关系。我们把这个文件放在src/xml/IconDemo.xml

 

3.导入iolive组件包IOliveCore.swc。在OliveTest.mxml引入iolive的画布OliveGraph，在初始化方法中加载读取IconDemo.xml中描述的节点和线的信息提供给OliveGraph。这样ok右键运行，拓扑图就呈现出来了。




 
 看代码如下：（简单哇）

 

<?xml version="1.0" encoding="utf-8"?>
<!--******************************************************************************************

**********************************************************************************************-->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   backgroundColor="#EFEFEF"
			   creationComplete="init()"
			   pageTitle="图片渲染器示例"
			   xmlns:olive="Library://com.olive.core/flex/olive">
	<fx:Script>
		<![CDATA[
			import com.iolive.topology.events.GraphXMLModelEvent;
			import com.iolive.topology.model.DefaultGraphArc;
			import com.iolive.topology.model.DefaultGraphNode;
			import com.iolive.topology.renderers.AbstractNodeRenderer;
			import com.iolive.topology.renderers.ImageNodeRenderer;
			
			import sample.SimpleXmlGraphModel;
			private var model:SimpleXmlGraphModel;
			
			private function init():void {
				model = new SimpleXmlGraphModel();
				model.url = "xml/IconDemo.xml";
				graph.model = model;
				model.addEventListener(GraphXMLModelEvent.XMLMODEL_ADDED,
					function(event:GraphXMLModelEvent):void{
						graph.runLayout();
					});
			}
		]]>
	</fx:Script>
	
	<s:VGroup width="100%" height="100%" gap="0">
		
		<olive:OliveGraph id="graph" height="100%" width="100%" nodeRenderer="{new ImageNodeRenderer('icon')}"/>
	
	</s:VGroup>
</s:Application>

 

 5.页面是不是不太好看？只需要一个样式css文件，

没有工具栏？一行代码添加工具栏组件

<olive:DefaultToolBar graph="{graph}" width="100%"/>

 一行代码加一个搜索组件

<olive:SearchBar graph="{graph}" width="100%"/>

 

一行代码加一个鹰眼组件

<olive:EagleEyeBar right="10" bottom="20" graph="{graph}"/>

 在运行：

 

  

 

代码如下：

 

 

 

<?xml version="1.0" encoding="utf-8"?>
<!--******************************************************************************************

**********************************************************************************************-->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   backgroundColor="#EFEFEF"
			   creationComplete="init()"
			   pageTitle="图片渲染器示例"
			   xmlns:olive="Library://com.olive.core/flex/olive">
	<fx:Script>
		<![CDATA[
			import com.iolive.topology.events.GraphXMLModelEvent;
			import com.iolive.topology.model.DefaultGraphArc;
			import com.iolive.topology.model.DefaultGraphNode;
			import com.iolive.topology.renderers.AbstractNodeRenderer;
			import com.iolive.topology.renderers.ImageNodeRenderer;
			
			import sample.SimpleXmlGraphModel;
			private var model:SimpleXmlGraphModel;
			
			private function init():void {
				model = new SimpleXmlGraphModel();
				model.url = "xml/IconDemo.xml";
				graph.model = model;
				model.addEventListener(GraphXMLModelEvent.XMLMODEL_ADDED,
					function(event:GraphXMLModelEvent):void{
						graph.runLayout();
					});
			}
		]]>
	</fx:Script>
	
	<s:VGroup width="100%" height="100%" gap="0">
		<olive:DefaultToolBar graph="{graph}" width="100%"/>
		<olive:OliveGraph id="graph" height="100%" width="100%" nodeRenderer="{new ImageNodeRenderer('icon')}"/>
		<olive:SearchBar graph="{graph}" width="100%"/>
	</s:VGroup>
	<olive:EagleEyeBar right="10" bottom="20" graph="{graph}"/>
</s:Application>

 

OK!

 

 

很简单一个拓扑图就完成了，是不是很简单高效。

拓扑关系图尤在电信OSS、银行设备监控系统、广播电视局的网络监控等等都有广泛的应用，结合一个高度可视化高度虚拟化的拓扑能再加上每个设备的性能故障数据能做出一个具有很强的使用实用价值的监控或称展示系统。

 

本例源码见附件

olive 网站 http://iolive.duapp.com/(提供demo和相关开发包的下载)

olive api http://iolive.duapp.com/oive-api/index.html

 

 

 

  

 

  • 大小: 10.2 KB
  • 大小: 31 KB
  • 大小: 93.6 KB
分享到：
| 面向对象的设计原则
评论
1 楼 yinchao1000 2013-11-05  
赞啊   
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    如何使用flex 开发拓扑图

    本篇文章将详细讲解如何使用Flex来开发拓扑图。 首先，要开发拓扑图，你需要了解Flex的基本语法和组件。ActionScript是Flex的核心编程语言，它是面向对象的，与JavaScript类似但更强大。要开始开发，确保安装了Flex...

    基于 HTML5 快速构建拓扑图1

    Web Storage 可以快速存取小量数据，而 IndexedDB 则适合存储结构化的大数据，可以实现拓扑图的离线浏览和快速检索。 此外，HT 提供了一系列预定义的图形组件和交互模式，如节点、连接线、拖放、缩放和平移等，...

    程序流程网络拓扑图绘制工具

    在思科网络设备的环境中，准确绘制拓扑图能够帮助管理员快速定位问题，进行故障排查，同时在规划和扩展网络时提供直观的参考。 亿图（Edraw）作为一款专业绘图工具，提供了丰富的预定义模板和符号库，涵盖了各种...

    Java网络拓扑图，vue拓扑图管理，组件关系组件机架

    通过使用像D3.js这样的数据可视化库，可以轻松地与Vue集成，实现动态拓扑图的绘制和交互功能。 6. **文件名称列表**：“拓扑”可能是项目中包含网络拓扑图相关代码或资源的文件夹。在实际开发中，这个文件夹可能...

    Flex+Java开发拓扑图

    本项目"Flex+Java开发拓扑图"是一个利用Flex作为前端展示层，Java作为后端数据处理层来实现动态拓扑图的应用实例。 Flex是一种基于ActionScript（AS）的开源框架，主要用于创建富互联网应用程序（RIA）。它允许...

    Flex拓扑图组件-iolive

    免费的Flex拓扑组件，可用于拓扑图、关系图、流程图的绘制，不输与Twaver的展现效果及完善的扩展机制和中文API文档 详细效果 iolive.duapp.com

    使用 jsPlumb 绘制拓扑图的通用方法

    在IT领域，尤其是在Web开发中，可视化工具的使用越来越普遍，其中之一就是利用jsPlumb库来绘制拓扑图。jsPlumb是一个JavaScript库，专门用于在HTML元素之间创建视觉连接，这在展示网络架构、系统组件关系或者流程图...

    快速开发基于 HTML5 网络拓扑图应用--入门篇（三）

    在本篇【快速开发基于 HTML5 网络拓扑图应用--入门篇（三）】中，我们将进一步深入探讨如何在HTML5环境下构建网络拓扑图应用，并着重讲解如何添加属性组件。这个过程旨在帮助初学者理解网络拓扑图的创建原理，以及...

    C#绘制网络拓扑图

    本文将深入探讨如何使用C# WinForm结合Microsoft Visio库来实现网络拓扑图的绘制和交互功能。 首先，C#作为.NET框架的主要编程语言，提供了丰富的类库和工具支持开发桌面应用程序，WinForm是C#中创建窗口应用程序的...

    JTOPO纯前端拓扑图

    **JTOPO纯前端拓扑图** JTOPO是一款强大的前端拓扑图绘制库，它专为构建网络、系统和业务流程的可视化解决...通过理解其核心特性和使用方法，开发者可以轻松地利用它来创建直观、生动的拓扑图，提升项目的可视化体验。

    网络逻辑拓扑图和详细拓扑图

    - **故障诊断**：当网络出现故障时，通过逻辑拓扑图可以快速定位问题所在。 - **性能优化**：通过分析数据流向，可以找出瓶颈并进行优化调整。 ### 二、详细拓扑图 #### 定义 详细拓扑图是在逻辑拓扑图的基础上...

    Qt实现网络拓扑图

    使用Qt框架来实现网络拓扑图，可以利用其强大的图形界面和事件处理能力，为用户创建交互式且可自定义的网络表示。本文将深入探讨如何利用Qt实现这一功能。 首先，Qt是一个跨平台的应用程序开发框架，它提供了丰富的...

    QT实现网络拓扑图

    QT库是Qt公司开发的一款强大的跨平台应用程序开发框架，它提供了丰富的图形用户界面（GUI）功能，被广泛用于创建美观且功能丰富的应用。在"QT实现网络拓扑图"这个主题中，我们将深入探讨如何利用QT中的QGraphicsView...

    qunee网络拓扑图

    "Qunee网络拓扑图"是一个基于JavaScript和HTML...通过了解和掌握Qunee网络拓扑图，IT专业人员可以提高网络管理效率，快速定位问题，以及规划和优化网络结构。无论是小型企业还是大型企业的网络运维团队，都能从中受益。

    快速开发基于 HTML5 网络拓扑图应用之 DataBinding 数据绑定篇

    在这个"快速开发基于HTML5网络拓扑图应用之DataBinding数据绑定篇"中，我们将探讨如何高效地实现数据绑定，以及利用JSON操作数据，从而满足动态变化的需求。 首先，HTML5作为现代网页开发的标准，提供了丰富的API和...

    WPF拓扑图 Topographies

    "WPF拓扑图 Topographies"指的是使用WPF技术创建的，能够展示多层次、多节点间相互关系的图形化界面。 拓扑图通常包含父节点和子节点的概念，这里的描述"父节点点开有子节点，子节点点开，有子节点的子节点..."揭示...

    c#画网络拓扑图

    在Windows窗体应用程序中，使用C#来绘制网络拓扑图是一项常见的任务，尤其是在系统管理和监控领域。网络拓扑图可以清晰地展示网络设备、服务器、交换机、路由器等元素之间的连接关系，帮助管理员理解网络架构，进行...

    阿里云网络拓扑图

    阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云...

    c#拓扑图

    "TopologyMake组件"可能是一个专门为创建和展示拓扑图设计的库或工具，提供了易于使用的API和接口供开发者调用。 拓扑图在电信网管系统中起着至关重要的作用。它以图形化的方式展示了网络设备、服务器、交换机、...

    java实现拓扑图插件 - 2（已亲测）

    JTopo是由ZKWeb团队开发的一个开源的Java拓扑图库，它提供了丰富的功能来构建动态和交互式的拓扑图。以下是一些关键知识点： 1. **Java编程语言**：Java是一种广泛使用的面向对象的编程语言，具有跨平台性、健壮性...

Magicbox
Global site tag (gtag.js) - Google Analytics