«
»

Using Spark Containers in MX Navigators

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>

This entry was posted on Wednesday, December 30th, 2009 at 12:28 pm and is filed under Flex 4. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

8 Responses to “Using Spark Containers in MX Navigators”

  1. [译] 在Spark的容器组件中使用Halo（mx)的导航组件 | RIA Args says:
    February 21, 2010 at 1:40 am

    [...] 来源页面: http://www.tink.ws/blog/using-spark-containers-in-mx-navigators/ [...]

    Reply
  2. iiwo says:
    May 24, 2010 at 9:00 pm

    Thx, that’s exactly the tip I was looking for :)

    Reply
  3. subba says:
    December 10, 2010 at 12:49 pm

    thnks its helpful very much

    Reply
  4. Mike says:
    December 21, 2010 at 10:43 pm

    Thanks for the tip.
    By the way, are you of African decent. I was wondering because of the black faced fellow you have at the top of your sight.

    Reply
  5. Brij kishor says:
    July 11, 2011 at 11:02 am

    Hi
    abobe sample code is not working for flex mobile project. How to create a spark-based ViewStack .

    Thanks
    Brij Kishor

    Reply
  6. Gagan Deep says:
    August 14, 2011 at 6:30 am

    Precise answer that i was looking for :)

    Reply

Leave a Reply