If you’ve ever had the pleasure (cough) of developing custom Xcelsius (XC) components then you know it’s synonymous with the arcane days of the early 2000s and developing Flash applications — no real debugging tools to speak of and traditional enterprise devs that were trying to get into the Flash game were left playing with a black box at runtime — it was incredibly painful and we were left up to our own innovative devices when it came time to perform runtime debugging.

So now I find myself coming back full circle to these “techniques” when trying to debug Xcelsius custom components, as there’s no real way to actually debug these suckers once you’re out of FlexBuilder and running them in the Xcelsius IDE, and for some reason SAP doesn’t feel the need to help developers be successful when dev’n custom components and provide tools like this, not to mention that the docs are…uhmmm…lacking at best???…but I digress…so without further delay, here’s one of my debugging tools called the Xcelsius Custom Component Logger, which is basically a revamp of the same logger I created to debug Flash apps at runtime waaaaay back…think Flash 5 or 6 when the LocalConnection was introduced into AS…anyone else remember these days?

The LocalConnection (LC) logger  consists of 2 parts:

1. A SWF with a LC that receives messages — ie, logs statements — and displays them in a simple TextArea.
2. A Logging Framework that provided basic logging methods you’d expect (debug, info, warn, error, and fatal) with a LC sender that pushed these messages to the receiving SWF

Since the logger leverages the basic Flex logging framework, it should seem pretty familiar — here’s how to get started:

1. Import the XCLoggerLibrary.swc into your XC Custom Component project.
2. Add a private static reference of your logger (example below).
3. Create some log statements in your app…maybe some in your custom property sheet and some in the custom connector/uicomponent that you’re creating.
4. Fire up the XcelsiusLogger.swf
5. Open up XC with the Logger still open and you should start to see log statements (assuming you put log stmts in your XC Custom Component) when working in custom component property sheets (since they are just Flex apps); you’ll also see the log statements when previewing your XC app.

Quick Example

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml"
	creationComplete="this.init()">

	<mx:Script>
		<![CDATA[

			import com.webappsolution.xcelsius.logging.LocalConnectionLog;
			import mx.utils.ObjectUtil;
			import mx.logging.ILogger;

			// NOTE: Must have this line in to create an instance of the logger -- pass it the
			// name of the class it's debugging.
			private static var logger:ILogger = LocalConnectionLog.getLogger(XCLoggerTEST);

			private static const TEST_VALUE:int = 101;

			private function init():void
			{
				// all log levels
				logger.debug("init");
				logger.info("init");
				logger.warn("init");
				logger.error("init");
				logger.fatal("init");

				// testing sptting out a quick var
				logger.debug("init: TEST_VALUE = " + TEST_VALUE);

				// sometimes I spit out the entire contents of an object to see what's in it
				// ...especially when working with the XC API
				var person:Object = {firstName:"Brian", lastName:"Riley", age:31, colors:["red", "blue"]};
				logger.debug("init: person = " + ObjectUtil.toString(person));
			}

			private function onSubmitClick(e:MouseEvent):void
			{
				var firstAndLastName:String = this.firstNameTextInput.text + " " + this.lastNameTextInput.text;
				logger.debug("onSubmitClick: firstAndLastName = " + firstAndLastName);
				this.firstAndLastNameLabel.text = firstAndLastName;
			}
		]]>
	</mx:Script>

	<mx:Form width="100%" defaultButton="{this.submitBtn}">

		<mx:FormItem width="100%" label="First Name" required="true">
			<mx:TextInput id="firstNameTextInput" />
		</mx:FormItem>

		<mx:FormItem width="100%" label="Last Name" required="true">
			<mx:TextInput id="lastNameTextInput" />
		</mx:FormItem>

		<mx:Button id="submitBtn" label="Submit" click="onSubmitClick(event)" />

	</mx:Form>

	<mx:Label id="firstAndLastNameLabel" />

</mx:Application>

I find this tool really helpful when debugging the Custom PropertySheets for XC Components, as you can easily write test harnesses for the actual custom connection and custom UI components and debug in FlexBuilder.

Finally, it’s nothing fancy, but it at least allows you to see what’s going on once you’re in the Xcelsius IDE — I probably could have used one of the LC loggers on OS Flash like LuminicBox.Log, but I decided to just roll my own since I had it lying around on an old hard drive Oh, and I could’ve made this an AIR app, but leaving it as SWF suits my needs just fine.

Assets

• XCLoggerLibrary.swc
• XcelsiusLogger.swf
• Example Flex App With XCLogger

Any questions?

NOTE: Since this uses LC under the covers you can’t have multiple instances of this running at once, as I’m using the same ID.

Tweet This Post