Code I/O

A topnotch WordPress.com site

5 Minutes on Adobe Flex – Accordion as Menu

1 Comment

Handling menus is cool in flex, with all the animations and affects, user experience can be lavish, but i’ll leave it to the beholder to enhance them as they want to.

Consider the listing, where we create an accordion with the menu items as shown below:

accordion_demo

The following listing creates the accordion:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%"
	xmlns:flexlib="http://code.google.com/p/flexlib/"
	xmlns:component="component.*"
	verticalGap="0" horizontalGap="0">
	<mx:Script>
		<![CDATA[
			import utility.Application;
			import mx.events.IndexChangedEvent;
			import mx.events.ItemClickEvent;
			import mx.events.MenuEvent;
			import mx.controls.Alert;

			[Bindable] private var menuItems:Array = ["Home", "Accounts", "Categories", "Activity", "Tools", "Help"];

			[Bindable] private var catalogMenuXML:XMLList = <>
                    <menuitem label="Register New Account">
                        <menuitem label="Automobile" data="Automobile"/>
                        <menuitem label="Bank Account" data="Bank Account"/>
                        <menuitem label="Commodity" data="Commodity"/>
                    </menuitem>

                    <menuitem label="Explore">
                    	<menuitem label="Accounts" data="Accounts"/>
                    	<menuitem label="Categories" data="Categories"/>
                    </menuitem>
                </>;

            private function catalogMenuHandler(event:MenuEvent):void
            {
                Alert.show("Label: " + event.item.@label + "n" +
                    "Data: " + event.item.@data, "Clicked menu item");
            }

            private function onVAccordionClick(event:MouseEvent):void
            {
            	var ai:MxAccordianItem = event.target.data as MxAccordianItem;

            	if(ai != null)
            	{
            		trace("Title --> " + ai.title);
// Put your code here to perform some actions.
            	}
            }
		]]>
	</mx:Script>

	<flexlib:VAccordion id="accordion"
		headerLocation="above" width="100%" creationPolicy="all"
		resizeToContent="true" headerRenderer="component.MxAccordianHeader"
		click="onVAccordionClick(event)"
		verticalGap="0" horizontalGap="0">

		<component:MxAccordianItem title="Home"
			description="Home for your personal financial intelligence"
			/>

		<component:MxAccordianItem title="Catalog"
			description="Manage your accounts and categories"
			menubarXML="{catalogMenuXML}" menuHandlerFunction="{catalogMenuHandler}"/>

		<component:MxAccordianItem title="Activity Log"
			description="Your activities log book" />

		<component:MxAccordianItem title="Retrospect"
			description="Analyze your finances" />

		<component:MxAccordianItem title="Insight"
			description="" />

		<component:MxAccordianItem title="Bingo!"
			description="" />

	</flexlib:VAccordion>
</mx:VBox>

The following listing is about AccordianItem


<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
    width="100%" height="100%"
    verticalAlign="middle" horizontalAlign="center"
    showEffect="Fade"
    verticalScrollPolicy="off" horizontalScrollPolicy="off"
	creationComplete="initCollections()"
	xmlns:flexlib="http://code.google.com/p/flexlib/">

    <mx:Script>
        <![CDATA[
            import mx.collections.XMLListCollection;
	    import mx.events.ItemClickEvent;

            [Bindable] public var description:String;
            [Bindable] public var title:String;

            public var menubarXML:XMLList = null;
			[Bindable] private var menuBarCollection:XMLListCollection;

			public var menuHandlerFunction:Function;

			private function initCollections():void {
				menuBarCollection = new XMLListCollection(menubarXML);

				if(menubarXML != null)
				{
				}
			}

			// This is put in place to ensure that the accordion does not show empty space when
			// a menu does not exist
			private function onResize(event:Event):void
			{
				if(menubarXML == null)
				{
					vmb.height = 0;
					vmb.width = 0;
				}
			}
        ]]>
    </mx:Script>

	<flexlib:VerticalMenuBar id="vmb"
		resize="onResize(event)"
		width="100%" height="100%"
		direction="right"
		labelField="@label"
		itemClick="menuHandlerFunction(event);"
		dataProvider="{menuBarCollection}"
		showEffect="Fade" />
</mx:VBox>
Advertisements

One thought on “5 Minutes on Adobe Flex – Accordion as Menu

  1. Hi there,
    thanks for the post. These demos are great for learning the Flex frame work and how to extend it.

    Would be really cool to see a working demo on the page to visualize the code 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s