Adobe
製品
Acrobat
Creative Cloud
Creative Suite
Digital Marketing Suite
Digital Publishing Suite
Elements
Photoshop
Touch Apps
その他の製品一覧
ソリューション
デジタルマーケティング
デジタルメディア
教育
金融機関
Web Experience Management
その他のソリューション
ラーニング サポート ダウンロード 会社情報
ご購入
アドビストア 安心のサポート& サービス
アカデミックストア 学生、教職員、個人向け
アドビライセンスストア 中小企業向け
ボリュームライセンスについて 企業、教育機関、官公庁向け
販売パートナー
キャンペーン情報
検索
 
情報 サインイン
ようこそ、 さん カート 注文状況 マイアカウント
マイアカウント
注文状況
アカウント情報の変更
コミュニケーションの設定を変更
サインアウト
サインインの目的 お客様のアカウントや体験版ダウンロード、製品の拡張機能、コミュニティエリアへのアクセスなどを管理するため
Adobe
製品 セクション ご購入   検索  
ソリューション 会社情報
サポート ラーニング
サインイン サインアウト 注文状況 マイアカウント
先行予約の提供開始予定日Date. 商品が発送されるまで、クレジットカードには課金されません。提供開始の予定日は変更される場合があります。 先行予約の提供開始予定日Date. ダウンロードの準備が整うまで、クレジットカードには課金されません。提供開始の予定日は変更される場合があります。
個数:
ご購入には学生・教職員個人版の購入資格の確認が必要です。
小計
カートの中身を見る
Adobe Developer Connection / Flexデベロッパーセンター /

Flex 4.5 モバイル マスターシリーズ 第5回 Flexモバイルアイテムレンダラーの紹介

著者 廣畑 大雅 (taiga)氏

廣畑 大雅 (taiga)氏
  • taiga.jp

Content

  • モバイルアイテムレンダラーの種類
  • LabelItemRenderer
  • IconItemRenderer
  • モバイルアイテムレンダラーの特徴、カスタマイズ
  • カスタマイズ時の注意点
  • カスタマイズ可能なオーバーライドメソッド
  • ContentCacheクラスによる画像キャッシュ処理

作成日

3 August 2011

ページ ツール

Facebookでシェア
Twitterでツイート
LinkedInでシェア
ブックマーク
印刷

タグ

必要条件

ユーザーレベル

すべて

必要な製品

  • Flash Builder 4.5 Premium (体験版ダウンロード)
  • Flex 4.1 SDK

サンプルファイル

  • Flex45mobile005_samples

このマスターシリーズでは、Flash Builder 4.5およびAdobe AIRを使用したFlexモバイルアプリケーションの開発について解説します。

本記事では、FlexモバイルプロジェクトのListクラスで使用される「アイテムレンダラークラス」について紹介します。なお、Flash Builder 4.5.1にバンドルされている標準のFlex SDK(バージョン 4.5.1.21328)を対象にしています。

モバイルアイテムレンダラーの種類

アイテムレンダラークラスにはいくつかありますが、モバイル版Flexアプリケーションでも使用が推奨されているアイテムレンダラークラスは次の2種類です。他の種類のアイテムレンダラークラスは、パフォーマンスの観点から非推奨となっています。

  • LabelItemRenderer
  • IconItemRenderer

それぞれについて解説していきます。

LabelItemRenderer

LabelItemRendererは、Listクラスが標準で使用しているアイテムレンダラークラスです。このクラスは、TextFieldのサブクラスであるStyleableTextFieldを保持しており、ListクラスのlabelFieldプロパティやlabelFunctionプロパティによって定義される1行テキストを表示するだけのシンプルな機能を持ったコンポーネントです。

次のコードは、LabelItemRendererのシンプルなサンプルです(サンプル:LabelItemRendererSample.fxp)

ソースコード:LabelItemRendererSample/src/views/LabelItemRendererSampleMainView.mxml

<?xml version="1.0" encoding="utf-8"?> <!--- LabelItemRendererSampleMainView.mxml は、LabelItemRenderer のサンプルです。 @author taiga --> <s:View xmlns:fx = "http://ns.adobe.com/mxml/2009" xmlns:s = "library://ns.adobe.com/flex/spark" title = "LabelItemRenderer Sample" > <!-- NOTE:<s:List width="100%" height="100%"> と同義 --> <s:List width="100%" height="100%" itemRenderer="spark.components.LabelItemRenderer"> <s:dataProvider> <s:ArrayList> <fx:Object data="0" label="aaaaaaa" /> <fx:Object data="1" label="bbbbbbb" /> <fx:Object data="2" label="ccccccc" /> <fx:Object data="3" label="ddddddd" /> <fx:Object data="4" label="eeeeeee" /> <fx:Object data="5" label="fffffff" /> </s:ArrayList> </s:dataProvider> </s:List> </s:View>
図1 LabelItemRendererSampleMainView.mxmlの表示結果
図1 LabelItemRendererSampleMainView.mxmlの表示結果

IconItemRenderer

IconItemRendererは、下記4点のパーツを兼ね備えたアイテムレンダラークラスです。前述のLabelItemRendererクラスを継承しています。

  1. iconFieldやiconFunctionプロパティによって定義される、左側のアイコン。
  2. labelField プロパティやlabelFunctionプロパティによって定義される、アイコン横の1行テキスト。
  3. messageFieldプロパティやmessageFunctionプロパティによって定義される、テキストラベルの下の複数行メッセージ。
  4. decoratorプロパティによって定義される、右側のデコレーターアイコン。

いずれのパーツもオプションパーツとして用意されているため、全ての項目を使用せずともレンダラーとして機能します。全てのオプションパーツを使用したときの外観は下図の通りです。

図2 IconItemRendererのオプションパーツ
図2 IconItemRendererのオプションパーツ

次のコードは、IconItemRendererのシンプルなサンプルです(サンプル:IconItemRendererSample.fxp)。

ソースコード:IconItemRendererSample/src/(default package)/IconItemRendererSample.mxml

<?xml version="1.0" encoding="utf-8"?> <!--- IconItemRendererSample.mxml @author taiga --> <s:ViewNavigatorApplication xmlns:fx = "http://ns.adobe.com/mxml/2009" xmlns:s = "library://ns.adobe.com/flex/spark" firstView = "views.IconItemRendererSampleMainView" > <fx:Style> .rendererLabel { fontSize: 15; color: #0000FF; } </fx:Style> </s:ViewNavigatorApplication>

ソースコード:IconItemRendererSample/src/views/IconItemRendererSampleMainView.mxml

<?xml version="1.0" encoding="utf-8"?> <!--- IconItemRendererSampleMainView.mxml は、IconItemRenderer のサンプルです。 @author taiga --> <s:View xmlns:fx = "http://ns.adobe.com/mxml/2009" xmlns:s = "library://ns.adobe.com/flex/spark" title = "ADC Writers" > <s:List width="100%" height="100%"> <s:itemRenderer> <fx:Component> <s:IconItemRenderer messageStyleName = "rendererLabel" fontSize = "25" iconField = "photo" labelField = "firstName" messageField = "lastName" decorator = "@Embed(source='assets/images/decorator.png')" /> </fx:Component> </s:itemRenderer> <s:ArrayCollection> <fx:Object firstName = "Taiga" lastName = "Hirohata" company = "taiga.jp" phone = "XXX-XXX-XXX" photo = "@Embed(source='assets/icon/taiga.jpg')" /> <fx:Object firstName = "Eiichi" lastName = "Arikawa" company = "AKABANA" phone = "YYY-YYY-YYY" photo = "@Embed(source='assets/icon/eiichi.jpg')" /> <fx:Object firstName = "Toshimitsu" lastName = "Takahashi" company = "tilfin" phone = "ZZZ-ZZZ-ZZZ" photo = "@Embed(source='assets/icon/toshimitsu.jpg')" /> </s:ArrayCollection> </s:List> </s:View>
図3 IconItemRendererSampleMainView.mxmlの表示結果
図3 IconItemRendererSampleMainView.mxmlの表示結果

モバイルアイテムレンダラーの特徴、カスタマイズ

アイテムレンダラーをカスタマイズする場合、PC版Flex 4.x系アプリケーションではGroupクラスを継承したItemRendererクラスを継承してカスタマイズすることが常套手段ですが、モバイル版では前節で紹介したUIComponentクラスを継承したLabelItemRendererクラスや、IconItemRendererクラスを継承してアイテムレンダラークラスをカスタマイズします。

※従来のItemRendererクラスを継承した手法も使用することはできますが、パフォーマンスの観点から非推奨となっています。

Flash Builderでは、カスタムアイテムレンダラークラスを作成するとき、[新規アイテムレンダラー]ダイアログによって、いずれかのアイテムレンダラーを選択できるようになっています。[新規アイテムレンダラー]ダイアログは、メニューの[ファイル]→[新規]→[アイテムレンダラー]を選ぶか、MXMLエディタのコード補間時に表示されるコードヒント内の[アイテムレンダラー]を選ぶことで表示されます。

[新規アイテムレンダラー]ダイアログの[テンプレート]項目で、[モバイルリスト用のカスタムActionScriptアイテムレンダラー(ActionScript)]を選ぶとLabelItemRenderer継承向けのダイアログ内容になり、[モバイルリストのアイコンアイテムレンダラー(MXML)]を選ぶとIconItemRenderer継承向けのダイアログ内容になります。

図4 LabelItemRendererを継承してアイテムレンダラーを作成するときに表示される[新規アイテムレンダラー]ダイアログ
図4 LabelItemRendererを継承してアイテムレンダラーを作成するときに表示される[新規アイテムレンダラー]ダイアログ
図5 IconItemRendererを継承してアイテムレンダラーを作成するときに表示される[新規アイテムレンダラー]ダイアログ
図5 IconItemRendererを継承してアイテムレンダラーを作成するときに表示される[新規アイテムレンダラー]ダイアログ

カスタマイズ時の注意点

「新規アイテムレンダラー」ダイアログを利用して、アイテムレンダラーを作成するとき、LabelItemRendererをテンプレートするとActionScriptコードが用意され、IconItemRendererをテンプレートにするとMXMLコードが用意されます。しかし、カスタマイズするときには、いずれもActionScriptコードで作成することを筆者は推奨します(つまり、IconItemRendererをカスタマイズする際は、このダイアログを使わずに自前でIconItemRendererのサブクラスを作成する方がいいでしょう)。

その理由としては、記事冒頭でも解説した通り、いずれのアイテムレンダラーもGroupコンポーネントクラスを継承していないため、VerticalLayoutクラスやHorizontalLayoutクラスなどのレイアウトクラスが使用できず、全て自前でレイアウト処理を実装する必要があり、MXMLで記述するメリットがほとんど存在しないからです。

カスタマイズ可能なオーバーライドメソッド

次のメソッドは、LabelItemRendererクラスを継承したときに、オーバーライドできる主なプロパティとメソッドの一覧です。下表のメソッドは、[新規アイテムレンダラー]ダイアログを使用したとき、自動的に用意されます。

LabelItemRendererのサブクラスでオーバーライドできる主なプロパティとメソッド

プロパティ/メソッド 概要
function set data(value:Object):void データの変更に応答するときに使用するプロパティです。
function createChildren():void アイテムレンダラーの子オブジェクトを作成する、または作成直後の子オブジェクトに対して設定するときに使用するメソッドです。
function measure():void アイテムレンダラー自身によるサイズ設定方法を変更するときに使用するメソッドです。
function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void アイテムレンダラーの背景の描画方法を変更するときに使用するメソッドです。このメソッドを使用する際、super.drawBackground()は必要な場合だけに実行することが推奨されています。
function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void アイテムレンダラーの子要素のサイズ、位置を設定する方法を変更するときに使用するメソッドです。このメソッドを使用する際、super.layoutContents()は必要な場合だけに実行することが推奨されています。

これらのプロパティとメソッドは、LabelItemRendererクラスだけでなく、IconItemRendererクラスでも使用できます。

次のコードは、LabelItemRendererクラスを継承したアイテムレンダラークラスを使用したサンプルです(サンプル:CustomLabelItemRendererSample.fxp)。本来、1行表示機能のラベルを複数行表示するように修正して、さらにレンダラーの背景色をコードで変更するカスタマイズ機能を実装しています。

ソースコード:CustomLabelItemRendererSample/src/views/CustomLabelItemRendererSampleMainView.mxml

<?xml version="1.0" encoding="utf-8"?> <!--- CustomLabelItemRendererSampleMainView.mxml は、 カスタム LabelItemRenderer のサンプルです。 @author taiga --> <s:View xmlns:fx = "http://ns.adobe.com/mxml/2009" xmlns:s = "library://ns.adobe.com/flex/spark" title = "Custom LabelItemRenderer Sample" > <s:List width="100%" height="100%" itemRenderer="com.adobe.sample.CustomLabelItemRenderer"> <s:dataProvider> <s:ArrayList> <fx:Object data="0" label="aaaa&#xd;aaa" /> <fx:Object data="1" label="bb&#xd;bb&#xd;bbb" /> <fx:Object data="2" label="ccccccc" /> <fx:Object data="3" label="ddddddd" /> <fx:Object data="4" label="eeeeeee" /> <fx:Object data="5" label="fff&#xd;ffff" /> </s:ArrayList> </s:dataProvider> </s:List> </s:View>

ソースコード:CustomLabelItemRendererSample/src/com.adobe.sample/CustomLabelItemRenderer.as

package com.adobe.sample { import flash.display.Graphics; import spark.components.LabelItemRenderer; /** * CustomLabelItemRenderer は、LabelItemRenderer のカスタマイズクラスです。 * @author taiga */ public class CustomLabelItemRenderer extends LabelItemRenderer { /** * コンストラクタ */ public function CustomLabelItemRenderer() { super(); } /** * @private * データの変更に応答するには、この setter をオーバーライドします */ public override function set data(value:Object):void { super.data = value; } /** * @private * アイテムレンダラーの子を作成するには、このメソッドをオーバーライドします */ protected override function createChildren():void { super.createChildren(); if(labelDisplay != null) { labelDisplay.multiline = true; labelDisplay.wordWrap = true; } } /** * @private * アイテムレンダラー自身によるサイズ設定方法を変更するには、 * このメソッドをオーバーライドします。パフォーマンスに影響するため、 * 必要がない場合は super.measure() を呼び出さないでください。 */ protected override function measure():void { super.measure(); } /** * @private * アイテムレンダラーの背景の描画方法を変更するには、このメソッドを * オーバーライドします。パフォーマンスに影響するため、必要がない場合は * super.drawBackground() を呼び出さないでください。 */ protected override function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void { var g:Graphics = graphics; var backgroundColor :uint; if(down) { backgroundColor = 0x999999; } else if(showsCaret) { backgroundColor = 0xcc3333; } else { backgroundColor = 0xcccccc; } g.clear(); g.beginFill(0x666666); g.drawRoundRectComplex(5, 5, unscaledWidth - 10, unscaledHeight - 10, 10, 10, 10, 10); g.endFill(); g.beginFill(backgroundColor); g.drawRoundRectComplex(6, 6, unscaledWidth - 12, unscaledHeight - 12, 9, 9, 9, 9); g.endFill(); } /** * @private * このアイテムレンダラーの背景の描画方法を変更するには、このメソッドを * オーバーライドします。パフォーマンスに影響するため、必要がない場合は * super.layoutContents() を呼び出さないでください。 */ protected override function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void { super.layoutContents(unscaledWidth, unscaledHeight); } } }
図6 CustomLabelItemRendererSampleMainView.mxmlの表示結果
図6 CustomLabelItemRendererSampleMainView.mxmlの表示結果

ContentCacheクラスによる画像キャッシュ処理

IconItemRendererクラスに標準で実装されている機能の中に、画像キャッシュ機能があります。この機能は、iconFieldプロパティで定義したオブジェクトプロパティの画像データ値がURLRequestオブジェクトのような外部リソースの場合、画像を表示するたびにリクエスト処理を実行させないように画像データをキャッシュします(標準で、最大100件分の画像データをキャッシュするように設定されています)。

もし、この機能を無効化したい、あるいはキャッシュ数を変更したい場合は、IconItemRendererクラスを継承したクラスを作成して、ContentCacheインスタンスに変更処理を加える必要があります。

次のコードは、最大キャッシュ件数を減らして、画像読み込みキューイング機能を無効化したIconItemRenderer継承クラスです。

CustomIconItemRenderer.as

package com.adobe.sample.renderer { import mx.core.mx_internal; import spark.components.IconItemRenderer; import spark.core.ContentCache; use namespace mx_internal; /** * CustomIconItemRenderer クラスは、ContentCache インスタンス値を修正した IconItemRenderer サブクラスです。 * @author taiga */ public class CustomIconItemRenderer extends IconItemRenderer { /** * コンストラクタ */ public function CustomIconItemRenderer() { if (_imageCache == null) { _imageCache = new ContentCache(); _imageCache.enableQueueing = false; _imageCache.maxCacheEntries = 50; } super(); } } }

おわりに

以上がFlexモバイルアイテムレンダラーについての基本的な項目の紹介でした。PC版Flex 4.x系アプリケーションと比べて、モバイル版Flex 4.x系アプリケーションでは、高度なレンダラーカスタマイズ知識が求められることに気付けたかと思います。

これらのチュートリアルを確認し、Flexモバイルアプリケーションのアイテムレンダラーの構造を知ることによって、実際にアプリケーション開発に携わるとき、より現実的な設計を行うことができるでしょう。

関連記事

  • Flex 4.5 モバイル マスターシリーズ 第1回 Flexモバイルプロジェクトの紹介
  • Flex 4.5 モバイル マスターシリーズ 第2回 画面遷移フレームワーク
  • Flex 4.5 モバイル マスターシリーズ 第3回 画面遷移フレームワーク データ編
  • Flex 4.5 モバイル マスターシリーズ 第4回 Flexモバイルスキンの紹介
  • Flex 4.5 モバイル マスターシリーズ 第5回 Flexモバイルアイテムレンダラーの紹介
  • Flex 4.5 モバイル マスターシリーズ 第6回 モバイル機能を使った開発におけるパフォーマンスの最適化

More Like This

  • Flex 4.5 SDK と Flash Builder 4.5を使用したモバイルアプリケーション開発
  • Flex mobile skins – Part 1: Optimized skinning basics
  • 初めてのモバイルFlexアプリケーションの作成 - Twitter Trends
  • Building a mobile employee directory sample with Flex and Flash Builder
  • Flex 4.5 SDKのご紹介
  • Flex 4.5 SDK マスターシリーズ 第1回 コーディング環境の大幅な強化
  • Flex 4.5 モバイル マスターシリーズ 第4回 Flexモバイルスキンの紹介
  • Flash Builder 4.5 マスターシリーズ 第2回 Flash Builder 4.5での変更点と改善点、そして便利な機能
  • Flash Builder 4.5 マスターシリーズ 第3回 Flash Catalyst/Flash Professionalとの連携
  • Flex 4.6 SDKの新機能 前編 SpinnerList/DateSpinner/ToggleSwitch

製品

  • Acrobat
  • Creative Cloud
  • Creative Suite
  • Digital Marketing Suite
  • Digital Publishing Suite
  • Elements
  • モバイルアプリ
  • Photoshop
  • Touch Apps

ソリューション

  • デジタルマーケティング
  • コンテンツオーサリング
  • Web Experience Management

業種別ソリューション

  • 教育
  • 金融機関

サポート

  • ヘルプ&サポート
  • 注文と返品
  • ダウンロードに関するヘルプ
  • ユーザー登録に関するヘルプ

ラーニング

  • ADC: Adobe Developer Center
  • Adobe TV
  • Design Magazine
  • Photoshop Magazine
  • Focus In

ご購入方法

  • アドビストア
  • アカデミックストア
  • アドビライセンスストア
  • ボリュームライセンスについて
  • 販売パートナー
  • キャンペーン情報

ダウンロード

  • Adobe Reader
  • Adobe Flash Player
  • Adobe AIR
  • Adobe Shockwave Player

会社情報

  • プレスルーム
  • パートナープログラム
  • 企業の社会的責任(英語)
  • 採用情報
  • 投資家の皆様へ(英語)
  • イベント&セミナー
  • Legal(英語)
  • セキュリティ
  • お問い合わせ
国・地域および言語の選択 日本(変更)
国・地域および言語の選択 閉じる

North America

Europe, Middle East and Africa

Asia Pacific

  • Canada - English
  • Canada - Français
  • Latinoamérica
  • México
  • United States

South America

  • Brasil
  • Africa - English
  • Österreich - Deutsch
  • Belgium - English
  • Belgique - Français
  • België - Nederlands
  • България
  • Hrvatska
  • Česká republika
  • Danmark
  • Eastern Europe - English
  • Eesti
  • Suomi
  • France
  • Deutschland
  • Magyarország
  • Ireland
  • Israel - English
  • ישראל - עברית
  • Italia
  • Latvija
  • Lietuva
  • Luxembourg - Deutsch
  • Luxembourg - English
  • Luxembourg - Français
  • الشرق الأوسط وشمال أفريقيا - اللغة العربية
  • Middle East and North Africa - English
  • Moyen-Orient et Afrique du Nord - Français
  • Nederland
  • Norge
  • Polska
  • Portugal
  • România
  • Россия
  • Srbija
  • Slovensko
  • Slovenija
  • España
  • Sverige
  • Schweiz - Deutsch
  • Suisse - Français
  • Svizzera - Italiano
  • Türkiye
  • Україна
  • United Kingdom
  • Australia
  • 中国
  • 中國香港特別行政區
  • Hong Kong S.A.R. of China
  • India - English
  • 日本
  • 한국
  • New Zealand
  • 台灣

Southeast Asia

  • Includes Indonesia, Malaysia, Philippines, Singapore, Thailand, and Vietnam - English

Copyright © 2012 Adobe Systems Incorporated. All rights reserved.

利用条件 | プライバシーポリシーとCookie (更新)

Reviewed by TRUSTe: site privacy statement