Feed on
Posts
Comments

Last week Axiis, an open source data visualization framework, was released. Axiis is built upon Degrafa, an open source declarative graphics framework, and Adobe Flex 3. Thanks to Nathan Yau for pointing this out in his post “Open Source Data Visualization Framework – Axiis.” There were also great comments to Nathan’s post, including a comparison of Axiis to Berkley’s Prefuse Flare. Flare is also a visualization toolkit, but it is written for Flash in ActionScript 3. For a discussion of Flash, Flex, and ActionScript 3, check out Lee Brimelow post “Flash Builder rebrand FAQ.”

Today we are going to walk through the steps of setting up Axiis on a Linux platform.

Install a Java JDK

Get the Sun JDK 6 from Sun’s website. Sun requires you to agree to terms, so you’ll need to go there and agree. Run the installer which gets downloaded. Agree again to the terms. The installer will install a few rpms and jars.

root# /bin/sh jdk-6u13-linux-i586-rpm.bin
root# ls /usr/java
default  jdk1.6.0_13  latest
root# declare -x JAVA_HOME="/usr/java/latest"
root# declare -x PATH="${JAVA_HOME}/bin:${PATH}"
root# java -version
java version "1.6.0_13"
Java(TM) SE Runtime Environment (build 1.6.0_13-b03)
Java HotSpot(TM) Server VM (build 11.3-b02, mixed mode)

Install Another Neat Tool (ANT)

Apache Ant is a free and open source tool for automating software build processes. It is similar to make but is implemented using the Java language using XML configuration files. It is platform-neutral.

root# cd  /work/src/
/work/src root# wget http://www.uniontransit.com/\
apache/ant/binaries/apache-ant-1.7.1-bin.tar.gz
/work/src root# md5sum apache-ant-1.7.1-bin.tar.gz
cc5777c57c4e8269be5f3d1dc515301c  apache-ant-1.7.1-bin.tar.gz
/work/src root# tar xzf apache-ant-1.7.1-bin.tar.gz
/work/src root# mv apache-ant-1.7.1 /work/software
/work/src root# cd  /work/software
/work/software root# ln -s apache-ant-1.7.1 ant
/work/software root# declare -x ANT_HOME="/work/software/ant"
/work/software root# declare -x PATH="${PATH}:${ANT_HOME}/bin"
/work/software root# ant
Buildfile: build.xml does not exist!
Build failed

The error above indicates that ant command is recognized by shell but it did not find build.xml file that needed to compile ant projects. So, it’s absolutely normal and the installation was successful. We will be creating build.xml files below.

Install the Flex SDK

The Adobe Flex 3.3 Software Development Kit (SDK) includes the Flex framework (component class library) and Flex compiler along with:

  • Automated testing framework.
  • Memory/Performance profiler.
  • Certain components, such as the charting and the AdvancedDataGrid component (the code will work, but a watermark image is layered over it).

Installation is fairly straight forward.

root# cd  /work/software
/work/software root# mkdir flex
/work/software root# cd flex
/work/software/flex root# wget \

http://download.macromedia.com/pub/flex/sdk/flex_sdk_3.zip

/work/software/flex root# unzip flex_sdk_3.zip
/work/software/flex root# export PATH=/work/software/flex/bin:${PATH}
/work/software/flex root# mxmlc --version
Version 3.3.0 build 4852

Test the installation out by creating the traditional “hello world” program. First, under your favorite editor, create the file helloworld.mxml file:

/home/ger/flex root# vi helloworld.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    width="300" height="200"
    horizontalAlign="center" verticalAlign="middle"
    viewSourceURL="src/HandlingEventsEventHandler/index.html"
>
<mx:Panel title="My first Flex application" horizontalAlign="center" >
    <mx:Label fontSize="18" text="Hello, World." />
</mx:Panel>
</mx:Application>

Compile the program:

/home/ger/flex root# mxmlc --strict=true helloworld.mxml
/home/ger/flex root# ls helloworld.swf
helloworld.swf

Use your favorite browser to view the helloworld.swf flash file. You now need to copy the flexTasks.jar file to the ant’s lib folder. The flexTasks.jar file contains the ant task definitions for compiling flex applications.

root# cd  /work/software/flex
/work/software/flex root# cp /work/software/flex/ant/lib/flexTasks.jar \
/work/software/ant/lib

Create a new file build.xml with the following content (make the appropriate changes to FLEX_HOME and APP_ROOT):

/home/ger/flex root# vi build.xml
<?xml version="1.0" ?>
<project name="helloworld" default="build" >
    <property name="FLEX_HOME" value="/work/software/flex/" />
    <property name="APP_ROOT" value="/home/ger/flex/" />
    <taskdef
        resource="flexTasks.tasks"
        classpath="${FLEX_HOME}/ant/lib/flexTasks.jar" />
    <target name="build">
        <mxmlc file="${APP_ROOT}/helloworld.mxml">
            <load-config filename="${FLEX_HOME}/frameworks/flex-config.xml"/>
            <source-path path-element="${FLEX_HOME}/frameworks"/>
        </mxmlc>
    </target>
</project>

From the directory where build.xml file exist, execute ant:

/home/ger/flex root# ant
Buildfile: build.xml

build:
    [mxmlc] Loading configuration file /work/software/flex/frameworks/flex-config.xml
    [mxmlc] /home/ger/flex/helloworld.swf (181669 bytes)

BUILD SUCCESSFUL
Total time: 7 seconds

The flash file helloworld.swf was created when you ran the command ant. As with the make command, you now have a way to specify build options within the build.xml file. See “Talk:Flex Ant Tasks” for a much more detail description of setting up ant to perform Flex tasks.

Eclipse

Eclipse is an open source plug-in—based editor and IDE framework. It does a good job of code editing while allowing third parties to extend its capabilities through modules. We are going to pull down the “Eclipse IDE for C/C++ Developers” bundle, which already contains the CDT (C/C++ Development Tools). Your Java version will need to be 1.5 or higher.

/home/ger/flex root# cd /work/src
/work/src  root# wget http://mirrors.med.harvard.edu/eclipse//technology/epp/downloads/\
release/ganymede/SR2/eclipse-cpp-ganymede-SR2-linux-gtk.tar.gz
/work/src root# tar xzf eclipse-cpp-ganymede-SR2-linux-gtk.tar.gz
/work/src root# mv eclipse /work/software
/work/src root# su - ger
[ger@loxias ~]$ declare -x JAVA_HOME="/usr/java/latest"
[ger@loxias ~]$ declare -x PATH="${JAVA_HOME}/bin:${PATH}"
[ger@loxias ~]$ java -version
java version "1.6.0_13"
Java(TM) SE Runtime Environment (build 1.6.0_13-b03)
Java HotSpot(TM) Server VM (build 11.3-b02, mixed mode)
[ger@loxias ~]$ /work/software/eclipse/eclipse

Max Berger has written a great HOWTO “Setting up Eclipse” that will walk you through using Eclipse.

Aptana

One Eclipse plug-in, Aptana Studio, comes in both commercial and Community Edition. Since you have already installed Eclipse, you can install Aptana as a plug-in directly into your current Eclipse configuration. Follow the directions from the Aptana site.

  1. From the Help menu in Eclipse, select Software Updates …
  2. Select the Available Software tab
  3. Click the “Add Site…” button.
  4. Specify the Location Url update site: http://update.aptana.com/update/studio/3.4/ and click OK
  5. Select the checkbox next to the added update site.
  6. Click the Install.. button.
  7. Complete instruction to install from update site.

If you would like to use the Aptana perspective, navigate and select Window > Open Perspective > Aptana. You will also want to change the default editor.

Flex Builder

Using the Flex SDK is more complicated and involves more work than using Flex Builder. Flex Builder comes with many nice features, such as tag completion, code hinting, built-in API reference manual, automatic importing of libraries, wizards, visual layout and styling, and automatic builds. There is a Flex Builder version for Linux, though it is a plugin-only version and unfortunately development has been put on hold. If you work in the education field, Adobe Flex Builder 3 Pro is available for free under Microsoft Windows and Mac OS X.

To get Flex Builder running on your system is simple:

root# cd  /work/src/
/work/src root# wget http://download.macromedia.com/pub/labs\
/flex/flexbuilder_linux/flexbuilder_linux_install_a4_081408.bin
/work/src root#  /bin/sh flexbuilder_linux_install_a4_081408.bin

At which point, the installation program will walk you through the installation process asking for the Eclipse folder. If you are following this document, the Eclipse directory would be /work/software/eclipse.

/work/src root#  su - ger
[ger@loxias ~]$ declare -x JAVA_HOME="/usr/java/latest"
[ger@loxias ~]$ declare -x PATH="${JAVA_HOME}/bin:${PATH}"
[ger@loxias ~]$ /bin/sh /work/software/Adobe_Flex_Builder_Linux/Adobe_Flex_builder.sh

Once you are running Eclipse, yo may choose the traditional Flex Builder perspective by navigate and select Window > Open Perspective > Other… > Flex Development to change it to the traditional Flex Builder look.

Degrafa

Degrafa is a declarative graphics framework that allows you to draw shapes and objects in your Flex application using an MXML type syntax. Degrafa is required for Axiis. Juan Sanchez in the post “An Introduction to Degrafa” provides a nice introduction.

root# cd  /work/software/
/work/software root# mkdir  degrafa
/work/software root# cd degrafa
/work/software/degrafa root# wget http://degrafa.googlecode.com/files/Degrafa_Beta3.1_Flex3.zip
/work/software/degrafa root# unzip Degrafa_Beta3.1_Flex3.zip
/work/software/degrafa root# cp /work/software/degrafa/Degrafa_Beta3.1_Flex3.swc  \
/work/software/ant/lib

I ran into memory problems with the Linux version of Flex Builder. It may be due to the software being Alpha. For the rest of this document, I will use ant to compile my programs with the idea that I am showing the more difficult method. If Flex Builder is working well for you, the ideas below end up being the same. It is always good to have an idea of what is going on behind a nice GUI application like Eclipse.

Below we walk through pulling down sample Degrafa code and compile the code. Please note that I start using the compiler.include-libraries attribute to specify the Degrafa library needs to be used in compiling the DegrafaPieMenu.mxml program.

root# cd  /home/ger/workspace
/home/ger/workspace root# mkdir ex3
/home/ger/workspace root# cd ex3
/home/ger/workspace/ex3 root# wget http://www.finflex.fi/projects/DegrafaPieMenu/srcview\
/DegrafaPieMenu.zip
/home/ger/workspace/ex3 root# unzip DegrafaPieMenu.zip
/home/ger/workspace/ex3 root# cd src
/home/ger/workspace/ex3/src root# vi build.xml
<?xml version="1.0" ?>
<project name="DegrafaPieMenu" default="build" >
    <property name="FLEX_HOME" value="/work/software/flex/" />
    <property name="APP_ROOT" value="/home/ger/workspace/ex3/src/" />
    <taskdef
        resource="flexTasks.tasks"
        classpath="${FLEX_HOME}/ant/lib/flexTasks.jar" />
    <target name="build">
        <mxmlc file="${APP_ROOT}/DegrafaPieMenu.mxml">
            <load-config filename="${FLEX_HOME}/frameworks/flex-config.xml"/>
            <source-path path-element="${FLEX_HOME}/frameworks"/>
            <compiler.include-libraries dir="${FLEX_HOME}/ant/lib/" append="true">
               <include name="DegrafaLibrary.swc" />
            </compiler.include-libraries>
        </mxmlc>
    </target>
</project>

At this point, use the command ant to compile the program.

/home/ger/workspace/ex3/src root# ant
Buildfile: build.xml

build:
    [mxmlc] Loading configuration file /work/software/flex/frameworks/flex-config.xml
    [mxmlc] /home/ger/workspace/ex3/src/DegrafaPieMenu.swf (247701 bytes)

BUILD SUCCESSFUL
Total time: 8 seconds

Use your favorite web browser top open the file DegrafaPieMenu.swf. With the necessary software and libraries installed, we are finally ready for Axiis.

Axiis

We are going to pull down the Axiis libraries, place them with the Ant libraries, pull down sample Axiis code, setup a build.xml file, run ant, and view the results. We do everything the same as what we have done before.

root# cd  /home/ger/workspace
/work/software root# mkdir  axiis
/work/software root# cd axiis
/work/software/axiis root# wget http://axiis.googlecode.com/files/Axiis_Library.zip
/work/software/axiis root# unzip Axiis_Library.zip
/work/software/axiis root#  cp libs/* /work/software/ant/lib
/work/software/axiis root# cd /home/ger/workspace
/home/ger/workspace root# mkdir axiis
/home/ger/workspace root# cd axiis
/home/ger/workspace/axiis root# wget http://axiis.googlecode.com/files/Axiis_Examples.zip
/home/ger/workspace/axiis root# unzip Axiis_Examples.zip
/home/ger/workspace/axiis root# cd src
/home/ger/workspace/axiis/src root# vi build.xml
<?xml version="1.0" ?>
<project name="LineAreaSeriesExample" default="build" >
    <property name="FLEX_HOME" value="/work/software/flex/" />
    <property name="APP_ROOT" value="/home/ger/workspace/axiis/src/" />
    <taskdef
        resource="flexTasks.tasks"
        classpath="${FLEX_HOME}/ant/lib/flexTasks.jar" />
    <target name="build">
        <mxmlc file="${APP_ROOT}/LineAreaSeriesExample.mxml">
            <load-config filename="${FLEX_HOME}/frameworks/flex-config.xml"/>
            <source-path path-element="${FLEX_HOME}/frameworks"/>
            <compiler.include-libraries dir="${FLEX_HOME}/ant/lib/" append="true">
               <include name="DegrafaLibrary.swc" />
               <include name="Axiis_Library.swc" />
            </compiler.include-libraries>
        </mxmlc>
    </target>
</project>

Trying to compile this with ant/mxmlc, produces an error message stating “/home/ger/workspace/axiis/src/Examples/ExampleBackground.mxml(40): Error: unable to resolve ‘Examples/axiis_logo_shadow.png’ for transcoding“. This is because ExampleBackground.mxml is in the same directory as axiis_logo_shadow.png, but the program specifies it is in “Examples/axiis_logo_shadow.png.” Modify ExampleBackground.mxml to just have embedded in line 40 “source=’axiis_logo_shadow.png’”. In other words, do not include the “Examples/” path.

Compile with the ant command:

/home/ger/workspace/axiis/src root# ant
Buildfile: build.xml

build:
    [mxmlc] Loading configuration file /work/software/flex/frameworks/flex-config.xml
    [mxmlc] /home/ger/workspace/axiis/src/LineAreaSeriesExample.swf (547707 bytes)

BUILD SUCCESSFUL
Total time: 10 seconds

From your favorite web browser, open the file LineAreaSeriesExample.swf to see:

Final Thoughts

Examine the LineAreaSeriesExample.mxml file. On line 40, the data used in plotting the graph is specified with “<mx:String id=”payload” source=”data/LineSeriesData.csv”/>.” Examine the data/LineSeriesData.csv file. This would be the data file that gets generated by your security program. You could always modify the Flex program to access your favorite database. Adobe has a “Simple MySQL to Flex” example. There is also AS3FlexDB, which is an open source library that allows Adobe Flex applications to connect to a MySQL server. Alessandro Crugnola has written “Connect to MySQL in Adobe Flex using AS3FlexDB” to step you through the process. The point is, there are many possibilities. Play around with the different examples and start experimenting with different ways to visualize your security data. It is a great way to learn.

2 Responses to “Setting Up Axiis for Security Visualization”

  1. Tom Gonzalez says:

    @John, great post on setting up Axiis (and Flex) for the complete beginner. We are working on getting and Axiis blog up and running and will link back to this as soon as we do. Once again, thanks for the detailed write up.

Trackbacks/Pingbacks

  1. [...] Information about developments at the Monastery a2a_linkname=”System Advancements at the Monastery”;a2a_linkurl=”http://blog.securitymonks.com/?feed=rss2″; « Setting Up Axiis for Security Visualization [...]

Leave a Reply

Bad Behavior has blocked 666 access attempts in the last 7 days.