Home > Component, Flex, code > Databinding with MenuBar DataProvider

Databinding with MenuBar DataProvider

November 29th, 2008
Goto comments Leave a comment

A slight update to my previous post about databinding in the MenuBar’s dataProvider.

It turns out that by just changing my initial menuData property from an Array to an ArrayCollection, everything “just works”. I guess it has to do with the ArrayCollection actually monitoring when its source changes and firing CollectionChange events. These events must then be picked up by the MenuBar parent, and it then updates its bindings. Here’s the updated code:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" xmlns:flexoop="com.flexoop.utility.*">
	<mx:Script>
		<![CDATA[
			import com.flexoop.utility.MenuItemWithChildren;
			import com.flexoop.utility.MenuItem;
			import mx.collections.ArrayCollection;
 
			[Bindable] private var menuData:ArrayCollection = new ArrayCollection;
 
			public function init():void {
				var menuItem:MenuItemWithChildren = new MenuItemWithChildren( "test 1", true );
				menuItem.children.push( new MenuItem( "test 4", true ) );
				menuItem.children.push( new MenuItem( "test 5", false ) );
				menuData.addItem( menuItem );
				menuData.addItem( new MenuItem( "test2", true ) );
				menuData.addItem( new MenuItem( "test3", false ) );
 
			}
 
		]]>
	</mx:Script>
	<mx:VBox>
		<mx:ApplicationControlBar id="acb">
			<mx:MenuBar id="mb" dataProvider="{ menuData }" />
		</mx:ApplicationControlBar>
	</mx:VBox>
</mx:Application>

Just wanted to thank Fotis Chatzinikos over on the flexcoders group for helping to solve this, at least partially. I’m still curious as to what specifically would need to change in order to switch back to an array, but at least I know the quick and easy solution.

Gareth Component, Flex, code , ,

  1. ryan
    February 2nd, 2009 at 18:06 | #1
    Reply | Quote

    that looks nice ‘n clean, way better than the example in the documentation… thanks for sharing, i’ll download the code from your previous post…

  2. Gareth
    February 3rd, 2009 at 21:07 | #2
    Reply | Quote

    Glad it could help you out. I got a little frustrated that there wasn’t a prebuilt class to handle this so I figured, why not write one. Much simpler implementation.

  3. wpageiii
    February 24th, 2009 at 01:50 | #3
    Reply | Quote

    Thank you for this component…I do have a question…I want to have a top menu with 2 children… on the 2nd child would like to have 3 children

    Expense Tracker
    >>Expense
    >>ExpenseDrill
    >>>>to Vendor
    >>>>to Acct
    >>>>Departmental

    not sure about the syntax…
    var menuItem:MenuItemWithChildren = new MenuItemWithChildren( “Expense Tracker”, true, “top” );
    menuItem.children.push( new MenuItem( “E-Expense”, true, “2″ ) );
    menuItem.children.push( new MenuItemWithChildren( “Expense Drill”, true, “top” ) );
    menuItem2.children.push( new MenuItem( “to Vendor”, true, “4″ ) );
    menuItem2.children.push( new MenuItem( “to GL Account”, true, “5″ ) );
    menuItem2.children.push( new MenuItem( “Departmental”, true, “6″ ) );
    menuData.addItem( menuItem );

    I extended the MenuItem and MenuItemWithChildren to take in optionally “data” defaulted to “top”…

    All is working well except the multiple children menu item…

  4. wpageiii
    February 24th, 2009 at 01:58 | #4
    Reply | Quote

    Sorry for the question…I figured it out a few mins later…

    Here is the syntax (my sloppy way) if anyone else needs it…
    var menuItem:MenuItemWithChildren = new MenuItemWithChildren( “Expense Tracker”, true, “top” );
    menuItem.children.push( new MenuItem( “E-Expense”, true, “2″ ) );
    var menuItem2:MenuItemWithChildren = new MenuItemWithChildren( “Expense Drill”, true, “top” );
    menuItem2.children.push( new MenuItem( “to Vendor”, true, “4″ ) );
    menuItem2.children.push( new MenuItem( “to GL Account”, true, “5″ ) );
    menuItem2.children.push( new MenuItem( “Departmental”, true, “6″ ) );
    menuItem.children.push(menuItem2);
    menuData.addItem( menuItem );

  5. Gareth
    February 24th, 2009 at 07:38 | #5
    Reply | Quote

    No problem. I would probably not go with the “top” methodology, however. As it’s just an array that we’re pushing the items on to, I would just sort them in a specific order, then push them onto the array in that order and then you don’t have to worry about which one has “top”.

    Thanks for using and checking out the code. I’ve actually modified my menuItem class slightly so that it takes a function. I’ll be posting that modification shortly also.

  6. Glenn
    March 18th, 2009 at 22:24 | #6
    Reply | Quote

    Hi,

    Thanks a lot for your code posting. It helped me save a lot of time :)
    keep up the good work!

  7. Ash McConnell
    April 16th, 2009 at 07:51 | #7
    Reply | Quote

    Thanks for this, i was having trouble with menu bars, but this has helped a lot!

  8. Joe Wilson
    July 22nd, 2009 at 14:21 | #8
    Reply | Quote

    @Gareth

    Gareth, have you had a chance to post your modification? I’m curious to see how you’ve handled passing a function.

  9. Gareth
    July 27th, 2009 at 22:25 | #9
    Reply | Quote

    Yup, I did a little while back. You can check it out here There’s not a whole lot to it, but I used it in a project recently and it made things a little more legible when looking at the code. Hope it helps.

  10. Pushkar
    January 7th, 2010 at 06:40 | #10
    Reply | Quote

    Hi Everybody

    Can someone please tell me how do we change the menu item order in code? Is there a property we can access?

  11. Gareth
    January 7th, 2010 at 09:20 | #11
    Reply | Quote

    It should just be based on however you add it to the dataprovider. You’d have to manually manage how you add it to get it to output differently.

  1. No trackbacks yet.