Applying styles to a particular control.

Here let me explain with an example, suppose iam having 4 panels in a flex app of id panel1,panel2,panel3,panel4 and i want to apply style only to panel2,how would u do it.The answer is simple , for a control there is a property named styleName so by using this the problem will be solved.

Usually we apply styles as Internal or External with the control name as the specifier.This will apply style to all the controls of same specifier.This can be avoided with the property styleName property of the control.

<style>

panel

{

backGroundColor:#000000;

..

}

</style>

This will apply style to every panel in the flex app.

So using styleName:

In the control use the property  styleName and give a name as specefier or reference.As below.

<mx:Panel layout=”vertical” id=”leftpanel1″ left=”10″ right=”10″ bottom=”10″
styleName=”leftpanel” />

Now in the style tag use this stylename to define styles, it will apply only to that panel of stylename.

<mx:Style>
.leftpanel
{
borderColor: #000000;
borderAlpha: 0.69;
borderThickness: 1;
titleStyleName: “mypanelTitle1“;
}
.mypanelTitle1
{
color: #ffffff;
textAlign: center;
fontWeight: bold;
}
</mx:Style>

Now this Explains the need i hope.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: