Wed, Dec. 1st, 2010, 12:05 pm
Recreating the Flex 3 LinkBar and LinkButton in Flex 4

Recently I needed a proper Flex 4 version of the venerable Flex 4 LinkBar (a horizontal line of links), but all I could find was a posting of the beginning of the implementation. I also needed it to behave as a toggle so any one link could be selected.
Flex 4 doesn't have a LinkButton either, so I had to make one of those too.
Both components then needed a suitable skin.

So, four files :-) Fairly easy once I got going with it, and you can see the (very exciting) example attached below, along with the source code.

AttachmentSize
Links-src.zip326.03 KB
Links.swf322.62 KB

Thu, Sep. 23rd, 2010, 10:05 pm
Reaction to Flash Builder on Linux cancellation

Well, you can't blame me for trying (by opening the official bug). Despite being the 2nd most popular, and fastest growing, platform for web development, Adobe have finally told us what their plans for their Flash Builder on Linux are: termination.
Clearly Adobe were not one for listening to their developers on this one, as it was the 2nd most voted for issue across all projects in the public issue tracker at the time the news was announced, ahead of serious problems with the Flash Player and cookies, for instance.

Personally I'm disappointed. A lot. But not surprised- despite the huge pro-Linux fan fare with which Flash Builder on Linux was launched, it's been clear for a couple of years now that it was being left to rot.
I've no idea why it was finally killed, but can't believe the official "we couldn't sell enough". Download statistics show nothing of the potential that was turned away by the way the project was treated post-launch.

Oh well. I'm moving to using the FDT beta now as I use too much other stuff in Eclipse to swap to IDEA (which will probably end up costing more than FDT4 too).

FDT will get my money. IDEA will get other peoples, and I'm sure some other people will go with FDT too.
Adobe won't get that money- over 600 votes in their issue tracker, times the purchase price, times the 1:10 ratio of people who didn't vote. Lots of money. More than a million dollars. Their loss !

Adobe missed out, and I've no idea how they plan to monitor "the usage of the Flex SDK by Linux developers" which Adobe's Flash Builder FAQ says is the primary means to restart the project. So I have to conclude it's fluff, and it's just not important enough to them.
Shame.

Wed, Jul. 14th, 2010, 04:05 pm
Flash Camp Manchester 2010, part 3

THE CURRENT STATE OF MOBILE UX
Anthony & Jerome Ribot (Ribot)

Antony and Jerome are co-founders of Ribot - a design lab specialising in enjoyable small screen interfaces and experiences. They're not Flash specific.
Over the last 20 years they've seen the world move from analogue to digital, but much more recently gone human - there isn't a third party any more (like a mouse) between the the experience and the user.
They explained that mobile is very constrained (RAM and display size, network latency, etc.) but this gives you scope and focus- a challenge.
When they start out working with companies, they face a difficult task explaining how you can only put top the top five features from  a web site on to mobile. Then once they get over that hurdle, they explain that you can only focus well on the top one feature.

Next up was a series of interesting numbers such as:
12 million users choose a phone experience, not an operating system
Android is predicted to outsell iPhone 3:1 next year, and has the Flash player.
On average developers target 2.8 platforms, that's more flexible than we used to be
By 2020 half of the UK population will be  over 65, we must be inclusive. They tell a great story that the cordless kettle was originally designed to keep the elderly safe.
As well as that, the experience must emphasise simplicity (take a look at transport signage for instance, for 'glanceability'). They also talk about being subtle - giving a user a feeling isn't about bells and whistles !

As an example of the sort of thought process you have to go through, consider the question "what do you press a doorbell with ?". We might answer 'finger', but kids today their thumb ! They explained this was because of SMS usage on phone keypads.
This is an example of user behaviour changes, reusing a learned behaviour in one domain in another - how will they use an application?

They went on to say that the mobile experience is about 'time for a snack'; tasks that take a maximum of sixty seconds. This means it's suite for simple, repetitive, regular tasks; you must make these things easy !
Another great statistic that was shared was that 40% of people who have a poor initial (thirty second) experience will never launch that application again.
Ways to retain users in this period are to use a common UI, or even reuse inherit device actions (shake, rotate, pinch)... minimise surprise.
In some contexts however, like slate devices, this snacking experience is going on longer.
Even there, you must strive to minimise questions and reduce clutter to improve glanceability.

In the past, phones were application focused : You launched Skype to call Bob to discuss X.
In the future the experience will be more to-do, task, based, a people first experience rather than a grid of applications.


MOBILE FLASH & AIR 2 FOR ANDROID
Mark Doherty (Adobe Systems)

Mark talked about the power saving features in Flash Player 10.1. Adobe have actually been doing that on some platforms for ten years already, so had lots of experience before they started.
One funny thing was Adobe have a crawler that finds and tests real .swf files on the Internet. They actually found normal day-to-day applications that were asking the player for 1000 frames per second; and this lead directly to the decision to cap this at 60 in 10.1.
It was explained that all this mobile work feeds back into desktop too, because being small and light there is a better experience.

We were shown a brief demo of 'Device Central' for testing; using it to evaluate multitouch and accelerometer is awkward but OK, though it can't simulate latency and poll rates - you still need to tune that on real hardware.

Talking about statistics again, The Flash 10.1 player is on 9% of phones now. But it'll be 35%  in 2011 and 53% 2012 - just based on Android and ignoring MeeGo, Blackberry and others. This is the sort of reach iPhone still doesn't have and probably wont achieve.

It was good to be reminded that with AIR on mobile, you have a choice of distribution method, you are not locked to a store as you can just install from a web link.

As a final handy tip, Mark suggests to minimising size flatten and optimise all the graphical elements. For speed, if you can, make your classes descend from Sprite rather than MovieClip, you probably don't need MovieClip.

SPACE INVADING
Seb Lee-Delisle (Plug-in Media)

Although billed as the "PaperVision 3D in action" talk, it was more a fun little series of set pieces showing applications that used the popular Flash 3D framework.
One memorable one was the web cam powered audience wave-o-meter.
There was also two person, co-op, 3D, Pong I kid ye not !
And a version of Lunar Lander.
In 3D.
In a 5k file.
In flash.
Impressive.

Wed, Jul. 14th, 2010, 12:05 pm
Flash Camp Manchester 2010, part 2

DEVELOPING WITH YOUR INNER DESIGNER
Mike Jones (Adobe Systems)

This was kinda the rest of the Adobe Catalyst demo from the key note. I cant see much else that makes going from a mock up to a real app this easy. Using tools like Balsamiq and Napkee is close, but they can't work on an actual comp from Illustrator or Photoshop.
One thing I'd not seen before is that Catalyst does actually have a code view, but it only shows the parts of the project that use FXG-based Flex 4 style skins, you have to import from Catalyst to Flash Builder (or FDT :-) ) to see how how it all works together under the hood. Not too much use then really.

Adobe tried to rather gloss over the non-roundtrip nature between Builder and Catalyst (or Photoshop and Catalyst) by saying you can locate the code and change it by hand if the designer changes it. This would need a good visual difference tool or a designer that can make patches using a revision control system - neither a very good story really.
But in questions at the end Mike said that round trip 'in some form' is a high priority for the next version.

Mike also showed some little flourishes like how you can drop skeleton component in Builder, and then with one click launch Flash Professional to create it. When you then close Professional it auto-updates in Builder.
Inside Flash Professional, Flex states show as some sort of complex linear mess in the time line. It looks horrible to me but I guess makes sense to designers.

SET YOUR CODE ON FIRE
Michael Plank (PowerFlasher Solutions)

FDT looks a lot like any other IDE, but Michael is a wizard of the keyboard and live codes a whole application with out using the mouse to some music, only takes about four minutes. And made me want to buy a copy of the song. You can see the video here (code starts at about 2 minutes 38 seconds).
He then goes back over what he did more slowly, and demos the many coder oriented features; automatic templates for things like 'for' loops, declaring an unknown method can create that method, and so on and so on.

It's awesome.

The 'Quick Fix' can also create missing variable declarations, or missing methods, even whole classes- this means you can write what you want to have.
'Code templates' creates things like the for loop. You can add your own, the example is the common multi-line usage of flash.display.Loader that needs a 'new', set x, set y, load(url) etc.
There are wizards for everything from get/set pairs to new projects.
You get code warnings and errors as you type, unlike in Flash Builder which needs a compile (triggered from a save).

Where Adobe's Flash Builder has these features (and many FDT have it doesn't), Adobe never seem to me to talk about them, they have a focus on being a more visual environment.

Michael talked a bit about the future roadmap for FDT version 4, and mentioned they have active Linux support, in that they do take bugs and try to help out, but it's not officially been released yet. This is a good contrast to Adobe who seem to be keeping Flex Builder for Linux on minimal life support, and have no public roadmap for where it's going,

We also saw a quick demo of working with HaXe, which is a language like ActionScript 3 but very very fast - it actually compiles all the time in background.

Tue, Jul. 13th, 2010, 04:10 pm
Flash Camp Manchester 2010, part 1

KEYNOTE
Adobe Systems

The two Mikes from Adobe give an overview of their current products and future plans- not much I hadn't seen at last months Scotch on the Rocks but in terms of out reach this was a great way for giant-multinational Adobe to connect with the smaller people who use and promote it.
They talked about how there has been a digital explosion across multiple devices, mostly mobile devices, and that this going to continue.
Adobe's job, they said, was to complement systems like Google Analytics; they'll provide hooks in their products that anyone can use, but may then offer a service like Omniture as an 'off the shelf' analytics package if you don't want to use it you don't have to.

By way of a sort of preview of a later talk, Mike gave a brief intro to Catalyst. It was obvious some people still hadn't seen this static-Photoshop to Flex-application converter before, as there were some gasps of excitement around me. I find it kinda odd that with all the 'buzz' around it, videos on the Adobe site etc. people still manage to miss out.
One thing I hadn't noticed before was that Catalyst decides some things for you but not others. For instance when wiring a scroll bar to a panel of text, it seemed to align the bar to the bottom of the scroll panel but didn't auto-align the top. Bit odd.

The other Mike then took over to say that it's not just about the web, or just mobile, it's about a contextual application that can keep your companies brand anywhere.
This means your content needs to rearrange itself, and you can't expect users to have arrow keys etc. Mike was keen to say this applies if your application is  Flash or HTML, native or anything else - the same applies, even though each device has it's own unique experience and limits.

As a sort of final jokey point, it was pointed out that Apple has recently got a lot of press for selling 1 billion dollars worth of apps via it's iPhone application store, but a single Flash (lite) company made 1.5 - in Japan.

 

INTRODUCING THE OPEN SOURCE MEDIA FRAMEWORK
Edwin van Rijkom (Adobe Systems OSMF Team)

Edwin started out by saying there are 300-odd people in the OSMF user group, so although it does have official Adobe backing there is a world wide distributed development model just like Linux has.
We were told a bit about the background to OSMF, and how it grew out of the Adobe Media Player project who saw that everyone was building the same parts of a video distribution framework over and over again.
OSMF is fully free and open source, you can also just download the .swf from their site, drop it onto your page and give it just about any binary format to play - it'll Just Work.

In the background there is quite an elegant architecture. A given thing you want to play is encapsulated by a MediaElement, and MediaElement's have 'traits' that define if they are playable, seekable (images aren't), visible (sound isn't) etc.
The UI classes then only has to know about traits, and is automatically proofed against future formats. Plugins for new formats, when loaded, can register any of the supported traits for the media type they register. You just write a new definition and wait for the next release, or load yours as a binary plugin at run time. You don't get this support with HTML5's VIDEO tag !
It's possible to run MediaElements in serial or parallel to produce things like on screen graphics, a title sequence or adverts that appear between tracks.

As mentioned earlier, there is a pre-built 'Strobe' player for the OSMF, that seems to do everything and it also allows a bit of skinning too. It's open source too, so you can use it as a basis for your own.
The media playback code is a fully cacheable .swz version that's also free if you want to go that route.

Wed, Jun. 23rd, 2010, 03:11 pm
Installing Adobe AIR on OpenSuSE using official repository

All modern Linux distributions have a concept of keeping themselves up to date with an online system of 'repositories' of applications that anyone can run.
Adobe have handily set one up for their AIR runtime, and provide instructions for RPM based systems that use 'yum' (like Fedora and RedHat) and DEB based systems that use 'apt' (like Ubuntu and Debian).
Although OpenSuSE can use yum, by default it has it's own 'zypper' system, but it can use the RPM repository anyway.

Here are step by step instructions to set up the offical Adobe AIR repository on OpenSuSE 11.2. My box is a 64bit system, but as long as I install the dependencies it's all good.

  1. Start the 'software management' YaST module
  2. Select configuration, repositories
  3. And, specifiy the URL
    http://linuxdownload.adobe.com/linux/i386/
  4. Name it something useful like "Adobe AIR i386"
  5. OK the boxes till you get back to main application.
    It might moan about keys, but you can tell it to ignore this.
  6. Now you can search for 'air' and install the program just like any other, and it'll stay up to date with the rest of the programs on your system too.

Wed, Jun. 16th, 2010, 02:05 pm
Scotch on the Rocks 2010, Day 2 part 1

 

Get ready for the mobile revolution

Serge Jespers (Adobe)
It was really good to really see HTML5 vs JavaScript vs Flash in the flesh, so to speak.
One theme was that now it's about more than the technology; it's about knowing where is the user using your application now - in the car, walking ... ? If the user is in car, for instance, the device might be in a holder away from their hands or sideways...
The idea here is that mobile devices should be a screwdriver, not a penknife - save that for the 'full fat' online or desktop version.
There was also some good practical advice on things like button size and resolution, such as being careful to place slider numbers so their not covered by a users finger/hand.
With Flash 10.1 multi-touch is now supported on some laptops as well as mobile,
and you can find out what device supports it at runtime, and enable gestures if supported.
There was a very cute demo using an Android phone as a Wii-style controller for a desktop 'Afterburner' style type 3d flight simulator.
On Android, Google is not a gatekeeper like Apple are, so you can just stick an application file on your website if you want. This is probably a killer feature for enterprises.
I asked about Flash 10 on my handset (the Nokia N900 which only has Flash 9 at the moment) 'as this was demo'ed at MAX' and Serge said as far as he knows it's 'still coming', which is awesome.

AJAX is the answer to everything and we never need to worry again and life is full of unicorns!

Ray Camden (FirstComp)
This was a refreshingly different, informal, audience engaging session.
Ray started out saying that "Spry made us love AJAX again" but  JQuery is now the drug of choice, with most people in the room using that framework rather than ExtJS etc.
Other things I picked up were that data size is still important, because it's not enough to have the page load faster, if it's not usable until JavaScript has run and pulled down another megabyte of data.
Ray says AJAX lets you add features for fun, not because it's a good idea or good UX, so you must resist !
In summary Ray concludes 'life would be easier without users'.
It was great to be able to hear other peoples thoughts on these things.

SQL to HQL

John Whish (Crisp eBuisness)
This was a packed session ! I guess because it was annouced that morning that ColdFusion 9.0.1 lets you put HQL in CFQUERY, so it's interesting for more than just ORM. Or it may have been the 'Advanced' session later in the day.
So, John started of showing that HQL Queries objects, not tables, so that's what you get back.
He noted that SQL isn't dead- it's still better for complicated reports or populating initial data (apparently you can have ColdFusion run a bunch of insert SQL when it's ORM system starts up and (optionally) recreates all the tables).
It looks like HQL is case sensitive for object  names but not properties names or keywords like FROM and WHERE. Odd, and bound to catch me out !
John demoed a HQL block returning an array of objects, and then used the built in function that converts this to a query, but no one could think of a good reason to do it.

One handy tip was that you must alias the object in FROM if you reference it in the SELECT, and it's case sensitive of course.
If you select specific properties you get an array of array which sucks and entitiesToQuery() can't help you either. There is a work around to use 'select new map(prop, prop,...' which then gets you an array of structs instead.

It seem SQL skills are very transferable because things like sort, group, and where comparisons are the same (or very nearly). You can Count() and Upper() etc. as well.

OrmExecuteQuery() takes named params for variables, but of course CFQUERY is more readable still because you can put CFQUERYPARAM's in.
If you delete in HQL, it returns the number of objects deleted, which is nice.

Other gotchas are if you don't define joins in the ORM CFC or the database, you can do in HQL instead but not if you need INNER or OUTER joins as they wont work.

But what is cool is you can just write 'article.artist.id = 12' ! Handily you then don't get an array or array of obj, you get an array of Article's, each of which has an artist property. You can lazy load in a variety of ways to stop this getting to expensive.
That's worth using HQL for even with the other stuff I reckon.

Wed, May. 26th, 2010, 08:07 pm
Scotch on the Rocks 2010, Day 1 part 1

This years Scotch on the Rocks was based in central London, a conveniently small walk from Trafalgar Square itself.
The venue was a perfectly well layed out Tiger Tiger, with large rooms for the talks and funky mezzanine chill out reception area.

Keynote

Adobe took the opening keynote and launched straight into a review of the ColdFusion 9 launch, re-capping some very important (for us) changes such as being free for non-live deployment (testing, developer desktop, hot spare etc) as well as it's other new features.
Turning to the ColdFusion Builder IDE, it seems the majority of the audience in a show of hands is on Dreamweaver or CFEclipse, with only a few Builder users. Some cool extensions for Builder were shown off, such as Apptaculer that generates ORM CFCs as well as master/detail screens. It also lets you configure user friendly field names and field editors. It can do bulk table prefix/plural removal, and is generally a very powerful wizard to kick start a new CF9 project with.
As you can use Flex in extensions, you can also do some neat reporting tools too.
Next up was a lightning quick run though of Catalyst, which is now out to play with.
It still rocks just as much as when it was previewed last year as a designer-centric workflow tool. This part turned into a bit of a Catalyst demo which was odd as there was a whole talk about it later.
Eventually we do see wiring to ColdFusion to the project using Flash Builder, and an  Apptaculer generated CFC. This used the built in data services support as so was very easy to do.
Then we saw some demos of Air running on Andriod, this got a huge round of applause, and is very cool to see in real life, as the support is very nearly literally only just out :-)
The keynote ended with news on the next minor update to ColdFusion.
ColdFusion 9.0.1 has more complete CFScript support for things like cfdbinfo, pop, imap as well as handy language syntax like "For...in" loops. Also confirmed as multi-DSN ORM, so you can use ORM with more than one database in each Application. It was also ace to get some never-seen-before information like support for most file operations on Amazon S3, and the ability to use HQL in cfquery; the later means I might never have to write (DB specfic) SQL ever again, which was something we aimed for with the Reactor project.
The only date I could coax out of anyone was "second half of year" unfortunately, but it certainly looks ready !  

Mastering the ColdFusion Application Framework

Ben Nadel (Epicenter Consulting)
Ben's talk on what you can do with 'just' Application.cfc was a bit of a mind opener.
He started by saying that "Your code is not the application, the application is just some stuff in memory" before explaining that only code in functions knows about your application, so anything in the psudo-constructor outside of a function executes 'before' the request starts.
One next trick as looking up the current Application settings (are cookies on etc.) by simply instancing the Application CFC and inspecting it.
I also learnt how to pronounce WDDX though I'm not sure it's a habit I should get into as it sounds really odd :-)
Ben also sets the Application.name to hash(getCurrentTemplatePath()) to avoid any chance of clash, I guess it's also handy for moving Application.cfc around, but I'm not sure many people do that, but that would really make CFLOG output look very ugly. Stick to a reverse dotted domain name and a small salt value (for security) if you don't have a dedicated server and I think you'll be OK.
Next Ben showed how you could use onCFCRequest() to cache a CFC used for AJAX (or Flex remoting, I suppose) calls, so it isn't created each time, and also to do better error handling. And of course this is all transparent to client, it's just using the normal path to CFC and 'returnFormat' paramter, only we're intercepting the request and doing the grunt work ourselves.
This has applications for being used as a replacement for things like FacadeStarter that would normally be called from onApplicationStart() to make sure things like ColdSpring Remote Proxies are created, the advantage being that you can delay creating each one until it is used, rather than doing them all at once, which in a large application could cause time outs after a server restart.
For his next trick, Ben showed as that even if your device (such as a phone or 3rd party Flash/ActiveX) doesn't have support for sending CFID/CFTOKEN cookies or URL parameters, and can't or wont alter their API to pass them, you can create the cookie.cftoken etc in the Application.cfc psuedo constructor (that runs before the request really gets going remember ! SMS API's for instance will often just give you one unique token per-device, so you have to manufacture the cookies from that.
It's also apparently a common problem with security audits that there is a CFID and CFTOKKEN cookie present (even though modern ColdFusion engines use random values, as opposed to just incrementing them like in the old days). Ben has a cool work around that packs the CFID and CFTOKEN in to a single custom cookie, then deletes them from the url and form scopes so users cant override them. Again, the trick is to set CFID and CFTOKEN back in the Applicaiton.cfc pseudo constructor before the request does it's security checked. By setting them to expires 'now' the cookies never get back to the browser. Very cool stuff.
Also interesting was a demo of a bug (or is it just bad but defined behaviour) for several requests starting at same time *when session cookies already set*; such as a initial HTML page with a FRAMESET to two CFML pages. Ben of course has a super-easy fix; just set an exclusive session lock (even though you don't need it) in both onSessionStart() and onRequestStart().
As well as showing how to minimise memory usage by only creating long lived sessions for real people (as opposed to search spiders) or logged in users, there was also a variation on the CFID/CFTOKEN recreation that worked by encrypting them to a replacement cookie, then decrypting them. Again the trick was to make this transparent to the code was to decrypt outside any method in Application.cfc This technique means you can have call a CFC just by appending a simple key to the URL, and it'll still get the same session.

Tue, Apr. 6th, 2010, 04:05 pm
Reseting a Flex DataGrid's dataProvider when using a filterFunction

It's fairly common to have a filterFunction applied to the ArrayCollection you are displaying in a DataGrid, such as to hide deleted items:

dataGridData.filterFunction=stateFilterFunction;

I was also allowing users to edit and remove the displayed items; so needed a quick way for them to 'reset' all their unsaved changes, which lead to a couple of gotchas.

<mx:DataGrid dataProvider="{dataGridData}" editable="true" id="wipDG"
...

 

The first gotcha was fairly obvious in retrospect - when you are taking a backup copy before the user edits the data, you must get a real copy, not just another reference, by doing something like:

dataGridData = e.result.DATA;
dataGridDataBackup = ObjectUtil.copy( dataGridData ) as ArrayCollection;

This stops any changes made to the datagrid from also appearing in the backup copy by using ObjectUtil to create a new clone of the ArrayCollection.

We have to use 'as' to type the return from ObjectUtil.copy() as copy() works on any type so just returns an Object. We know we gave it an ArrayCollection so we know we'll get another one back.


Secondly, you need to make sure much the same thing happens when using ArrayCollection's removeAll() and addAll() methods, with the use of a filterFunction complicating things a bit more.
You might think it's as easy as

dataGridData.removeAll();
dataGridData.addAll( dataGridDataBackup.list );

but that causes a crash inside ListCollectionView !

The basic trick is to remove the filter and then reapply it at the end, otherwise all the operations only affect the current visible rows (so leaving rows behind).
You must also add a copy of the backup data, or (after one reset) changes to the DataGrid end up in the backup copy again.

dataGridData.filterFunction=null;
dataGridData.refresh();

dataGridData.removeAll();

dataGridData.addAll( ObjectUtil.copy( dataGridDataBackup ) as ArrayCollection );

dataGridData.filterFunction=stateFilterFunction;
dataGridData.refresh();

So, step by step what you have to do is:

  1. Remove the filter, and call refresh() just like the docs till you to do
  2. Remove all the existing records with removeAll()
  3. Add a copy of the backup of the data 
  4. Reenable the filter, and call refresh() again

 

This works really well as a quick 'undo' system for editable data sets in Flex, and seems to perform really well despite all the copying though I've not tested it with hundreds of rows; but loading that many items at once is a bit of a user experience fail anyway.

Mon, Nov. 30th, 2009, 08:05 pm
In print

Fusion Authority is a professional technical journal that speaks to Flex professional developers. I thought this sounded like a great idea when I heard about it, and was keen to help out.

I'm pleased to say that they though so to, and I've now worked on several issues. You can read a bit more about it at http://www.fusionauthority.com/news/4787-faqu-and-flex-authority-news.htm:

"Adam Tuttle, Tom Chiverton and Jacob Munson were all Assistant Editors on
FAQU Volume 3 Issue 2. Their editorial input was much appreciated and helped
save the sanity of our Sr. Assistant Editor, Dana Tierney [ed note: Sanity?
What's that? -Dana]. Adam and Tom were also Assistant Editors on Flex
Authority Volume 2 Issue 1."

AttachmentSize
fusion_authority_editor.png167.41 KB

skipped back 10