<?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/category/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>2</slash:comments>
		</item>
	</channel>
</rss>
