Home >
One of the projects that I am actively involved with at Cynergy Systems has recently gone gold, and into production. This is a brief case study how Adobe Flex was used to visualize complex data relationships for computer network topologies for ScienceLogic's EM7 Network Management appliance.
From www.sciencelogic.com...
ScienceLogic's EM7 Network Management provides a consolidated network monitoring system for all network devices, regardless of manufacturer. Using EM7 helps network engineers to maximize availability and optimize performance of the network.
The EM7 product is a network appliance device that will dynamically discover and map computer network topologies, monitor and manage network events, track issues, and provide robust network reporting and usage statistics. It's very powerful application, and you can find out more about it here: http://www.sciencelogic.com/network.htm.
Cynergy Systems was brought in to help with the task of visualizing complex computer network topologies in a web interface. Adobe Flex was the answer. The Flex framework provides everything that you need to dynamically load and render complex socially related data structures . Note: This entire application is not Flex. Flex was used alongside of a very sophisticated AJAX application to render the data mappings and augment the capabilities of the system.
The Flex framework provided all of the necessary capability to setup a data monitoring framework for the application. The flash player provided all of the graphics capability to efficiently render the data dynamically. Since the data represents a computer a network topology, something like an org-chart would not suit. Nodes can have multiple connections to multiple segments, and are related socially, instead of hierarchically. Flex enabled us to build this component and make it completely interactive.
In brief, the Flex mapping components monitor data from the system and update themselves based on the data. Everything within the application is color coded, and everything has semantic meaning. Different colors represent different status for both network nodes and links. Everyone's heard the phrase "a picture is worth a thousand words", and this is a perfect example of how we were able to leverage Adobe Flex to visually convey a very large amount of data in a precise and easy to understand manner.
Tag Cloud
Podcasts & Screencasts
@InsideRIA on Twitter
Follow InsideRIA on Twitter
Facebook Application Development
Hey Andrew that's pretty cool! I really like the look of UI! I was wondering if you could share info on a couple things. 1) how did you come up with the design of the UI 2) could you talk a bit more about the integration with the Ajax parts of the UI. I'm really curious how and why people and mixing RIA technologies. I think it's going to become more and more popular, especially with platforms like AIR that make it so simple.
Side note the look and feel remind me of the New York Talk exchange project by MIT. http://senseable.mit.edu/nyte/
Keep sharing the cool projects you're working on!
Thanks Andre! I can't take credit for the overall application UI... Just the Flex visualization piece of it. There are some cool things with the UI that you can't see in this screenshot. First, the entire UI is customizable. The user can customize the branding of the application to match their own brand. This includes theme colors, logos, background images, etc... The UI of the flex component basically reads the configuration of the server skin, and displays itself accordingly. It was also very important for the Flex component to have symbols for each node (the node icons), and to have a color scheme such that the color-coding of links and nodes stands out, and does not blend in with the background.
The biggest reason for integrating with the AJAX system is that the AJAX system already existed. We were just leveraging the Flash player for what it does best: render graphics. Rewriting that entire application in Flex would have been a huge undertaking. What was already built works great, and we just wanted to make the experience that much better by adding the visualization components...
The AJAX and Flex components communicate directly with each other through ExternalInterface and JavaScript, and the Flex application also communicates directly with the backend.
I was thinking on a similar UI to show relations between pieces of information. Is this all MXML or did you need Flash (Flex Component Kit) ?
It was all built using Flex. It is not all MXML, however it does not need the Flash IDE or the component integration kit.
Very cool, thanks for the clarification Andrew. I'm curious as to whether or not you considered using the FA Bridge?
It isn't dispatching any events or doing any direct Flex/JavaScript component communication that would require FABridge, so we decided not to use it. There is some basic interaction with JavaScript using ExternalInterface, but no direct communication between components.
Hi Andrew,
I am tasked to do exactly the same thing: visualize network topology and display realtime statistics.
I want to ask a question if you don't mind. For the node arrangement, did you use any third party layout library? If so can you share with me which one you used? If you hashed it out all by yourself, please also let me know so that I know it is humanly possible.
Thank you.
Hi Alex,
Its definitely possible. I came up with the algorithms myself. All I'm at liberty to say is "Good luck!"
Hi Andrew,
The application looks great. What base class did you use for drawing the different network components? Is it a simple canvas, or something more sophisticated like a MovieClip? Can you drag the icons around?
I want to do something similar in an application but I don't know where to begin! Thanks.
I'd like to use something like this as well, not with live data, but with a webservice fetching data from a PHP source, would be great if you could explain a little more on how you managed this.
Didn't find a demo version of this, is there one around?