Flex 3 network monitor

The network monitor, built by WASI, is a demo application which displays devices on a network in multiple views. The three views are network topology, device type, and grid. Each device thumb uses LiveCycle Data Services ES to display real-time data and allows a user to click it for additional drill down data. In lieu of a database, data is loaded on the server from an XML file which contains layout and initial device information. Pushed data is randomly generated on the server.

• Experience the application

To download and view the full source, right-click the Flex application and select View Source from the context menu.

File and folder descriptions

• build.xml - ANT file used to build the Java classes.
• main.mxml - The main application file.
• FeedAdmin.mxml - Used to stop and start the pushed data feed.
• /assets/ - Contains image assets and a css file used to style the application.
• /classes/ - contains the compiled Java classes.
• /com/ - Contains ActionScript and MXML classes.
• /data/ - Contains the XML data file. XML is loaded on the server and is used in place of a database.
• /images/ - Contains images loaded at runtime.
• /src/ - Contains Java classes.

Flex Builder setup

If you would like to build the project in Flex Builder, be sure to add the following SWC files to your project library path by going to Project > Properties > Flex Build Path > Library path.

• WEB-INF/flex/user_classes/Cairngorm.swc
• WEB-INF/flex/user_classes/CairngormEnterprise.swc
• WEB-INF/flex/libs/fds.swc

Installation instructions

• Install LiveCycle Data Servcies ES.
• Unzip the contents to a web application which has LiveCycle Data Service ES running.
• Copy the "/classes/" directory to WEB-INF.
• From the download specified above, copy Cairngorm.swc and CairngormEnterprise.swc to WEB-INF/flex/user_classes/.
• Add the following to the <service> tag in WEB-INF/flex/remoting-config.xml.<destination id="networkMonitor">
<properties>
<source>com.esria.samples.networkMonitor.NetworkMonitor</source>
</properties>
</destination>
• Add the following to the <service> tag in WEB-INF/flex/messaging-config.xml.<default-channels>
<channel ref="my-rtmp"/>
</default-channels>
<destination id="feed">
<properties>
<network>
<session-timeout>0</session-timeout>
</network>
<server>
<max-cache-size>1000</max-cache-size>
<message-time-to-live>0</message-time-to-live>
<durable>false</durable>
</server>
</properties>
</destination>
• Start your Java application server.
• Go to http://localhost:{port}/{context-root}/main.mxml.

Flex framework features

The first thing you notice when viewing this application is the way the various elements are laid out. This is done by having a single Canvas that has an assignable layout manager. As the layout manager repositions elements, effects are used to provide context to the user and indicate that all of the data remains available. In examining the code closer you'll see that WASI chose to use the Cairngorm framework which provides a standard mechanism for organizing the various logic used within the application. For data access the network monitor uses both RemoteObject and Messaging. While this sample uses LiveCycle Data Services it could have been done with BlazeDS as well. Finally you can note that there is extensive use of styles and custom skins within the application.

Note: You may use the sample code in your products, commercial or not.