Associating a Skin with a Component
Posted on May 28, 2010 | No Comments
Flex’s Button component was the first to be implemented in the new Spark architecture, and is a good example of component and skin separation. The skin definition first references the component to which this skin can be applied. This optional metadata element allows the skin to hold a reference to the component class, if necessary. Next, the various component states are referenced, followed by visual definitions of the component:
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
minWidth="21" minHeight="21"
alpha.disabled="0.5">
<fx:Metadata>
<![CDATA[
[HostComponent("spark.components.Button")]
]]>
</fx:Metadata>
...
<s:states>
<s:State name="up"/>
<s:State name="over">
<s:State name="down"/>
<s:State name="disabled"/>
</s:states>
<s:Rect left="-1" right="-1" top="-1" bottom="-1" radiusX="2" radiusY="2">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0x000000"
color.down="0xFFFFFF"
alpha="0.01"
alpha.down="0"/>
<s:GradientEntry color="0x000000"
color.down="0xFFFFFF"
alpha="0.07"
alpha.down="0.5"/>
</s:LinearGradient>
</s:fill>
</s:Rect>
...
<s:SimpleText id="labelElement"
textAlign="center"
verticalAlign="middle"
lineBreak="toFit"
truncation="1"
horizontalCenter="0"
verticalCenter="1"
<a href="http://over50losingweight.com/images/">order online levitra</a> left="10" right="10" top="2" bottom="2">
</s:SimpleText>
</s:SparkSkin>
The MXML tags in the skin definition use the FGX elements—those, in turn, are compiled into ActionScript classes that directly use the FlashPlayer 10 rendering and graphics primitives. Note that the visual declarations reference the component state with the . notation: color.down, for instance, specifies the color in the down state.
Tags: fx:Metadata | s:fill | s:GradientEntry | s:LinearGradient | s:Rect | s:SimpleText | s:SparkSkin | s:states
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Comments
Leave a Reply
You must be logged in to post a comment.
Community presentations of the blogger
Sameera at LinkedIn
BIOGRAPHY
Sameera Thilakasiri is a front-end developer and UX Architect based in Colombo, Sri Lanka, specialist in User Interface Design, User Experience, Usability and Accessibility, Information Architecture, Responsive Web Design, Interactive Design, Search Engine Optimization, Trainging and Public Speaking.
In his profession, follow the best practices, W3C web standards and guidelines, responsive, semantic, usable, accessible, SEO friendly to cutting edge cording using XHTML/HTML5, CSS and jQuery for Pixel-perfect cross browser compatibility.
In his leisure blogging for technical articles and lifestyle photographer.