<?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>WS-Blog</title>
	<atom:link href="http://www.websector.de/blog/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.websector.de/blog</link>
	<description>// Flex, AIR, Flash</description>
	<lastBuildDate>Thu, 25 Feb 2010 14:36:47 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Quick Tip (Flex 4): Using asfunction in TLF (Text Layout Framework)</title>
		<link>http://www.websector.de/blog/2010/02/25/quick-tip-flex-4-using-asfunction-in-tlf-text-layout-framework/</link>
		<comments>http://www.websector.de/blog/2010/02/25/quick-tip-flex-4-using-asfunction-in-tlf-text-layout-framework/#comments</comments>
		<pubDate>Thu, 25 Feb 2010 13:40:29 +0000</pubDate>
		<dc:creator>sectore</dc:creator>
				<category><![CDATA[Flex]]></category>

		<guid isPermaLink="false">http://www.websector.de/blog/?p=517</guid>
		<description><![CDATA[Do you remember the very old school global function called  asfunction? It was used to call custom ActionScript methods clicking an HTML link. The definition in HTML was something like this: < a href='asfunction:myFunction' >my link< /a > .

Since ActionScript 3 asfunction has been deprecated and was replaced with a new event handling using [...]]]></description>
			<content:encoded><![CDATA[<p>Do you remember the very old school global function called  <code>asfunction</code>? It was used to call custom ActionScript methods clicking an HTML link. The definition in HTML was something like this: <code>< a href='asfunction:myFunction' >my link< /a > </code>.</p>
<p><span id="more-517"></span></p>
<p>Since ActionScript 3 <code>asfunction</code> has <a href="http://www.adobe.com/devnet/actionscript/as3_migration_table.html">been deprecated</a> and was replaced with a new event handling using <code><a href="http://help.adobe.com/en_US/FlashPlatform/beta/reference/actionscript/3/flash/events/TextEvent.html#LINK">TextEvent.LINK</a></code> and <code>'event:myEventType'</code> defined at the HTML link. For example <code>&lt; a href='event:myEventType' &gt;my link&lt; /a &gt; </code>. In this case you have to add just one event listener to handle all(!!) events.</p>
<h2>Flex 4 + Text Layout Framework + asfunction?</h2>
<p>But what happens if you want to call an ActionScript method clicking an HTML link and using the Text Layout Framework (TLF) in Flex 4? </p>
<p><code>RichEditableText</code> is the TLF component to embed a clickable HTML text, but it does not support an event handler for a <code>TextEvent.LINK</code> event. Today I ran into this issue and I couldn&#8217;t find any solution (either at official Flex doc or not at Google).</p>
<p>Anyway, the solution it is pretty easy. Just define your HTML links as before in Flex 3 and add an event listener for every (!!) event to a <code>TextFlow</code> of a <code>RichEditableText</code></p>
<phpcode>
<div class="codeHeadlineBox">
<p>ASFunctionExample.mxml ( <a href="http://www.websector.de/blog/wp-content/uploads/2010/02/25/ASFunctionExample.mxml">Download code</a> )</p>
</div>
<div class="actionscript" style="font-family: monospace;">
<ol>
<li class="li1">
<div class="de1">&lt;?<span class="kw3">xml</span> <span class="kw3">version</span>=<span class="st0">&quot;1.0&quot;</span> encoding=<span class="st0">&quot;utf-8&quot;</span>?&gt;</div>
</li>
<li class="li1">
<div class="de1">&lt;s:VGroup </div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; xmlns:fx=<span class="st0">&quot;http://ns.adobe.com/mxml/2009&quot;</span> </div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; xmlns:s=<span class="st0">&quot;library://ns.adobe.com/flex/spark&quot;</span> </div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; xmlns:mx=<span class="st0">&quot;library://ns.adobe.com/flex/halo&quot;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &gt;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &lt;fx:Script&gt;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &lt;!<span class="br0">&#91;</span>CDATA<span class="br0">&#91;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flashx.<span class="me1">textLayout</span>.<span class="me1">conversion</span>.<span class="me1">TextConverter</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> flashx.<span class="me1">textLayout</span>.<span class="me1">events</span>.<span class="me1">FlowElementMouseEvent</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">import</span> mx.<span class="me1">events</span>.<span class="me1">FlexEvent</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="coMULTI">/**</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; * HTML string</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; * Note the anchor using &#8216;event:myEventType&#8217; to call an ActionScript method</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; */</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; protected <span class="kw3">static</span> const <span class="kw3">HTML</span>: <span class="kw3">String</span> = &nbsp; <span class="st0">&quot;&lt;p&gt;Hello, here is a link to &quot;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; + <span class="st0">&quot;&lt;a href=&#8217;event:myEventType&#8217;&gt;run my custom method&lt;/a&gt;&quot;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; + <span class="st0">&quot;&lt;/p&gt;&quot;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; </div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="coMULTI">/**</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; * Adding listener to for event:myEventType defined in HTML</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; * at a TextFlow of RichEditableText</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; * </span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; */</span>&nbsp;&nbsp;&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; protected <span class="kw2">function</span> richtext1_initializeHandler<span class="br0">&#40;</span>event:FlexEvent<span class="br0">&#41;</span>:<span class="kw3">void</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; myText.<span class="me1">textFlow</span>.<span class="me1">addEventListener</span><span class="br0">&#40;</span> <span class="st0">&#8216;myEventType&#8217;</span>, customMethodHandler <span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="coMULTI">/**</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; * Custom event handler for event:customMethod defined in HTML</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; * </span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; */</span>&nbsp;&nbsp;&nbsp;&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; protected <span class="kw2">function</span> customMethodHandler<span class="br0">&#40;</span> event:FlowElementMouseEvent <span class="br0">&#41;</span>:<span class="kw3">void</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; result.<span class="kw3">text</span> += <span class="st0">&quot;run custom method<span class="es0">\n</span>&quot;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="br0">&#93;</span><span class="br0">&#93;</span>&gt;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &lt;/fx:Script&gt;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; </div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; </div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &lt;s:RichEditableText</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; id=<span class="st0">&quot;myText&quot;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">width</span>=<span class="st0">&quot;100%&quot;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">selectable</span>=<span class="st0">&quot;false&quot;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; editable=<span class="st0">&quot;false&quot;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; initialize=<span class="st0">&quot;richtext1_initializeHandler(event)&quot;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; textFlow=<span class="st0">&quot;{ TextConverter.importToFlow( HTML, TextConverter.TEXT_FIELD_HTML_FORMAT ) }&quot;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; /&gt;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &lt;s:TextArea</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; id=<span class="st0">&quot;result&quot;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; /&gt;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; </div>
</li>
<li class="li1">
<div class="de1">&lt;/s:VGroup&gt;</div>
</li>
</ol>
</div>
</phpcode>
<h2>Some notes:</h2>
<ul>
<li>To have an clickable HTML link using <code>RichEditableText</code>, its property <code>selectable</code> and <code>editable</code> has to be &#8216;false&#8217;</li>
<li>Anchors defined in HTML will be a <code>LinkElements</code> at the TLF</li>
<li>All events will be dispatched from this <code>LinkElement</code> as a <code>FlowElementMouseEvent</code>. Its type is a &#8216;custom&#8217; type and will be the same as defined in HTML.</li>
<li>Any &#8216;asfunction&#8217; call has to be defined in HTML using &#8216;event:myEventType&#8217;. The LinkElement will check itself if the link includes an url or just an &#8216;asfunction&#8217; call.</li>
<li>To listen all events you have to add different listeners for each event type to a <code>TextFlow</code> of a <code>RichEditableText</code>.</li>
</ul>
<p>-Jens</p>
]]></content:encoded>
			<wfw:commentRss>http://www.websector.de/blog/2010/02/25/quick-tip-flex-4-using-asfunction-in-tlf-text-layout-framework/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Quick tip (Flex 4): Goodbye templates &#8211; hello mxmlContent</title>
		<link>http://www.websector.de/blog/2009/10/02/quick-tip-flex-4-goodbye-templates-hello-mxmlcontent/</link>
		<comments>http://www.websector.de/blog/2009/10/02/quick-tip-flex-4-goodbye-templates-hello-mxmlcontent/#comments</comments>
		<pubDate>Fri, 02 Oct 2009 11:06:37 +0000</pubDate>
		<dc:creator>sectore</dc:creator>
				<category><![CDATA[Flex]]></category>

		<guid isPermaLink="false">http://www.websector.de/blog/?p=445</guid>
		<description><![CDATA[Back in Flex 3
In Flex 3 is it pretty painful to extend a custom container component for adding children to it using MXML. The following example will throw an error like this: Error: Multiple sets of visual children have been specified for this component (base component definition and derived component definition).



MySubContainer.mxml ( Download code )




&#60;?xml [...]]]></description>
			<content:encoded><![CDATA[<h2>Back in Flex 3</h2>
<p>In Flex 3 is it pretty painful to extend a custom container component for adding children to it using MXML. The following example will throw an error like this: <em>Error: Multiple sets of visual children have been specified for this component (base component definition and derived component definition).</em></p>
<p><span id="more-445"></span></p>
<phpcode>
<div class="codeHeadlineBox">
<p>MySubContainer.mxml ( <a href="http://www.websector.de/blog/wp-content/uploads/2009/10/02/MySubContainerFlex3.mxml">Download code</a> )</p>
</div>
<div class="actionscript" style="font-family: monospace;">
<ol>
<li class="li1">
<div class="de1">&lt;?<span class="kw3">xml</span> <span class="kw3">version</span>=<span class="st0">&quot;1.0&quot;</span> encoding=<span class="st0">&quot;utf-8&quot;</span>?&gt;</div>
</li>
<li class="li1">
<div class="de1">&lt;!&#8211;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw2">class</span> hierarchy of MySubContainer:</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; </div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; Canvas</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; |</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; MyContainer</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; |</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; MySubContainer </div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; </div>
</li>
<li class="li1">
<div class="de1">&#8211;&gt;</div>
</li>
<li class="li1">
<div class="de1">&lt;local:MyContainer </div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; xmlns:mx=<span class="st0">&quot;http://www.adobe.com/2006/mxml&quot;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; xmlns:local=<span class="st0">&quot;*&quot;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &gt;&nbsp; &nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &lt;mx:Label</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">text</span>=<span class="st0">&quot;subContainer&quot;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; /&gt;</div>
</li>
<li class="li1">
<div class="de1">&lt;/local:MyContainer&gt;</div>
</li>
</ol>
</div>
</phpcode>
<p>To avoid this issue in Flex 3 there are already some workarounds using <a href="http://livedocs.adobe.com/flex/3/html/help.html?content=templating_3.html">template components</a>. For more information check the following posts:
<ul>
<li>Peter Ent: <a href="http://weblogs.macromedia.com/pent/archives/2006/03/component_templ.cfm">Template in Flex</a></li>
<li>Tony Fendall: <a href="http://www.munkiihouse.com/?p=37">Adding &#8216;Multiple sets of visual children&#8217; to custom components</a></li>
<li>Dirk Eismann: <a href="http://www.richinternet.de/blog/index.cfm?entry=CD61A506-00CA-B6DF-802A549E330AFD67">A simple(r) workaround for the &#8216;Multiple sets of visual children&#8217; runtime error</a></li>
</ul>
<h2>Today in Flex 4</h2>
<p>Now in Flex 4 this issue has been fixed. There is no need for using custom template component if you extend Sparks <code><a href="http://livedocs.adobe.com/flex/gumbo/langref/spark/components/Group.html">Group</a></code> or <code><a href="http://livedocs.adobe.com/flex/gumbo/langref/spark/components/SkinnableContainer.html">SkinnableContainer</a></code> in multiple levels. That means there is no error using:</p>
<phpcode>
<div class="codeHeadlineBox">
<p>MySubContainer.mxml ( <a href="http://www.websector.de/blog/wp-content/uploads/2009/10/02/MySubContainerFlex4.mxml">Download code</a> )</p>
</div>
<div class="actionscript" style="font-family: monospace;">
<ol>
<li class="li1">
<div class="de1">&lt;?<span class="kw3">xml</span> <span class="kw3">version</span>=<span class="st0">&quot;1.0&quot;</span> encoding=<span class="st0">&quot;utf-8&quot;</span>?&gt;</div>
</li>
<li class="li1">
<div class="de1">&lt;!&#8211;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw2">class</span> hierarchy of MySubContainer:</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; Group</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; |</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; MyContainer</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; |</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; MySubContainer </div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&#8211;&gt;</div>
</li>
<li class="li1">
<div class="de1">&lt;local:MyContainer</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; xmlns:fx=<span class="st0">&quot;http://ns.adobe.com/mxml/2009&quot;</span> </div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; xmlns:s=<span class="st0">&quot;library://ns.adobe.com/flex/spark&quot;</span> </div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; xmlns:mx=<span class="st0">&quot;library://ns.adobe.com/flex/halo&quot;</span> </div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; xmlns:local=<span class="st0">&quot;*&quot;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &gt;&nbsp; &nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &lt;s:Label</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw3">text</span>=<span class="st0">&quot;subContainer&quot;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; /&gt;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; </div>
</li>
<li class="li1">
<div class="de1">&lt;/local:MyContainer&gt;</div>
</li>
</ol>
</div>
</phpcode>
<p><strong>Behind the scenes:</strong> Every Spark <code>Group</code> or <code>SkinnableContainer</code> has a property called <code>mxmlContent</code>, which handles internal all the needed stuff for organizing children defined by MXML. Furthermore all container classes has defined a metatag declaration named <code>DefaultProperty</code> </p>
<ul>
<li>Group: <code>[DefaultProperty("mxmlContent")] )</code></li>
<li>SkinnableContainer: <code>[DefaultProperty("mxmlContentFactory")]</code></li>
</ul>
<p>which causes the compiler to add all (top) children defined within MXML as an array to the setter method <code>mxmlConent</code> or  <code>mxmlContentFactory</code>.</p>
<p><strong>Important note: </strong>If you have already defined children within the super class, these will be removed by the subclass by default. To avoid this, you have to override the setter method <code>mxmlContent</code> of the subclass or build your own <a href="http://help.adobe.com/en_US/Flex/4.0/UsingSDK/WS2db454920e96a9e51e63e3d11c0bf69084-7a1e.html">custom template component</a>.</p>
<p>Happy Flex 4 coding <img src='http://www.websector.de/blog/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
<p>-Jens</p>
]]></content:encoded>
			<wfw:commentRss>http://www.websector.de/blog/2009/10/02/quick-tip-flex-4-goodbye-templates-hello-mxmlcontent/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Custom ApplicationUpdaterUI for using AIR Update Framework in Flex 4</title>
		<link>http://www.websector.de/blog/2009/09/09/custom-applicationupdaterui-for-using-air-updater-framework-in-flex-4/</link>
		<comments>http://www.websector.de/blog/2009/09/09/custom-applicationupdaterui-for-using-air-updater-framework-in-flex-4/#comments</comments>
		<pubDate>Wed, 09 Sep 2009 17:25:54 +0000</pubDate>
		<dc:creator>sectore</dc:creator>
				<category><![CDATA[AIR]]></category>
		<category><![CDATA[Flex]]></category>
		<category><![CDATA[Open Source]]></category>

		<guid isPermaLink="false">http://www.websector.de/blog/?p=403</guid>
		<description><![CDATA[Flex 4 is Rock &#8216;n&#8217; Roll! However, Flex 4 is still beta and it can&#8217;t be perfect right now. Today one of the most missing feature for me is using the ApplicationUpdaterUI of the Adobe AIR Update Framework in Flex 4. This bug is already documented. (BTW: Please vote here to fix this issue! )
Anyway, [...]]]></description>
			<content:encoded><![CDATA[<p>Flex 4 is Rock &#8216;n&#8217; Roll! However, Flex 4 is still beta and it can&#8217;t be perfect right now. Today one of the <a href="http://twitter.com/sectore/status/3513712009">most missing feature for me</a> is using the ApplicationUpdaterUI of the <a href="http://labs.adobe.com/wiki/index.php/Adobe_AIR_Update_Framework">Adobe AIR Update Framework</a> in Flex 4. <a href="http://bugs.adobe.com/jira/browse/SDK-22886?rc=1">This bug</a> is already documented. (BTW: <a href="http://bugs.adobe.com/jira/browse/SDK-22886?rc=1">Please vote here</a> to fix this issue! )</p>
<p>Anyway, I can&#8217;t wait for the final release of Flex 4, so I decided to build a <a href="http://github.com/sectore/applicationupdaterui/">custom ApplicationUpdaterUI component</a> based on the new <a href="http://opensource.adobe.com/wiki/display/flexsdk/Gumbo+Skinning">Spark skinning architecture</a>. The custom  ApplicationUpdaterUI is built on the top of the current version of Adobes AIR Update Framework and most of the current features are available (e.g. auto check, localization etc.) The component is full skinnable using it as an external window (as before) or as an embedded view component in an application (without the need of a popup window). </p>
<p><span id="more-403"></span></p>
<h2>Usage</h2>
<phpcode>
<div class="codeHeadlineBox">
<p>Usage of ApplicationUpdaterUI ( <a href="http://www.websector.de/blog/wp-content/uploads/2009/09/09/snippet0.txt">Download code</a> )</p>
</div>
<div class="actionscript" style="font-family: monospace;">
<ol>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="co1">//</span></div>
</li>
<li class="li1">
<div class="de1"><span class="co1">// [1] Using ApplicationUpdaterUI as a popup window using ActionScript</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw2">var</span> updater: ApplicationUpdaterUI = <span class="kw2">new</span> ApplicationUpdaterUI<span class="br0">&#40;</span>&nbsp; &nbsp;<span class="kw2">new</span> File <span class="br0">&#40;</span> <span class="st0">&#8216;pathToYourUpdaterXML&#8217;</span> <span class="br0">&#41;</span>, <span class="kw2">true</span>, <span class="kw2">true</span> <span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="co1">// Optional: setting skin</span></div>
</li>
<li class="li1">
<div class="de1">updater.<span class="kw3">setStyle</span><span class="br0">&#40;</span><span class="st0">&#8217;skinClass&#8217;</span>, de.<span class="me1">websector</span>.<span class="me1">utils</span>.<span class="me1">updater</span>.<span class="me1">ui</span>.<span class="me1">skins</span>.<span class="me1">silver</span>.<span class="me1">AppUpdaterUISilverSkin</span><span class="br0">&#41;</span>; &nbsp; </div>
</li>
<li class="li1">
<div class="de1"><span class="co1">// Optional:&nbsp; change the height and width of the window</span></div>
</li>
<li class="li1">
<div class="de1">updater.<span class="me1">windowHeight</span> = <span class="nu0">300</span>;&nbsp;&nbsp;&nbsp;&nbsp;</div>
</li>
<li class="li1">
<div class="de1">updater.<span class="me1">windowWidth</span> = <span class="nu0">500</span>;&nbsp; &nbsp; &nbsp; &nbsp; </div>
</li>
<li class="li1">
<div class="de1"><span class="co1">// check for updates</span></div>
</li>
<li class="li1">
<div class="de1">updater.<span class="me1">checkNow</span><span class="br0">&#40;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="co1">//</span></div>
</li>
<li class="li1">
<div class="de1"><span class="co1">// [2] Using ApplicationUpdaterUI as an embedded view within your application</span></div>
</li>
<li class="li1">
<div class="de1"><span class="co1">// Important: Avoid using popup window: useWindow=false (default is true)</span></div>
</li>
<li class="li1">
<div class="de1"><span class="co1">// Optional: setting skin class via &quot;skinClass&quot;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="co1">// Optional: If the view should be visible only if an update available set invisibleCheck=&quot;true&quot; (default is false)</span></div>
</li>
<li class="li1">
<div class="de1">&lt;ws:ApplicationUpdaterUI</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; xmlns:ws=<span class="st0">&quot;http://websector.de&quot;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; id=<span class="st0">&quot;updater&quot;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw3">width</span>=<span class="st0">&quot;100%&quot;</span> <span class="kw3">height</span>=<span class="st0">&quot;50&quot;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; configurationFile=<span class="st0">&quot;{ new File ( Constants.UPDATE_FILE ) }&quot;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; skinClass=<span class="st0">&quot;de.websector.utils.updater.ui.skins.firefox.AppUpdaterUIFirefoxSkin&quot;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; invisibleCheck=<span class="st0">&quot;true&quot;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; useWindow=<span class="st0">&quot;false&quot;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; /&gt;</div>
</li>
</ol>
</div>
</phpcode>
<h2>Skin examples</h2>
<p>It&#8217;s pretty easy to create your own skin and add it to the component! Check out the 3 different skins and feel free to use these as an example for your custom skins. </p>
<ol>
<li><em>AppUpdaterUIStandardSkin:</em> Cloned interface of the Flex 3 based ApplicationUpdaterUI</li>
<li><em>AppUpdaterUISilverSkin:</em> Inspired from Adobes shiny XD components</li>
<li><em>AppUpdaterUIFirefoxSkin:</em> That&#8217;s my favorite <img src='http://www.websector.de/blog/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> . Do you know the status bar on the top of a HTML page in Firefox 3.0 if a popup is trying to open? This skin a clone of such a bar to inform the user, if an update available. No need for an extra popup window.</li>
</ol>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			id="fm_FlexUpdaterUIExample_1222272178"
			class="flashmovie"
			width="500"
			height="500">
	<param name="movie" value="http://www.websector.de/blog/wp-content/uploads/2009/09/09/FlexUpdaterUIExample.swf" />
	<param name="menu" value="false" />
	<param name="bgcolor" value="#FFFFFF" />
	<!--[if !IE]>-->
	<object	type="application/x-shockwave-flash"
			data="http://www.websector.de/blog/wp-content/uploads/2009/09/09/FlexUpdaterUIExample.swf"
			name="fm_FlexUpdaterUIExample_1222272178"
			width="500"
			height="500">
		<param name="menu" value="false" />
		<param name="bgcolor" value="#FFFFFF" />
	<!--<![endif]-->
		
<h2>Download full source</h2>
<p>Full source is available at GitHub (package: <em>de.websector.utils.updater.ui.*</em>) :<br />
<a href="http://github.com/sectore/applicationupdaterui/">http://github.com/sectore/applicationupdaterui/</a></p>
<p>All source of ApplicationUpdaterUI  is open source licensed under <a href="http://www.mozilla.org/MPL/MPL-1.1.html">Mozilla Public License 1.1.</a></p>
<h2>Personal TODOs</h2>
<ul>
<li>Documenting / commenting code base</li>
<li>It&#8217;s not a &#8220;most wanted feature&#8221; right now, but handling of an update using files (events: StatusFileUpdateEvent.FILE_UPDATE_STATUS and StatusFileUpdateErrorEvent.FILE_UPDATE_ERROR) would be nice. If I have the time, I&#8217;m going to implement it. </li>
</ul>
<p>Happy updating <img src='http://www.websector.de/blog/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' />  !</p>
<p>-Jens</p>
]]></content:encoded>
			<wfw:commentRss>http://www.websector.de/blog/2009/09/09/custom-applicationupdaterui-for-using-air-updater-framework-in-flex-4/feed/</wfw:commentRss>
		<slash:comments>20</slash:comments>
		</item>
		<item>
		<title>Testing states of skin classes in Flex 4 using WSSkinStatesTester</title>
		<link>http://www.websector.de/blog/2009/09/06/testing-states-of-skin-classes-in-flex-4-using-wsskinstatestester/</link>
		<comments>http://www.websector.de/blog/2009/09/06/testing-states-of-skin-classes-in-flex-4-using-wsskinstatestester/#comments</comments>
		<pubDate>Sun, 06 Sep 2009 09:59:38 +0000</pubDate>
		<dc:creator>sectore</dc:creator>
				<category><![CDATA[Flex]]></category>
		<category><![CDATA[Open Source]]></category>

		<guid isPermaLink="false">http://www.websector.de/blog/?p=385</guid>
		<description><![CDATA[WSSkinStatesTester is a handy tool to test visually all states of any skin classes in Flex 4 (Gumbo).

Imagine you as a Flex developer or a designer have been created a lot of skins for your application, e.g. using Flash Catalyst. Now you want to check the behavior of these skins changing its states. Therefore you [...]]]></description>
			<content:encoded><![CDATA[<p>WSSkinStatesTester is a handy tool to test visually all states of any skin classes in Flex 4 (Gumbo).</p>
<p><span id="more-385"></span></p>
<p>Imagine you as a Flex developer or a designer have been created a lot of skins for your application, e.g. using Flash Catalyst. Now you want to check the behavior of these skins changing its states. Therefore you will run your application to change different states of components or you open Flash Catalyst to check all the states of a skin. Or you could use Flash Builders design view for this issue, but unfortunately it is unable to show transitions switching between states.</p>
<p>Anyway, how about switching between skin classes and all its states (incl. transitions) using only one (test-) view? </p>
<h2>Live example</h2>
<p><em>(Right mouse click to view source of example)</em></p>
<p>[kml_flashembed movie="http://www.websector.de/blog/wp-content/uploads/2009/09/06/GumboTestSkinExample.swf" width="500" height="400" bgcolor="#FFFFFF" menu="false" /]</p>
<p>&nbsp;</p>
<h2>Usage</h2>
<p>Two steps only: </p>
<ol>
<li>Just create an instance of WSSkinStatesTester </li>
<li>And add all skins which have to be checked</li>
</ol>
<phpcode>
<div class="codeHeadlineBox">
<p>Usage code example ( <a href="http://www.websector.de/blog/wp-content/uploads/2009/09/06/snippet0.txt">Download code</a> )</p>
</div>
<div class="actionscript" style="font-family: monospace;">
<ol>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="co1">//</span></div>
</li>
<li class="li1">
<div class="de1"><span class="co1">// Step 1</span></div>
</li>
<li class="li1">
<div class="de1"><span class="co1">// Create an instance of WSSkinStatesTester using MXML</span></div>
</li>
<li class="li1">
<div class="de1">&lt;ws:WSSkinStatesTester</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; xmlns:ws=<span class="st0">&quot;http://websector.de&quot;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; id=<span class="st0">&quot;skinTester&quot;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw3">width</span>=<span class="st0">&quot;100%&quot;</span> <span class="kw3">height</span>=<span class="st0">&quot;100%&quot;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; /&gt;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; </div>
</li>
<li class="li1">
<div class="de1"><span class="co1">//</span></div>
</li>
<li class="li1">
<div class="de1"><span class="co1">// Step 2</span></div>
</li>
<li class="li1">
<div class="de1"><span class="co1">// Create and add an instance of a skin to WSSkinStatesTester. </span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw2">var</span> skin: PanelSkin = <span class="kw2">new</span> PanelSkin<span class="br0">&#40;</span><span class="br0">&#41;</span>; </div>
</li>
<li class="li1">
<div class="de1">skin.<span class="kw3">width</span> = <span class="nu0">250</span>;</div>
</li>
<li class="li1">
<div class="de1">skin.<span class="kw3">height</span> =<span class="nu0">250</span>;</div>
</li>
<li class="li1">
<div class="de1">skinTester.<span class="me1">addSkin</span><span class="br0">&#40;</span> skin <span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="co1">//</span></div>
</li>
<li class="li1">
<div class="de1"><span class="co1">// Step 2a&nbsp; [ ALTERNATIVE ]</span></div>
</li>
<li class="li1">
<div class="de1"><span class="co1">// Alternative you can add an array of skins to WSSkinStatesTester using ActionScript. </span></div>
</li>
<li class="li1">
<div class="de1"><span class="co1">// BTW: This usage is recommend if you want test a bunch of skins and have to set properties before!</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw2">var</span> skin0: ButtonSkin = <span class="kw2">new</span> ButtonSkin<span class="br0">&#40;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">skin0.<span class="kw3">width</span> = <span class="nu0">150</span>;</div>
</li>
<li class="li1">
<div class="de1">skin0.<span class="kw3">height</span> = <span class="nu0">50</span>;</div>
</li>
<li class="li1">
<div class="de1">skin0.<span class="me1">labelDisplay</span>.<span class="kw3">text</span> = <span class="st0">&quot;ButtonSkin (Spark)&quot;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw2">var</span> skin2: ComboBoxSkin = <span class="kw2">new</span> ComboBoxSkin<span class="br0">&#40;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="kw2">var</span> skin3: MyButtonSkin = <span class="kw2">new</span> MyButtonSkin<span class="br0">&#40;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">skinTester.<span class="me1">skins</span> = <span class="br0">&#91;</span> skin1, skin2, skin3&nbsp; <span class="br0">&#93;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="co1">//</span></div>
</li>
<li class="li1">
<div class="de1"><span class="co1">// Step 2b [ ALTERNATIVE ]</span></div>
</li>
<li class="li1">
<div class="de1"><span class="co1">// Or add an array of skins to WSSkinStatesTester using MXML</span></div>
</li>
<li class="li1">
<div class="de1">&lt;ws:WSSkinStatesTester</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; xmlns:ws=<span class="st0">&quot;http://websector.de&quot;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; id=<span class="st0">&quot;skinTester&quot;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw3">width</span>=<span class="st0">&quot;100%&quot;</span> <span class="kw3">height</span>=<span class="st0">&quot;100%&quot;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; skins=<span class="st0">&quot;{ [ &nbsp;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="st0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; new CheckBoxSkin(), </span></div>
</li>
<li class="li1">
<div class="de1"><span class="st0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; new VideoPlayerSkin(), </span></div>
</li>
<li class="li1">
<div class="de1"><span class="st0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; new ButtonSkin() </span></div>
</li>
<li class="li1">
<div class="de1"><span class="st0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ] }&quot;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; /&gt;</div>
</li>
</ol>
</div>
</phpcode>
<h2>Full source available</h2>
<p><strong>Note:</strong> To run all code <a href="http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4">Flex SDK 4.0.0.9948 or higher</a> is required.</p>
<ul>
<li>SWC of WSSkinStatesTester and example posted above: <a href="http://www.websector.de/blog/?download=GumboTestSkinExample">GumboTestSkinExample.zip</a> (Downloads: 311)</li>
<li>Full source code of WSSkinStatesTester is hosted at Github: <a href="http://github.com/sectore/WSSkinStatesTester/">http://github.com/sectore/WSSkinStatesTester/</a></li>
</ul>
<p>WSSkinStatesTester is open source licensed under <a href="http://www.mozilla.org/MPL/MPL-1.1.html">Mozilla Public License 1.1.</a></p>
<p>Happy skin states testing <img src='http://www.websector.de/blog/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
<p>-Jens</p>
]]></content:encoded>
			<wfw:commentRss>http://www.websector.de/blog/2009/09/06/testing-states-of-skin-classes-in-flex-4-using-wsskinstatestester/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Quick tip (Flex 4): Using generic skin classes</title>
		<link>http://www.websector.de/blog/2009/08/10/quick-tip-flex-4-using-generic-skin-classes/</link>
		<comments>http://www.websector.de/blog/2009/08/10/quick-tip-flex-4-using-generic-skin-classes/#comments</comments>
		<pubDate>Mon, 10 Aug 2009 16:28:58 +0000</pubDate>
		<dc:creator>sectore</dc:creator>
				<category><![CDATA[Flex]]></category>

		<guid isPermaLink="false">http://www.websector.de/blog/?p=325</guid>
		<description><![CDATA[For skinning Flex 4 components you have a lot of great options. One way is using a custom skin class, which extends a Skin or a SparkSkin class and defines all needed style properties by itself. 
Imagine a custom button skin, which is more complex than the standard Spark ButtonSkin. It declares additional gradients, rectangles, [...]]]></description>
			<content:encoded><![CDATA[<p>For skinning Flex 4 components you have a <a href="http://opensource.adobe.com/wiki/display/flexsdk/Gumbo+Skinning">lot of great options</a>. One way is using a custom skin class, which extends a <code><a href="http://livedocs.adobe.com/flex/gumbo/langref/spark/components/supportClasses/Skin.html">Skin</a></code> or a <code><a href="http://livedocs.adobe.com/flex/gumbo/langref/spark/skins/SparkSkin.html">SparkSkin</a></code> class and defines all needed style properties by itself. </p>
<p>Imagine a custom button skin, which is more complex than the standard <a href="http://livedocs.adobe.com/flex/gumbo/langref/mx/skins/spark/ButtonSkin.html">Spark ButtonSkin</a>. It declares additional gradients, rectangles, transitions etc. If you code all needed values for any style properties within this skin class, you may have to create another button skin class for using only one or two different style properties. Doing this, the amount of skin classes can be increased rapidly!</p>
<p><span id="more-325"></span></p>
<p>A better approach is creating generic skin classes. Such a skin class gets most of its properties from CSS declarations of its host component. So all needed styles can be defined using plain CSS and won&#8217;t be hard-coded anymore, even custom style declarations. That&#8217;s very simple to do and saves a lot of extra skin classes. </p>
<h2>Example</h2>
<p>Code is worth a thousand words, so check out the following example. It uses only one generic skin class for all different styled buttons (right mouse click to view source code):</p>
<div width="500" height="70">
[kml_flashembed movie="http://www.websector.de/blog/wp-content/uploads/2009/08/10/GumboGenericSkinExample.swf" width="500" height="70"  bgcolor="#FFFFFF" fversion="10.0.0" menu="false"]</p>
<p><a href="http://adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>

	<!--[if !IE]>-->
	</object>
	<!--<![endif]-->
</object>
<p>&nbsp;</p>
</div>
<h2>Source code</h2>
<p>Check out the <a href="http://www.websector.de/blog/wp-content/uploads/2009/08/10/srcview/">source code here</a>.</p>
<h2>Helpful links</h2>
<ul>
<li>Flex SDK &#8211; Confluence: &#8220;<a href="http://opensource.adobe.com/wiki/display/flexsdk/Gumbo+Skinning">Gumbo Skinning (including SkinnableComponent) &#8211; Functional and Design Specification</a>&#8220;</li>
<li>Adobe Flex 4 Help: &#8220;<a href="http://livedocs.adobe.com/flex/gumbo/html/WSA95C9644-B650-4783-B5C0-D2C7F95A23E3.html#WS92BB2602-2FD3-47c4-81BE-18209D77EDD0">Skinning Spark components &#8211; Accessing the host component from inside the skin</a>&#8220;</li>
<li>&#8220;<a href="http://www.hulstkamp.com/2009/06/20/advanced-fxg-spark-icon-buttons-with-one-generic-skin-in-flex4-gumbo">Advanced FXG Spark Icon Buttons with one generic skin in Flex4 (Gumbo)</a>&#8221; by Andy Hulstkamp</li>
</ul>
<p>Happy Gumbo skinning <img src='http://www.websector.de/blog/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
<p>-Jens</p>
]]></content:encoded>
			<wfw:commentRss>http://www.websector.de/blog/2009/08/10/quick-tip-flex-4-using-generic-skin-classes/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Speed up JPEG encoding using Alchemy</title>
		<link>http://www.websector.de/blog/2009/06/21/speed-up-jpeg-encoding-using-alchemy/</link>
		<comments>http://www.websector.de/blog/2009/06/21/speed-up-jpeg-encoding-using-alchemy/#comments</comments>
		<pubDate>Sun, 21 Jun 2009 15:16:42 +0000</pubDate>
		<dc:creator>sectore</dc:creator>
				<category><![CDATA[Alchemy]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Flex]]></category>
		<category><![CDATA[Open Source]]></category>

		<guid isPermaLink="false">http://www.websector.de/blog/?p=287</guid>
		<description><![CDATA[Few weeks ago Thibault Imbert published an optimized version of Adobes JPGEncoder. And it rocks! However, if you may have very big-size bitmaps it takes too much time to encode images. For example: A bitmap with a size of 2000px x 1500px takes 22 sec. (BTW: Adobes version 30 sec.!!) 
Today I came across to [...]]]></description>
			<content:encoded><![CDATA[<p>Few weeks ago <a href="http://www.bytearray.org/">Thibault Imbert</a> published an <a href="http://www.bytearray.org/?p=775">optimized version</a> of <a href="http://code.google.com/p/as3corelib/">Adobes JPGEncoder</a>. And it rocks! However, if you may have very big-size bitmaps it takes too much time to encode images. For example: A bitmap with a size of 2000px x 1500px takes 22 sec. (BTW: Adobes version 30 sec.!!) </p>
<p>Today I came across to a <a href="http://manfred.dschini.org/2008/11/21/alchemy-jpeg-encoder/">post by Manfred Weber</a>, which points to a discussion at <a href="http://forums.adobe.com/community/labs/alchemy">Adobes Alchemy forum</a>. There you will find <a href="http://forums.adobe.com/message/987186">a great solution</a> published by <a href="http://metal.hurlant.com/blog/">metalbot</a> for encoding JPEGs using <a href="http://labs.adobe.com/technologies/alchemy/">Alchemy</a>. It&#8217;s based on a <a href="http://www.ijg.org/files/">C library</a> for JPEG image compression by <a href="http://www.ijg.org/">IJG</a> and it&#8217;s pretty fast (2,7 sec. for 2000 px x 1500px ) !!! Check out the example:</p>
<p><span id="more-287"></span></p>
<h2>Example</h2>
<p>Click the image to see the live example. Feel free to post a comment about your your results!</p>
<p><a href="http://www.websector.de/blog/wp-content/uploads/2009/06/21/AlchemyJPEGEncoder.html"><img src="http://www.websector.de/blog/wp-content/uploads/2009/06/21/screen_testAlchemyJPEGEncoder.jpg" alt="Screen shot" /></a></p>
<h2>Download Full Source</h2>
<p>I have changed  the <a href="http://hurlant.com/as3_encoder_jpeg.tgz ">original C code</a> a little bit for manipulating the quality of an encoded image as well. It&#8217;s just one line added to &#8220;as3_jpeg_wrapper.gg&#8221; (line 78) <code>jpeg_set_quality(&#038;cinfo, quality, TRUE /* limit to baseline-JPEG values */);</code> Therefore the &#8220;as3_jpeg_wrapper.swc&#8221; located within the *.zip is recompiled for using this feature in your Flex project via  <code>as3_jpeg_wrapper.write_jpeg_file(baSource, WIDTH, HEIGHT, 3, 2, quality);</code> </p>
<p>Full source of the Flex based example above: <a href="http://www.websector.de/blog/?download=AlchemyJPEGEncoderFlexExample">AlchemyJPEGEncoderFlexExample.zip</a> (Downloads: 1026)</p>
<p>BTW: You will find the original source of all C based classes published by metalbot <a href="http://forums.adobe.com/message/987186#987186">here</a>.  </p>
<h2>Tips</h2>
<p>I struggled around to set up Alchemy and to recompile the IJG library and the &#8220;as3_jpeg_wrapper.swc&#8221;. To avoid this, here are some tips:</p>
<ul>
<li><a href="http://www.zeropointnine.com/wiki/index.php?n=FlashPlatform.Alchemy">Instruction for set up Alchemy</a> by <a href="http://www.zeropointnine.com/blog/">Lee Felarca</a>   (zeropointnine). Best instruction I&#8217;ve found so far for set up Alchemy.</li>
<li>Recompiling the SWC of metalbot&#8217;s source following its &#8220;README.txt&#8221; and using its &#8220;Makefile&#8221; failed: To avoid this issue, after compiling the C library of jpegsrc you have to move the following files to $ALCHEMY_HOME/jpeg/ as well: &#8220;jconfig.h&#8221;, &#8220;jmorecfg.h&#8221; and &#8220;jpeglib.h&#8221;. Check out <a href="http://forums.adobe.com/message/1059134#1059134">the comment by notnick here</a></li>
</ul>
<p><strong>[UPDATE 06/22/09]</strong> There is another great test for encoding images using Alchemy by <a href="http://segfaultlabs.com/">Mateusz Malczak</a>, which includes an asynchrounous example as well: <a href="http://segfaultlabs.com/blog/post/asynchronous-jpeg-encoding">Alchemy &#8211; asynchronous jpeg encoding</a> Thanks to <a href="http://twitter.com/xoestudio">xoestudio</a> for pointing to this via twitter! <strong>[UPDATE] </strong></p>
<p>Have fun <img src='http://www.websector.de/blog/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
<p>-Jens</p>
]]></content:encoded>
			<wfw:commentRss>http://www.websector.de/blog/2009/06/21/speed-up-jpeg-encoding-using-alchemy/feed/</wfw:commentRss>
		<slash:comments>18</slash:comments>
		</item>
		<item>
		<title>ThunderBolt AS3 version 2.2 out now!</title>
		<link>http://www.websector.de/blog/2009/03/08/thunderbolt-as3-version-22-out-now/</link>
		<comments>http://www.websector.de/blog/2009/03/08/thunderbolt-as3-version-22-out-now/#comments</comments>
		<pubDate>Sun, 08 Mar 2009 16:33:31 +0000</pubDate>
		<dc:creator>sectore</dc:creator>
				<category><![CDATA[AIR]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[Flex]]></category>
		<category><![CDATA[Open Source]]></category>
		<category><![CDATA[ThunderBolt]]></category>

		<guid isPermaLink="false">http://www.websector.de/blog/?p=262</guid>
		<description><![CDATA[ThunderBolt AS3, which is a lightweight logger extension for Flex 3-4, AIR and Flash 9-10 applications, has been updated to version 2.2. 
Check out the new features:

New features

Logging of package names + class names + code line numbers (Flash Debug Player required).


ThunderBoltTarget for using Flex Logging API improved.
SWC updated for using Flex 4 (Gumbo)
ThunderBolt AS3 [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://code.google.com/p/flash-thunderbolt/" class="img"><img src="http://www.websector.de/blog/wp-content/uploads/2009/03/08/ThunderBoltAS3_teaser.png" width="500" height="90" /></a></p>
<p><a href="http://code.google.com/p/flash-thunderbolt/">ThunderBolt AS3</a>, which is a lightweight logger extension for Flex 3-4, AIR and Flash 9-10 applications, has been updated to version 2.2. </p>
<p>Check out the <a href="http://www.websector.de/blog/2009/03/08/thunderbolt-as3-version-22-out-now">new features</a>:</p>
<p><span id="more-262"></span></p>
<h2>New features</h2>
<ol>
<li>Logging of package names + class names + code line numbers (Flash Debug Player required).
<p><img src="http://www.websector.de/blog/wp-content/uploads/2009/03/08/thunderbolt_codelinenumbers.png" width="494" height="296" /></p>
</li>
<li><a href="http://code.google.com/p/flash-thunderbolt/source/browse/trunk/as3/source/org/osflash/thunderbolt/ThunderBoltTarget.as">ThunderBoltTarget</a> for using <a href="http://livedocs.adobe.com/flex/3/html/logging_09.html">Flex Logging API</a> improved.</li>
<li><a href="http://code.google.com/p/flash-thunderbolt/source/browse/#svn/trunk/as3/libs">SWC</a> updated for using Flex 4 (<a href="http://opensource.adobe.com/wiki/display/flexsdk/Gumbo">Gumbo</a>)</li>
<li><a href="http://code.google.com/p/flash-thunderbolt/wiki/ThunderBoltAS3Console">ThunderBolt AS3 Console</a> uses a certificate of <a href="http://www.thawte.com/">Thawte</a> sponsored by <a href="http://www.adobe.com/">Adobe</a>.
<p><img src="http://www.websector.de/blog/wp-content/uploads/2009/03/08/thunderbolt_certificate.png" width="500" height="410" /></p>
</li>
<li><a href="http://code.google.com/p/flash-thunderbolt/wiki/ThunderBoltAS3Console">ThunderBolt AS3 Console</a> is updated using latest version of <a href="http://get.adobe.com/air/">Adobe AIR v.1.5.1</a></li>
<li><a href="http://code.google.com/p/flash-thunderbolt/issues/detail?id=10">Issue 10</a> fixed: &#8220;<a href="http://code.google.com/p/flash-thunderbolt/issues/detail?id=10">Command + Q not working in OS X</a>&#8220;</li>
<li>All <a href="http://code.google.com/p/flash-thunderbolt/downloads/list">examples</a> and <a href="http://code.google.com/p/flash-thunderbolt/w/list">documentation</a> has been updated as well.</li>
</ol>
<p>Happy Logging <img src='http://www.websector.de/blog/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
<p>-Jens</p>
]]></content:encoded>
			<wfw:commentRss>http://www.websector.de/blog/2009/03/08/thunderbolt-as3-version-22-out-now/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Quick tip (AIR): Updating an existing AIR app for using a new certificate</title>
		<link>http://www.websector.de/blog/2009/03/06/quick-tip-air-update-an-existing-air-app-for-using-a-new-certificate/</link>
		<comments>http://www.websector.de/blog/2009/03/06/quick-tip-air-update-an-existing-air-app-for-using-a-new-certificate/#comments</comments>
		<pubDate>Fri, 06 Mar 2009 18:51:40 +0000</pubDate>
		<dc:creator>sectore</dc:creator>
				<category><![CDATA[AIR]]></category>

		<guid isPermaLink="false">http://www.websector.de/blog/?p=227</guid>
		<description><![CDATA[First of all thanks Adobe for sponsoring a Thawte certificate after adding ThunderBolt AS3 Console to the new Adobe Marketplace!
If you will ever certificate an existing AIR app with a new certificate, such as a Thawte certificate, you have to migrate it. 

What does &#8220;migrate&#8221; mean? It&#8217;s like an injection for an AIR app with [...]]]></description>
			<content:encoded><![CDATA[<p>First of all thanks Adobe for sponsoring a <a href="http://www.thawte.com">Thawte</a> certificate after adding <a href="http://code.google.com/p/flash-thunderbolt/wiki/ThunderBoltAS3Console">ThunderBolt AS3 Console</a> to the <a href="http://www.adobe.com/cfusion/marketplace/index.cfm?event=marketplace.offering&#038;offeringid=10762">new Adobe Marketplace</a>!</p>
<p>If you will ever certificate an existing AIR app with a new certificate, such as a <a href="http://www.thawte.com">Thawte</a> certificate, you have to migrate it. </p>
<p><span id="more-227"></span></p>
<p>What does &#8220;migrate&#8221; mean? It&#8217;s like an injection for an AIR app with all needed information about old and new certificate. You have to do it to avoid any troubles updating an existing AIR app by users. Just follow the next steps:</p>
<ol>
<li>Build your AIR app as always using Flex Builder and signing it up with the new certificate ( Project -> Export Release Build )</li>
<li>Open Terminal and go to project folder typing <code>cd {pathToYourProject}</code></li>
<li>Migrate your new AIR app with the old certificate using <code>-migrate</code> command. <strong>Note:</strong> To run this command make sure that you have added the bin folder of Flex SDK as a PATH environment variable before.
<p>Run:</p>
<p><code>adt -migrate -storetype {fileTypeOfOldCertificate} -keystore {pathToOldCertificate} {appJustCreated}.air {newMigratedApp}.air</code></p>
<li>Type password of the old certificate and that&#8217;s it!</li>
<li>For updating ThunderBoltAS3 Console I did it as follow:</li>
<p><code>adt -migrate -storetype pkcs12 -keystore air_websector_certificate.p12 ThunderBoltAS3Console.air ThunderBoltAS3Console_v2.2.air</code></p>
<p>Some notes:<br />
- <em>pkcs12</em> &#8211; store type of the old certificate (such as JKS, PKCS12, PKCS11, KeychainStore, Windows-MY or Windows-ROOT)<br />
- <em>air_websector_certificate.p12</em> &#8211; path to the old certificate<br />
- <em>ThunderBoltAS3Console.air</em> &#8211; app which has been built before with a new certificate<br />
- <em>ThunderBoltAS3Console_v2.2.air</em> &#8211; app which has to migrate</p>
<li>For more information check &#8220;<a href="http://help.adobe.com/en_US/AIR/1.5/devappsflex/WS5b3ccc516d4fbf351e63e3d118666ade46-7ff0.html#WSFAB6E5EB-316A-42b0-81A3-0BC232ACD99A">Changing certificates</a>&#8221; and &#8220;<a href="http://help.adobe.com/en_US/AIR/1.5/devappsflex/WS13ACB483-1711-43c0-9049-0A7251630A7D.html">Signing an AIR file to change the application certificate</a>&#8221; at <a href="http://help.adobe.com/en_US/AIR/1.5/">LiveDocs for Adobe AIR</a>.</li>
</ol>
<p>-Jens</p>
]]></content:encoded>
			<wfw:commentRss>http://www.websector.de/blog/2009/03/06/quick-tip-air-update-an-existing-air-app-for-using-a-new-certificate/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Simple RSS reader for iPhone using PureMVC Standard for Objective-C</title>
		<link>http://www.websector.de/blog/2009/02/08/simple-rss-reader-for-iphone-using-puremvc-standard-for-objective-c/</link>
		<comments>http://www.websector.de/blog/2009/02/08/simple-rss-reader-for-iphone-using-puremvc-standard-for-objective-c/#comments</comments>
		<pubDate>Sun, 08 Feb 2009 11:24:29 +0000</pubDate>
		<dc:creator>sectore</dc:creator>
				<category><![CDATA[Objective-C]]></category>
		<category><![CDATA[Open Source]]></category>
		<category><![CDATA[PureMVC]]></category>
		<category><![CDATA[iPhone]]></category>

		<guid isPermaLink="false">http://www.websector.de/blog/?p=210</guid>
		<description><![CDATA[Few weeks ago Cliff Hall announced the release of PureMVC Objective-C Port by Brian Knorr. Brian also provided a very helpful demo called &#8220;Employee Admin&#8220;.
To dive into the Objective-C port of PureMVC as quick as possible I have built a another demo. It&#8217;s a pretty simple RSS reader for iPhone or iPod touch, which grabs [...]]]></description>
			<content:encoded><![CDATA[<p>Few weeks ago Cliff Hall <a href="http://puremvc.org/content/view/121/1/ ">announced the release of PureMVC Objective-C Port</a> by <a href="http://starterstep.wordpress.com">Brian Knorr</a>. Brian also provided a very helpful demo called &#8220;<a href="http://trac.puremvc.org/Demo_ObjectiveC_UIKit_EmployeeAdmin">Employee Admin</a>&#8220;.</p>
<p>To dive into the Objective-C port of PureMVC as quick as possible I have built a another demo. It&#8217;s a pretty simple RSS reader for iPhone or iPod touch, which grabs a feed of a blog and shows the latest 10 entries in detail. </p>
<p><span id="more-210"></span></p>
<h2>Screen shots</h2>
<p><a href="http://github.com/sectore/puremvc-objectivec-simplerssreader/" class="img"><img src="http://www.websector.de/blog/wp-content/uploads/2009/02/08/sreenshot_puremvc_iphone.jpg" alt="Screen shots of an iPhone RSS reader using PureMVC" /></a></p>
<h2>View and download full source</h2>
<p>View or grab the source here:<br />
<a href="http://github.com/sectore/puremvc-objectivec-simplerssreader/">http://github.com/sectore/puremvc-objectivec-simplerssreader/</a> </p>
<p>It&#8217;s open source licensed under the <a href="http://www.mozilla.org/MPL/MPL-1.1.txt">Mozilla Public License 1.1.</a></p>
<h2>Conclusion</h2>
<p>Brian Knorr, the project owner of the Objective-C port of PureMVC, did an awesome job! But the question is: Do I need a MVC framework such as PureMVC for developing an iPhone app? You don&#8217;t! Because Objective-C based already on a MVC paradigma. </p>
<p>However, if you are new to Objective-C and you may have a strong ActionScript background using PureMVC, it might be a good choice to dive into iPhone development. And you will see, that the code architecture is like your home <img src='http://www.websector.de/blog/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
<p>-Jens</p>
]]></content:encoded>
			<wfw:commentRss>http://www.websector.de/blog/2009/02/08/simple-rss-reader-for-iphone-using-puremvc-standard-for-objective-c/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Free iPhone app for Flex User Group Hamburg (incl. source code)</title>
		<link>http://www.websector.de/blog/2009/01/27/free-iphone-app-for-flex-user-group-hamburg-incl-source-code/</link>
		<comments>http://www.websector.de/blog/2009/01/27/free-iphone-app-for-flex-user-group-hamburg-incl-source-code/#comments</comments>
		<pubDate>Tue, 27 Jan 2009 17:40:50 +0000</pubDate>
		<dc:creator>sectore</dc:creator>
				<category><![CDATA[Objective-C]]></category>
		<category><![CDATA[Open Source]]></category>
		<category><![CDATA[iPhone]]></category>

		<guid isPermaLink="false">http://www.websector.de/blog/?p=150</guid>
		<description><![CDATA[[UPDATE 02/11/09] flexughh app is available on iTunes store! All links has been updated. Get it for free  
It&#8217;s done! My first iPhone app is uploaded to Apple&#8217;s app store. It&#8217;s an app for the Flex UG in Hamburg / Germany, called &#8220;flexughh&#8221;. Because I&#8217;m very excited about all the enthusiastic flexughh-members I decided [...]]]></description>
			<content:encoded><![CDATA[<p style="background-color: #F6F6F6"><strong>[UPDATE 02/11/09]</strong> flexughh app is available on iTunes store! All links has been updated. Get it for free <img src='http://www.websector.de/blog/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
<p>It&#8217;s done! My first iPhone app is uploaded to <a href="http://www.apple.com/iphone/appstore/">Apple&#8217;s app store</a>. It&#8217;s an app for the <a href="http://www.flexughh.de">Flex UG in Hamburg / Germany</a>, called &#8220;flexughh&#8221;. Because I&#8217;m very excited about all the enthusiastic <a href="http://www.xing.com/net/flexughh/">flexughh-members</a> I decided to offer this app for free including its full source code written in Objective-C as open source! </p>
<p>Today I will present the new flexughh app <a href="http://www.flexughh.de/2009/01/07/flexughh-meeting-27012009-alger-werft-einfuhrung-in-blazeds/">at our flexughh-Meeting</a>. If you don&#8217;t have the chance to attend it, here are some screen shots. </p>
<p><span id="more-150"></span></p>
<h2>Screen shots</h2>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			id="fm_ws-slideshow_1984168001"
			class="flashmovie"
			width="510"
			height="850">
	<param name="movie" value="http://www.websector.de/blog/wp-includes/swf/ws-slideshow.swf" />
	<param name="flashvars" value="XMLPath=http://www.flexughh.de/wp-content/uploads/2009/01/27/screenshots.xml" />
	<param name="menu" value="false" />
	<param name="bgcolor" value="#000000" />
	<param name="allowscriptaccess" value="sameDomain" />
	<param name="allowfullscreen" value="true" />
	<!--[if !IE]>-->
	<object	type="application/x-shockwave-flash"
			data="http://www.websector.de/blog/wp-includes/swf/ws-slideshow.swf"
			name="fm_ws-slideshow_1984168001"
			width="510"
			height="850">
		<param name="flashvars" value="XMLPath=http://www.flexughh.de/wp-content/uploads/2009/01/27/screenshots.xml" />
		<param name="menu" value="false" />
		<param name="bgcolor" value="#000000" />
		<param name="allowscriptaccess" value="sameDomain" />
		<param name="allowfullscreen" value="true" />
	<!--<![endif]-->
		
	<!--[if !IE]>-->
	</object>
	<!--<![endif]-->
</object>
<p>&nbsp;</p>
<h2>Get flexughh app for free!</h2>
<p>The flexughh app is be available in German and in English!</p>
<p><a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=303635605&#038;mt=8" class="img"><img src="http://www.websector.de/blog/wp-content/uploads/2009/01/27/flexughh_iTunesStore_en.png" alt="flexughh on iTunes Store" width="500" height="280" /></a></p>
<h2>Source code</h2>
<p>The flexughh app is written in Objective-C. You can see and download the full source here (within the next days):<br />
<a href="http://github.com/sectore/flexughh-iphone/">http://github.com/sectore/flexughh-iphone/</a></p>
<p>Have fun!</p>
<p>-Jens </p>
]]></content:encoded>
			<wfw:commentRss>http://www.websector.de/blog/2009/01/27/free-iphone-app-for-flex-user-group-hamburg-incl-source-code/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>
