<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Development Soup &#187; properties</title>
	<atom:link href="https://dreamwagon.com/blog/?feed=rss2&#038;tag=properties" rel="self" type="application/rss+xml" />
	<link>https://dreamwagon.com/blog</link>
	<description></description>
	<lastBuildDate>Sun, 03 Aug 2014 23:22:50 +0000</lastBuildDate>
	<language>en-US</language>
		<sy:updatePeriod>hourly</sy:updatePeriod>
		<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=3.8.41</generator>
	<item>
		<title>flex accordion navigation using xml</title>
		<link>https://dreamwagon.com/blog/?p=6</link>
		<comments>https://dreamwagon.com/blog/?p=6#comments</comments>
		<pubDate>Tue, 08 Jan 2008 02:34:27 +0000</pubDate>
		<dc:creator><![CDATA[Jesse]]></dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[accordion]]></category>
		<category><![CDATA[actionscript]]></category>
		<category><![CDATA[adobe]]></category>
		<category><![CDATA[flash]]></category>
		<category><![CDATA[flex]]></category>
		<category><![CDATA[HTTPService]]></category>
		<category><![CDATA[linkbutton]]></category>
		<category><![CDATA[MX]]></category>
		<category><![CDATA[navigation]]></category>
		<category><![CDATA[properties]]></category>
		<category><![CDATA[Repeater]]></category>
		<category><![CDATA[tutorial]]></category>
		<category><![CDATA[xml]]></category>

		<guid isPermaLink="false">http://dreamwagon.com/blog/?p=6</guid>
		<description><![CDATA[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&#8217;s website.&#8230;  <p class="more-link"><a href="https://dreamwagon.com/blog/?p=6">Continue reading <span class="meta-nav">&#8594;</span></a></p>]]></description>
				<content:encoded><![CDATA[<p>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&#8217;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.</p>

<div class="wp_syntax"><table><tr><td class="code"><pre class="xml" style="font-family:monospace;"> <span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;?xml</span> <span style="color: #000066;">version</span>=<span style="color: #ff0000;">&quot;1.0&quot;</span> <span style="color: #000066;">encoding</span>=<span style="color: #ff0000;">&quot;utf-8&quot;</span><span style="color: #000000; font-weight: bold;">?&gt;</span><span style="color: #000000; font-weight: bold;">&lt;mx:Application</span></span>
<span style="color: #009900;"><span style="color: #000066;">xmlns:mx</span>=<span style="color: #ff0000;">&quot;http://www.adobe.com/2006/mxml&quot;</span> <span style="color: #000066;">xmlns</span>=<span style="color: #ff0000;">&quot;*&quot;</span> <span style="color: #000066;">xmlns:flexlib</span>=<span style="color: #ff0000;">&quot;http://code.google.com/p/flexlib/&quot;</span></span>
<span style="color: #009900;"><span style="color: #000066;">layout</span>=<span style="color: #ff0000;">&quot;vertical&quot;</span> <span style="color: #000066;">viewSourceURL</span>=<span style="color: #ff0000;">&quot;srcview/index.html&quot;</span> <span style="color: #000066;">backgroundColor</span>=<span style="color: #ff0000;">&quot;#ffffff&quot;</span></span>
<span style="color: #009900;"><span style="color: #000066;">creationComplete</span>=<span style="color: #ff0000;">&quot;srv.send();&quot;</span><span style="color: #000000; font-weight: bold;">&lt;mx:Script<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #339933;">&lt;![CDATA[</span>
&nbsp;
<span style="color: #339933;">import mx.collections.ArrayCollection;</span>
<span style="color: #339933;">import mx.utils.ArrayUtil;</span>
<span style="color: #339933;">[Bindable]</span>
<span style="color: #339933;">public var navData:ArrayCollection;</span>
&nbsp;
<span style="color: #339933;">[Bindable]</span>
<span style="color: #339933;">public var index:int=-1;</span>
&nbsp;
<span style="color: #339933;">]]&gt;</span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/mx:Script<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mx:Style<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
Application {
backgroundGradientColors: #FFFFFF, #FFFFFF;
backgroundGradientAlphas: 1, 1;
vertical-align: top;
horizontal-align: center;
padding-top: 0px;
padding-left: 5px;
padding-right: 0px;
}
&nbsp;
VAccordion {
textRollOverColor: #FFFFFF;
textSelectedColor: #FFFFFF;
color: #FFFFFF;
headerHeight: 35;
vertical-gap: 5;
background-alpha:0;
open-duration:500;
border-style:none;
&nbsp;
header-style-name: gradientHeader;
&nbsp;
}
&nbsp;
.gradientHeader {
&nbsp;
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;
&nbsp;
fontSize: 13;
padding-left: 10px;
padding-top: 0px;
&nbsp;
}
&nbsp;
LinkButton {
fontSize: 10px;
rollOverColor: #fafafa;
selectionColor: #fafafa;
color: #0B357F;
textRollOverColor: #25bbfc;
textSelectedColor: #0B357F;
padding-left: 15px;
padding-top: 5px;
}
&nbsp;
.headerBox {
font-weight: bold;
color: #FFFFFF;
}
&nbsp;
.students {
padding-top: 0px;
}
&nbsp;
.medical {
padding-top: 0px;
}
&nbsp;
.employ {
padding-top: 0px;
}
&nbsp;
.services {
padding-top: 0px;
}
&nbsp;
.label {
font-weight: bold;
color: #FFFFFF;
}
&nbsp;
VBox{
&nbsp;
}
&nbsp;
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/mx:Style<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mx:HTTPService</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;srv&quot;</span> <span style="color: #000066;">url</span>=<span style="color: #ff0000;">&quot;properties.xml&quot;</span> <span style="color: #000066;">resultFormat</span>=<span style="color: #ff0000;">&quot;e4x&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
&nbsp;
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mx:XMLListCollection</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;headingData&quot;</span> <span style="color: #000066;">source</span>=<span style="color: #ff0000;">&quot;{srv.lastResult.heading}&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mx:XMLListCollection</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;linksData&quot;</span> <span style="color: #000066;">source</span>=<span style="color: #ff0000;">&quot;{srv.lastResult.heading.link.@linkname}&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
&nbsp;
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;flexlib:VAccordion</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;accordion&quot;</span> <span style="color: #000066;">headerRenderer</span>=<span style="color: #ff0000;">&quot;Header&quot;</span> <span style="color: #000066;">width</span>=<span style="color: #ff0000;">&quot;238&quot;</span> <span style="color: #000066;">height</span>=<span style="color: #ff0000;">&quot;230&quot;</span> <span style="color: #000000; font-weight: bold;">&gt;</span></span>
&nbsp;
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mx:Repeater</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;rep&quot;</span> <span style="color: #000066;">dataProvider</span>=<span style="color: #ff0000;">&quot;{headingData}&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mx:VBox</span> <span style="color: #000066;">label</span>=<span style="color: #ff0000;">&quot;{rep.currentItem.@title}&quot;</span> <span style="color: #000066;">styleName</span>=<span style="color: #ff0000;">&quot;headerBox&quot;</span>  <span style="color: #000066;">backgroundColor</span>=<span style="color: #ff0000;">&quot;#fafafa&quot;</span> <span style="color: #000066;">width</span>=<span style="color: #ff0000;">&quot;{rep.currentItem.@width}&quot;</span> <span style="color: #000066;">height</span>=<span style="color: #ff0000;">&quot;{rep.currentItem.@height}&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
&nbsp;
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mx:Repeater</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">&quot;linkrep&quot;</span> <span style="color: #000066;">dataProvider</span>=<span style="color: #ff0000;">&quot;{rep.currentItem.link}&quot;</span><span style="color: #000000; font-weight: bold;">&gt;</span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;mx:LinkButton</span> <span style="color: #000066;">buttonDown</span>=<span style="color: #ff0000;">&quot;navigateToURL(new URLRequest(event.currentTarget.getRepeaterItem()), '_top')&quot;</span>  <span style="color: #000066;">label</span>=<span style="color: #ff0000;">&quot;{linksData.getItemAt(index+=1)}&quot;</span> <span style="color: #000000; font-weight: bold;">/&gt;</span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/mx:Repeater<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/mx:VBox<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/mx:Repeater<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/flexlib:VAccordion<span style="color: #000000; font-weight: bold;">&gt;</span></span></span>
&nbsp;
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/mx:Application<span style="color: #000000; font-weight: bold;">&gt;</span></span></span></pre></td></tr></table></div>

<p>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.</p>
<p>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.</p>
<p>Here is the result</p>
<p><a href="http://www.dreamwagon.com/flex/examples/accordion/">http://www.dreamwagon.com/flex/examples/accordion/</a></p>
<p>The xml properties file is here<a href="http://www.dreamwagon.com/flex/examples/accordion/properties.xml" target="_blank">http://www.dreamwagon.com/flex/examples/accordion/properties.xml</a>The source file can be copied from above or downloaded</p>
<p><a href="http://www.dreamwagon.com/flex/examples/accordion/AccordionNavigation.mxml">http://www.dreamwagon.com/flex/examples/accordion/AccordionNavigation.mxml</a></p>
<p>and the header <a href="http://www.dreamwagon.com/flex/examples/accordion/Header.mxml">http://www.dreamwagon.com/flex/examples/accordion/Header.mxml</a></p>
<p>And finally the flexlib can be found here</p>
<p><a href="http://code.google.com/p/flexlib/downloads/list">http://code.google.com/p/flexlib/downloads/list</a></p>
<p>Of course you may take out the reference to the header and to the flexlib and complile the AccordionNavigation.mxml alone if you like.</p>
<p>Happy Flexing!</p>
]]></content:encoded>
			<wfw:commentRss>https://dreamwagon.com/blog/?feed=rss2&#038;p=6</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
