Today I would like to share a flex application I think may be very useful to someone. Imagine you need to generate an accordion navigation with dynamic content such as the one used on the second level of cnn’s website. You would like to be able to use the same application over without massive effort, or copying and pasting code blocks all over the place. Sure this could be done with a mountain of javascript, or you might want to consider flex. For those with experience using flex, I present the mxml file free of charge. For those without any experience with flex, you may want to read a tutorial before jumping into this example.
<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" xmlns:flexlib="http://code.google.com/p/flexlib/" layout="vertical" viewSourceURL="srcview/index.html" backgroundColor="#ffffff" creationComplete="srv.send();"<mx:Script> <![CDATA[ import mx.collections.ArrayCollection; import mx.utils.ArrayUtil; [Bindable] public var navData:ArrayCollection; [Bindable] public var index:int=-1; ]]> </mx:Script> <mx:Style> Application { backgroundGradientColors: #FFFFFF, #FFFFFF; backgroundGradientAlphas: 1, 1; vertical-align: top; horizontal-align: center; padding-top: 0px; padding-left: 5px; padding-right: 0px; } VAccordion { textRollOverColor: #FFFFFF; textSelectedColor: #FFFFFF; color: #FFFFFF; headerHeight: 35; vertical-gap: 5; background-alpha:0; open-duration:500; border-style:none; header-style-name: gradientHeader; } .gradientHeader { font-family: Verdana; cornerRadii: 10, 10, 10, 10; borderColors: #AAB1CD, #AAB1CD; overBorderColors: #FFFFFF, #FFFFFF; selectedBorderColors: #FFFFFF, #FFFFFF; borderThickness: 2; color: #FFFFFF; borderAlpha: 1; fillColors: #7f8182, #7f8182; fillAlphas: 1, 1; fillColorRatios: 0, 255; overFillColors: #FFFFFF, #FFFFFF; overFillAlphas: 1, 1; overFillColorRatios: 0, 169; selectedFillColors:#000000, #000000; selectedFillAlphas: 1,1; fontSize: 13; padding-left: 10px; padding-top: 0px; } LinkButton { fontSize: 10px; rollOverColor: #fafafa; selectionColor: #fafafa; color: #0B357F; textRollOverColor: #25bbfc; textSelectedColor: #0B357F; padding-left: 15px; padding-top: 5px; } .headerBox { font-weight: bold; color: #FFFFFF; } .students { padding-top: 0px; } .medical { padding-top: 0px; } .employ { padding-top: 0px; } .services { padding-top: 0px; } .label { font-weight: bold; color: #FFFFFF; } VBox{ } </mx:Style> <mx:HTTPService id="srv" url="properties.xml" resultFormat="e4x" /> <mx:XMLListCollection id="headingData" source="{srv.lastResult.heading}" /> <mx:XMLListCollection id="linksData" source="{srv.lastResult.heading.link.@linkname}" /> <flexlib:VAccordion id="accordion" headerRenderer="Header" width="238" height="230" > <mx:Repeater id="rep" dataProvider="{headingData}"> <mx:VBox label="{rep.currentItem.@title}" styleName="headerBox" backgroundColor="#fafafa" width="{rep.currentItem.@width}" height="{rep.currentItem.@height}"> <mx:Repeater id="linkrep" dataProvider="{rep.currentItem.link}"> <mx:LinkButton buttonDown="navigateToURL(new URLRequest(event.currentTarget.getRepeaterItem()), '_top')" label="{linksData.getItemAt(index+=1)}" /> </mx:Repeater> </mx:VBox> </mx:Repeater> </flexlib:VAccordion> </mx:Application> |
What this application does is loads data from an XML properties file containing the titles for the headers, the names for the links, and the URLs. I think the example is pretty straight forward.
To compile this you will need the flexlib.swf added to your flex/frameworks/libs folder as well as the header.mxml file which is used to allow the accordion to activate on mouse-over. The header.mxml file was found on http://dougmccune.com although the exact post escapes me now.
Here is the result
http://www.dreamwagon.com/flex/examples/accordion/
The xml properties file is herehttp://www.dreamwagon.com/flex/examples/accordion/properties.xmlThe source file can be copied from above or downloaded
http://www.dreamwagon.com/flex/examples/accordion/AccordionNavigation.mxml
and the header http://www.dreamwagon.com/flex/examples/accordion/Header.mxml
And finally the flexlib can be found here
http://code.google.com/p/flexlib/downloads/list
Of course you may take out the reference to the header and to the flexlib and complile the AccordionNavigation.mxml alone if you like.
Happy Flexing!