Flex Examples
The following example shows how you can set the horizontal and vertical gaps on a Flex Legend control by setting the horizontalGap and verticalGap styles.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/29/setting-the-horizontal-and-vertical-gaps-on-a-legend-control-in-flex/ -->
<mx:Application name="Legend_horizontalGap_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:XMLListCollection id="dp">
<mx:source>
<mx:XMLList>
<product label="Product 1" data="3" />
<product label="Product 2" data="1" />
<product label="Product 3" data="4" />
<product label="Product 4" data="1" />
<product label="Product 5" data="5" />
<product label="Product 6" data="9" />
</mx:XMLList>
</mx:source>
</mx:XMLListCollection>
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="horizontalGap:">
<mx:HSlider id="sliderHGap"
minimum="0"
maximum="100"
snapInterval="1"
tickInterval="25"
liveDragging="true"
dataTipPrecision="0" />
</mx:FormItem>
<mx:FormItem label="verticalGap:">
<mx:HSlider id="sliderVGap"
minimum="0"
maximum="100"
snapInterval="1"
tickInterval="25"
liveDragging="true"
dataTipPrecision="0" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:Panel styleName="opaquePanel"
width="100%"
height="100%">
<mx:PieChart id="pieChart"
dataProvider="{dp}"
height="100%"
width="100%">
<mx:series>
<mx:PieSeries id="pieSeries"
field="@data"
nameField="@label" />
</mx:series>
</mx:PieChart>
<mx:ControlBar width="100%">
<mx:Legend dataProvider="{pieChart}"
direction="horizontal"
horizontalGap="{sliderHGap.value}"
verticalGap="{sliderVGap.value}"
width="100%" />
</mx:ControlBar>
</mx:Panel>
</mx:Application>
You can also set the horizontalGap and verticalGap styles in an external .CSS file or <mx:Style /> block, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/29/setting-the-horizontal-and-vertical-gaps-on-a-legend-control-in-flex/ -->
<mx:Application name="Legend_horizontalGap_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
Legend {
horizontalGap: 100;
verticalGap: 30;
}
</mx:Style>
<mx:XMLListCollection id="dp">
<mx:source>
<mx:XMLList>
<product label="Product 1" data="3" />
<product label="Product 2" data="1" />
<product label="Product 3" data="4" />
<product label="Product 4" data="1" />
<product label="Product 5" data="5" />
<product label="Product 6" data="9" />
</mx:XMLList>
</mx:source>
</mx:XMLListCollection>
<mx:Panel styleName="opaquePanel"
width="100%"
height="100%">
<mx:PieChart id="pieChart"
dataProvider="{dp}"
height="100%"
width="100%">
<mx:series>
<mx:PieSeries id="pieSeries"
field="@data"
nameField="@label" />
</mx:series>
</mx:PieChart>
<mx:ControlBar width="100%">
<mx:Legend dataProvider="{pieChart}"
direction="horizontal"
width="100%" />
</mx:ControlBar>
</mx:Panel>
</mx:Application>
Or, you can set the horizontalGap and verticalGap styles using ActionScript, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/29/setting-the-horizontal-and-vertical-gaps-on-a-legend-control-in-flex/ -->
<mx:Application name="Legend_horizontalGap_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.events.SliderEvent;
private function sliderHGap_change(evt:SliderEvent):void {
legend.setStyle("horizontalGap", evt.value);
}
private function sliderVGap_change(evt:SliderEvent):void {
legend.setStyle("verticalGap", evt.value);
}
]]>
</mx:Script>
<mx:XMLListCollection id="dp">
<mx:source>
<mx:XMLList>
<product label="Product 1" data="3" />
<product label="Product 2" data="1" />
<product label="Product 3" data="4" />
<product label="Product 4" data="1" />
<product label="Product 5" data="5" />
<product label="Product 6" data="9" />
</mx:XMLList>
</mx:source>
</mx:XMLListCollection>
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="horizontalGap:">
<mx:HSlider id="sliderHGap"
minimum="0"
maximum="100"
value="8"
snapInterval="1"
tickInterval="25"
liveDragging="true"
dataTipPrecision="0"
change="sliderHGap_change(event);" />
</mx:FormItem>
<mx:FormItem label="verticalGap:">
<mx:HSlider id="sliderVGap"
minimum="0"
maximum="100"
value="6"
snapInterval="1"
tickInterval="25"
liveDragging="true"
dataTipPrecision="0"
change="sliderVGap_change(event);" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:Panel styleName="opaquePanel"
width="100%"
height="100%">
<mx:PieChart id="pieChart"
dataProvider="{dp}"
height="100%"
width="100%">
<mx:series>
<mx:PieSeries id="pieSeries"
field="@data"
nameField="@label" />
</mx:series>
</mx:PieChart>
<mx:ControlBar width="100%">
<mx:Legend id="legend"
dataProvider="{pieChart}"
direction="horizontal"
width="100%" />
</mx:ControlBar>
</mx:Panel>
</mx:Application>
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
