Share on Google+Share on Google+

Flex Hrule and Vrule with Style

Advertisement
In this tutorial we have discuss about how to use style with HRule and Vrule controls

HRule and VRule with Style in Flex:-

In this example you can see how to set style for HRule and VRule controls in your flex application. First we can create a style with the help of <mx:Style>tag and after that you can create a Rule component and apply styleName property for the Rule controls

Example for HRule:-

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

<mx:Style>

.HRule {strokeWidth:3}

HRule {strokeColor:#FF0000; shadowColor:#00FF00}

</mx:Style>

<mx:Panel width="200" height="200" title="HRule Example" horizontalAlign="center">

<mx:VBox>

<mx:Label text="HRule Upper Area"/>

<mx:HRule styleName="HRule"/>

<mx:Label text="HRule Lower Area"/>

</mx:VBox>

</mx:Panel>

</mx:Application>

In this example we have illustrate how we can use style for HRule component.

Example for VRule:-

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

<mx:Style>

.VRule {strokeWidth:3}

VRule {strokeColor:#FF0000; shadowColor:#00FF00}

</mx:Style>

<mx:Panel width="250" height="200" title="VRule Example" horizontalAlign="center">

<mx:HBox>

<mx:Label text="VRule Left Area"/>

<mx:VRule styleName="VRule"/>

<mx:Label text="VRule Right Area"/>

</mx:HBox>

</mx:Panel>

</mx:Application>

Output:-

for HRule:-

and for VRule:-

Advertisements

Posted on: April 5, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.