From January to September of 2011 I was the sole front end developer for a new global financial application built from scratch for a Hong Kong based company called Investlab. Created as a cost effective solution for bankers and their clients to access global markets, it was architectured in a very modular way, with nearly all areas as self contained widgets that could exist in any configuration; working alone or inter messaging other widgets.

The backend architecture used JMS brokers, ActiveMQ and STOMP for messaging, keeping everything in cache rather than as database objects. Passing data through a socket connection to the front end, Flex utilized a number of very interesting frameworks to allow a very quick and clean modular approach.

PureMVC and it’s subset Fabrication allowed me to create Flash a multi-core (a sort of multi-singleton approach) application using multiple flex modules built from the same value objects, models and interchangeable views while retaining their own controllers. PureMVC’s multicore has a utility called ‘Pipes’ (think plumbing) that allows the modules to communicate, but Fabrication really came in handy as it did all the heavy lifting of ‘fabricating’ the piping structure; allowing one to send messages from one module to another with ease. For example if moduleA wants to send a message to all modules within the main application it would do so as “*” and all modules could receive that message if interested; if moduleA wanted to communicate with moduleB it could do so as a named module (i.e. “/modules/moduleB”). Or multiple instances of the same module could receive a message sent to ‘/infoModules/*’ etc.

Programming as modular widgets allowed us to revisit exactly how the user would interact with the system easily, and within this short time frame there were a number of developmental changes and tests. Taking a bit of the unused Verizon interface I tried to sketch out some ideas on how the application could function, this one based on initial ideas given to me.

I was also asked to mock out a version the way I thought would be best, in this case I thought a tablet / iPad application would work really well.

The demo at this point is nearly a full featured product, saving data to the cache and taking orders through the rules.
The ability to create users and accounts, attribute them to a firm, give each account a base currency and country. Users can trade on multiple accounts, tracking orders, lots and balances. A user can look up symbols on multiple exchanges under multiple currencies, seeing historical data or recent news articles on the symbol before putting in an order.

Mix Client Demo from G Schafer on Vimeo.

From June to October of 2010 I worked on a really interesting project that a whole new spin on the hiring process: Unrabble. What made this so interesting was the way it automated the hiring process to cut down on the time spent shifting through a ream of resumes. In a way, it’s like the ‘iTunes of job boards’ as it ranks candidates based on skills that the hiring manager decides are most valuable — so if you’re looking for that mysql admin with java skills and cobol experience, that applicant would be pinned to the top of the heap.

It also incorporates google searches and social media sites such as Facebook and LinkedIn directly in the hiring process as applicants’ experience and information would be right there for the hiring manager to see. Along with a great visual timeline of experiences is what they call ‘Brags’ — little boasts about achievements (i.e. “I singlehandedly brought in 3 million of revenue to my company”) — the candidate can ask colleagues to confirm as true and verified bring a whole level of micro-referencing to the application process. It’s quite brilliant actually.

Even at the onset of the application process from the applicant’s perspective Unrabble asks all those questions that aren’t *directly* part of a job but have a huge bearing on a company culture — if they prefer to work in large vs smaller companies, or what they’re passions lie.

Much like iTunes the hiring manager can continually rate an applicant through questions and interactions, changing needs of the job, sharing an applicant’s information with a colleague or finally through meeting. The best candidate will always bubble up to the top.

The interest in Unrabble has been hot; along with being named one of the hottest startups at DEMO Fall 2011, the Next Web named it as one of their favorite startups. It’s also been featured in the Financial Times, Venture Beat and Portfolio — you can read more about these at Unrabble’s blog.

Here’s Kevin Watson speaking at DEMO Fall 2011:

or take a look at all the examples of use on their YouTube channel.

Another app created for Scribelabs and their customers – the Advertising Research Foundation. A sort of ‘iTunes in the sky’ this Flex app allowed authenticated subscribers to either stream and view ARF content or download to their iPod. Fun little example done in Flex and using custom TileList renderers…

More information can be read at scribelabs.com

Can’t write it as well as described on Scribelabs’ site: “Podium offers browser-based, live multistream broadcasting and videconferencing. Built on Adobe technologies and delivered via Flash Media Servers and CDNs such as Limelight Networks, Podium is used for small geographically dispersed meetings and large-scale event broadcasts.”

A Flash / Flash Media Server / CDN mashup that allows the virtual meetup to be streamed across the web in real time…for more information check out the pages at scribelabs:http://www.scribelabs.com/software/scribelive/

Hmm – this looks interesting:  advanced data vis components for Flex – Diagram, Timeline, Gauges and Maps with spark-like renderers (mxml).

IBM ILOG Elixir 3.0 beta | RIAgora.

I’ve not posted on a number of interesting tech developments of late (Adobe vs Apple) and what that means for third party iPhone / iPad compilers (appcelerator’s Titanium, Elips from openplug, Unity3d) — but I’ve been extremely busy working on a few websites utilizing WordPress and writing some custom widgets and plugins utilizing the fantastic jQuery.

I’ve been blown away getting under the hood with WordPress and jQuery – creating custom post types, smart widgets and who knows what madness — and it’s definitely something I’ll be doing a lot more. I had been looking at drupal for these two websites but it’s definitely way more granular than I needed for these two gigs.

I’ve got some Flex players I’m finishing up as well and a lot more data wrasslin’….

A few good videos by Doug Winnie showing the steps from inception, wireframing to handing off the UI to a developer:

All the episodes can be found here.

Numerous links to Adobe Air tutorials – getting started, best practices and how to’s — can be found here.

Mike Morearty, developer of the Flex Builder team listed all the macros available in Flex Builder here:
http://www.morearty.com/blog/2007/01/24/macros-that-are-available-in-html-template-files/


${project}
The name of the project, e.g. MyProject.
${application}
The name of the application, e.g. MyApp.
${version_major}
The major version number of the version of Flash that is required to run this app, e.g. 9 for version 9.0 r28. You can change this and the other ${version_...} macros by going to Project > Properties, then â??Flex Compilerâ? or â??ActionScript Compiler,â? and then changing the player version number in the â??HTML wrapperâ? section.
${version_minor}
The minor version number of the version of Flash that is required to run this app, e.g. 0 for version 9.0 r28.
${version_revision}
The revision number of the version of Flash that is required to run this app, e.g. 28 for version 9.0 r28.
${build_suffix}
This is equal to "-debug" when building the debug version of the SWF, and "" when building the release version.
${swf}
The name of the SWF, not including the .swf extension, e.g. MyApp or MyApp-debug. This is essentially a convenience macro which is equivalent to ${application}${build_suffix}.
${bgcolor}
The background color of the application, as specified in the backgroundColor attribute of the tag, or, in the case of ActionScript-only projects, in the backgroundColor field of the [SWF] metadata attribute of the main application class, e.g. [SWF(backgroundColor="#ffffff")] public class MyApp extends Sprite (see this post for more information on setting the width, height, and background color of an ActionScript project). The result is in the form #rrggbb, e.g. #ffffff. This can actually be a little tricky to use, because by default, the background of a Flex app is actually a gentle gradient from one color to another; if you want the HTML background to match the background of your Flex app, you may need to fiddle with both the backgroundColor and backgroundGradientColors attributes of the tag.
${width}
The width of the application, as specified in the width attribute of the tag, or, in the case of ActionScript-only projects, in the width field of the [SWF] metadata attribute of the main application class, e.g. [SWF(width="300", height="400")] public class MyApp extends Sprite.
${height}
The height of the application, as specified in the height attribute of the tag, or, in the case of ActionScript-only projects, in the height field of the [SWF] metadata attribute of the main application class, e.g. [SWF(width="300", height="400")] public class MyApp extends Sprite.
${title}
The title of the application, as specified in the pageTitle attribute of the tag, or, in the case of ActionScript-only projects, in the pageTitle field of the [SWF] metadata attribute of the main application class, e.g. [SWF(pageTitle="flex r00lz")] public class MyApp extends Sprite.


Adobe recently announced that Flex will now be known by Flash Builder; my feelings about this are mixed however.  There were many times I had to explain the differences between Flex and Flash (and, saying ‘Flash’ in that sentence I mean the capital ‘F’ Flash CS4 authoring vs the little ‘f’ flash which is the compiled output), as well as explain in the end that there really WAS no difference as it was all flash in the end (note the little ‘f’).

But at the same time being an old Macromedia Director developer who remembers when Flash was still FutureSplash, was part of the Flash 3 and 4 beta team and was one of the first using Flash inside of Director for my work for Marvel — I still shy away from saying I ‘do Flash’.  Why? Because my experience with Flash (big ‘F’) as an authoring environment has been painful to say the least.  FutureSplash originally was just a little vector graphics drawing and animation package; there was never really any room for any scripting other than the most simplest imaginable.  When Macromedia bought it and renamed it Flash, Actionscript 1 was things like the old ‘goto(20)’ stuff; Flash was still very much an animations package and tied down to the use of a timeline.  Even coming from Director – where one could use the MessageWindow to create objects in memory and manipulate them without ever committing anything to a script as such (and common now with things like Ruby and the irb) Flash seemed like a step BACKWARDS.  Director had objects – Flash didn’t.  Director had bitmaps. Flash didn’t. Vector graphics? Really? Why then was Photoshop the standard and Illustrator not so much?

But for the web, Flash started to grow, to overtake it’s big brother. Now I could go off on Macromedia’s choices in this and why this happened (the difference with the plugin installs, Director’s unfocus in regards to platform, it’s shirking of really interesting technologies such as Beatnik which I have strong opinions about, how Macromedia just kept glomming onto a busted engine without re-writing it) but irregardless of grandpa’s tirades, it DID happen.  Flash became the standard, and I left Director behind. But it was painful; having seen what an (almost real) programming tool could offer, Flash 4/MX/CS3 was just…urrrgh.

But then I picked up Flex and it was …. different. In some ways I’d say it was BETTER than Director — ok in a LOT of ways. Here was a true programming language (either with ActionScript3 or MXML), and EXTENSIBLE in ways that Director never was. A real skinnable interface.  Things that originally were first in Director (bitmapData) were now in Flash. Now once in awhile I do still miss the MessageWindow but on the whole, I’ve drunk the Kool Aid and found that it was good…

At AdobeMax in 2007 I got to see what was coming – Gumbo (Flex 4) looked fantastic, and Thermo took photoshop and allowed designers to add the rudimentary logic to an interface. I’ve been waiting…

And so Gumbo — I’m sorry, Flex 4 — I’m sorry, Flash Builder beta has just been released.  And I’m still drinking the Kool Aid.  I’ve had a little bit of a poke around it today (I’ve got work I gotta do!) and there are some really cool things I’ve found..

First off, while scripting I found you were given hints and additional information while adding components; this will save time if a developer just needs some quick information rather than have them open up the full help. Another huge time saver is having the IDE generate additional functions automatically either while scripting or in a component’s properties window for all the scriptable items.

Themes are huge as well – especially after developers like Juan Sanchez of ScaleNine and Degrafa fame brought Flex’s skinning engine the attention it deserved.  Though I really don’t like the new default ‘spark’ theme (it seems like we’ve gone back in time to retro computer land) support for the extension, creation and packaging of themes are stronger than ever.  Working hand in hand with Flash Catalyst the skins output can be selected with Flash Builder’s new theme browser, with single items still being customizable.

I’ve yet to really play yet though; I want to dive into the CSS support; I was confused by the previous incarnation of Gumbo’s CSS editor — it seemed as if one couldn’t get to the visual representation of the ui elements as one could in Flex 3, but it might have been my bunglings… I had a weird issue with this version of Gumbo – the Flash Builder beta — when ‘tab’ wasn’t finishing the autocomplete, but was instead tabbing out of eclipse, but again, suppose that was my fault as well…

Strangely enough, I’d probably have more time for play from work if I was using ‘Flash Builder’ – as I’m dealing with skinning issues in Flex 3. The universe mocks me.

A quick test of the current Flex interface for iDesign communicating to the Creston control system 2 states away..
Using the Flash Crestron SDK, no longer is e-Control tied to a windows only system. Created in such a way that the subcomponents listen for their own joins, the Flex UI loads in the XML that is created by the installer and displays the proper devices listening on the system.

The amp audio channel templates are programmed in such a way that it is repeated for the amount of audio channels the amplifier has; iDesign created the joins in such a way that the channels are iterated 21+ for every channel so that the system can ‘find’ itself.

Added more flexified goodness for the Flex to Crestron interface I’m building for Abercrombie and Fitch that I described here.I have to say, being an old Macromedia Director guy  that migrated to Flash (grumpily as the world did) I find Adobe Flex to be …well… it’s a joy to work with; I’ve actually become very excited about coding again.

I’m working on a Flex front end talking to a Crestron backend – and one of the things we’re doing is creating templates of different devices, one being a family of Crown amplifiers, each of which might have 2, 4 or 8 channels of audio to display. Each channel starts out with a Crestron join, but the next channel up it’s join begins at 21+ from the previous channel’s (if you know Crestron you’ll know what I mean).

What I love about the extensibility of Flex and it’s MXML Components: I’ve created one channel with all it’s internal joins as private properties. The parent amp template has only one property it needs to keep track of – channelCount – and I instantiate channels on the fly and only tell them their channel – both to display information (ie ‘Channel 1′) but also so each channel can remap it’s internal joins to send and receive the correct information – ie (channel-1) * 21 basically gives each channel’s subitem it’s join. All they have to do now is listen to the Singleton I’ve created for communicating to Crestron and they get their values by the event broadcast. Very cool. Also have to add I love how easy it is to make things pretty. Just these few lines:

Give me these nicely animated volume controls by merely controlling the height of the mask.

http://www.axelscript.com/2008/04/02/introducing-acjeditor-its-a-rte/

* sung to the tune of  "Lovely Rita" by The Beatles.  Yeah, ok - doesn't make it any funnier...

David Deraedt created this nifty little Air/Flex app for administrating your SQLite databases — helpful for developing your own Air applications. How very meta.

Looking at older code I could see that the FCSubscribe was being polled – but I couldnâ??t understand why the new code in Flex not using this FCSubscribe would work with our own FMS servers, but not with Limelight.

I tried looking up what the problem could be via google but found nothing. I asked the flexcoders list but was pretty much ignored. Through searching Flex blogs, I found John C Bland II, who recently left Limelight as an AS3 coder.

John was kind enough to explain to me that the real problem was how FCSubscribe works with Edge Servers:

A normal FMS install is just a straight up 1 server install. A CDN install uses edge servers which means there is an origin server with many other servers on the â??edgeâ? that communicate back to the origin. In order to connect to the proper stream, an FCSubscribe has to be called. That call basically calls the edge server which does a â??searchâ? to find the stream. Thatâ??s why you have to do the â??timerâ? trick to continuously ping to see if the server found the stream yet. My method isnâ??t a timer. It is with â??connected callsâ?. So, try to connect (subscribe), if it fails, wait 1 second (setInterval) and subscribe, if it fails, wait 1 second again and subscribe. Do that over and over until the maximum amount of connects is reached. Of course before each setInterval I clearInterval so I donâ??t have multiple running at once. You get a pretty much immediate response from the server so you can get away with firing off multiple setIntervals/subscribes but it could get hairy. I prefer to try and only try again if it fails (with a 1 second pause between the retries).

Kind enough to show me some example code, I changed it just a tad to fit in the way I was calling it (and I believe Iâ??ll make it into a subcomponent as part of the cleanup:

private var connection:NetConnection;

private var stream:NetStream;

private var video:Video = new Video();

private var vidTimer:Timer;

private var _fcSubscribeCount:int = 0;

private var _fcSubscribeMaxRetries:int = 3;

private var _fcSubscribeInterval:Number;

public function videoInit():void {

connection = new NetConnection();

connection.client = this;

connection.addEventListener(NetStatusEvent.NET_STATUS, videoStatusHandler);

connection.addEventListener(SecurityErrorEvent.SECURITY_ERROR, vidSecurityErrorHandler);

connection.connect(streamURL);

}

private function subscribe():void{

connection.call(�FCSubscribe�, null, streamName);

var nsClient:Object = {};

nsClient.onMetaData = ns_onMetaData;

}

public function onFCSubscribe(info:Object):void{

switch(info.code){

case â??NetStream.Play.StreamNotFoundâ?:

clearInterval(_fcSubscribeInterval);

if(_fcSubscribeCount >= _fcSubscribeMaxRetries){

_fcSubscribeCount = 0;

}else{

_fcSubscribeCount++;

//subscribe failed; wait 1 second then try again

_fcSubscribeInterval = setInterval(subscribe, 1000);

}

break;

case â??NetStream.Play.Startâ?:

_fcSubscribeCount = 0;

clearInterval(_fcSubscribeInterval);

connectStream();

break;

}

}

private function videoStatusHandler(event:NetStatusEvent):void {

//Alert.show(event.info.code);

switch (event.info.code) {

case â??NetConnection.Connect.Successâ?:

subscribe();

break;

case â??NetStream.Play.Startâ?:

//Alert.show(�netstream play start�);

break;

case â??NetStream.Play.StreamNotFoundâ?:

//Alert.show(�Stream not found: � + streamName);

break;

}

}

private function vidSecurityErrorHandler(event:SecurityErrorEvent):void {

Alert.show(�securityErrorHandler: � + event);

}

private function connectStream():void {

var nsClient:Object = {};

nsClient.onMetaData = ns_onMetaData;

stream = new NetStream(connection);

stream.addEventListener(NetStatusEvent.NET_STATUS, videoStatusHandler);

video.attachNetStream(stream);

stream.play(streamName);

stream.client = nsClient;

uic.addChild(video);

uic.addEventListener(ResizeEvent.RESIZE, resizeVideo);

video.width= uic.width;

video.height = uic.height;

}

private function resizeVideo(ev:ResizeEvent):void{

video.width = uic.width;

video.height = uic.height;

}

** originally posted at scribemedia