mx:Tile and s:TileGroup issues with width property

Recently I came to need an mx:Tile like layout component to simply add some check-boxes. These check-boxes should be able to to be added or removed depending on user needs. While implementing it I found out that there was some strange space being added to the mx:Tile layout. I lost a few hours trying to figure out why this was happening and I believe that there’s some issue in the way the layout is calculated when the width property is set use 100% of the parent container. Bellow you can see an example with two entries for mx:Tile and s:TileGroup components. Each version of these components have one set to width=”100%” and another set to width=”{this.width – 100}”.

Vodpod videos no longer available.

<?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"
			   xmlns:label="com.mechdyne.support.label.*">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
		<s:ArrayCollection id="machineFilterFavorites">
			<fx:Object label="Windows"
					   data="Windows"/>
			<fx:Object label="Linux"
					   data="Linux"/>
			<fx:Object label="32 Bit"
					   data="32 Bit"/>
			<fx:Object label="64 Bit"
					   data="64 Bit"/>
			<fx:Object label="Available"
					   data="Available"/>
		</s:ArrayCollection>
	</fx:Declarations>
	
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			
			protected function machineG_creationCompleteHandler(event:FlexEvent):void
			{
				var cb:CheckBox = null;
				for each (var item:Object in machineFilterFavorites) {
					cb = new CheckBox();
					cb.label = item.label;
					cb.data = item.data;
					cb.addEventListener(Event.CHANGE, checkbox1_changeHandler);
					event.target.addElement(cb);
				} 
			}
			
			protected function checkbox1_changeHandler(event:Event):void
			{
				trace("Check Box: " + event.target.label + " is set to " + event.target.selected);
			}
		]]>
	</fx:Script>
	
	<s:layout>
		<s:VerticalLayout horizontalAlign="left" verticalAlign="top"/>
	</s:layout>
	
	<s:Label text="s:TileGroup with width set to 100%"/>
	<mx:VBox backgroundColor="blue" width="100%" backgroundAlpha=".5">
		<s:TileGroup id="machineG" 
					 width="100%" 
					 creationComplete="machineG_creationCompleteHandler(event)"/>
	</mx:VBox>
	
	<s:Label text="mx:Tile with width set to 100%"/>
	<mx:VBox backgroundColor="blue" width="100%" backgroundAlpha=".5">
		<mx:Tile id="machineQuickFilters" 
				 direction="horizontal" 
				 width="100%"
				 paddingLeft="10" paddingRight="10" paddingTop="0" paddingBottom="0"
				 tileHeight="17" verticalGap="0" horizontalGap="0" borderStyle="solid"
				 verticalAlign="middle">
			<mx:Repeater id="machineFilterFavoritesRepeater" 
						 dataProvider="{this.machineFilterFavorites}">
				<mx:CheckBox label="{machineFilterFavoritesRepeater.currentItem.label}"
							 data="{machineFilterFavoritesRepeater.currentItem.data}"
							 paddingBottom="0" paddingTop="0"
							 change="checkbox1_changeHandler(event)"
							 textRollOverColor="0x0050AA"
							 fontWeight="bold"
							 symbolColor="0xFA8406"/>
			</mx:Repeater>
		</mx:Tile>
	</mx:VBox>
	
	<s:Label text="s:TileGroup with literal width value"/>
	<mx:VBox backgroundColor="green" width="100%" backgroundAlpha=".5">
		<s:TileGroup id="machineG2" 
					 width="{this.width - 100}" 
					 creationComplete="machineG_creationCompleteHandler(event)"/>
	</mx:VBox>
	
	<s:Label text="mx:Tile with width literal width value"/>
	<mx:VBox backgroundColor="green" width="100%" backgroundAlpha=".5">
		<mx:Tile id="machineQuickFilters2" 
				 direction="horizontal" 
				 width="{this.width - 100}"
				 paddingLeft="10" paddingRight="10" paddingTop="0" paddingBottom="0"
				 tileHeight="17" verticalGap="0" horizontalGap="0" borderStyle="solid"
				 verticalAlign="middle">
			<mx:Repeater id="machineFilterFavoritesRepeater2" 
						 dataProvider="{this.machineFilterFavorites}">
				<mx:CheckBox label="{machineFilterFavoritesRepeater2.currentItem.label}"
							 data="{machineFilterFavoritesRepeater2.currentItem.data}"
							 paddingBottom="0" paddingTop="0"
							 change="checkbox1_changeHandler(event)"
							 textRollOverColor="0x0050AA"
							 fontWeight="bold"
							 symbolColor="0xFA8406"/>
			</mx:Repeater>
		</mx:Tile>
	</mx:VBox>
</s:Application>
Advertisements

About CrazyPenguin

Software Engineer
This entry was posted in AS3 (ActionScript3), Flex 3, Flex 4 (Spark), MXML. Bookmark the permalink.

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