上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。




TileListのコンポーネントを使用して画像一覧を出力するような
サンプルを作成してみました。



画像のファイルパスを取得する際、ArrayCollectionに定義しておき
そこから取得し、画像出力するような処理としています。
※ XMLファイルから取得という方法は、サンプルや他サイトで多数あった為、割愛します。
  ArrayCollectionに定義することで後々DBから動的にファイルパスを取得が
  やりやすいのでは?と考えたからです。

Main.mxml




<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >

<mx:Script>
<![CDATA[

/* インポート */
import mx.collections.ArrayCollection;

/* ArrayCollection定義 */
public var listImage:ArrayCollection = new ArrayCollection([
{ label:"海", img:"flex_img1.jpg" },
{ label:"桜", img:"flex_img2.jpg" },
{ label:"林", img:"flex_img3.jpg" },
{ label:"夕日", img:"flex_img4.jpg" },
{ label:"夕日2", img:"flex_img5.jpg" }
]);

/* ArrayCollection取得関数 */
public function getImage():ArrayCollection
{
return listImage;
}
]]>
</mx:Script>

<!-- アイテムレンダラー -->
<mx:Component id="listRenderer">
<mx:VBox width="150" height="150"
paddingBottom="5"
paddingLeft="5"
paddingTop="5"
paddingRight="5"
horizontalAlign="center" >

<mx:Image id="image" width="100" height="100" source="{data.img}" />
<mx:Text id="text" text="{data.label}" />
</mx:VBox>
</mx:Component>

<!-- タイルリスト -->
<mx:TileList width="100%" height="100%"
dataProvider="{getImage()}" itemRenderer="{listRenderer}" />
</mx:Application>


ActionScript


<mx:Script>~</mx:Script>で囲われている内容はActionScript記述を行う際に使用します。
本サンプルでは、ArrayCollectionクラスのインポート、ArrayCollectionの定義、
ArrayCollection取得関数をActionScriptで記述しています。

アイテムレンダラー


<mx:Component id="listRenderer">~</mx:Component>で囲われている内容は
TileListのアイテムレンダラーとして使用するカスタムコンポーネントとなります。
TileListで出力する内容やレイアウト等行うことが出来ます。

本サンプルでは、画像とテキストを出力するカスタムコンポーネントとして定義しています。

TileListコンポーネント


<mx:TileList ~ />でTileListコンポーネントを使用しています。

・dataProvider
ArrayCollectionをデータプロバイダとして指定。ここでは{getImage()}と記述して、
ActionScript内で定義したlistImage(ArrayCollection)を取得しています。

・itemRenderer
アイテムレンダラー用に定義したカスタムコンポーネントを指定。
ここではカスタムコンポーネントのid(listRenderer)を指定しています。


実行時必要ファイル
・TileSample1.swf
・flex_img1.jpg
・flex_img2.jpg
・flex_img3.jpg
・flex_img4.jpg
・flex_img5.jpg
※ SWFファイルと画像ファイルとは同一ディレクトリに格納しています。
  別ディレクトリに画像ファイルを格納する場合は、listImage(ArrayCollection)の
  imgに記載しているファイルパスを変更する必要があります。


SWFの実行結果は以下の通りとなります。


少しでも参考になれば応援お願いします。












上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。