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

In a couple of previous posts I introduced DataNavigators and their skinable counterparts…

Spark: DataNavigators
Spark: DataNavigators – Elements instead of ItemRenderers

In the later of the 2 posts I showed how you can use a DataNavigator with IVisualElements instead of using itemRenderers so that each element can be an instance of a different class (spark.components.DataGroup & spark.components.List can be used in the same way). This achieves deferred instantiation of the elements.

To do this you had to set the itemRenderer property to null, and then add you elements to the component, but have them wrapped inside an ArrayList. The 2 steps weren’t ideal so I thought I get together a Navigator class that got around this, enabling you to use it as expected.

(more…)

Steven Shongrunden of Adobe made a post on this subject last week which I commented on, but I was unable to post the MXML code in the comments.

I thought it would be worth posting it here, to show an MXML only version.

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

In the previous post I gave an example of our DataNavigators in action as you would expect them to be used, with a dataProvider and ItemRenderer but you may well be asking…

I want navigators where all the elements can be different, not driven by data all using the same ItemRenderer.

This is the obvious usage of navigators as we know them (ViewStack, TabNavigator).

Well DataGroup has a sneaky little secret. It isn’t just capable or reusing ItemRenderers, its also capable of achieving deferred instantiation on elements defined inside it (thanks to Ryan Frishberg for this info).

To do this you set the itemRenderer property to null, the add your elements inside an ArrayList. Using this method its only when the element is required to be displayed that it is created.

Unfortunately this isn’t a complete solution as it isn’t capable of handling FXG as an element, it has to be wrapped inside another container.

I developed a DeferredGroup class to get over this limitation, but its success is dependent on changes to the SDK. I have 2 items in the Flex Bugbase referring to this, so if you would like to DeferredGroup (a Group that supports deferred instantiation and FXG), please go and vote on them…

The components used in the following example are the same as the example in the previous post, but instead of using an ItemRenderer and setting a dataProvider the elements that need to be displayed are specified (check the numElements count, compared to the previous examples numRenderers count):

(more…)

At the last LFPUG I did a presentation on Flex 4 where I went through what I thought were the fundamental changes, and they showed some custom stuff I’d been working on. The plan was to then do a post on each slide explaining in a little more detail (which is still the plan), but there’s a few posts that talk about Navigators in Flex 4, and for anyone who visits this blog often you’ll be well aware of how much I use navigators.

With this in mind I thought I start posting some examples and open sourcing the code I’ve been working on, so today I thought I’d start with DataNavigators.

There are 3 components to talk about here. They all support virtualLayouts as long as the layout supports it. In building these I’ve ask a lot or questions of what others expected and try to implement the re-usability that is inherent in the spark framework.

—————————————————————-

DataNavigator

You can think of this to much like a DataGroup with 2 exceptions…

—————————————————————-

SkinnableDataNavigator

You can think of this much like a SkinnableDataGroup, with 3 exceptions…

—————————————————————-

BorderDataNavigator

BorderDataNavigator extends SkinnableDataNavigator adding a border, in the same way as BorderContainer extends SkinnableContainer.

—————————————————————-

Here’s an example of the 3 of them in action using itemRenderers:

(more…)