Mio Project!

(Project)/src/renderers/PgBarItemRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<renderers:ProgressBarIconItemRenderer 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark" 
	xmlns:renderers="renderers.*" 
	labelField="projectName" 
	messageField="projectDescription" 
	barLengthField="projectWeight" 
	progressValueField="projectProgress" 
	iconField="image" 
	iconWidth="128" 
	iconHeight="128" 
	decorator="@Embed('./assets/images/arrow.png')"
	defaultBarLength="100">
</renderers:ProgressBarIconItemRenderer>

(Project)/src/views/SampleView.mxml

<!-- ...(前略)... -->
	<fx:Declarations>
		<s:ArrayCollection id="arrayColl">
			<fx:Object projectName="Project1" projectDescription="HogeHogeHogeHogeHogeHogeHogeHogeHogeHogeHogeHogeHogeHogeHogeHogeHogeHogeHogeHogeHogeHogeHogeHogeHogeHogeHogeHogeHogeHogeHogeHogeHoge" projectWeight="160" projectProgress="30" image="./assets/images/active.png" />
			<fx:Object projectName="Project2" projectDescription="PiyoPiyoPiyoPiyoPiyoPiyoPiyoPiyoPiyoPiyoPiyoPiyoPiyoPiyoPiyoPiyoPiyoPiyoPiyoPiyoPiyoPiyoPiyoPiyoPiyoPiyoPiyoPiyoPiyoPiyoPiyoPiyoPiyoPiyoPiyoPiyoPiyoPiyoPiyoPiyoPiyoPiyoPiyoPiyoPiyoPiyo" projectWeight="240" projectProgress="80" image="./assets/images/active.png" />
			<fx:Object projectName="Project3" projectDescription="FugaFugaFugaFugaFugaFugaFuga" projectWeight="320" projectProgress="95" image="./assets/images/active.png" />
			<fx:Object projectName="Project4" projectDescription="PiyoPiyoPiyoPiyoPiyo" projectWeight="190" projectProgress="20" image="./assets/images/active.png" />
			<fx:Object projectName="Project5" projectDescription="HomuHomu" projectWeight="160" projectProgress="100" image="./assets/images/done.png" />
			<fx:Object projectName="Project6" projectDescription="FugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFuga" projectWeight="240" projectProgress="80" image="./assets/images/active.png" />
			<fx:Object projectName="Project7" projectDescription="Hoge" projectWeight="320" projectProgress="100" image="./assets/images/active.png" />
			<fx:Object projectName="Project8" projectDescription="FugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFugaFuga" projectWeight="190" projectProgress="100" image="./assets/images/done.png" />
			<fx:Object projectName="Project9" projectDescription="PiyoPiyo" projectWeight="160" projectProgress="30" image="./assets/images/active.png" />
			<fx:Object projectName="Project10" projectDescription="Hoge" projectWeight="320" />
			<fx:Object projectName="Project11" projectDescription="Fuga" projectProgress="20" />
			<fx:Object projectName="Project12" projectDescription="Piyo" />
			<fx:Object projectName="Project13" />
		</s:ArrayCollection>
	</fx:Declarations>
	<s:Group>
		<s:List id="myList" 
				   dataProvider="{arrayColl}" 
				   itemRenderer="renderers.PgBarItemRenderer" 
				   width="100%" 
				   height="100%" 
				   borderVisible="true" 
				   borderColor="0xB3B3B3" />
<!-- ...(後略)... -->

(Project)/src/renderers/ProgressBarIconItemRenderer.as

/*##############################################################
    
    ProgressBarIconItemRenderer Class   (ver 1.0.0)
    
##############################################################*/

package renderers {
	
	import flash.display.Sprite;
	
	import mx.core.mx_internal;
	import mx.styles.CSSStyleDeclaration;
	
	import spark.components.IconItemRenderer;
	import spark.components.supportClasses.StyleableTextField;
	import spark.core.ContentCache;
	import spark.core.IContentLoader;
	import spark.core.IGraphicElementContainer;
	import spark.core.ISharedDisplayObject;
	
	
	use namespace mx_internal;
	
	
	
	//==========================================================
	//  
	//  スタイル
	//  
	//==========================================================
	
	//__________________________________________________________
	//  ギャップ
	/**
	 * 水平方向のギャップ.
	 */
	[Style(name="horizontalGap", type="Number", format="Length", inherit="no")]
	
	/**
	 * 垂直方向のギャップ.
	 */
	[Style(name="verticalGap", type="Number", format="Length", inherit="no")]
	
	//__________________________________________________________
	//  進捗バーの色
	/**
	 * 進捗バーの未進捗部分の塗りつぶしの色です.
	 * 
	 * @default 0x990000
	 */
	[Style(name="progressBarBackgroundColor", type="uint", format="Color", inherit="yes")]
	
	/**
	 * 進捗バーの既進捗部分の塗りつぶしの色です.
	 * 
	 * @default 0x009900
	 */
	[Style(name="progressBarDoneColor", type="uint", format="Color", inherit="yes")]
	
	/**
	 * 進捗バーの枠線の色です.
	 * 
	 * @default 0x999999
	 */
	[Style(name="progressBarBorderColor", type="uint", format="Color", inherit="yes")]
	
	//__________________________________________________________
	//  進捗率の表記
	/**
	 * 進捗率テキストコンポーネントのスタイルに使用する, 
	 * CSS スタイル宣言の名前です.
	 * 
	 * @default progressBarIconItemRendererProgressValueTextStyle
	 */
	[Style(name="progressValueTextStyleName", type="String", inherit="no")]
	
	
	
	//==========================================================
	//  
	//  クラス
	//  
	//==========================================================
	/**
	 * <code>ProgressBarIconItemRenderer</code> クラスは, 
	 * モバイルデバイス用に最適化されたパフォーマンスの良い, 
	 * アイテムレンダラーです. 進捗状況を, 
	 * バー表示でわかりやすく表示します.
	 * 
	 * <p>リストベースのコントロールの各アイテムに対して, 
	 * 次の 5 個のオプションパーツが表示されます.</p>
	 * 
	 * <ul>
	 *   <li><code>iconField</code> または <code>iconFunction</code> 
	 * プロパティによって定義される, 左側のアイコン.</li>
	 *   <li><code>labelField</code> または <code>labelFunction</code> 
	 * プロパティによって定義される, アイコンの横の 1 行テキスト.</li>
	 *   <li><code>messageField</code> または <code>messageFunction</code> 
	 * プロパティによって定義される, 進捗バーの下の複数行のメッセージ.</li>
	 *   <li><code>decorator</code> プロパティによって定義される, 
	 * 右側のデコレーターアイコン.</li>
	 *   <li><code>barlengthField</code> および <code>progressValueField</code> 
	 * プロパティによって定義される, テキストラベルの下の進捗バーと進捗率テキスト.</li>
	 * </ul>
	 * 
	 * <p>1 行のテキストラベルにフォントサイズや色などの CSS スタイルを適用するには, 
	 * <code>ProgressBarIconItemRenderer</code> クラスに CSS スタイルを設定します. <br />
	 * 複数行のメッセージにスタイルを設定するには, 
	 * <code>messageStyleName</code> スタイルプロパティを使用します. <br />
	 * 進捗率テキストに CSS スタイルを適用するには, 
	 * <code>progressValueTextStyleName</code> スタイルプロパティを使用します.</p>
	 * 
	 * @mxml
	 * 
	 * <p>The <code><renderers:IconItemRenderer></code> tag inherits all of the tag 
	 *  attributes of its superclass and adds the following tag attributes:</p>
	 *  
	 *  <pre>
	 *  <renderers:ProgressBarIconItemRenderer
	 *   <strong>Properties</strong>
	 *    barlengthField="null"
	 *    barlengthFunction="null"
	 *    decorator=""
	 *    defaultBarLength="160"
	 *    iconContentLoader="<i>See property description</i>"
	 *    iconField="null"
	 *    iconFillMode="scale"
	 *    iconFunction="null"
	 *    iconHeight="NaN"
	 *    iconPlaceholder="null"
	 *    iconScaleMode="stretch"
	 *    iconWidth="NaN"
	 *    label=""
	 *    labelField="null"
	 *    labelFunction="null"
	 *    messageField="null"
	 *    messageFunction="null"
	 *    progressValueField="null"
	 *    progressValueFunction="null"
	 *    showProgressValueText="true"
	 *    
	 *   <strong>Common Styles</strong>
	 *    horizontalGap="8"
	 *    iconDelay="500"
	 *    messageStyleName="iconItemRendererMessageStyle"
	 *    progressBarBackgroundColor: #990000
	 *    progressBarDoneColor: #009900
	 *    progressBarBorderColor: #999999
	 *    progressValueTextStyleName: "progressBarIconItemRendererProgressValueTextStyle"
	 *    verticalGap="6"
	 *  />
	 *  </pre>
	 * 
	 * @langversion 3.0
	 * @playerversion AIR 2.5
	 * @productversion Flex 4.5
	 * 
	 * @author mio
	 * 
	 */
	public class ProgressBarIconItemRenderer extends IconItemRenderer {
		
		
		
		//==========================================================
		//  
		//  クラスプロパティ ： プライベート
		//  
		//==========================================================
		
		//__________________________________________________________
		//  const
		
		/**
		 * @private
		 * 
		 * 進捗バーの未進捗部分の塗りつぶしの色のデフォルト値.
		 */
		private static const DEFAULT_PGBAR_BG_FILL_COLOR : uint = 0x990000;
		
		/**
		 * @private
		 * 
		 * 進捗バーの既進捗部分の塗りつぶしの色のデフォルト値.
		 */
		private static const DEFAULT_PGBAR_FG_FILL_COLOR : uint = 0x009900;
		
		/**
		 * @private
		 * 
		 * 進捗バーの枠線の色のデフォルト値.
		 */
		private static const DEFAULT_PGBAR_BORDER_COLOR : uint = 0x999999;
		
		/**
		 * @private
		 * 
		 * 進捗バーの枠線の太さ.
		 */
		private static const PGBAR_BORDER_THICKNESS : Number = 1.2;
		
		/**
		 * @private
		 * 
		 * 進捗バーの高さ.
		 */
		private static const PGBAR_HEIGHT : Number = 6;
		
		/**
		 * @private
		 * 
		 * 進捗バーの角の丸み.
		 */
		private static const PGBAR_ELLIPSE : Number = 3;
		
		//__________________________________________________________
		//  variable
		
		/**
		 * @private
		 * 
		 * 静的アイコンイメージキャッシュ.
		 */
		mx_internal static var _imageCache : ContentCache;
		
		
		
		//==========================================================
		//  
		//  コンストラクタ
		//  
		//==========================================================
		
		/**
		 * コンストラクタ.
		 */
		public function ProgressBarIconItemRenderer() {
			
			// スーパークラスのコンストラクタを呼び出し
			super();
			
			// イメージキャッシュの有効化
			if (_imageCache == null) {
				_imageCache = new ContentCache();
				_imageCache.enableCaching = true;
				_imageCache.maxCacheEntries = 128;
			}
			
			// デフォルトの進捗バーの全体の長さを算出
			_defaultBarLength = oldUnscaledWidth / 2;
			
		}
		
		
		
		//==========================================================
		//  
		//  インスタンスプロパティ : プライベート
		//  
		//==========================================================
		
		/**
		 * 進捗バーの全体の長さ.
		 */
		mx_internal var barLength : Number = 0;
		
		/**
		 * 進捗率の値.
		 */
		mx_internal var progressValue : Number = 0;
		
		/**
		 * @private
		 * 
		 * 進捗バーの前面描写.
		 */
		private var bar : Sprite;
		
		/**
		 * @private
		 * 
		 * 進捗バーの背面描写.
		 */
		private var barback : Sprite;
		
		/**
		 * @private
		 * 
		 * 進捗バーの全体の長さの修正後の値.
		 */
		private var barLengthEstimated : Number = -1;
		
		
		
		//==========================================================
		//  
		//  インスタンスプロパティ : オーバーライド
		//  
		//==========================================================
		
		//__________________________________________________________
		//  データやラベルの変更に応答するための setter
		/**
		 * @private
		 * 
		 * データの変更に応答するには, 
		 * この setter をオーバーライドします.
		 * 
		 * (Auto Generated method stub)
		 */
		override public function set data(value : Object) : void {
			
			super.data = value;
			
			// the data has changed.  push these changes down in to the 
			// subcomponents here.
			
			invalidateProperties();
			
		}
		
		/**
		 * @private
		 * 
		 * ラベルの変更に応答するには, 
		 * この setter をオーバーライドします.
		 * 
		 * (Auto Generated method stub)
		 */
		override public function set label(value : String) : void {
			
			if (value == label) return;
			
			super.label = value;
			
			// the label has changed.  push these changes down in to the 
			// subcomponents here.
			
			invalidateProperties();
			
		}
		
		//__________________________________________________________
		//  オプションのカスタムイメージローダー
		/**
		 * @private
		 */
		private var _iconContentLoader : IContentLoader = _imageCache;
		/**
		 * コンテンツローダークライアントに関連付ける
		 * イメージキャッシュやキューなどの
		 * オプションのカスタムイメージローダーです. 
		 * 
		 * <p>デフォルト値は, <code>IconItemRenderer</code> 
		 * で定義されている静的コンテンツキャッシュで, 
		 * 128 エントリまで可能です. </p>
		 */
		override public function get iconContentLoader() : IContentLoader {
			return _iconContentLoader;
		}
		/**
		 * @private
		 */
		override public function set iconContentLoader(value : IContentLoader) : void {
			if (value == _iconContentLoader) return;
			_iconContentLoader = value;
			if (iconDisplay) iconDisplay.contentLoader = _iconContentLoader;
		}
		
		
		
		//==========================================================
		//  
		//  インスタンスプロパティ : パブリック
		//  
		//==========================================================
		
		//__________________________________________________________
		//  進捗バーの全体の長さのデフォルト値関連
		private var _defaultBarLength : Number = 0;
		/**
		 * 進捗バーの全体の長さのデフォルト値を指定します.
		 * 
		 * <p>デフォルト値は, アプリケーションDPI値によって変わります.</p>
		 * <table>
		 *   <tr><th><code>applicationDPI</code></th><th><code>defaultBarLength</code></th></tr>
		 *   <tr><td><code>DPIClassification.DPI_160</code></td><td>160</td></tr>
		 *   <tr><td><code>DPIClassification.DPI_240</code></td><td>240</td></tr>
		 *   <tr><td><code>DPIClassification.DPI_320</code></td><td>320</td></tr>
		 * </table>
		 * 
		 * @default 160
		 */
		public function get defaultBarLength():Number {
			return _defaultBarLength;
		}
		/**
		 * @private
		 */
		public function set defaultBarLength(value:Number) : void {
			if (value == _defaultBarLength) return;
			_defaultBarLength = value;
			barLengthFieldOrFunctionChanged = true;
			barLengthChanged = true;
			invalidateSize();
			invalidateProperties();
		}
		
		//__________________________________________________________
		//  進捗バーの全体の長さ関連
		/**
		 * @private
		 */
		private var _barLengthField : String = "";
		/**
		 * @private
		 */
		private var barLengthFieldOrFunctionChanged : Boolean;
		/**
		 * @private
		 */
		private var barLengthChanged : Boolean;
		/**
		 * 進捗バーの全体の長さを指定するフィールド名です.
		 */
		public function get barLengthField() : String {
			return _barLengthField;
		}
		/**
		 * @private
		 */
		public function set barLengthField(value : String) : void {
			if (value == _barLengthField) return;
			_barLengthField = value;
			barLengthFieldOrFunctionChanged = true;
			barLengthChanged = true;
			invalidateSize();
			invalidateProperties();
		}
		/**
		 * @private
		 */
		private var _barLengthFunction : Function;
		/**
		 * 進捗バーの全体の長さを決定する各アイテムで
		 * 実行されるユーザー指定の関数です.
		 * 
		 * <p><code>barLengthFunction</code> プロパティは 
		 * <code>barLengthField</code> プロパティをオーバーライドします.</p>
		 */
		public function get barLengthFunction() : Function {
			return _barLengthFunction;
		}
		/**
		 * @private
		 */
		public function set barLengthFunction(value : Function) : void {
			if (value == _barLengthFunction) return;
			_barLengthFunction = value;
			barLengthFieldOrFunctionChanged = true;
			barLengthChanged = true;
			invalidateSize();
			invalidateProperties();
		}
		
		//__________________________________________________________
		//  進捗バーの進捗率関連
		/**
		 * @private
		 */
		private var _progressValueField : String = "";
		/**
		 * @private
		 */
		private var progressValueFieldOrFunctionChanged : Boolean;
		/**
		 * @private
		 */
		private var progressValueChanged : Boolean;
		
		/**
		 * 進捗バーの進捗率を指定するフィールド名です.
		 */
		public function get progressValueField() : String {
			return _progressValueField;
		}
		/**
		 * @private
		 */
		public function set progressValueField(value : String) : void {
			if (value == _progressValueField) return;
			_progressValueField = value;
			progressValueFieldOrFunctionChanged = true;
			progressValueChanged = true;
			invalidateProperties();
		}
		/**
		 * @private
		 */
		private var _progressValueFunction : Function;
		/**
		 * 進捗バーの進捗率を決定する各アイテムで
		 * 実行されるユーザー指定の関数です.
		 * 
		 * <p><code>progressValueFunction</code> プロパティは 
		 * <code>progressValueField</code> プロパティをオーバーライドします.</p>
		 */
		public function get progressValueFunction() : Function {
			return _progressValueFunction;
		}
		/**
		 * @private
		 */
		public function set progressValueFunction(value : Function) : void {
			if (value == _progressValueFunction) return;
			_progressValueFunction = value;
			progressValueFieldOrFunctionChanged = true;
			progressValueChanged = true;
			invalidateProperties();
		}
		
		//__________________________________________________________
		//  進捗率の表記
		/**
		 * @private
		 */
		private var _showProgressValueText : Boolean = true;
		/**
		 * 進捗率のテキスト表記をするかどうかを設定します.
		 * 
		 * @default true
		 */
		[Inspectable(category="Other", enumeration="true,false", defaultValue="true")]
		public function get showProgressValueText() : Boolean {
			return _showProgressValueText;
		}
		/**
		 * @private
		 */
		public function set showProgressValueText(value : Boolean) : void {
			if (value == _showProgressValueText) return;
			_showProgressValueText = value;
			invalidateSize();
			invalidateProperties();
		}
		/**
		 * アイテムレンダラーの進捗率データを表示するために
		 * 使用されるテキストコンポーネントです.
		 */
		protected var progressValueTextDisplay : StyleableTextField;
		
		
		
		//==========================================================
		//  
		//  インスタンスメソッド : プロテクテッド
		//  
		//==========================================================
		
		//__________________________________________________________
		//  進捗率バーのコンポーネントを作成/破棄するメソッド
		/**
		 * <code>bar</code> 及び <code>barback</code> コンポーネントを作成します.
		 */
		protected function createProgressBar() : void {
			
			// コンストラクト
			barback = new Sprite();
			bar = new Sprite();
			
			// 進捗バーを描写
			drawProgressbarBackground();
			drawProgressbarFourground();
			
			// キャッシュ
			barback.cacheAsBitmap = true;
			bar.cacheAsBitmap = true;
			
			// 表示リストに吊るす
			this.addChild(barback);
			this.addChild(bar);
			
		}
		
		/**
		 * <code>bar</code> 及び <code>barback</code> コンポーネントを破棄します.
		 */
		protected function destroyProgressBar() : void {
			
			// 表示リストから削除
			this.removeChild(bar);
			this.removeChild(barback);
			
			// デストラクト
			bar = null;
			barback = null;
			
		}
		
		//__________________________________________________________
		//  進捗率バーのコンポーネントを作成/破棄するメソッド
		/**
		 * 進捗バーの背面描写を行います.
		 */
		protected function drawProgressbarBackground() : void {
			
			// 描写スタイル定義
			var fillColor : uint = DEFAULT_PGBAR_BG_FILL_COLOR;
			var borderColor : uint = DEFAULT_PGBAR_BORDER_COLOR;
			if (getStyle("progressBarBackgroundColor") != "undefined") 
				fillColor = getStyle("progressBarBackgroundColor");
			if (getStyle("progressBarBorderColor") != "undefined") 
				borderColor = getStyle("progressBarBorderColor");
			
			// 描写をクリア
			barback.graphics.clear();
			
			// 進捗バーの全体の長さを取得
			var len : Number = (barLengthEstimated >= 0) ? barLengthEstimated : barLength;
			
			// 描写を行う
			barback.graphics.lineStyle(PGBAR_BORDER_THICKNESS, borderColor);
			barback.graphics.beginFill(fillColor);
			barback.graphics.drawRoundRect(0, 0, len, PGBAR_HEIGHT, PGBAR_ELLIPSE, PGBAR_ELLIPSE);
			barback.graphics.endFill();
			
		}
		
		/**
		 * 進捗バーの前面描写を行います.
		 */
		protected function drawProgressbarFourground() : void {
			
			// 描写スタイル定義
			var fillColor : uint = DEFAULT_PGBAR_BG_FILL_COLOR;
			var borderColor : uint = DEFAULT_PGBAR_BORDER_COLOR;
			if (getStyle("progressBarDoneColor") != "undefined") 
				fillColor = getStyle("progressBarDoneColor");
			if (getStyle("progressBarBorderColor") != "undefined") 
				borderColor = getStyle("progressBarBorderColor");
			
			// 描写をクリア
			bar.graphics.clear();
			
			// 既進捗バーの長さを計算
			var len : Number = (barLengthEstimated >= 0) ? barLengthEstimated : barLength;
			var progressLength : Number = (progressValue / 100) * len;
			if (progressLength < 0) progressLength = 0;
			if (progressLength > len) progressLength = len;
			
			// 描写を行う
			bar.graphics.lineStyle(PGBAR_BORDER_THICKNESS, borderColor, 0);
			bar.graphics.beginFill(fillColor);
			bar.graphics.drawRoundRect(0.5, 0, progressLength - 0.5, PGBAR_HEIGHT - 1, PGBAR_ELLIPSE, PGBAR_ELLIPSE);
			bar.graphics.endFill();
			
		}
		
		//__________________________________________________________
		//  進捗率のテキスト表記コンポーネントを作成/破棄するメソッド
		/**
		 * <code>progressValueTextDisplay</code> コンポーネントを作成します.
		 */
		protected function createProgressValueTextDisplay() : void {
			
			// コンストラクト
			progressValueTextDisplay = StyleableTextField(createInFontContext(StyleableTextField));
			
			// テキストフィールドの属性
			progressValueTextDisplay.styleName = this;
			progressValueTextDisplay.editable = false;
			progressValueTextDisplay.selectable = false;
			progressValueTextDisplay.multiline = false;
			progressValueTextDisplay.wordWrap = false;
			
			// スタイルシートの適用
			var progressValueTextStyleName : String = getStyle("progressValueTextStyleName");
			if (progressValueTextStyleName) {
				var styleDeclaration : CSSStyleDeclaration = 
					styleManager.getMergedStyleDeclaration("." + progressValueTextStyleName);
				if (styleDeclaration) {
					progressValueTextDisplay.styleDeclaration = styleDeclaration;
				}
			}
			
			// 表示リストに吊るす
			this.addChild(progressValueTextDisplay);
			
		}
		
		/**
		 * <code>progressValueTextDisplay</code> コンポーネントを破棄します.
		 */
		protected function destroyProgressValueTextDisplay() : void {
			
			if (progressValueTextDisplay) {
				
				// 表示リストから削除
				this.removeChild(progressValueTextDisplay);
				
				// デストラクト
				progressValueTextDisplay = null;
				
			}
			
		}
		
		
		
		//==========================================================
		//  
		//  インスタンスメソッド : オーバーライド
		//  
		//==========================================================
		
		//__________________________________________________________
		//  アイテムレンダラーの子オブジェクトを作成するメソッド
		/**
		 * @private
		 * 
		 * アイテムレンダラーの子を作成するには, 
		 * このメソッドをオーバーライドします.
		 * 
		 * (Auto Generated method stub)
		 */
		override protected function createChildren() : void {
			
			super.createChildren();
			
			// create any additional children for your item renderer here
			
		}
		
		//__________________________________________________________
		//  スタイルプロパティの変更を検出するメソッド
		/**
		 * @private
		 * 
		 * スタイルプロパティの変更に応答するには, 
		 * このメソッドをオーバーライドします.
		 * 
		 * (Auto Generated method stub)
		 */
		override public function styleChanged(styleName : String) : void {
			
			// スタイルプロパティの変更があるか検出
			var allStyles : Boolean = !styleName || styleName == "styleName";
			
			// スーパークラスのスタイルプロパティの変更を検出
			super.styleChanged(styleName);
			
			// 進捗率テキストコンポーネントのスタイルシートの適用
			if (allStyles || styleName == "progressValueTextStyleName") {
				if (_showProgressValueText && progressValueTextDisplay) {
					var progressValueTextStyleName : String = getStyle("progressValueTextStyleName");
					if (progressValueTextStyleName) {
						var styleDeclaration : CSSStyleDeclaration = 
							styleManager.getMergedStyleDeclaration("." + progressValueTextStyleName);
						if (styleDeclaration) {
							progressValueTextDisplay.styleDeclaration = styleDeclaration;
							progressValueTextDisplay.styleChanged("styleName");
						}
					}
				}
			}
			
		}
		
		//__________________________________________________________
		//  コンポーネントに設定されたプロパティを処理するメソッド
		/**
		 * @private
		 * 
		 * コンポーネントに設定されたプロパティを処理するには, 
		 * このメソッドをオーバーライドします.
		 * 
		 * (Auto Generated method stub)
		 */
		override protected function commitProperties():void {
			
			// スーパークラスの commitProperties() メソッドを呼び出し
			super.commitProperties();
			
			// TODO _showProgressValueText がイベントなどで変更された時の処理を書く
			/// メモ： progressValueField の生成・破棄まで面倒をみるかどうかが問題だ。
			/// メモ： メジャーメソッドやレイアウトメソッドの関係上、面倒みなきゃいけない気がする。
			/// メモ: でも、ここで実装しなくとも、計測と配置が再計算されてるんじゃなかろうか。未確認。
			//...(未実装)...
			
			// 進捗バーの全体の長さを設定するフィールドまたは関数の値、または
			// 進捗率の値を設定するフィールドまたは関数の値のどちらかが変更された時
			if (barLengthFieldOrFunctionChanged || progressValueFieldOrFunctionChanged) {
				
				// フラグを下ろす
				barLengthFieldOrFunctionChanged = false;
				progressValueFieldOrFunctionChanged = false;
				
				// それを生成/破棄する必要があるかどうかを吟味
				if (((barLengthField || (barLengthFunction != null)) && !barback) || 
					((progressValueField || (progressValueFunction != null)) && !bar)) {
					createProgressBar();
					if (_showProgressValueText) createProgressValueTextDisplay();
				} else if ( (!(barLengthField || (barLengthFunction != null)) && barback) || 
							(!(progressValueField || (progressValueFunction != null)) && bar)) {
					destroyProgressBar();
					if (_showProgressValueText) destroyProgressValueTextDisplay();
				}
				
			}
			invalidateSize();
			invalidateProperties();
			
			// 進捗バーの全体の長さが変更された時
			if (barLengthChanged) {
				
				// フラグを下ろす
				barLengthChanged = false;
				
				// 進捗バーの全体の長さを取得して保持
				if (barLengthFunction != null) {
					barLength = barLengthFunction(data) as Number;
				} else {
					if (barLengthField) {
						try {
							if (barLengthField in data && data[barLengthField] != null) {
								barLength = data[barLengthField] as Number;
							} else {
								barLength = _defaultBarLength;
							}
						} catch (err : Error) {
							barLength = _defaultBarLength;
						}
					} else if (!barLengthField) {
						barLength = _defaultBarLength;
					}
				}
				
				// 進捗バーの全体の長さで進捗バーの背面描写
				if (!barback) createProgressBar();
				drawProgressbarBackground();
				
			}
			invalidateSize();
			invalidateProperties();
			
			// 進捗率が変更された時
			if (progressValueChanged) {
				
				// フラグを下ろす
				progressValueChanged = false;
				
				// 進捗率を取得して保持
				if (progressValueFunction != null) {
					progressValue = progressValueFunction(data) as Number;
				} else if (progressValueField) {
					try {
						if (progressValueField in data && data[progressValueField] != null) {
							progressValue = data[progressValueField] as Number;
						} else {
							progressValue = 0;
						}
					} catch (err : Error) {
						progressValue = 0;
					}
				}
				
				// 進捗率をテキスト表記コンポーネントに設定して表示する
				if (showProgressValueText) {
					if (!progressValueTextDisplay) createProgressValueTextDisplay();
					progressValueTextDisplay.text = progressValue.toString() + "\%";
				}
				
				// 進捗率で進捗バーの前面描写
				if (!bar) createProgressBar();
				drawProgressbarFourground();
				
			}
			invalidateSize();
			invalidateProperties();
			
		}
		
		//__________________________________________________________
		//  コンポーネントのデフォルトサイズと最小サイズ
		//  を計算するメソッド
		/**
		 * @private
		 * 
		 * アイテムレンダラー自身によるサイズ設定方法を変更するには,
		 * このメソッドをオーバーライドします. 
		 * 
		 * パフォーマンスに影響するため, 必要がない場合は 
		 * super.measure() を呼び出さないでください.
		 * 
		 * (Auto Generated method stub)
		 */ 
		override protected function measure() : void {
			
			// 以下、独自に measure() メソッドを実装するので、
			// super.measure() は呼び出さない.
			//super.measure();					// Disabled super.measure()
			
			// measure all the subcomponents here and set measuredWidth, measuredHeight, 
			// measuredMinWidth, and measuredMinHeight
			
			// 計測値の初期化
			var _measuredWidth : Number = 0;
			var _measuredHeight : Number = 0;
			var _measuredMinWidth : Number = 0;
			var _measuredMinHeight : Number = 0;
			
			// 水平レイアウトでいくつのセクションがあるかカウント
			var numHorizontalSections : uint = 0;
			if (iconDisplay) numHorizontalSections++;
			if (decoratorDisplay) numHorizontalSections++;
			if (labelDisplay || messageDisplay || progressValueTextDisplay) numHorizontalSections++;
			
			// 水平方向の padding 値と horizontalGap 値を取得
			var paddingAndGapWidth : Number = getStyle("paddingLeft") + getStyle("paddingRight");
			if (numHorizontalSections > 0) 
				paddingAndGapWidth += (getStyle("horizontalGap") * (numHorizontalSections - 1));
			
			// ラベル, メッセージ, 進捗率テキスト が設定されているかどうかを取得
			var hasLabel : Boolean = labelDisplay && labelDisplay.text != "";
			var hasMessage : Boolean = messageDisplay && messageDisplay.text != "";
			var hasProgressValue : Boolean = _showProgressValueText && 
				progressValueTextDisplay && progressValueTextDisplay.text != "";
			
			// 垂直レイアウトでいくつのセクションがあるかカウント
			var numVerticalSections : uint = 0;
			if (hasLabel) numVerticalSections++;
			if (hasMessage) numVerticalSections++;
			if (hasProgressValue) numVerticalSections++;
			
			// 垂直方向の padding 値と verticalGap 値と複数個の verticalGap の総和を取得
			var paddingHeight : Number = getStyle("paddingTop") + getStyle("paddingBottom");
			var verticalGap : Number = (hasLabel || hasMessage) ? getStyle("verticalGap") : 0;
			var verticalGapSum : Number = verticalGap;
			if (numVerticalSections > 0) 
				verticalGapSum += verticalGap * (numVerticalSections - 1);
			
			// アイコンの大きさを取得して、計測値に反映
			var _iconWidth : Number = 0;
			var _iconHeight : Number = 0;
			if (iconDisplay) {
				_iconWidth = isNaN(iconWidth) ? getElementPreferredWidth(iconDisplay) : iconWidth;
				_iconHeight = isNaN(iconHeight) ? getElementPreferredHeight(iconDisplay) : iconHeight;
				_measuredWidth += _iconWidth;
				_measuredMinWidth += _iconWidth;
				_measuredHeight = Math.max(_measuredHeight, _iconHeight);
				_measuredMinHeight = Math.max(_measuredMinHeight, _iconHeight);
			}
			
			// デコレーターの大きさを取得して、計測値に反映
			var _decoratorWidth : Number = 0;
			var _decoratorHeight : Number = 0;
			if (decoratorDisplay) {
				_decoratorWidth = getElementPreferredWidth(decoratorDisplay);
				_decoratorHeight = getElementPreferredHeight(decoratorDisplay);
				_measuredWidth += _decoratorWidth;
				_measuredMinWidth += _decoratorWidth;
				_measuredHeight = Math.max(_measuredHeight, _decoratorHeight);
				_measuredMinHeight = Math.max(_measuredMinHeight, _decoratorHeight);
			}
			
			// ラベルの大きさを取得
			var _labelWidth : Number = 0;
			var _labelHeight : Number = 0;
			if (hasLabel) {
				if (labelDisplay.isTruncated) labelDisplay.text = labelText;
				_labelWidth = getElementPreferredWidth(labelDisplay);
				_labelHeight = getElementPreferredHeight(labelDisplay);
			}
			
			// メッセージの大きさを取得
			var _messageWidth : Number = 0;
			var _messageHeight : Number = 0;
			if (hasMessage) {
				var _messageDisplayEstimatedWidth : Number =
					oldUnscaledWidth - paddingAndGapWidth - _iconWidth - _decoratorWidth;
				setElementSize(messageDisplay, _messageDisplayEstimatedWidth, NaN);
				_messageWidth = getElementPreferredWidth(messageDisplay);
				_messageHeight = getElementPreferredHeight(messageDisplay);
			}
			
			// 進捗率テキストと進捗バーの大きさを取得
			var _progressWidth : Number = 0;
			var _progressHeight : Number = 0;
			_progressWidth = Math.max(data[_barLengthField] as Number, 0, 
				getElementPreferredWidth(barback), getElementPreferredWidth(bar));
			_progressHeight = Math.max(PGBAR_HEIGHT, 0, 
				getElementPreferredHeight(barback), getElementPreferredHeight(bar));
			if (hasProgressValue) {
				if (progressValueTextDisplay.isTruncated) 
					progressValueTextDisplay.text = progressValue.toString() + "\%";
				_progressWidth = Math.max(_progressWidth, 
					getElementPreferredWidth(progressValueTextDisplay));
				_progressHeight += getElementPreferredHeight(progressValueTextDisplay) + verticalGap;
			}
			
			// 以上の垂直レイアウト内の3つのコンポーネントの大きさを、計測値に反映
			_measuredWidth += Math.max(_labelWidth, _messageWidth, _progressWidth);
			_measuredHeight = Math.max(_measuredHeight, 
				_labelHeight + _progressHeight + _messageHeight + verticalGapSum);
			
			// padding 値や gap値を、計測値に反映
			_measuredWidth += paddingAndGapWidth;
			_measuredMinWidth += paddingAndGapWidth;
			_measuredHeight += paddingHeight;
			_measuredMinHeight += paddingHeight;
			
			// 計測結果をコンポーネントの大きさに反映
			measuredWidth = _measuredWidth;
			measuredHeight = _measuredHeight;
			measuredMinWidth = _measuredMinWidth;
			measuredMinHeight = _measuredMinHeight;
			
		}
		
		//__________________________________________________________
		//  画面更新時に表示リストを更新できるように、
		//  コンポーネントをマークするメソッド
		/**
		 * @private
		 * 
		 * 次の画面更新時に updateDisplayList() メソッド
		 * が呼び出されるように, コンポーネントをマークします.
		 */
		override public function invalidateDisplayList():void {
			
			// 再描写要求
			redrawRequested = true;
			
			// スーパークラスの invalidateDisplayList() を呼び出す
			super.invalidateDisplayList();
			
		}
		
		//__________________________________________________________
		//  アイテムレンダラーの背景の描写を行うメソッド
		/**
		 * @private
		 * 
		 * アイテムレンダラーの背景の描画方法を変更するには, 
		 * このメソッドをオーバーライドします. 
		 * 
		 * パフォーマンスに影響するため, 必要がない場合は 
		 * super.drawBackground() を呼び出さないでください.
		 * 
		 * (Auto Generated method stub)
		 */
		override protected function drawBackground(unscaledWidth : Number, unscaledHeight : Number) : void {
			
			// スーパークラスの drawBackground() を呼び出して、背景を描写
			super.drawBackground(unscaledWidth, unscaledHeight);
			
			// do any drawing for the background of the item renderer here
			
		}
		
		//__________________________________________________________
		//  アイテムレンダラーの背景の描写を行うメソッド
		/**
		 * @private
		 * 
		 * このアイテムレンダラーの背景の子の位置決めを変更するには、このメソッドを
		 * オーバーライドします。パフォーマンスに影響するため、必要がない場合は
		 * super.layoutContents() を呼び出さないでください。
		 * 
		 * (Auto Generated method stub)
		 */
		override protected function layoutContents(unscaledWidth : Number, unscaledHeight : Number) : void {
			
			// 以下、独自に layoutContents() メソッドを実装するので、
			// super.layoutContents() は呼び出さない.
			//super.layoutContents(unscaledWidth, unscaledHeight);	// Disabled super.layoutContents()
			
			// layout all the subcomponents here
			
			// TODO レイアウト再配置
			
			// アイコンとデコレーターの大きさ
			var iconWidth : Number = 0;
			var iconHeight : Number = 0;
			var decoratorWidth : Number = 0;
			var decoratorHeight : Number = 0;
			
			// ラベル, メッセージ, 進捗率テキスト が設定されているかどうかを取得
			var hasLabel : Boolean = labelDisplay && labelDisplay.text != "";
			var hasMessage : Boolean = messageDisplay && messageDisplay.text != "";
			var hasProgressValue : Boolean = _showProgressValueText && 
				progressValueTextDisplay && progressValueTextDisplay.text != "";
			
			// padding 値を取得
			var paddingTop : Number = getStyle("paddingTop");
			var paddingRight : Number = getStyle("paddingRight");
			var paddingBottom : Number = getStyle("paddingBottom");
			var paddingLeft : Number = getStyle("paddingLeft");
			
			// Gap 値を取得
			var horizontalGap : Number = getStyle("horizontalGap");
			var verticalGap : Number = (hasLabel || hasMessage) ? getStyle("verticalGap") : 0;
			
			// 垂直方向の整列の取得
			var verticalAlign : Number = -1;
			if (getStyle("verticalAlign") == "top") {
				verticalAlign = 0;
			} else if (getStyle("verticalAlign") == "bottom") {
				verticalAlign = 1;
			} else { // if (getStyle("verticalAlign") == "middle")
				verticalAlign = 0.5;
			}
			
			// 配置可能ビューの域
			var viewWidth : Number = unscaledWidth - paddingLeft - paddingRight;
			var viewHeight : Number = unscaledHeight - paddingTop - paddingBottom;
			
			// アイコンの配置
			if (iconDisplay) {
				// 大きさを設定する
				setElementSize(iconDisplay, this.iconWidth, this.iconHeight);
				// 大きさを取得する
				iconWidth = iconDisplay.getLayoutBoundsWidth();
				iconHeight = iconDisplay.getLayoutBoundsHeight();
				// 垂直方向の整列の計算
				var iconDisplayY : Number = Math.round(verticalAlign * (viewHeight - iconHeight)) + paddingTop;
				// アイコンの配置
				setElementPosition(iconDisplay, paddingLeft, iconDisplayY);
			}
			
			// デコレーターの配置
			if (decoratorDisplay) {
				// 大きさを取得する
				decoratorWidth = getElementPreferredWidth(decoratorDisplay);
				decoratorHeight = getElementPreferredHeight(decoratorDisplay);
				// 大きさを設定する
				setElementSize(decoratorDisplay, decoratorWidth, decoratorHeight);
				// 垂直方向の整列 (いつでも垂直中央に表示する) の計算
				var decoratorY : Number = Math.round(0.5 * (viewHeight - decoratorHeight)) + paddingTop;
				// デコレーターの配置
				setElementPosition(decoratorDisplay, unscaledWidth - paddingRight - decoratorWidth, decoratorY);
			}
			
			// ラベル, メッセージ, 進捗バー の3つのコンポーネントを配置可能ビューの域とX座標
			var labelComponentsViewWidth : Number = viewWidth - iconWidth - decoratorWidth;
			if (iconDisplay) labelComponentsViewWidth -= horizontalGap;
			if (decoratorDisplay) labelComponentsViewWidth -= horizontalGap;
			var labelComponentsX : Number = paddingLeft;
			if (iconDisplay) labelComponentsX += iconWidth + horizontalGap;
			
			// ラベルの高さ
			var labelTextHeight : Number = 0;
			if (hasLabel) {
				// ラベルが切り詰められていたら、テキストを再代入する
				if (labelDisplay.isTruncated) labelDisplay.text = labelText;
				// ラベルにスタイルをコミット
				labelDisplay.commitStyles();
				// ラベルの高さを取得
				labelTextHeight = getElementPreferredHeight(labelDisplay);
			}
			
			// メッセージにスタイルをコミット
			messageDisplay.commitStyles();
			
			// 進捗率テキストの高さ
			var progressValueTextHeight : Number = 0;
			if (hasProgressValue) {
				// 進捗率テキストが切り詰められていたら、テキストを再代入する
				if (progressValueTextDisplay.isTruncated) 
					progressValueTextDisplay.text = progressValue.toString() + "\%";
				// 進捗率テキストにスタイルをコミット
				progressValueTextDisplay.commitStyles();
				// 進捗率テキストの高さを取得
				progressValueTextHeight = getElementPreferredHeight(progressValueTextDisplay);
			}
			
			// ラベル, メッセージ, 進捗コンポネ の3つのコンポーネントの大きさ
			var labelWidth : Number = 0;
			var labelHeight : Number = 0;
			var messageWidth : Number = 0;
			var messageHeight : Number = 0;
			var progressBarWidth : Number = 0;
			var progressBarHeight : Number = 0;
			var progressValueWidth : Number = 0;
			var progressValueHeight : Number = 0;
			var progressComponentsWidth : Number = 0;
			var progressComponentsHeight : Number = 0;
			
			// ラベルのサイズの調整
			if (hasLabel) {
				labelWidth = Math.max(labelComponentsViewWidth, 0);
				labelHeight = labelTextHeight;
				if (labelWidth == 0) setElementSize(labelDisplay, NaN, 0);
				else setElementSize(labelDisplay, labelWidth, labelHeight);
				labelDisplay.truncateToFit("…");
			}
			
			// 進捗コンポネサイズの調整
			// 進捗バー
			if (bar || barback) {
				progressBarWidth = Math.max(getElementPreferredWidth(barback), barLength, defaultBarLength, 0);
				if (progressBarWidth == 0) {
					barLengthEstimated = 0;
					drawProgressbarBackground();
					drawProgressbarFourground();
				} else {
					if (progressBarWidth > labelComponentsViewWidth) {
						progressBarWidth = labelComponentsViewWidth;
						barLengthEstimated = labelComponentsViewWidth;
						drawProgressbarBackground();
						drawProgressbarFourground();
					}
				}
				progressBarHeight = Math.max(getElementPreferredHeight(barback), PGBAR_HEIGHT, 0);
			} else {
				barLengthEstimated = 0;
				createProgressBar();
				progressBarWidth = Math.max(getElementPreferredWidth(barback), 0);
				progressBarHeight = Math.max(getElementPreferredHeight(barback), 0);
			}
			// 進捗率
			if (hasProgressValue) {
				progressValueWidth = Math.max(getElementPreferredWidth(barback), 0);
				progressValueHeight = progressValueTextHeight;
				if (progressValueWidth == 0) {
					setElementSize(progressValueTextDisplay, NaN, 0);
				} else {
					setElementSize(progressValueTextDisplay, progressValueWidth, progressValueHeight);
				}
				progressValueTextDisplay.truncateToFit("…");
			}
			// 進捗コンポネ
			progressComponentsWidth = Math.max(progressBarWidth, progressValueWidth, 0);
			progressComponentsHeight = progressBarHeight;
			if (_showProgressValueText) 
				progressComponentsHeight += progressValueHeight + verticalGap;
			
			// メッセージのサイズの調整
			if (hasMessage) {
				messageWidth = Math.max(labelComponentsViewWidth, 0);
				if (messageWidth == 0) {
					setElementSize(messageDisplay, NaN, 0);
				} else {
					var oldPreferredMessageHeight : Number = getElementPreferredHeight(messageDisplay);
					oldUnscaledWidth = unscaledWidth;
					setElementSize(messageDisplay, messageWidth, oldPreferredMessageHeight);
					var newPreferredMessageHeight : Number = getElementPreferredHeight(messageDisplay);
					if (oldPreferredMessageHeight != newPreferredMessageHeight) invalidateSize();
					messageHeight = newPreferredMessageHeight;
				}
			} else {
				if (messageDisplay) setElementSize(messageDisplay, 0, 0);
			}
			
			// 垂直方向の整列用
			var totalHeight : Number = 0;
			var labelComponentsY : Number = 0;
			var messageComponentsY : Number = 0;
			var progressComponentsY : Number = 0;
			var labelAlignmentHeight : Number = 0;
			var messageAlignmentHeight : Number = 0;
			var progressAlignmentHeight : Number = 0;
			
			// 垂直方向の整列のために、コンポーネントの高さを取得
			if (hasLabel) labelAlignmentHeight = getElementPreferredHeight(labelDisplay);
			if (hasMessage) messageAlignmentHeight = getElementPreferredHeight(messageDisplay);
			progressAlignmentHeight = progressComponentsHeight;
			
			// 垂直配置するコンポーネント全部の高さを計算
			totalHeight = labelAlignmentHeight + messageAlignmentHeight + progressAlignmentHeight;
			totalHeight += verticalGap * 2;
			
			// 各コンポーネントを配置するY座標を計算
			labelComponentsY = Math.round(verticalAlign * (viewHeight - totalHeight)) + paddingTop;
			progressComponentsY = labelComponentsY + labelAlignmentHeight + verticalGap;
			messageComponentsY = progressComponentsY + progressAlignmentHeight + verticalGap;
			
			// ラベルの配置
			if (labelDisplay) 
				setElementPosition(labelDisplay, labelComponentsX, labelComponentsY);
			
			// 進捗コンポーネントの配置
			setElementPosition(barback, labelComponentsX, progressComponentsY);
			setElementPosition(bar, labelComponentsX, progressComponentsY + 1);
			if (_showProgressValueText && progressValueTextDisplay) 
				setElementPosition(progressValueTextDisplay, 
					labelComponentsX, progressComponentsY + progressBarHeight + verticalGap);
			
			// メッセージの配置
			if (messageDisplay) 
				setElementPosition(messageDisplay, labelComponentsX, messageComponentsY);
			
		}
		
	}
}

(Project)/src/assets/styles/defaults.css

/*##############################################################
   
   モバイル用独自 Flex コンポーネントのデフォルトスタイルシート
   
##############################################################*/


@namespace s "library://ns.adobe.com/flex/spark";
@namespace renderers "renderers.*";



/*==============================================================
   
   Application DPI = 240
   
==============================================================*/

/*______________________________________________________________
   進捗バー付きアイコンアイテムレンダラー
*/
renderers|ProgressBarIconItemRenderer {
	paddingBottom: 12;
	paddingTop: 12;
	horizontalGap: 10;
	verticalGap: 9;
	iconDelay: 500;
	messageStyleName: "iconItemRendererMessageStyle";
	progressBarBackgroundColor: #FFFFFF;
	progressBarDoneColor: #999900;
	progressBarBorderColor: #999999;
	progressValueTextStyleName: "progressBarIconItemRendererProgressValueTextStyle";
}

/*______________________________________________________________
   進捗率コンポーネントのスタイル
*/
.progressBarIconItemRendererProgressValueTextStyle {
	fontSize: 16;
	color: #666666;
	textAlign: left;
}



/*==============================================================
   
   Application DPI = 160
   
==============================================================*/
@media (application-dpi: 160) {
	
	renderers|ProgressBarIconItemRenderer {
		paddingBottom: 8;
		paddingTop: 8;
		horizontalGap: 8;
		verticalGap: 6;
	}
	
	.progressBarIconItemRendererProgressValueTextStyle {
		fontSize: 11;
	}
	
}



/*==============================================================
   
   Application DPI = 320
   
==============================================================*/
@media (application-dpi: 320) {
	
	renderers|ProgressBarIconItemRenderer {
		paddingBottom: 16;
		paddingLeft: 16;
		horizontalGap: 16;
		verticalGap: 12;
	}
	
	.progressBarIconItemRendererProgressValueTextStyle {
		fontSize: 20;
	}
	
}