Wednesday, May 21, 2008

Programmatic Skinning in Flex Builder 3

Flex is the "HOT" technology these days. Apart from the technology, performance and other advantages behind it, for end users it is very pleasing to look at. When it comes to look and feel, pretty much everything can be done using Javascript too, but flex was developed particularly for "Rich" applications, so it makes creating rich user interfaces easy for the developer. Not to mention, its more efficient and more maintainable for the developer. Flex Builder for Flex is pretty much the Visual Studio for ASP.NET (lot of differences and lot of similarities here). Flex Builder really makes working with Flex easier. And by default, adobe provides a lot of components, which you can use to layout using Flex Builder. Using these components is fine, until you need a different component. Flex also provides support to create custom components and skin them programatically (there are also other ways).

There are a lot of articles and blogs online which talk about how to write programmatic skins, but these skins can only be seen when the Flex application actually runs. What do I need to do if I want to see the applied programmatic skin in the Flex Builder Design view, so i can play around with my layout?

There are some steps that need to be followed. And what better way there is to show the examples? I wish this blogging site supported code snippets, but it doesnt , so i will provide links to code.

The Application mxml is ProgrammaticSkinning.mxml and the skin classes are FlatColorRectangleSkin.as , FlatColorRoundedRectangleSkin.as, GradientRectangleSkin.as and NodeSkin.mxml.

The custom class is Node.as and the style sheet is styles.css. The code in these classes is straight forward, so i wont explain them all. But Node.as and NodeSkin.mxml are special.

1. Node.as should be put in a different library project, if this class exists in the same project, the skins wont be rendered in Flex Builder design view. I dont know the reason for this, if anybody knows, please let me know.

2. Node class in order to support skins, has to override updateDisplayList method, get the SkinClass, create an instance of the class, set the skin Name , set stylename on the skin to this(for the skin to inherit all style properties from the component), set the size of the skin to the component or appropriate (we want the size of skin to be grater than 0, to be able to see it), and add the skin as a child.

3. If anyone wants to use Degrafa for skinning, look at NodeSkin.mxml. This is my favourite. We can use Degrafa tags to define our tags.

That said, we can create our custom components, style them in any way we want, use them in Flex Builder, drag-n-drop in Flex Builder design view and play with the layout.

Also, here is a component you can extend form if you want your component to be skinnable.


package charts
{
import flash.display.DisplayObject;
import flash.events.MouseEvent;

import mx.core.IFlexDisplayObject;
import mx.core.UIComponent;
import mx.effects.Zoom;
import mx.effects.easing.Bounce;
import mx.styles.ISimpleStyleClient;

public class SkinnableComponent extends UIComponent
{
private var zoomAll:Zoom = new Zoom();

public function SkinnableComponent()
{
scaleX = 0.5;
scaleY = 0.5;
addEventListener(MouseEvent.ROLL_OVER, doZoom);
addEventListener(MouseEvent.ROLL_OUT, doZoom);

zoomAll.zoomWidthTo = 1;
zoomAll.zoomHeightTo =1;
zoomAll.zoomWidthFrom = 0.5;
zoomAll.zoomHeightFrom = 0.5;
}

protected override function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void
{
showSkin("upSkin");
}

protected function showSkin(skinName:String):void
{
var skinClass:Class = Class(getStyle(skinName));
var skin:IFlexDisplayObject = IFlexDisplayObject(getChildByName(skinName));

if (!skin)
{
if (skinClass)
{
skin = IFlexDisplayObject(new skinClass());
skin.name = skinName;
(skin as ISimpleStyleClient).styleName = this;
addChild(DisplayObject(skin));
skin.setActualSize(unscaledWidth, unscaledHeight);
}
}

}

protected function doZoom(event:MouseEvent):void
{
if (zoomAll.isPlaying)
zoomAll.reverse();
else
zoomAll.play([event.target], event.type == MouseEvent.ROLL_OUT ? true : false);
}

}
}


Comments, advices and help are always welcome.

8 comments:

Anonymous said...

[url=http://kfarbair.com][img]http://www.kfarbair.com/_images/logo.png[/img][/url]

בית מלון [url=http://www.kfarbair.com]כפר בעיר[/url] - שלווה, [url=http://www.kfarbair.com/about.html]חדרים[/url] מרווחים, אינטימיות, [url=http://kfarbair.com/services.html]שקט[/url] . אנו מספקים שירותי אירוח מיוחדים כמו כן יש במקום שירות חדרים הכולל [url=http://www.kfarbair.com/eng/index.html]סעודות רומנטיות[/url] במחירים מפתיעים אשר מוגשות ישירות לחדרכם...

לפרטים נוספים נא לפנות לאתר האינטרנט שלנו - [url=http://kfarbair.com]כפר בעיר[/url] [url=http://www.kfarbair.com/contact.html][img]http://www.kfarbair.com/_images/apixel.gif[/img][/url]

Anonymous said...

[u][b]Xrumer[/b][/u]

[b]Xrumer SEO Professionals

As Xrumer experts, we have been using [url=http://www.xrumer-seo.com]Xrumer[/url] for the benefit of a large immediately for the time being and grasp how to harness the massive power of Xrumer and turn it into a Spondulix machine.

We also provender the cheapest prices on the market. Many competitors devise cost 2x or temperate 3x and a a pile of the time 5x what we responsibility you. But we believe in providing gigantic mending at a low affordable rate. The large point of purchasing Xrumer blasts is because it is a cheaper substitute to buying Xrumer. So we aim to support that thought in rebuke and outfit you with the cheapest censure possible.

Not simply do we have the greatest prices but our turnaround time for your Xrumer posting is super fast. We compel take your posting done in the forefront you discern it.

We also provide you with a sated log of well-heeled posts on manifold forums. So that you can catch a glimpse of over the extent of yourself the power of Xrumer and how we be struck by harnessed it to gain your site.[/b]


[b]Search Engine Optimization

Using Xrumer you can wish to distinguish thousands upon thousands of backlinks over the extent of your site. Scads of the forums that your Site you intent be posted on get high PageRank. Having your join on these sites can deep down serve build up some top-grade grade recoil from links and really aid your Alexa Rating and Google PageRank rating owing to the roof.

This is making your put more and more popular. And with this better in reputation as familiarly as PageRank you can expect to witness your site absolutely superiority high in those Search Locomotive Results.
Above

The amount of see trade that can be obtained aside harnessing the power of Xrumer is enormous. You are publishing your plat to tens of thousands of forums. With our higher packages you may still be publishing your locale to HUNDREDS of THOUSANDS of forums. Visualize 1 collection on a stylish forum disposition almost always rig out 1000 or so views, with communicate 100 of those people visiting your site. Modern create tens of thousands of posts on popular forums all getting 1000 views each. Your see trade longing function because of the roof.

These are all targeted visitors that are interested or exotic in the matter of your site. Envision how divers sales or leads you can achieve with this great gang of targeted visitors. You are in fact stumbling upon a goldmine primed to be picked and profited from.

Remember, Above is Money.
[/b]

BECOME ENTHUSIASTIC ABOUT YOUR INFERIOR DEFAME TODAY:


http://www.xrumer-seo.com

Anonymous said...

Win the savage with two backs casinos? exchange this advanced [url=http://www.realcazinoz.com]casino[/url] advisor and compel assume online casino games like slots, blackjack, roulette, baccarat and more at www.realcazinoz.com .
you can also into our lately [url=http://freecasinogames2010.webs.com]casino[/url] orientate at http://freecasinogames2010.webs.com and spread the chink corporeal folding change !
another voguish [url=http://www.ttittancasino.com]casino spiele[/url] lay is www.ttittancasino.com , quite than of german gamblers, subdivide in unconstrained online casino bonus.

Anonymous said...

Genial dispatch and this post helped me alot in my college assignement. Gratefulness you seeking your information.

Anonymous said...

Good dispatch and this enter helped me alot in my college assignement. Thank you on your information.

Anonymous said...

I've evermore notion it would be best to accept those not hold up under divertissement shoes against when I do open-air sports such as canoeing and dragon boating. These determined sports shoes pander to to deuterium oxide out of doors sports in specific because of the examination thick material it is made of. When I go canoeing, I adapted to to either decamp a return to with my overt feet or slippers, but was always having problems with both. Being bare-ass footed meant that I authority get burn sooner than any debris that may share when I walk on the sand or in the not ring true while getting in or out of my canoe. When I damage slippers, occasionally it indeed gets in the technique when my feet sink in the sludge during low-lying tide. It was when my slipper got stuck when I knew I had to get an outdoor sports relaxation shoes. I assertive to about of it as a exalted investment as it would mean greater and cleaner feet. I don't recognize why I didn't assume of getting such gambol shoes in the primary place. I guess it was because my teachings of deride shoes was often since competition, and not in requital for other outside sports.

So when I saw the [url=http://www.dealtoworld.com/goods-10096-FiveFingers+Outdoor+Sport+Shoes+-+Black+%28Size+42%29.html]FiveFingers Open-air Lark Shoes - Ebon (Size 42) [/url]on DealtoWorld.com, I was actually steadfast I wanted it. Not merely can I wheedle a inordinate double of alfresco shoes for my bottled water sports, I can have a fivefingers a specific! Not sure why they standing by it fivefingers despite the fact that, since in point of fact the sport shoes is in the guise of your five toes. This enables a advantage feeling on where you walk, which is especially great in the interest of walking on the seashore and frivolous waters. I've always been a adherent of "fivefingers" or toe socks, so this new out of doors shoes of well-spring is making me more enthusiastic with my weekend out of doors sports endeavor.

[url=http://www.dealtoworld.com]DealtoWorld.com[/url] steady made me a satisfied camper this time, letting me own this best pair of sport shoes objective when I needed it. I've bought other lifestyle gadgets from DealtoWorld.com but this is the oldest someday I bought divertissement shoes from any online shopping site. I always thought it unsurpassed to adjudge on any shoes, be it sport shoes, leather shoes, slippers, etc. or else you won't know whether it's a colossal fit. However, I couldn't honestly find wares water out of doors sports mockery tease shoes, so this get back has undoubtedly enhanced my DealtoWorld.com shopping experience, or my online shopping as a whole.

With it when I go for my weekly canoeing or dragon boating, my teammates are all cute amused by means of my fivefingers play shoes, and stare at them for some time. I guess the toe-shaped flaunt shoes makes it look like a network of some subgenus, but it’s not like I can swim in these fivefingers shoes. I'm conclusion the alfresco sports shoes dialect right comfortable, and although I cannot run with it as I would with common operation divertissement shoes, at least I can stride along the pontoon or bank arena in hearten, incompatible with when I occupied to walk barefooted. My feet used to cripple or communicate with scorched from the hot ground, but not with these fivefingers sport shoes I don't. Win a look at the pictures to undertake how the fivefingers alfresco sports make a laughing-stock of shoes look like from the exceed and bottom.

Anonymous said...

top [url=http://www.c-online-casino.co.uk/]uk casino bonus[/url] hinder the latest [url=http://www.realcazinoz.com/]casino online[/url] free no deposit bonus at the chief [url=http://www.baywatchcasino.com/]redeem casino
[/url].

Anonymous said...

While many yurts appear to be created some grill yard extensively
wishing to come up with a a fire and/or gas barbecue, these items shouldn't get necessary to until trapped around the woods, what kind of practically wouldn't take place.

These types of potent situations available for treating body shape high heat.
Combine straight into cooking food very hot water. All those
precisely gift baskets are perfect birthday gifts guys
as you find one by way of a touch that the company's past time. Variety pictures, really aspects of brocjures, businesses, governing dental policies, or some different for instance have been supported in that time alcoholic drink?

Visit my weblog :: senseo coffee machine sale