Archive for the ‘Flex 3.0’ Category

FilterComboBox

Tuesday, January 5th, 2010

Here’s a little component I knocked out over the holiday period for use in a current project.

Its basically a rip of ComboBox (extends ComboBase due to private methods in ComboBox), that will filter the dataProvider depending on what the user enters into the TextInput, and select the text to show you where a match is found (can only select the first match in FP9). You can also set it to be case sensitive (false by default).

There’s a few other components out there with the same functionality (some you have to pay for some you don’t), most of which can be found doing a search for ‘AutoCompleteComboBox Flex’.

They either didn’t quite do what we wanted or were too complex for our needs.

(more…)

DataStack

Friday, November 13th, 2009

A couple of weeks ago I made a post about using Repeaters in ViewStacks and I mentioned in the post I’d put together a class called DataStack that worked in the same way as a ViewStack but was driven by a dataProvider.

I then realized that using a Repeater inside a ViewStack would achieve the same result, but one thing I didn’t mention is that the DataStack re-uses its children like itemRenderers.

This means that if you only add one child to a DataStack, but supply a dataProvider with 1000 items, it will only create the one child and re-use it, unlike the Repeater and ViewStack combination which would create 1000 instances of the same child.

In addition recently I added a little more code so that you can add more than a single child to the DataStack and it will cycle through through them as you change the selectedIndex. So if you supply 2 different children and a dataProvider of 1000 items, it will reuse each child 500 times, the child at index 0 for all the data at the even indices, and the child at index 1 for all the data at the odd indices.

Due to the fact that DataStack isn’t a ViewStack (i.e. it extends Container not ViewStack), it won’t work with the Efflex viewStackEffects, and therefore I created a dataStack effect for Efflex and an example that extends it.

DataStack Example (right click for source).

The source for DataStack can be downloaded from our Google Code repository.

UITintedMovieClip

Wednesday, October 28th, 2009

Recently the subject of tinting skins created for Flex has cropped up a couple of times.

Here’s a little class I threw together that enables this from Flash. Instead of extending UIMovieClip you can extend UITintedMovieClip. This new class will look for a style set on your Application class named skin-tint.

In Flash you then create all your skins in greyscale and the class then uses ColorTransform to tint itself.

UITintedMovieClipExample (right click for source).

This class only handles tinting of one color, but its feasible if the skin creator used MovieClips inside the skins with a defined naming convention, different tints could be applied to different instances.

I’ve also added the class to our Google Code repository.

Using Repeaters in ViewStacks

Friday, October 9th, 2009

Its very rarely I use Repeaters. I always thought of them as a way to get a list of items on the screen, yet they would always create all the items, therefore not being as optimized as a List that only creates just enough renderers, and re-uses them.

Recently on a job I required the children of a ViewStack to be driven by a dataProvider. The ViewStack required the same number of children as the number of items in the dataProvider. Each child should use its corresponding item in the dataprovdier to render its content, set via the data property.

I knew this could be handled with ActionScript, but ideally wanted a component that took care of it internally. To achieve this I built something called a DataStack, that had a dataProvider property. This worked fine but a couple of days later when building a custom container for tiling items I realized I’d been wasting my time, and a Repeater inside a ViewStack would have done the job I wanted.

What a donkey I am sometimes!

For good measure in the this example I added one of the new Efflex effects.

CollectionClone

Wednesday, August 26th, 2009

Recently I was using Adobe’s AutoComplete component and a problem cropped up, it applies a filter to the original dataProvider assigned to it.

This was a problem because I was using the AutoComplete to give the user some sort of code completion on a list of classes, and I had multiple instances of this AutoComplete component in my application. When the user used an AutoComplete component, the original collection used as the dataProvider was filtered which meant that any previously selected items in other AutoComplete instances had a good chance of being removed from the list.

You can see this in the example by selected ‘United Kingdom’ in the first AutoComplete component, then typing the letter ‘A’ in the second, and you’ll see that the first component no longer retains its selectedItem, as it is no longer in its dataProvider.

CollectionClone can be used to duplicate a collection before assigning it as a dataProvider, leaving the original dataProvider unfiltered, and only filtering the clone. It will keep an eye on the original collection for any changes, and make sure that they are all reflected in the cloned collection.

CollectionClone Example

The source for CollectionClone and be downloaded from our Google Code repository

Flash & Flex Developers Magazine

Monday, June 29th, 2009

Did you know there’s a magazine out there dedicated to Flash & Flex Development? Well you do now! We received a few copies to give out at LFPUG and I have to say I was impressed with the look, feel and content of the mag, good quality stuff.

Flash & Flex Developers Magazine is a print and online, bimonthly magazine. This month issue includes:

How to become a Flash/Flex Developer?…
Data Analytics and Tracking User-Behavior in Flex Applications…
Animating with ActionScript…
Create your first ActionScript game in minutes…
Flash DecalSheet System…
Flickr in Flash – Creating a portfolio…
How to use Yahoo! Maps in Flex…
Flex Application Architecture…
Google Analytics for Flash…
Miniblog Part 2…
Drag and Drop in AIR using Flash CS3…
FLEXing Your Business Application…
New 3D Methods of Display Objects in Flash Player 10…
Blender to Flash workflow…
How to view PowerPoint on YouTube…

Pricing depends on the subscription type, whether its print, online, or your company takes out a corporate subscription and it’s also possible to purchase a single issue.

There’s also a free issue online you can take a look at before committing.

Go tell you boss to get their card out.

Efflex v0.02

Thursday, May 28th, 2009

Last night I uploaded a new SWC for Efflex that should hopefully address the major issues that were apparent.

Other Changes

The following affects have been added:

org.efflex.mx.viewStackEffects.CoverFlowPapervision3D
org.efflex.mx.viewStackEffects.Slide
org.efflex.mx.pairViewStackEffects.Slide

org.efflex.viewStackEffects.Scroll has been renamed to org.efflex.mx.viewStackEffects.List.

There is also a new explorer at http://www.efflex.org/EfflexExplorer.html

ArrayCollectionDataDescriptor

Thursday, May 21st, 2009

Not so long ago I was working with the XIFF library again and I needed to show a list of contacts.

The contact datum is represented in XIFF as an ArrayCollection containing ArrayCollections.

Roster extends ArrayCollection and contains a property called ‘groups’ which also extends ArrayCollection.
The ‘groups’ ArrayCollection contains RosterGroup items, which also extend ArrayCollection, and each of these contain RosterItemVO’s (the actual contact).

The RosterGroup ArrayCollection represent the groups that you arrange your contacts in, including an offline group, and a RosterItemVO represents an individual contact.

So we have something like…

[code]










[/code]

I took a look at what they were doing in SparkWeb, but they had, what seemed to me, an extremely complicated way of displaying the data, when a Tree control should be able to do the job, the only problem being that a Tree didn’t want to work with ArrayCollections. To the rescue ArrayCollectionDataDescriptor!

ArrayCollectionDataDescriptor Example (right click for example source)

As you can see in the example, the objects passed into the Tree as the dataProvider need to have a property to be used at the label, so you can’t use an ArrayCollection as it is (if you do, it’ll do toString() on it for the label of the folder and you’ll get a list of your objects), so you just need to extend ArrayCollection (as they have in XIFF) and give it a property to use for the label.

The source for the ArrayCollectionDataDescriptor can be found in our Google Code Library.

FrameLabelMovieClip & UIFrameLabelMovieClip

Monday, April 13th, 2009

FrameLabelMovieClip and UIFlameLabelMovieClip (Flex), dispatch FrameLabelEvent’s when their playhead encounters a frame label. The FrameLabelEvent contains the FrameLabel object containing the name and frame number of the frame label.

Examples

FrameLabelMovieClipExampleLoadSWF – an example of loading an SWF with our library class and creating an instance of a FrameLabelMovieClip exported from the library.
UIFrameLabelMovieClipExampleSWC – an example of using a SWC in a Flex project that contains a UIFrameLabelMovieClip.

The classes themselves can be downloaded from our Google code library.

Classes

ws.tink.display.FrameLabelMovieClip
ws.tink.events.FrameLabelEvent
ws.tink.flex.flash.UIFrameLabelMovieClip

To enable ease in the Flash IDE I’ve also knocked up an extension that installs 2 utility commands for creating FrameLabelMovieClip’s and UIFrameLabelMovieClip’s. The extension also includes 2 class library components that contain the classes required by FrameLabelMovieClip (FrameLabelMovieClipBase) and UIFrameLabelMovieClip (TinkFlexComponentBase).

Commands

1. Convert Symbol to FrameLabelMovieClip
Creates FrameLabelMovieClip’s for use with Flash IDE and ActionScript 3.0 Projects, out of all the selected MovieClip’s in the library. The command also adds the FrameLabelMovieClipBase component to the library that contains the nessessary classes to compile a SWF or SWC.

2. Convert Symbol to Flex UIFrameLabelMovieClip
Creates UIFrameLabelMovieClip’s for use with the Flex framework out of all the selected MovieClip’s in the library. The command also adds the TinkFlexComponentBase component to the library that conatins the necessary classes to compile a SWF or SWC.

Components

1. FrameLabelMovieClipBase
Contains the necessary classes to use a FrameLabelMovieClip as a base class for a library symbol.

2. TinkFlexComponentBase
Contains the necessary classes to use a UIFrameLabelMovieClip as a base class for a library symbol.

MXI

FrameLabelMovieClip Creator

PanelStack

Tuesday, March 17th, 2009

A PanelStack is an combination of a ViewStack and Panel.

It extends ViewStack, and adds the panel features to it (NOTE you can’t treat the children as if they are in a Box, they are treated as if they are in a ViewStack).

Although you could put one of these together pretty easily by add a ViewStack as the only child to a Panel and making its width and height 100%, we recently required this functionality and this was a much cleaner approach for what we required, instead of overriding all the display list methods. Because it’s a ViewStack you can also use the Efflex viewStackEffects in there as you can see in the example.

PanelStack.

The source for the example is available on right-click, but the source for the PanelStack itself is in our Google Code Library.