Set the size of visual component in Flex4

Flex 4 provide mechanism to set Size of the visual components. There are two different ways to set Size for visual components.

Flex 4 provide mechanism to set Size of the visual components. There are two different ways to set Size for visual components.
Set the size of visual component in Flex4:

Flex 4 provide mechanism to set Size of the visual components. There are two different ways to set Size for visual components.

1. Default Sizing:- In this mechanism you do not specify the size of the controls and containers in flex 4. It is done Automatically

2.Explicit sizing:- If user want to set Size in pixel then set Width and Height properties in pixel for the visual components. Flex does not override these values for the related visual component. For example you can set size for button component in flex 4 like this,

<s:Button label = "Submit" height="300"  width="600"/>

If user want to set size in percentage based the set width and height properties in percentage value for visual components. Here is a example for set width and height in percent for button component in Flex 4.

<s:Button id="myButton" label = "Submit" height="20%" width="20%"/>
Example:

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx">

<s:Panel width="240" height="100" title="Set Size for Button Example">

<mx:HBox>

<s:Button id="mysButton" label="Spark Button" width="100" height="40"/>

<mx:Button id="myButton" label="MX Button" width="30%" height="20%"/>

</mx:HBox>

</s:Panel>

</s:Application>

Output:

You can see how to set Size for both type.

Running Application:

To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.

Download this code

Ads