metadata.PercentProxy

PercentProxy is very simple. As you probably know, UIComponents allow you to define the width and height in MXML as pixels or percent:

<mx:UIComponent width="50"/>
<mx:UIComponent width="75%"/>

This is accomplished because the 'width' property/accessors in UIComponent has the metatag [PercentProxy("percentWidth")] which redirects any width value set in MXML with '%' on the end to the percentWidth property. So in the examples above, "50" sets width to 50 and "75%" sets percentWidth to 75.

Below is an example of creating a percent proxy for the amount of rows to be shown based on a list's dataprovider length:

MyList.as:

package 
{ 
 import mx.controls.List;

 public class MyList extends List
 { 
  
  [PercentProxy("rowsPercent")]
  override public function get rowCount():int {
   return super.rowCount;
  }
  
  override public function set rowCount(value:int):void {
   super.rowCount = value;
  }
  
  public function get rowsPercent():Number {
   return 100 * (rowCount / dataProvider.length);
  }
  
  public function set rowsPercent(value:Number):void {
   rowCount = dataProvider.length * (value/100);
  }
  
 }
}

ListTest.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" xmlns:local="*">
   <local:MyList width="100">
      <mx:Array>
         <mx:String>row1</mx:String>
         <mx:String>row2</mx:String>
         <mx:String>row3</mx:String>
         <mx:String>row4</mx:String>
         <mx:String>row5</mx:String>
         <mx:String>row6</mx:String>
         <mx:String>row7</mx:String>
         <mx:String>row8</mx:String>
         <mx:String>row9</mx:String>
         <mx:String>row10</mx:String>
      </mx:Array>
   </local:MyList>
   <local:MyList width="100" rowCount="3">
      <mx:Array>
         <mx:String>row1</mx:String>
         <mx:String>row2</mx:String>
         <mx:String>row3</mx:String>
         <mx:String>row4</mx:String>
         <mx:String>row5</mx:String>
         <mx:String>row6</mx:String>
         <mx:String>row7</mx:String>
         <mx:String>row8</mx:String>
         <mx:String>row9</mx:String>
         <mx:String>row10</mx:String>
      </mx:Array></local:MyList> 
   <local:MyList  width="100" rowCount="50%">
      <mx:Array>
         <mx:String>row1</mx:String>
         <mx:String>row2</mx:String>
         <mx:String>row3</mx:String>
         <mx:String>row4</mx:String>
         <mx:String>row5</mx:String>
         <mx:String>row6</mx:String>
         <mx:String>row7</mx:String>
         <mx:String>row8</mx:String>
         <mx:String>row9</mx:String>
         <mx:String>row10</mx:String>
      </mx:Array>
   </local:MyList>
</mx:Application>