So it’s about time I punted out some layouts that I have hanging around, most of which are all based upon NavigatorLayoutBase.

NavigatorLayoutBase can be considered a base layout class for use with our navigators (NavigatorGroup, Navigator, DataNavigatorGroup, DataNavigator, BorderDataNavigator), but can also be used with the standard Flex 4 containers/controls. I published an example of StackLayout some time ago which lays a container out as a ViewStack (i.e. a single child at a time), which is the default layout class for our navigators.

SemiCarouselLayout has a couple of classes in between NavigatorLayoutBase.

SemiCarouselLayout lays the children out as if they in the front half of a carousel. Means its not a complete carousel it means the number of items can be infinite without affecting the number of visible items. There’s a few options for the layout which are easiest to describe with an example, so I’ve implement the layout with a couple of components below… (drag and drop is still to be implemented)

(more…)

This component was in part inspired by some work Steven Shongrunden had done and a task that we had on a job.

We didn’t want to have to change our data objects to hold a hard coded value to check whether the item should be selectable or not as in Steve’s version so I came up with this.

There’s 3 ways you can specify to exclude an item from being is selectable.

The example below shows each of these being used, but you could also use a combination of the 3 methods above to exclude items.

(more…)

If you’ve switch over to Flex 4 or in the process of switching you’ll notice Modules are missing from spark.

We didn’t want to be stuck with the old ModuleLoader and Module based on VBox and LayoutContainer, so here’s our new versions based on Group.

They should work pretty much the same as the mx versions with one change, there is now an additional loadPolicy property.

You can use this property to specify when the ModuleLoader should load its content. This was added to solve a problem I’d ran into a few times with the mx version. I’d have multiple ModuleLoaders in a ViewStack but they would all load immediately and at the same time. It didn’t make sense to load a Module unless the user actually wanted to view it.

ModuleLoader.loadPolicy has 4 valid values

(more…)

Do you remember using MovieClip.getDepth() & MovieClip.swapDepths(target:Object) in AS 1.0 and 2.0. This was how we used to work with the z-sorting of MovieClips. Oh the joy!

With the release of AS 3.0 depths went out the window and the display list was introduced, the index of the child denoting the z-sorting of the DisplayObjects. This works fine but can be tricky to manage if the z-sorting is changing as you don’t have a continous way of accessing the same DisplayObject via an index, unless you push all the children in another Array to use as this reference.

Flex 3 also uses the index of items in the display list for layout purposes. For instance a VBox will render the child at the lowest index at the top, and the child at the highest index at the bottom. If for instance you had a negative verticalGap, you were constrained to the index with a higher index in the display list overlapping those at a lower index. If you change the index of a child to bring it to the front, its position in the VBox was also change.

Flex 4 re-introduced depths.

(more…)

Spark doesn’t include an s:Alert control and I’d put one together previously as a bit of test so I thought I’d push it out there.

It differs in its use from the mx:Alert in that you can add whatever buttons you want instead of being limited to a single set of predetermined flags (you can create you own predetermined flags as constants in a class as used in the example).

The component supports the following SkinParts (all are optional)

and the following inherited from spark.components.Panel…

The inherits the styles from Panel and adds the following:

On clicking a button the Alert removed itself and dipatches a CloseEvent specifying the index of the button click in CloseEvent.detail.

(more…)

A couple of days ago Corey Lucier posted a couple of nice examples of the new Flex 4 AnimateTransitionShader.

Like Flex 3, the new effects don’t handle being interrupted well. They jump abruptly to the end of the current IEffectInstance, then start a new one. The abruptness is what your trying to get away from when you decide implement an effect, opting for a smooth transition.

With a bit of tweaking about it was fairly easy to hack around this. Here’s what i changed

In the examples below I’ve added a couple of more states and a ButtonBar to navigate. I’ve also removed the easing to make it a little simpler to see. If you click around a bit you should see the difference.

(more…)

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…)

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.