Setting up Xray for Flex SDK debugging in Ubuntu
I’ve just managed to get Xray to work, a great debugger. Xray needs two things to work, the connector which is a .swc you include in your AS3 code and the shockwave which will be connecting to, and communicating with, the connector.
So, after doing svn checkout http://osflash-xray.googlecode.com/svn/trunk/ in my /opt/flex_projects/xray folder I created the following ANT build file in /opt/flex_projects (see the first piece in this series for more info on ANT):
<?xml version="1.0" encoding="utf-8"?>
<project name="xray" default="xray" basedir=".">
<property name="LOCALE" value="en_US"/>
<property name="FLEX_HOME" value="/opt/flex/"/>
<property name="asdoc" value="${FLEX_HOME}bin/asdoc.exe"/>
<taskdef resource="flexTasks.tasks"
classpath="${FLEX_HOME}ant/lib/flexTasks.jar" />
<tstamp>
<format property="year" pattern="yyyy" locale="en"/>
<format property="datetime" pattern="EE MMM d yyyy h:mm aa"/>
</tstamp>
<property name="name" value="xray"/>
<property name="xray.src" value="${basedir}/xray/trunk/as3/trunk"/>
<property name="build.dir" value="${basedir}/xray_build"/>
<target name="prepare">
<mkdir dir="${build.dir}"/>
</target>
<target name="xray" depends="prepare">
<path id="xray.files">
<fileset dir="${xray.src}">
<include name="**/**"/>
</fileset>
</path>
<pathconvert
property="xray.classes"
pathsep=" "
dirsep="."
refid="xray.files">
<map from="${xray.src}/" to=""/>
<mapper>
<chainedmapper><globmapper from="*.as" to="*"/></chainedmapper>
</mapper>
</pathconvert>
<compc output="${build.dir}/xray.swc" include-classes="${xray.classes}">
<source-path path-element="${xray.src}/"/>
</compc>
</target>
</project>After running ant -f build_xray.xml I got the xray.swc in /opt/flex_projects/xray_build. I promptly copied it to /opt/flex/frameworks/libs.
Download the swc if you’re too lazy.
This enabled me to run the following build file for my current Flare visualization:
<?xml version="1.0" ?>
<project name="WordTrends" default="build" >
<property name="FLEX_HOME" value="/opt/flex/" />
<property name="APP_ROOT" value="/opt/flex_projects/" />
<taskdef
resource="flexTasks.tasks"
classpath="${FLEX_HOME}/ant/lib/flexTasks.jar" />
<property name="build.dir" value="${basedir}/flare/build"/>
<target name="build">
<mxmlc file="WordTrends.as" output="WordTrends.swf">
<source-path path-element="/opt/flex_projects"/>
<compiler.library-path dir="${build.dir}">
<include name="flare.swc"/>
</compiler.library-path>
<compiler.library-path dir="${FLEX_HOME}frameworks/libs">
<include name="framework.swc"/>
<include name="xray.swc"/>
</compiler.library-path>
</mxmlc>
</target>
</project>The relevant AS3 code looks like this:
package {
. . .
import com.blitzagency.xray.inspector.Xray;
import com.blitzagency.xray.logger.XrayLog;
. . .
[SWF(width="1000", height="450", backgroundColor="#ffffff", frameRate="30")]
public class WordTrends extends Sprite{
. . .
public var xray:Xray = new Xray();
public var log:XrayLog = new XrayLog();
. . .
public function WordTrends(){
addChild(xray);
var data = getTimeline();
visualize(data);
}
public function getTimeline():Data{
. . .
log.debug("tmp", jsonData);
. . .
}
}
}If you’re interested in the actual AS3 creating the visualization (which I’ve omitted above for clarity) you can check out the prior tutorial in this series.
So, we’re including the main Xray connector and the XrayLog, next we create public instances and add xray to the scene. That will enable us to output various objects in a print_r style fashion inside the Xray.swf (via the log.debug call at the end there).
So you start the Xray window by doing ./flashplayer Xray.swf and after you’ve compiled your project you go ./flashplayer myfile.swf and you should see stuff happening in your Xray window.
Related Posts
Tags: Actionscript 3, AS3, flex, flex sdk, xray