<?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>Ruben's blog &#187; Flex</title>
	<atom:link href="http://www.rubenswieringa.com/blog/tag/flex/feed" rel="self" type="application/rss+xml" />
	<link>http://www.rubenswieringa.com/blog</link>
	<description>Ruben Swieringa on Actionscript and a whole lot of other stuff..</description>
	<lastBuildDate>Mon, 15 Feb 2010 09:35:29 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Your Flex project overwrites your modules their styles</title>
		<link>http://www.rubenswieringa.com/blog/your-flex-project-overwrites-your-modules-their-styles</link>
		<comments>http://www.rubenswieringa.com/blog/your-flex-project-overwrites-your-modules-their-styles#comments</comments>
		<pubDate>Thu, 10 Dec 2009 19:50:28 +0000</pubDate>
		<dc:creator>Ruben</dc:creator>
				<category><![CDATA[Flex]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[modules]]></category>
		<category><![CDATA[styles]]></category>

		<guid isPermaLink="false">http://www.rubenswieringa.com/blog/?p=259</guid>
		<description><![CDATA[This afternoon I found out that when you're defining styles for the same selector in your main Flex application and in one of your modules, the latter style-declaration will not be used, at all. I'm not sure whether this is a quirk that has yet to be documented or that it's something that has already [...]]]></description>
			<content:encoded><![CDATA[<p>This afternoon I found out that when you're defining styles for the same selector in your main Flex application <em>and</em> in one of your modules, the latter style-declaration will not be used, <em>at all</em>. I'm not sure whether this is a quirk that has yet to be documented or that it's something that has already been covered in the LiveDocs, but any feedback is welcome.</p>
<p><span id="more-259"></span></p>
<p>Consider a Flex project with one main application file, a module including a <code>Label</code> with its <code>styleName</code> set to "myLabel", and two CSS files: Main.mxml, MyModule.mxml, main.css and module.css.</p>
<p>The CSS files are included (<code>&lt;mx:Style source=".."/&gt;</code>) in their respective MXML files and look like this:</p>
<pre class="css"><span style="color: #808080; font-style: italic;">/* main.css: */</span>
<span style="color: #6666ff;">.myLabel</span> <span style="color: #66cc66;">&#123;</span>
   <span style="color: #000000; font-weight: bold;">color</span>: <span style="color: #993333;">red</span>;
<span style="color: #66cc66;">&#125;</span></pre>
<pre class="css"><span style="color: #808080; font-style: italic;">/* module.css: */</span>
<span style="color: #6666ff;">.myLabel</span> <span style="color: #66cc66;">&#123;</span>
   <span style="color: #000000; font-weight: bold;">font-style</span>: <span style="color: #993333;">italic</span>;
<span style="color: #66cc66;">&#125;</span></pre>
<p>When you run this application and load in the module with the <code>Label</code> in it you'll notice that it is colored red, but its text is not italicized.</p>
<p>If you set the <code>-keep-generated-actionscript</code> argument to <code>true</code> in the compiler-settings* you can have a look under the hood of the Flex framework and see what actually happens here. Once the compiler has run you'll have a new folder called <em>'generated'</em> in the <em>'src'</em> folder of your project, this is where all the classes go that Flex auto-creates for stuff like data-binding and also embedded styles.</p>
<p>Somewhere in the <em>generated</em> folder there should be a class called <code>MyModule-generated</code> in which there's a method called <code>_MyModule_StylesInit()</code>:</p>
<p><img src="http://www.rubenswieringa.com/blog/wp-content/uploads/2009/mymodule-generated.png" /></p>
<p>In the above code Flex starts by looking for an existing style-declaration for the stylename <em>"myLabel"</em> and if there is none it'll create a new one -- in our case there already is a style-declaration however (as we've made one in main.css).</p>
<p>Next, Flex examines the <code>factory</code>-property of the style-declaration (a <code>CSSStyleDeclaration</code> instance). The <code>factory</code>-property is a function that defines all style-values that were set at compile-time from the class associated with the generated class (in this case MyModule.mxml). The value of <a href="http://www.adobe.com/livedocs/flex/3/langref/mx/styles/CSSStyleDeclaration.html#factory"><code>CSSStyleDeclaration.factory</code></a> is usually generated by the compiler (as you can see on line 152-155).</p>
<p>This part of the method is where things go wrong; by only updating the <code>factory</code> if it is null, Flex assumes that a compile-time style-declaration can only be set at one location in your project -- whereas we set it at two (Main.mxml and MyModule.mxml).<br />
Because the <code>factory</code>-property of our style-declaration has already been set when the styles from main.css were initialized (by similar auto-generated code for Main.mxml) the styles from module.css will be disregarded.</p>
<p>I at the very least hope this might save some other developers from hours of searching around their code, let me know. Also, this a good read if you want to familiarize yourself on the topic of modules and CSS in Flex:<br />
<a href="http://viconflex.blogspot.com/2007/04/flex-modules-compile-and-run-time-css.html">viconflex.blogspot.com/2007/04/flex-modules-compile-and-run-time-css.html</a></p>
<p class="note">* Configure the compiler by setting options in the <em>'additional compiler arguments'</em> field of the project properties window (right-click your project, go to <em>'properties'</em> and then <em>'Flex Compiler'</em>).</p>
]]></content:encoded>
			<wfw:commentRss>http://www.rubenswieringa.com/blog/your-flex-project-overwrites-your-modules-their-styles/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>&#8220;could not resolve &lt;mx:&#8230;&gt; to a component implementation&#8221;</title>
		<link>http://www.rubenswieringa.com/blog/could-not-resolve-mx-to-a-component-implementation</link>
		<comments>http://www.rubenswieringa.com/blog/could-not-resolve-mx-to-a-component-implementation#comments</comments>
		<pubDate>Mon, 26 Oct 2009 10:53:54 +0000</pubDate>
		<dc:creator>Ruben</dc:creator>
				<category><![CDATA[Actionscript]]></category>
		<category><![CDATA[Flex]]></category>
		<category><![CDATA[manifest]]></category>
		<category><![CDATA[MXML]]></category>
		<category><![CDATA[ToolTip]]></category>

		<guid isPermaLink="false">http://www.rubenswieringa.com/blog/?p=215</guid>
		<description><![CDATA[If you have ever tried to add mx.core.ToolTip (or certain other classes) as a mxml-tag to your Flex project then you might've run into the following compiler-error:
"Could not resolve &#60;mx:ToolTip&#62; to a component implementation."
So why does Flex (or rather MXMLC, the compiler) let you write &#60;mx:Button&#62; and &#60;mx:Canvas&#62; and all those other Flex components, but [...]]]></description>
			<content:encoded><![CDATA[<p>If you have ever tried to add <code>mx.core.ToolTip</code> (or certain other classes) as a mxml-tag to your Flex project then you might've run into the following compiler-error:</p>
<blockquote><p><em>"Could not resolve &lt;mx:ToolTip&gt; to a component implementation."</em></p></blockquote>
<p>So why does Flex (or rather MXMLC, the compiler) let you write <code>&lt;mx:Button&gt;</code> and <code>&lt;mx:Canvas&gt;</code> and all those other Flex components, but not <code>&lt;mx:ToolTip&gt</code> -- it's a native Flex class and it's in the <em>mx</em> package just like all of the others, right?</p>
<p>Fact is, it's not the <em>mx</em> class-package that defines whether or not you can add a component by saying <code>&lt;mx:...&gt;</code>, but rather the Flex component manifest file -- it describes which of the native Flex classes fall under the <em>mx</em> xml-namespace (or actually any namespace you want to use). I might write a post about manifest-files in Flex somewhere in the near future, but for now you'll have to <a href="http://livedocs.adobe.com/flex/3/html/compilers_31.html" title="About manifest files - Adobe Flex LiveDocs">read up in the docs</a> if you want to know more.</p>
<p>It so happens that the <code>ToolTip</code> class isn't included in the native Flex component manifest, and consequently the compiler won't be able to find it if you just write <em>"&lt;mx:ToolTip /&gt;"</em>. You can work around this by specifying a seperate xml-namespace for the <code>mx.controls</code> package:</p>
<pre class="xml"><span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;?xml</span> <span style="color: #000066;">version</span>=<span style="color: #ff0000;">&quot;1.0&quot;</span><span style="font-weight: bold; color: black;">?&gt;</span></span>
<span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;mx:Application</span> <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:controls</span>=<span style="color: #ff0000;">&quot;mx.controls.*&quot;</span><span style="font-weight: bold; color: black;">&gt;</span></span>
    <span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;controls:ToolTip</span> <span style="font-weight: bold; color: black;">/&gt;</span></span>
<span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/mx:Application<span style="font-weight: bold; color: black;">&gt;</span></span></span></pre>
<p>Note that in the above example we can't change the value of the <em>xmlns:mx</em> attribute so that it would point to the <code>mx.controls</code> class-package, because if we would then the compiler wouldn't recognize the <code>&lt;mx:Application&gt;</code> tag anymore (since the <code>Application</code> class isn't in the <em>mx.controls</em> package).</p>
<p>Also, for the naysayers who completely miss the point and start talking about why on earth you would want to instantiate a <code>ToolTip</code> through mxml: To tell the truth I was wondering about this myself, but if you think about it, tooltips in Flex aren't restricted to just having whatever you put into <code>UIComponent.toolTip</code> automatically pop up when you mouse-over. In fact you may want to create a custom mxml-component subclass of <code>ToolTip</code> and manually add it to your application using the <code>ToolTipManager</code> class during runtime.</p>
<p>That having been said, <code>ToolTip</code> isn't the only Flex-class not included in the Flex component manifest, naturally what I wrote in this post also applies to any other class in the Flex framework that extends <code>UIComponent</code> but isn't included in the manifest.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.rubenswieringa.com/blog/could-not-resolve-mx-to-a-component-implementation/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
