Among other things Crayons has a built in data binding framework which we’re open sourcing today. Data binding in crayons in based on Signals where an object dispatches a specialized ChangeSignal whenever a bindable property changes, for example the setter of a bindable property data in SomeModel object would look like this …

When an object signals a change in a property it has to pass in the old value of the property and the new value of the property. Unlike Flex, there is no [Bindable] metadata tag, an object can make one of its properties bindable by dispatching a ChangeSignal whenever that property changes. The ChangeSignal implementation is inspired by Jackson Dunstan’s TurboSignals instead of Rob Penner’s more flexible AS3Signals library because using a specialized signal made sense in this scenario .. just like flex, signaling a change in a property is something we do a lot in a crayons application, for example to signal change in model data or change in the property of a component, for data binding etc. so taking advantage of the speed of a specialized signal seemed reasonable. Also this especially helps data binding, since a Binding is really an implmentation of a ChangeSlot and Jackson’s already shown that such specialized slots are extremely fast. While in most cases its hard to justfy implementing a Slot interface just to add a listener and I would almost always go with adding a function listener, but in case of data binding since this is only used internally within the binding framework and the user of data binding is not bothered with it, implmentating a ChangeSlot was perfectly reasonable.

Now to use crayons data binding you can use a Binder object to bind a source ChangeSignal to a target property as follows …

The Binder class provides some other interesting apis to remove binding or to check if a binding exists. This binding implementation is heavily inspired from Eric Feminella’s implementation where he’s used as3signals. I refactored it for use with ChangeSignal and ChangeSlot and changed some other APIs for our needs.

That’s about it, you can get the complete crayons binding framework source code here on Github, do let me know what you think, any feedback would be very welcome.

Finally, I want to say thank you to Jackson Dunstan, Eric Feminella and Rob Penner who’s great work and research helped me implement this. I’ll buy you guys beer whenever we get a chance to meet

Update: Troy further improved his class here

***

Today, I needed to create a preloader for a pure AS3 application compiled with mxmlc. I couldn’t find much documentation on the topic but this post by Keith Peters describes the solution in good detail, except his post is some what old and the code there doesn’t work with the latest compiler..

As Keith describes, the first thing you need to do to implement a preloader is move your application to the second frame of the movie, this is done by adding a [Frame] metadata tag above your document class and providing it with a factory class that will initialize your application, in case of Flex this factory is mx.core.SystemManager .. we will have to write our own.

Your document class would now look something like this …

Our ApplicationLoader factory class has to extend MovieClip (not Sprite) and has to implement the interface mx.core.IFlexModuleFactory (this is the main change since Keith’s post). In the below code, I’ve stubbed out functions from IFlexModuleFactory and you can leave the code as is for most applications, you will only need to change this if your application loads other SWF’s at runtime or if you’re building an AIR application.

When we compile our Example application the compiler will generate a class (you can see it with -keep) that subclasses our ApplicationLoader factory and implements some additional functionality .. an instance of this sits in the first frame of our movie, loads the second frame that has our application and shows a preloader while the application loads …

You may change the look of your preloader in the onEnterFrame method but since this first frame needs to load quickly keep it light and avoid using any classes that are not native to Flash Player.

Finally thank’s to Keith for his post that got me started and also for all the other cool stuff I’ve learned from him over the years.

A similar attempt by Takashi Yamamiya and the eswf library on google code were quite helpful in getting me started, so thanks to them for sharing.

“There is a magic in graphs. The profile of a curve reveals in a flash a whole situation —the life history of an epidemic, a panic, or an era of prosperity. The curve informs the mind, awakens the imagination, convinces.”

– Henry D. Hubbard

These words so aptly describe the power of visualizing data.

Here are some interesting snapshots from the book, which I highly recommend checking out …

Here’s the slide deck from beginning of the lecture which tries to define what an RIA is and explores the architecture a typical RIA platform …

Shortcuts

Here are some Flash Builder Keyboard shortcuts I use very frequently, if you have suggestions on others that are especially handy, please let me know …

* CMD on OSX = CTRL on Windows

Customize

If you press CMD+3 and type “keys”, you’ll see the keyboard customization preferences panel for Flash Builder, I recommend spending some time customizing Builder for your own needs, for example I use CMD+1 and CMD+2 to switch between Develop/Debug perspectives. I barely use the NumPad on my keyboard so I’ve customized it to be all keyboard shortcuts, pressing CMD+0 inserts snippets

Snippets

Having a good snippets plugin can greatly improve a developer’s productivity, I love how Snippets work in TextMate, I’m still searching for a good solution for this in Flash Builder, till now I’ve been using CFEclipse’s SnipTreeView but the problem is it only works with AS3 code and can’t handle MXML. I was so desperate one day that I figured out that it fails because the CFEclipse InsertSnippetAction class on Line No 71 assumes that the editor is an ITextEditor, while this is true for most Eclipse editors, the MXML editor is actually made of 2 editors a Design Editor and an ITextEditor, so the type cast on Line 71 fails … I never got to building CFEclipse on my own though. But, it looks like Lee Brimelow did, he has released a fix which makes SnipTreeView work with MXML editor, unfortunately though Lee’s fix doesn’t work for me because of a Java version issue on OSX Leopard.

Another handy Mac only tool is TextExpander. It sometimes breaks your formatting in eclipse, but that has gotten better with Flash Builders new auto formatting improvements.

Multi Clipboard

A multi-clipboard tool is another must have for all developers, I use Jumpcut on OSX and it is a big big productivity boost to not have switch between files and applications when copying and pasting. I don’t know any good equivalent for Windows, so if you know of one, please let me know.

Finally, I have to thank Chetan Sachdev because he got me hooked to optimizing my workflow using the keyboard while we were working together on a project earlier this year.

I would love to know if you have any other handy tips on Going Commando.

Here’s a video of the code in action …

As you watch the above video, note as I drag a rectangle in any one Flash application, its sends AMF encoded binary messages to the server and the server multicasts these messages to other connected clients and those clients update in almost realtime. While in the example above all the application instances are running on the same system, they could just as easily be running on different systems and still communicate via the server.

Here the code for the Erlang server …

0001 -module(server).
0002 -export([start/1,stop/0]).
0003 
0004 -define(TCP_OPTIONS,[binary,
0005                      {packet, 0},
0006                      {active, false},
0007                      {reuseaddr, true}]).
0008 
0009 start(Port) ->
0010 	 Pid = spawn(fun() -> manage([]) end),
0011     register(client_manager, Pid),
0012 	 {ok, Socket} = gen_tcp:listen(Port, ?TCP_OPTIONS),
0013     accept(Socket).
0014 
0015 stop() -> todo.
0016 
0017 accept(Socket) ->
0018   	 {ok, NewSocket} = gen_tcp:accept(Socket),
0019     spawn(fun() -> recieve(NewSocket) end),
0020     client_manager ! {connected, NewSocket},
0021     accept(Socket).
0022 
0023 recieve(Socket) ->
0024     case gen_tcp:recv(Socket, 0) of
0025         {ok, Data} ->
0026             client_manager ! {multicast,Socket,Data},
0027             recieve(Socket);
0028         {error, closed} ->
0029  		 client_manager ! {disconnect, Socket}
0030     end.
0031 
0032 manage(Sockets) ->
0033     receive
0034         {connected, Socket} ->
0035             NewSockets = [Socket | Sockets];
0036         {disconnected, Socket} ->
0037             NewSockets = lists:delete(Socket, Sockets);
0038         {multicast,Socket, Data} ->
0039             multicast(Socket, Sockets, Data),
0040             NewSockets = Sockets
0041     end,
0042     manage(NewSockets).
0043 
0044 multicast(FromSocket, ToSockets, Data) ->
0045     SendData = fun(Socket) -> gen_tcp:send(Socket, Data) end,
0046     Sockets = [ S || S <- ToSockets, S /= FromSocket],
0047     lists:foreach(SendData, Sockets).

“… That’s right- less painful for users. Products like IBM WebSphere Portal and SAP Netweaver Portal were supposed to bring much improved user interaction models to enterprise IT, but unfortunately traditional systems-focused IT departments, rather than user interaction specialists and their web brethren, did the work …”

James eludes to the crux of the problem in the above quote and Thomas Otter highlights it further in a comment saying …

I sense that most of the problems/challenges with enterprise UI are not just a tool challenge. It is a design thinking problem. Until design thinking permeates enterprise application development, UI will be a sore point.

Thomas is right, it is a design thinking problem, more precisely, the problem is that there are no design thinkers in most teams that build or customize enterprise software…. A quick search for Job posts with keywords “interaction designer SAP” and other related terms on various reputed job boards here, here, here and a few other places revealed almost no relevant results .. clearly we don’t even realize yet that we need to design the interaction a user has with the software we build .. so it should be no surprise that our business software is a pain to use.

It is easy to blame vendors like SAP and IBM in this scenario though … our company portal is a pain to use, SAP must not have done a good job building it .. this is not always the right assumption, software like SAP portal etc. are platforms that allow an extreme amount of customization and often its this team doing the customization that puts together most of what a user will experience .. believe it or not SAP portal is HTML and JavaScript in your browser … yes the same HTML and JavaScript that powers GMail, Google Reader, Apple.com or numerous other engaging experiences on the Internet that you can find listed on various web showcases like this and this.

I bet if the same people who build these experiences on the web were part of the team building and customizing your corporate portal we would not be having this conversation. Yet, I’ve been on this side of similar conversations many times before and this is right about the time where you hear the words …

“… but, I don’t need all this flashy stuff on my business app …”

Unfortunately, many business decision makers very often fail to see beyond the commercial glitz of well designed applications on the Internet and quickly dismiss or underrate the need of an Interaction designer on their team. They miss to see that Interaction design is about thinking and researching how a users interacts with your software, how he feels and how can his feelings be optimized to pleasure, comfort and satisfaction. Its not about rounded corners or gradients or “flashy” animations .. those are just some visual design tools that sometimes (not always) help enhance how a user feels when using software.

Things are changing though, as Anne points out in a comment on James’ post .. the last year or so has seen a lot of new interest in the business value of good user interfaces and James’ post mentions that companies like Deloitte and Accenture realize this value and “have built practices dedicated to using Adobe technology to make existing enterprise applications and their portal front ends less painful for users”. He goes on to quote Jaco Von Eeden from Deloitte …

“Virtually every ERP deal we see we ask where can we use Adobe. We have a reasonable revenue flow and fantastic pipeline.”

This increasing interest in the value of good user interfaces is great for the industry, but I’m not sure if the above approach that Deloitte is embracing is the right way to go .. we should not be force fitting a particular technology into a solution, but instead asking what is the best way to solve a problem and what is the best technology to build that solution.

Adobe’s technologies can be used to build some great solutions but this choice of using a particular technology should not be made by business drivers … instead, it should be based on proper understanding of what is needed. Remember, it is very easy to use these so called Rich Internet Applications technologies to build a Not So Rich Internet Application.

Here are two quick layouts we wrote during the meeting as I showed everyone how easy it is to write a custom layout …

Random Layout

Step Layout

These layouts are currently somewhat crude but the idea was to convey how easy it is to write your own layouts … here the code for RandomLayout … just one simple function …

Of course, these layout algorithms can get more complex … here’s the StepLayout code …

For more elaborate examples you may want to checkout the ConcentricLayout example I posted last week or Ryan Campbell’s very cool 3D Layouts. Evtim, an engineer on the Flex SDK team also has some detailed posts on how to write Layouts on his blog.

Flex 4 is awesome.

UPDATE: You can view the complete source of the above example here or download it from here.

ConcentricLayout arranges layout elements in such a way that their centers are aligned and their size sequentially decreases. The width of each layout element is less than the previous element by a value specified using the horizontalGap property and the height of each layout element is less than the previous element by a value specified using the verticalGap property. If the element has an explicit width or an explicit height it still aligns its center but is not resized. You can tell the layout to force a resize of all elements and ignore their explicitly specified size using the forceResize flag

Here’s a quick example:

View Source

Download Source

Most of the problems we had were related to gradients, here are some snapshots …

1. The first strip is original graphic created in Illustrator
2. The second strip FXG Exported from Illustrator
3. The third strip is original Illustrator file imported into Catalyst and then FXG exported from Catalyst

Clearly, all of them are different. While this difference may not feel significant when looked at in this isolated manner, if you have many gradients in your design it can significantly affect the fidelity of the design.

Here’s the code generated by Illustrator’s FXG export feature ..

Here’s the code generated by first importing the Illustrator file into Catalyst and then exporting FXG ..

Note that the colors exported by each are different.

Suggestion: Illustrator’s FXG export should have a way to add namespace prefixes while exporting, would be helpful

At this point, I asked about this problem on an Adobe forum and one of the team members replied and suggested I should … In Illustrator, convert colors to SRGB and turn off color management. So I did that.
Here’s the original followed by what it looks like with the new settings …

So, our designer will have to redo some work in the new settings to create the original look, that’s fine, as long as we can get the exact same look in out final Flex application. But that didn’t work out either ..

1. The original graphic with the new color settings applied
2. FXG exported from illustrator
3. FXG exported from Catalyst
4. The original graphic without the new color settings

Here’s the code of FXG exported from Illustrator …

Here’s the code of FXG exported from Catalyst …

Note that this time both the FXGs are exactly the same except they still don’t look like the desired look drawn in Illustrator. Even if we use different color settings.

Now I noticed that Illustrator also allows exporting to SVG so I exported my original graphic as SVG …

1. Original
2. SVG exported from Illustrator

So that’s not perfect either but its much closer than any of the FXG output above …

When I looked at the code of the exported SVG …

Clearly there is more color detail in there, it has 10 gradient stops as opposed to only 3 in the FXG output we got, this explains lower fidelity of our FXG output .. so I translated this SVG manually to FXG ..

Here’s the original followed by the final FXG I created manually …

Not perfect, but fairly close.

Suggestion: Illustrator and Catalyst FXG export should not drop gradient stops

Since, Catalyst is still in beta, I think Adobe will probably fix this by the time it releases but till then you can use the SVG workaround if you run into a similar situation.

I had to convince our designer to settle at “fairly close” for now, but if this Designer-Developer Workflow thing has to work, we need to get better at generating the exact look a designer draws in his/her design tool, at the click of a button.

EllipticalArc is a FilledElement so it can have a Fill and a Stroke just like other FilledElements Rect, Ellipse etc.

View Example

View Source

I haven’t yet implemented some of the layout related functionality that other primitives like Rect, Ellipse etc implement … but it seems to work fine with basic layouts, which is what I needed for now. The class is hosted on Google code under the Apache 2.0 License, just in case someone wants to improve it.

Thank you to the Degrafa team for sharing their amazing work that saves me loads of time every now and then.

Here is how Adobe evangelist Harish Sivaramakrish chose to react to my thoughts on twitter, I feel that its unfortunate that this is Adobe’s reaction to genuine critique …

I believe that Adobe’s various community programs like the User Group Program, Community Champions program etc are meant to obtain genuine feedback and its sad to receive such a personally attacking reaction when you speak your mind.

I have not asked other members of the list for their permission to post their parts of the thread in public .. so I am only posting my thoughts and not the whole thread but there were at least 4 other champions who agreed with me on many of my points but not everything ..

Here’s the email I sent on Thursday …

I am disappointed by the consistent failure of Adobe India to support community, user groups, community mailing lists, community events, community leaders etc.

I just got an email about Adobe devsummit … yes the same event that gives flex builder to everyone who attends and draws the maximum audience of all Flex related events throughout the year.

Last year in August when I first heard of the same event … I had written to the Adobe evangelism team .. congratulating them on organizing a large scale event that would draw audiences from outside our regular community … I also suggested that they should include community speakers in the event to add to their existing content … I personally offered to present a talk on Advanced concepts in AIR (AIR was completely not present in that agenda). My intention at the time was to help improve the quality of the content that would be presented at the event .. because well I was and still am tired of the “Intro” like talks we hear at all Adobe events in India … you cannot blame Adobe for this because these talks are presented by evangelists and not by developers who use Flex to build real stuff … hence I suggested Adobe should include community experts who have more experience in the trenches than Adobe evangelists.

The reply I got to that email last year stated that it was too late for what I was proposing and they would include community in future events .. yet, here we are a year down the line with an email about the same event in my Inbox and no prior communication to the community that I know off.

I’ve attended Adobe events outside of India and community takes center stage at those events …. I was at the AIR Bus tour in Washington DC in 2007 and at the venue the local DC Flex user group had been given a special pod (the only pod there) to promote their group … adobe presenters advertised the group after their presentations and encouraged people to join …. I have attended several Adobe events in India … none of them mentioned the local user group.
I attended MAX in Chicago and there as well I saw special focus on community and user groups … if devsummit is the main event in India .. why doesn’t that include community in any form?

While Adobe India events continue to be boring marketing gimmicks (there I said it) .. primarily I feel because they don’t include community … its not just about the events …

1. Adobe India members are not active on flex-india or any user group mailing list … they just use flex-india as an advertisement medium. Local Indian Flex team members do not contribute to any local mailing lists, while I constantly see them active on flexcoders, flex sdk list and other international forums

2. Indian Flex team members are not active on the local user groups (the evangelists are) .. but why don’t I see the Flex engineers at out BangaloreFx meetings which happens in their own building?

3. Adobe evangelist go out and give presentations to several companies every day … I don’t think any of them mention the local Flex User Group or Flex India .. where all these new adopters could get help and gain knowledge.

I could go on …

In short I feel while Adobe on the whole does a great job of including community … Adobe India has been completely ignoring it.

I’m disappointed.

Himanshu Modi from Tekno Point agreed with some of my points but suggested that we as community champions should step up organize things on our own … here’s my reaction his thoughts …

Hi Himanshu,

Thank you for replying.
I see your point, .. but the events we organize as community champions is a whole other discussion .. yes we should do that and many of us have been … RIA Connect, initRIA, User Group Tours/Meetings etc.

My point here is different … I’m disappointed because none of Adobe India’s existing efforts seem to include community … its as if they organize/plan everything forgetting that there is an active community out there that can help … I’m not requesting any new events here … I’m questioning why community is not included in exiting efforts … we see Adobe world wide do this beautifully everyday .. community is included at a very early stage .. take MAX for example or the launch of Adobe Groups.

I receive info about an event in San Fransisco 2 months in advance … in contrast .. I receive info about an event in Bangalore 18 days before the event along with public announcement with obviously no room for suggestion and no inclusion of community whatsoever even though I had suggested that last year
All Adobe India events have tech talks only from Adobe speakers .. why don’t they take advantage of expertise in the community?

Also, why don’t I see adobe india .. support/promote/contribute to existing efforts of the community … user groups, mailing lists etc … did anyone from Adobe India help you promote RIA Connect?

John Koch from Adobe who has been very helpful to the Indian Community and has all my respect, acknowledged that he saw my frustration and would communicate my thoughts to all concerned .. here’s my reply to him …

Hi John,

Thank you for replying ….. I know you understand my point of view … anyone who has spent some time thinking about community, its effects and its benefits should see what I’m saying.

What’s surprising to me is that there is team at Adobe India whose job is to focus on community and yet they repeated fail to see the obvious.

I’m picking on one particular team here … I know everyone in that team … they are all great guys and gals .. but I feel I’m obligated to point out their mistakes in the interest of a common goal

I’m sorry to have put you in this position of having to communicate my strongly worded comments … I was about to put this in a blog post and let them know directly how I feel, but then I thought that saying something like that in public would put a lot of people on the defensive … and that is not what we need here. I would love to have this discussion be direct so if you just want to forward this thread to all concerned and have an all hands discussion I’m open to that.

Thank you as always for helping.
Mrinal

Anantharaman Mani who runs the Chennai Flex User Group also agreed with me on some counts but made a point that there are cultural differences between India and abroad and it is somewhat unfair to single out one team at adobe when there is less community focus in all of India Software industry … here is my reply to his thoughts …

Hi Ananth,

Thank you for replying … you’ve raised a very good point about culture … but here’s as I see it …

Adobe India is impacted by two cultures …. 1. The culture of corporate India and 2. The culture of Adobe …. you’re right most corporates in India don’t get community … but what surprises me is how Adobe India is not able to gain from its own world wide culture of nurturing communities … Adobe worldwide oozes with understanding of community … I mean big decisions a are made by including community … see the Flex SDK, see the Adobe Groups initiative, see the activity of Flex team members on mailing lists, twitter et al. … so how come Adobe India misses this and their evangelism efforts continue be one sided marketing messages … I mean that team might as well be called Adobe Marketing.

While they’re almost the same, there is a cultural difference between those two words — Marketing and Evangelism.

(In a separate email, I said …)

Why I’m singling out just team is because I want this one team to change their approach … that change will greatly help improve our ecosystem … blaming the society won’t get us anywhere.

There were other valuable reactions on the thread from Abdul Qabiz and others, but I will leave it to the other contributors of the discussion if they want to make their thoughts public.

Adobe community in India is small knit and I guess I’ve stepped on a few toes here .. but I feel that the reason Adobe runs various community programs is to solicit genuine critique and feedback, so being part of the community champions program, I feel obligated to share my thoughts and that is what I am doing here, unfortunate that people are reacting the way they are.

FlexMania is a Brazilian online event organized by Igor Costa. The event is focused on the Flash Platform and has a great collection of Flash/Flex/AIR related talks.

Although, most of the talks are in portuguese, there are some interesting english sessions as well like Laura Arguello on Mate Framework, Stephen Downs (a.k.a Tink) on Efflex and Iiley Chen on AsWing

I will also be presenting in english, my talk is “A Flex 4 Component’s Lifecycle” on Monday, July 6th at 15:30 GMT.

SLIDES AND CODE: The slides and code from the talk can be found here