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

I love mx Navigators (ViewStack, TabNavigator etc.) yet when adding spark containers to them you get the error…

The children of Halo navigators must implement INavigatorContent.

If you want to use the new spark containers you need to wrap them in, or just use spark.components.NavigatorContent (not easily found unless your using design view). NavigatorContent itself extends spark.components.SkinnableContainer so you can use it much like a Group and set a custom layout.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
	       xmlns:s="library://ns.adobe.com/flex/spark" 
	       xmlns:mx="library://ns.adobe.com/flex/mx"
	       minWidth="955" minHeight="600">
 
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
 
	<mx:ViewStack id="vs" width="400" height="200">
 
		<s:NavigatorContent width="100%" height="100%" backgroundColor="0xFF0000">
			<s:layout>
				<s:VerticalLayout/>
			</s:layout>
			<s:Button label="vertical button 1"/>
			<s:Button label="vertical button 2"/>
			<s:Button label="vertical button 3"/>
		</s:NavigatorContent>
 
		<s:NavigatorContent width="100%" height="100%" backgroundColor="0x0000FF">
			<s:layout>
				<s:HorizontalLayout/>
			</s:layout>
			<s:Button label="horizontal button 1"/>
			<s:Button label="horizontal button 2"/>
			<s:Button label="horizontal button 3"/>
		</s:NavigatorContent>
 
	</mx:ViewStack>
 
	<mx:ToggleButtonBar dataProvider="{vs}"/>
 
</s:Application>

Now Flex 3.0 is officially released, I guess a lot or you like me will be waiting to get your hands on Flex 4.0. You can keep an eye on what’s going on with Flex 4.0 here.