Flex

Every once in a while i come across a pretty sweet flash/flex application…and what makes TitleViewer really cool is that it’s free and configurable.

• 
  Overview: http://www.airtightinteractive.com/projects/tiltviewer/


• 
  Demo: http://www.airtightinteractive.com/projects/tiltviewer/app/

[…]

Stacy Young posted a technique for connecting Flex Builder’s debugger to a SWF which is stand alone, or for that matter wrapped in .NET form, or even on a remote website.

In Eclipse or Flex Builder, change your settings to look like this:

Ben Pritchard AKA PixelFumes, put together this cool tutorial for creating AS3 reflections.

I dig that it can also update iself and display video.

http://www.adobe.com/devnet/flash/articles/reflect_class_as3.html

The WSBackgroundPixelSkin is a Flex Component for creating repeating background patterns using CSS and Actionscript.

I dig it.

There is an interesting challenge associated with unit testing flex and working with Cairngorm. This is a because Cairngorm commands implement the IResponder interface which returns the remote services response to the result or fault methods, as opposed to dispatching an event.

For example if you run a unit test to asynchronously load an XML file, you can use FlexUnit's built in addAsync() method and wrap it around your xml onData() method with timeout parameter like so:

asyncDispatcher.addEventListener(Event.COMPLETE, addAsync(onData, 2000)); 

This is all fine and dandy, but what happens when you don't have the luxury of listening for a dispatched event?

Well, the answer is actually simple after you see the solution. We came accross a post that led us to the answer. Assuming you have FlexUnit installed, you must add the following method to

TestUnit.as.

public function addResponder(responder : IResponder, timeout : int, passThroughData : Object = null) : IResponder { if (asyncTestHelper == null) { asyncTestHelper = new AsyncTestHelper(this, testResult); } asyncMethods.push({func: responder.result, timeout: timeout, extraData: passThroughData, failFunc: responder.fault, responder: responder}); return asyncTestHelper; } 

Sorry, the code formatting above is a little funky.

Now, make your Test Case. This example is a simple login that gets returned an XML response of true or false.

package test.command { 
import flexunit.framework.TestCase; 
import flexunit.framework.TestSuite; 
import flexunit.framework.*
 import com.jharbs.business.ServiceDelegate; 
import mx.rpc.IResponder; 
public class TestLogin extends TestCase implements IResponder 
{
private var username:String; 
private var password:String; 
public function TestLogin(method:String) 
{ 
super(method); 
} 
override public function setUp():void 
{ 
username = "username"; 
password = "123456"; 
} 
override public function tearDown():void 
{ 
username = null; 
password = null; 
} 
public function login():void 
{ 
var delegate : ServiceDelegate = new ServiceDelegate(this.addResponder(this, 5000)); 
delegate.Login(username, password); }
public function result ( event : Object ) : void 
{ 
// you need to translate your result here. //
}

in this example we are getting xml back // with a boolean true or false

var x : XML = new XML(event.result) 
var bool : Boolean = (x.text()=="true" || x.text()=="false"); 
assertEquals("Invalid Login Result", bool,true); 
} 
public function fault (event : Object ) : void 
{ } 
public static function suite():TestSuite { 
var ts:TestSuite = new TestSuite(); 
ts.addTest( new TestLogin( "login" ) ); 
return ts; } } }

And then of course your can't forget your Cairngorm Application and TestRunnerBase.

<mx:application creationcomplete="onCreationComplete()" xmlns="*" xmlns:business="com.jharbs.business.*" xmlns:control="com.jharbs.control.*" xmlns:flexunit="flexunit.flexui.*" xmlns:mx="http://www.adobe.com/2006/mxml"></mx:application> <mx:script> <!--[CDATA[ import test.command.TestLogin; import flexunit.framework.TestSuite; // After everything is built, configure the test // runner to use the appropriate test suite and // kick off the unit tests private function onCreationComplete():void { testRunner.test = createSuite(); testRunner.startTest(); } // Creates the test suite to run private function createSuite():TestSuite { var ts:TestSuite = new TestSuite(); // TODO: Add more tests here to test more classes // by calling addTest as often as necessary ts.addTest( TestLogin.suite() ); return ts; } ]]--></mx:script> <!-- =========================================================================== 

Cairngorm Service/Controller

<business:services gatewayurl="http://xxx.xxx.xxx.xxx:8180/tiered/jharbs-api/" id="remoting"> 
<control:jharbscontroller id="controller"> 
<flexunit:testrunnerbase height="100%" id="testRunner" width="100%"> 
</flexunit:testrunnerbase>
</control:jharbscontroller>
</business:services>

SpringGraph is a Adobe Flex 2.0 component that displays a set of items or thumbnails that are linked to each other. The component calculates the layout for the items using an an algorithm based on the size and links of each item, and draws lines to represent the links. These lines can be extended and skinned. The component allows the user to drag and/or interact with individual items, they also float around and have some nice easing effects. Data can be provided in XML or as Actionscript objects. The Roamer component is an extension to SpringGraph for browsing large graphs of 10,000 items.

The docs are up at:

http://mark-shepherd.com/SpringGraph/docs/springgraph-asdoc/

So, i’ve been doing a bit of research lately and playing around with Ruby on Rails.

I always known about, but have never really looked into WebOrb.

These guys are doing some great things and even have a free version of their remoting product which allows Flex to talk to Ruby and pass typed objects back and forth.

There are some very useful tutorials on how to implement the code. This let me to the post about a Ruby on Rails Cairngorm Generator. Might be worth a look considering it can generate some Cairngorm Scaffolding, ie: A ‘command’ and its corresponding ‘event’ can also be generated, as can ‘vo’s and ‘delegate’s.

Here's an example of embedding an XML file, then tracing out data at compile time via actionscript.

The best part is the the XML is compiled into the swf, and you can access any of the XML file's properties by accessing it via the singleton XML Manager.

  [Embed(source="myXMLFile.xml",mimeType="application/octet-stream")] 
public static const XMLFILE:Class; 
public static const MY_XML : XML = setConst(); 
private var cache : Object ;
public var dataXML : XML; 
private static function setConst():XML
{ 
var ba:ByteArray = new XMLFILE() as ByteArray; 
trace("compiling"); 
return new XML(ba.readUTFBytes(ba.length)); 
} 
private static var model : XMLManager; 
public static function getInstance() : XMLManager 
{ 
if ( model == null ) 
{
model = new XMLManager(); 
} 
return model; 
} 
public function XMLManager() 

{ if 
( model != null ) { throw new Error( "Only one XML Manager instance should be instantiated" ); }
 dataXML = MY_XML; cache = new Object(); 
} 

Gotta dig the google finance chart implemented in Flex. One of the developers at Stretch Media created this kickass component. I’m psyched to get into Flex charts…just need a reason.

Here’s the source.[…]

Picnik is a new Flex application that takes the bitmap data classes and runs! Virtually anything that you want to do with an image, it does. Resizing, recoloring, rotating, posting up to flickr, etc. I love the look and feel as well, it doens’t look like a flex app at all. Nice work!

[…]