Flex is dying. Get over it and move on, or get involved in re-inventing it

This week, Adobe held a summit on their plans for handing Flex over to the Apache Software Foundation. A small sample of the Flex user base was invited to attend, but for the rest of us they made recordings of the first day available, and streamed the second day live, which was much better as it gave a sense of taking part, rather than just passively watching what had gone before. Others have summarised what was covered in those two days, so I won’t repeat them here.

The summit seems to have divided opinion: some feel that Adobe are abandoning Flex to die; others feel it is an exciting opportunity for the Flex community. To my mind there is no dichotomy here: Adobe are abandoning Flex and that creates an exciting opportunity for the Flex community. It also creates some challenges and there is a danger that many in the community seem to be in denial of those challenges. Continue reading “Flex is dying. Get over it and move on, or get involved in re-inventing it”

“Doc?” – a great Flash/ Flex developer tool (and its free)

Doc? logoDoc? is  AIR-based API reading tool. It can be used to build up an indexed set of ASDoc-generated API documents that are held locally on your computer, rather than having to be accessed online. To create a library, one points it at the index.html of all the online (or offline) API sources you use and then you leave it to trawl the sites, generating a local copy of each for you.

As a free application, this ability to create a library of offline API documents would be enough to make me recommend Doc? to every Flex/ Flash developer. However, it has another feature up its sleeve that just makes it an awesome product: it has plugins for Flex/Flash Builder and Flash CS3/CS4. These plugins allow you to rapidly access the API documentation for a class you are trying to use. Continue reading ““Doc?” — a great Flash/ Flex developer tool (and its free)”

Long may the iPhone remain Flash-free

“When is Flash coming to the iPhone?” seems to be a commonly asked question of Adobe. It’s clear from the likes of Lee Brimelow that it is a question that causes great consternation within that company. They want Flash on the iPhone, of that there is little doubt. Flash is available on Windows, OS X and Linux and – assuming all goes well with the Open Screen Project – it will be available within the browsers of all smart phones bar the iPhone later this year. As a Flex developer and an iPhone user, I guess this should worry me. To be honest though, it really doesn’t. In fact, it fills me with hope for the future. Continue reading “Long may the iPhone remain Flash-free”

Why flex/flash developers should be excited about Flash Builder 4

flashbuilderFlash Builder has a great selection of new features, such as new workflow integration with Flash Catalyst and Professional, improved debugger, refractoring and profiling tools and great data services integration. Beyond these headline features though, there are some nice little enhancements to the developer experience that seem to have been overlooked by most. Continue reading “Why flex/flash developers should be excited about Flash Builder 4”

AutoSortDataGrid: A simple extension to the DataGrid Flex component

In a recent post, I highlighted the arse-about-face nature of the way sorting works with the Flex DataGrid component. As one comment put it, it is synonymous with moving your car wheels to set the steering wheel position.

In response to that, I have created a simple extension to the DataGrid component. It is called AutoSortDataGrid and it adds two properties to DataGrid: sortColumn and sortDirection. These simple additions enable one to specify the initial sort state of a datagrid, and no additional code is required on the user’s part. Continue reading “AutoSortDataGrid: A simple extension to the DataGrid Flex component”

Flex developer tip: initialising a datagrid with a sorted column

The Basic Datagrid
If you use Flex, then you are likely – sooner rather than later – to find yourself using the datagrid component. On the whole, it’s a really powerful and fairly easy to use component. There is one caveat to this though and that is the way column sorting occurs. Consider the following code:

This results in the following SWF:

As you can see, the data is presented in the datagrid in the same order as the code defines it. Click on one of the column headers and it sorts that column. Click again and it reverse sorts the column. This is great, unless you want the datagrid to start up with on of the columns sorted. That’s when the fun starts.

An Automatically Sorted Datagrid
If you read through the API documentation for the datagrid, it is really vague on how sorting occurs and there is no obvious way of initialising a datagrid in a sorted state. In the past, I have tried all sorts of ways of ways, including simulating a click event on the column header to force a sort and even creating a datagrid subclass that overrides a lot of the sort arrow placement code to force a sort arrow to appear at start up. Such techniques though are messy, unreliable and there was always this nagging feeling that I’d missed something obvious.

Recently I applied a bit of lateral thinking – and a lot of googling – to the problem and I discovered the proper way to solve this problem. It wasn’t obvious, but it was far simpler than anything else I’d tried and it works properly. The key to it is realising that when one clicks on a column header, a sort is applied to the data source and – this is the non obvious bit – that sort is used to determine where the sort arrow appears and whether its an up-pointing or down-pointing arrow. So the solution to having a datagrid start up in a sorted state is to apply a sort to the datagrid’s data source at start up. Told you it wasn’t obvious!

Consider therefore the new version of the code. The key part is the contents of start(), which is responsible for initialising the datagrid with a sort.

This results in the following SWF:

Applying a Compare Function to an Auto-Sort Datagrid
There is one final problem with initialising a datagrid in a sorted state and that is when columns have their own custom compare functions. When the titlebar is clicked, the custom function is applied to the sort. When we initialise the datagrid in a sorted state, we are supplying it with a presorted data source with a Sort object attached. Therefore the custom function is not applied. All is not lost though, as the function cane be manually attached to the Sort object. The following code demonstrates this with a function that sorts first the colour number, then the name for the red green and blue fields.

And the two-column sorting behaviour can be observed in the resultant SWF below:

And there you have it. Sorting a datagrid at start up may not be intuitive, but it’s fairly straighforward once you know how.

FOTB 2009 Day 1

Flash on the Beach 09This year’s Flash on the Beach keynote started on a high with a hilarious act from three faux Mexicans. Having got everyone in the mood, John Davey came on stage to rapturous applause and introduced the folk from Adobe who were to do the main keynote piece. Sadly the keynote then went downhill and left me wondering quite why I’d bothered. As much of the Flash stable (Flash Catalyst, Flex 4 SDK & FlashBuilder) are all currently in beta – and with just 2 weeks until MAX – there was little in the way of new stuff to show us. So we were subjected to yet more AIR applications along with some style-over-substance (or “proof of concept” to be more generous) 3D and sound demos.

Toward the end of the keynote, we were at least treated to some sneak peaks at upcoming features in the next release of the Flash Pro authoring tool, including better integration with FlashBuilder. There was also a hint that there might be news on Flash Player 10  finally appearing on smart phones (though presumably not the iPhone) at MAX.

Next up was a presentation on AIR by Mike Chambers. It was a curious mix of self-promotion of his as3corelib project and some details on features coming in AIR 2.0. The latter is to gain built-in support for detecting removable drives being mounted/ unmounted and a new native application mode. The native mode will be built as a .exe (or the MAC equivalent) and can communicate with other native applications via stdin and stdout pipes. This seems an odd solution when the likes of Mike’s own Command Proxy project offer a much richer solution already. I guess we will have to wait for more details from MAX to understand the solution better.

The only other session of note – in this developer’s view – was a session on Spark by Mike Jones. Sadly Adobe have dumped the great name “gumbo” and replaced it with the far more boring “spark” for their new skinnable component set. The session described the current state of the spark components (subject to change of course as it’s all still in beta). Despite many criticising the namespace in CSS solution Adobe came up with to support both halo and spark in the one application, I personally think it’s a very nice solution. Catalyst remains a odd one. At the moment it just doesn’t work to my mind: it is too product-skin focused and only really goes one way from designer -> developer. I fully agree with Mike’s hope that the final product better support general (and custom) component skinning and that it better support a two way design/ develop workflow.

Tomorrow has far more developer-orientated content than today, so hopefully should prove a more fruitful day for me.

Napkee: converting Balsamiq mockups into flex views just became a complete breeze

Balsamiq mockups is a truly outstanding mock-up drawing tool. It is simple to use, yet enables the quick and easy creation of detailed mock-ups of even quite complicated user interfaces. Yet it has always had one big problem: it only creates mock-ups. The design then has to be painstakingly recreated using some application-dependent GUI creation tool, for example Flex Builder. What Balsamiq mockups lacks is the ability to generate MXML directly from a mock-up.

Step forward a new application: Napkee. It is an Adobe AIR application (so should work with Windows, Linux and Mac OS X) with a simple yet effective aim: transforming Balsamiq-generated mock-ups into web pages and Flex views. As this is something I’ve wanted to do for a while, I took the application for a spin, with the following results.

Installation
Being an AIR application, installation was a breeze. Simply visit the Napkee website and click on the Launch Now button. On Windows, if you haven’t got AIR installed, it prompts you to install that first automatically. Then the application itself is installed. I don’t know if this simple installation method applies to Linux and OS X, but I assume it does.

Functionality overview
Napkee is very simple to use: start it up, import a mock-up and convert it to a Napkee file. This can then be previewed, copied to the clipboard and saved as a Flex project. And that is about it. Simple, yet effective.

Putting Napkee through its paces
To test it out, I created the following mock-up. It’s not going to win any design rewards, but it shoehorns lots of controls into a space small enough to display here 😉

Balsamiq mockup for my Napkee test
Balsamiq mock-up for my Napkee test

So it has:

  • A canvas with a scrollbar, containing:
    • An accordion opened on “Item One”. containing:
      • A button bar and menu
      • Breadcrumbs and a button
      • A checkbox (not ticked) and a text box
      • An expanded combo-box and a text field
      • Then on the left going down: a collapsed combo-box, two radio buttons, a link and a numeric stepper.
      • Beside them, a tab set on tab One, containing:
        • Vertical divider, with a label above and a progress bar below.

I then saved this, started up Napkee and imported my mock-up. It loaded it OK and presented me with the following preview:

Napkee preview of the imported mockup
Napkee preview of the imported mock-up

Visually, it looks near spot-on. The only things that didn’t get imported were the vertical divider and scrollbar. The preview is actually created using real Flex controls, so one can interact with it. Doing so reveals that the values for the top combo-box were successfully imported. As the screen shot below shows though, it also reveals a flaw with the program:

Rendering problems with the Flex view
Rendering problems with the Flex view

I’ve selected “Item Four” on the accordion and “Four” on the tab set. This reveals (in a rather messy fashion) that Napkee failed to treat these items as containers, so as the tabs change, the visual contents do not.

Finally I exported the project, fired up Flex Builder and imported the project. Running it reveals another odd bit of behaviour: the project MXML has no size constraint and the canvas created from the mock-up has a x=4, y=8 offset. This results in a flex-coloured background filling the browser windows, with a white rectangle slightly offset from the top left corner. After fixing these, I ended up with the following SWF:

And another thing
The MXML code that Napkee generates automatically assigns id’s to the imported components. The resultant code ends up looking like:

I feel is OK, but is very little messy. I’d really like to be able to give the components real names. Given that Balsamiq doesn’t have the facility to name components, I’d like to see Napkee providing some facility for applying useful labels to components. This could either be in the form of some interactive import dialogue, or by being able to select items in the preview and name them.

Conclusion
Napkee costs $49 for the Flex license (a version that can output HTML+CSS as well is available for $79) and for that you get a very effective tool for turning Balsamiq mock-ups into Flex MXML code. Sure I have a couple of gripes with it and feel it has a key missing feature, but the developers aim to provide frequent updates to the product. Hopefully therefore, these issues will be addressed soon. I have no hesitation therefore in recommending this product to anyone who does Flex development.

Reference files
You can download the source files I used for this article via the links below:

The original Balsamiq mock-up file

The Napkee source file

A zip of the Flex Builder project Napkee generated

Adobe release public betas of Flash Builder 4, Catalyst and the Flex 4 Framework

Adobe promised us public betas of the next set of Flash development tools in June and they have lived up to their word, releasing it on June 1st and – as a really nice touch – they haven’t made us wait until the start of the business day in California.

Flash BuilderFlash Builder 4
This is the new name for Flex Builder 4, as Adobe feel the Flex moniker was putting AIR and pure As3 developers off using it. The beta download is for the “Premium” version. According to the Flash Builder 4 FAQ on the Adobe Labs site, this is a name change from the fully-featured Flex Builder’s “Professional” tag to avoid confusion between Flash Builder and the Flash designer program, Flash CS4 Professional. Giving the Flash designer package a proper name would have caused a lot less confusion, but at least they have given it a bit of thought.

Flash Builder 4 can be installed as a stand-alone application alongside an installation of Flex Builder 3. So it is possible to test out the beta without losing one’s production environment. Everyone can enjoy a 30 day trial, but you’ll need a Flex Builder 3 license key if you wish to use it longer.

Flash CatalystFlash Catalyst 4
A new addition to the Adobe stable, this tool is designed to fill the gap between Flash developers and designers in a way that the Flash designer program couldn’t. It allows the designer to turn their static picture designs into MXML code, which in turn can be used to skin the new Flex 4 components (sadly the term “gumbonents”  has inevitably been dropped as the new components of now Spark components, rather than Gumbo ones.)

Having installed the beta and experimented with it for twenty minutes or so, my immediate reaction is one of “eh?” It doesn’t seem very intuitive to this developer. The tutorial info on the Adobe Labs is going to be essential reading.

You can download Flash Builder 4, Flash Catalyst and the Flex 4 SDK from the Adobe Labs.

Flex Builder is dead. Long live Flash Builder

flashbuilderLast Friday, Adobe announced that Flex Builder 4 will actually be called Flash Builder. As many folk use Flex Builder to create non-Flex SWFs, it does make sense. Remember Flex is little more than just a bunch of ActionScript classes after all, so Adobe could well have been limiting sales of Flex Builder with its old name.

What seems odd though is that there seem to be no plans to rename the Flex SDK at the same time. The Flex SDK is equally inappropriately named as it contains all of the core Flash classes, the compiler, ASDoc generator etc, as well as the Flex classes. Also without a change to the Flash Pro designer tool, confusion will continue to reign as Adobe will have two products called Flash Pro and Flash Builder Pro respectively. Such a half-baked name change smacks of some poorly thought-out marketing decision at too low a level within the company.

Another oddity of the name change is with regard to trademarks. According to the Adobe website, the fully qualified name of Flex Builder is the ridiculously cumbersome Adobe® Flex® Builder™. Presumably Adobe will try to slap a trademark on Flash Builder too. I’m no lawyer, so may be wrong here, but I suspect that as existing products using the name Flash Builder have been around for years, the TM on Adobe’s Flash Builder will mean little more than “Totally Meaningless”. See a4desk.com and the flashbuilder tool on tucows for example. Third party software houses will presumably therefore be free to use the term in their products too. Given how anal Adobe normally are over trademarks, I’m surprised at the name choice therefore.

How to filter all nodes of a Flex Tree component

Flex logoIf you have ever tried to display filtered data in a Flex component, you’ll likely be aware that you can use an XMLListCollection object as the data source and that you can apply a filter function to that collection. The component only then displays the filtered data. However if you have tried this with a Tree component, you’ll have discovered that it doesn’t work. The filter is only applied to the top-level node(s) in the collection. The filter isn’t recursively applied to child nodes.

There is a an open bug related to this problem in the Flex Bug and Issue Management System. It is currently targeted to be fixed for Flex 3.4.0. In the meantime though, there is a simple work-around that I’ll describe here.

When rendering its nodes, a Tree object relies on a helper class that implements one of the ITreeDataDescriptor or ITreeDataDescriptor2 interfaces. By default it is an instance of DefaultDataDescriptor, but one is free to supply the tree with a different implementation. By overriding the tree’s data descriptor with one that supports filtering, the tree’s content can be easily filtered. The simple Flex SWF below demonstrates this point. Try selecting/ unselecting the checkboxes on the right and you’ll see that the tree’s content changes accordingly.

The key to how it works is that the tree calls the data descriptor’s getChildren() method for each node. The filter function can therefore be called at this point and we only return to the tree the set of children that we want displayed.

My implementation of the ITreeDataDescriptor is far from complete. I have only implemented those methods needed to demonstrate the point, though it implements the required functionality just fine. The DefaultDataDescriptor is more complex, as it implements all the methods, plus it uses some clever caching mechanisms. I may implement a full replacement class at some stage that will support drag and drop for example, but for now that is left as an exercise for any reader who needs such functionality.

You can download the full FlexBuilder project source code for the above SWF here.