Using Cell Skin Class

Since that PictogramCell extends the SkinnableComponent, its customization will be more easy and flexible. The PictogramCell skin class are designed in four parts, only one skin part is required all the rest are optional. The main parts are:

To have access to all the properties available for PictogramChart cell skinning please refer to the ASDoc.

With the following code we will try to define new cell skin class :

< ?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" width="100%" height="100%" xmlns:pictogramChart="fr.kapit.pictogram.*">
	
	< fx:Declarations>
		< fx:XML id="dp" xmlns="">
			< Countries>
			< Country code="FR" name="France" value="55"/>
			< Country code="USA" name="America" value="62"/>
			< Country code="TN" name="Tunisia" value="21"/>
			< Country code="EGY" name="Egypt" value="31"/>
			< Country code="GR" name="Germany" value="57"/>
			< Country code="IT" name="Italy" value="23"/>
			< Country code="UK" name="United Kingdom" value="59"/>
			< /Countries>
		< /fx:XML>
	< /fx:Declarations>
	
	< s:Group width="100%" height="100%">
		< pictogramChart:PictogramChart dataProvider="{dp}" 
						   valueField="@value"
						   metaDataField="@name"
						    cellSkinClass="{TestSkin}"
						   cellGridPercentHeight="80" cellGridPercentWidth="50" 
						   width="100%" height="100%">
	
		< /pictogramChart:PictogramChart>
	< /s:Group>
	
< /s:Application>

The used skin class in this snippet, is a very simple class in which we try just to change the different skin parts position on a new way. This new skinning way can be shown via the following code:


<s:Skin 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:layout>
		<s:VerticalLayout/>
	</s:layout>
	<fx:Metadata>
		[HostComponent("fr.kapit.pictogram.base.PictogramCell")]
	</fx:Metadata>
	
	
	<s:HGroup width="100%">
		
		<s:Label id="metaDataLabel"/>
		<s:Label id="valueLabel"/>
	</s:HGroup>
	<s:Group  id="unitsGrid" width="100%" height="100%">
		<s:layout>
			<s:TileLayout id="tileLayout" 
						  requestedColumnCount="9" requestedRowCount="5"
						  columnAlign="justifyUsingWidth" rowAlign="justifyUsingHeight">
				
			</s:TileLayout>
		</s:layout>
	</s:Group>
</s:Skin>