<?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>Peeled Carrots &#187; Flex</title>
	<atom:link href="http://www.peeledcarrots.com/tag/flex/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.peeledcarrots.com</link>
	<description>....cause life&#039;s too short to peel carrots. Enough said!!</description>
	<lastBuildDate>Tue, 31 Jan 2012 13:17:46 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Flex Internal build error</title>
		<link>http://www.peeledcarrots.com/flex-internal-build-error/</link>
		<comments>http://www.peeledcarrots.com/flex-internal-build-error/#comments</comments>
		<pubDate>Wed, 19 Aug 2009 15:08:35 +0000</pubDate>
		<dc:creator>Stephen Blake</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[Actionscript]]></category>
		<category><![CDATA[Flex]]></category>
		<category><![CDATA[Tutorial]]></category>

		<guid isPermaLink="false">http://www.peeledcarrots.com/?p=219</guid>
		<description><![CDATA[Whilst I was developing in Flex Builder today I came across the following abstract build error messge: An internal build error has occurred. Please check the Error Log It seems like this is quite a common problem and I found a number of blog atricles referring to it. It seems that one gets this error [...]]]></description>
			<content:encoded><![CDATA[<p>Whilst I was developing in <strong>Flex Builder</strong> today I came across the following abstract build error messge:<br />
<strong>An internal build error has occurred. Please check the Error Log</strong></p>
<p>It seems like this is quite a common problem and I found a number of blog atricles referring to it. It seems that one gets this error due to the following reasons:</p>
<ul>
<li>Having an incompleted switch statement without any cases</li>
<li>Missing a semi-colon after a variable declaration</li>
<li>Listing a twice with different extensions in your mxml</li>
<li>Declaring an import twice in an Actionscript file or embedded Actionscript in an mxml file</li>
<li>If certain lines of code are commented out resulting in a trace statements being unreachable</li>
</ul>
<p>However, the reason why I was getting the error was because I had mistakenly extended a class of itself&#8230;eg</p>
<p><code>public class myClass extends myClass<br />
{</p>
<p>}<br />
</code></p>
<p>AMATUER HOUR!!!</p>
<p>I found that soultion in a commet by Jules on <a href="http://michael.omnicypher.com/2007/02/internal-build-error.html">Michael Imhoff&#8217;s</a> blog.</p>
<blockquote><p>I just had the same error (Uncaught exception in .log, java.lang.StackOverflowException). It appeared after I&#8217;d done some work with sed on my object model. Turned out one of the classes extended itself, ie class myClass extends myClass <img src='http://www.peeledcarrots.com/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </p></blockquote>
<p>Thanks dudes <img src='http://www.peeledcarrots.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>One would think that the Flex compiler would have identified this and given a more dexcriptive error message?</p>
]]></content:encoded>
			<wfw:commentRss>http://www.peeledcarrots.com/flex-internal-build-error/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Ensuring the hand cursor is displayed in Flex components</title>
		<link>http://www.peeledcarrots.com/ensuring-the-hand-cursor-is-displayed-in-flex-components/</link>
		<comments>http://www.peeledcarrots.com/ensuring-the-hand-cursor-is-displayed-in-flex-components/#comments</comments>
		<pubDate>Mon, 22 Jun 2009 19:53:42 +0000</pubDate>
		<dc:creator>Stephen Blake</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[Code]]></category>
		<category><![CDATA[Flex]]></category>

		<guid isPermaLink="false">http://www.peeledcarrots.com/?p=206</guid>
		<description><![CDATA[I&#8217;m not sure if it&#8217;s a bug in the Flex code framework, but I have found it difficult to get the handcursor working when hovering over components like Labels/Text which arn&#8217;t used as links by default. After bashing my head against my desk for a few hours and doing some research on the web, I [...]]]></description>
			<content:encoded><![CDATA[<p>I&#8217;m not sure if it&#8217;s a bug in the <a href="http://www.adobe.com/products/flex/">Flex </a>code framework, but I have found it difficult to get the handcursor working when hovering over components like Labels/Text which arn&#8217;t used as links by default. After bashing my head against my desk for a few hours and doing some research on the web, I finally came across a soution which which works in most cases.  To get the hand cursor working you need use the following 3 properties:</p>
<p><strong>buttonMode=&#8221;true&#8221; mouseChildren=&#8221;false&#8221; useHandCursor=&#8221;true&#8221;</strong></p>
<p>Here&#8217;s an example of a Label which is used as a link:</p>
<p><code>< mx:Label text="Log out" buttonMode="true" mouseChildren="false" useHandCursor="true" click="logout()" /></code></p>
<p>It seems like it&#8217;s a pretty common problem and these two articles showed me the light of day, thanks dudes!</p>
<ul>
<li><a href="http://frankieloscavio.blogspot.com/2007/08/mousechildren-and-buttonmode.html">http://frankieloscavio.blogspot.com/2007/08/mousechildren-and-buttonmode.html</a></li>
<li><a href="http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&#038;productId=2&#038;postId=1687">http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&#038;productId=2&#038;postId=1687</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.peeledcarrots.com/ensuring-the-hand-cursor-is-displayed-in-flex-components/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Styling and controlling a Flex Tree control using a custom ItemRenderer</title>
		<link>http://www.peeledcarrots.com/styling-and-controlling-a-flex-tree-control-using-a-custom-itemrenderer/</link>
		<comments>http://www.peeledcarrots.com/styling-and-controlling-a-flex-tree-control-using-a-custom-itemrenderer/#comments</comments>
		<pubDate>Thu, 05 Mar 2009 09:34:50 +0000</pubDate>
		<dc:creator>Stephen Blake</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[Code]]></category>
		<category><![CDATA[Flex]]></category>
		<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://www.peeledcarrots.com/?p=201</guid>
		<description><![CDATA[I am still pretty new to Flex and the last two weeks have been a massive learning curve. However, through trial and error, lots of research and plenty of tea (thanks Drew!), I am finally coming to grips with Flex, but more importantly Actionscript. One of the things I have been working on is a [...]]]></description>
			<content:encoded><![CDATA[<p>I am still pretty new to Flex and the last two weeks have been a massive learning curve. However, through trial and error, lots of research and plenty of tea (thanks Drew!), I am finally coming to grips with Flex, but more importantly Actionscript.</p>
<p>One of the things I have been working on is a FAQ section for a web portol. To implement this I have used the following components and controls:</p>
<ol>
<li>A basepage</li>
<li>A standard mxml Tree contol (<mx :Tree />)</li>
<li><strong>A custom ItemRenderer</strong></li>
<li>A custom DataDescriptor</li>
<li>A function which is executed upon creation (creationComplete=&#8221;initTree()&#8221;)</li>
</ol>
<p>The focus of this tutorial is however on Item 3, <strong>a custom ItemRenderer</strong>. So here goes&#8230;</p>
<p>Firstly the data structure that I am using is a standard xml file which has categories, an answer and a question, I have included an exmaple below:<br />
<code><br />
< ? xml version="1.0" encoding="UTF-8"?><br />
< faq xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"><br />
	< category><br />
		< nameGuidance</ name><br />
		< item><br />
			< question>What is the meaning of life, the universe and everything?<br />
			< answer>42<br />
		< /item></p>
<p></code><br />
Secondly, the Tree control has a number of paramaters which need to be included to get the desired result:<br />
<code><br />
< mx:Tree id="myTree"<br />
		  styleName="faqList"<br />
	             wordWrap="true"<br />
	             itemClick="tree_itemClick(event);"<br />
	             width="100%" height="100%"<br />
	             top="20"<br />
	             dataDescriptor="{new TreeDataDescriptor()}"<br />
	             itemRenderer="renderers.TreeRenderer"<br />
	             creationComplete="initTree()"<br />
	             /><br />
</code><br />
I will try to cover the dataDescriptor, itemClick and creationComplete in other posts, but for the time being, the ItemRenderer works something like this:</p>
<ul>
<li>It is important to include the if (super.data) logic otherwise the application will through errors because it&#8217;s referring to an object with a null value.</li>
<li>In the data method, I have set all parents (depth == 1) to have a bold style otherwise the nodes should just have normal font weight.</li>
<li>In the updateDisplayList:
<ol>
<li>I firstly remove the disclosure icons from all nodes</li>
<li>Add some default text styling to nodes, which sets the selected node back to its original styling after it was selected</li>
<li>Then if a 2nd level node is either highlighted (isItemHighligthed) or selected (isItemSelected) I change styling, display the disclosure icon and adjust the position of the disclosure icon<br />
(super.disclosureIcon.x = super.width &#8211; 50;).
</li>
</ol>
</li>
<li>Note: The moving the position of the icon is relatively simple, but I had difficulty finding information on the web about how to do this, so I&#8217;m hoping this will help someone out ther. This particular example moves the disclsure icon 50px inside the right hand border of the Tree control</li>
</ul>
<p><code>package com.g3global.ipp.view.components.renderers<br />
{<br />
    import mx.collections.*;<br />
    import mx.controls.treeClasses.*;<br />
    import mx.controls.listClasses.ListBase;</p>
<p>	/*<br />
	*	Custom Item Renderer for TreeControl<br />
	*<br />
	*	@package	Renderers<br />
	*	@author		Stephen Blake<br />
	*/<br />
    public class TreeRenderer extends TreeItemRenderer<br />
    {</p>
<p>        /*<br />
        * Define the constructor.<br />
        */<br />
        public function TreeRenderer()<br />
        {<br />
            super();<br />
        }</p>
<p>        /* Override method for the data property to set the font color and style of each node.<br />
        *<br />
        * @param value Object<br />
        */<br />
        override public function set data(value:Object):void<br />
        {<br />
            super.data = value;</p>
<p>            if (super.data)<br />
            {<br />
	            if (TreeListData(listData).depth == 1)<br />
	            {<br />
	                 setStyle("fontWeight", 'bold');<br />
	            }<br />
	            else<br />
	            {<br />
	                setStyle("fontWeight", 'normal');<br />
	            }<br />
            }<br />
        }</p>
<p>        /* Override method to set the text for each tree node.<br />
        *<br />
        * @param unscaledWidth Number<br />
        * @param unscaledHeight Number<br />
        */<br />
        override protected function updateDisplayList(unscaledWidth:Number,<br />
            unscaledHeight:Number):void {</p>
<p>       		// Call the method in the super class<br />
       		super.updateDisplayList(unscaledWidth, unscaledHeight);</p>
<p>            if(super.data)<br />
            {<br />
          		// Set the disclosure icon to false - overrides styles<br />
          		super.disclosureIcon.visible = false;</p>
<p>          		if (TreeListData(listData).depth > 1)<br />
	            {<br />
	                 setStyle("fontWeight", 'normal');<br />
	            }</p>
<p>          		// Specific styling for children nodes that are selected or highlighted<br />
        	   	if(ListBase(owner).isItemSelected(data) || ListBase(owner).isItemHighlighted(data) &#038;&#038; TreeListData(listData).depth == 2)<br />
    	        {<br />
            		super.disclosureIcon.visible = true;<br />
		super.disclosureIcon.x = super.width - 50;<br />
                	setStyle('fontWeight', 'bold');<br />
	           }</p>
<p>			}<br />
        }<br />
    }<br />
}</code></p>
<p>So that&#8217;s about it. Unfortunately I can&#8217;t link to a working demo of this feature because it is part of a much bigger application which is being built for a client. </p>
]]></content:encoded>
			<wfw:commentRss>http://www.peeledcarrots.com/styling-and-controlling-a-flex-tree-control-using-a-custom-itemrenderer/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

