top


総投稿数 本 
no_

スポンサーサイト

 --------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
カテゴリ :スポンサー広告 トラックバック(-) コメント(-)
no_507

Flex:◇前回の復習:Flex3 + AmazonAPI テスト制作 ・・・ 【Flex:6日目】

 2008-11-26
 ほんとにゆっくりと進んでる「Flex事始め」。
 FlexBUilder3 が使えるのは2ヶ月(60日)。
 さて、どこまでゆけるのか・・・

前回
 チュートリアルを少し発展させ
 、・Flex3 + AmazonAPI テスト制作 を行った。

またここで、少し、復習と理解でき切れていないところを
考察してみよう。
用語にスタンスをおいて、リファレンスガイドなどの
情報を加えて整理する・・・


 ◎前回の復習 と 用語ポイント

 追記に ▼

※この連載は、はじめて「Flex」に取り組んだmetaboyが、
 60日間体験版を利用して、ゆっくりと学んでゆく、詳細な記録です。
                      (本日の作業時間:3.0時間
【Flex:6日目】


FC2ブログランキングにほんブログ村 IT技術ブログ Webサイト構築へブログ王ランキング人気ブログランキング人気ホームページランキングへ


more**************************************************
【用語 ポイント】
**************************************************

===============================
[ mx:itemRenderer ]
  デフォルトビューを
 オーバーライドするために、
 カスタム "アイテムレンダラー"
===============================
まず、"アイテムレンダラー"(itemRenderer)とは何か?
これがよくわからなかった。
※とりあえず help を参照(アイテムレンダラーについて
 ・データプロバイダをモデルとすれば、
  Flex コンポーネントはそのモデルのビュー
 ・それぞれのリストコントロールには
  ・データの表示を制御する
   デフォルトのメカニズム(ビュー)
  ・そのデフォルトはオーバーライドできます。
  ・デフォルトビューをオーバーライドするには、
   カスタム「アイテムレンダラー」を作成
します。

 これだな。
  つまり、何も手を加えなければ、デフォルトで表示する
 ところを、「アイテムレンダラー」を作成 することにより
 いろいろと自由な表現を行う(ができる)・・・と。

 このヘルプを整理するか・・・
 ※まんま、ヘルプの内容ではあるが
  基礎となるところをこの1頁で
  わかるように整理・・・

 ■デフォルトのアイテムレンダリングとセル編集
 /*------------------------------------------*/
 ・それぞれのリストベースのコントロールには、
  そのコントロールのために定義されたデフォルト
  のアイテムレンダラー
がある。
  ・最も単純なアイテムレンダラーは
   ・DataGridItemRenderer クラスで、
   ・DataGrid コントロールのアイテムレンダラーを定義
  ・その他のアイテムレンダラーには、
   ・ListItemRenderer、MenuItemRenderer、
   ・MenuBarItem、TileListItemRenderer、
   ・TreeItemRenderer など
 ・デフォルトでは、これらのアイテムレンダラーは
  イメージをテキストに組み合わせる。

(例1)
<mx:List width="50" height ="75"> 
<mx:dataProvider>
<mx:String>AK</mx:String>
<mx:String>AL</mx:String>
<mx:String>AR</mx:String>
</mx:dataProvider>
</mx:List>

データはインライン静的データ データはインライン静的データ


(例2)
[Bindable]
private var initDG:ArrayCollection = new ArrayCollection([
{Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99},
{Artist:'Pavement', Album:'Brighten the Corners', Price:11.99}
]);
配列変数に代入しておき
<mx:DataGrid id="myGrid" dataProvider="{initDG}" 
width="100%" editable="true">
<mx:columns>
<mx:DataGridColumn dataField="Artist" resizable="true"/>
<mx:DataGridColumn dataField="Album" resizable="true"/>
<mx:DataGridColumn dataField="Price" resizable="true"/>
</mx:columns>
</mx:DataGrid>
DataGridコントロールで表示
DataGridコントロールで表示
 ・editable という名前の
  プロパティが true に設定
  で、セルの内容を編集可能




  ▼▼▼

 ■カスタムアイテムレンダラーとカスタムアイテムエディタの使用
 /*----------------------------------------------------------*/
 ・リストコンポーネントの表示を制御するには、
  ・カスタムアイテムレンダラー または
  ・カスタムアイテムエディタを作成

 ・単独でもいいけれど、両方使えば
  データの表示と編集を制御できるようになる。
 [ 利点 ]
  ・テキストの表示をユーザーによりわかりやすい外観
   効果的なユーザーインターフェイス
  ・複数のエレメントを、
   ラベルやイメージなどの 1 つのリストアイテムに
  ・データの表示をプログラムで制御

(例3)
<mx:List id="myList" 
height="180" width="250"
variableRowHeight="true"
itemRenderer="myComponents.RendererState"
backgroundColor="white" >
<mx:dataProvider>
<mx:Object label="Alaska"
data="Juneau"
webPage="http://www.state.ak.us/"/>
<mx:Object label="Alabama"
data="Montgomery"
webPage="http://www.alabama.gov/" />
<mx:Object label="Arkansas"
data="Little Rock"
webPage="http://www.state.ar.us/"/>
</mx:dataProvider>
</mx:List>

カスタムアイテムレンダラーを使用して、
 州名、州都および各州の公式ウェブサイトの URL を
 それぞれのリストアイテムに表示
カスタムアイテムレンダラーを List コントロールと共に使用
 ・カスタムアイテムレンダラーを
   List コントロールと共に使用
 ・List.itemRenderer プロパティ
  を使用して指定


(例4)
[Bindable]
private var initDG:ArrayCollection = new ArrayCollection([
{Artist:'Pavement', Album:'Slanted and Enchanted',
Price:11.99, Cover:'../assets/slanted.jpg'},
{Artist:'Pavement', Album:'Brighten the Corners',
Price:11.99, Cover:'../assets/brighten.jpg'}
]);
配列変数に代入しておき
<mx:columns>
<mx:DataGridColumn dataField="Artist"/>
<mx:DataGridColumn dataField="Album">
<mx:itemRenderer>
<mx:Component>
<mx:VBox>
<mx:Text id="albumName"
width="100%" text="{data.Album}"/>
<mx:Image id="albumImage"
height="45" source="{data.Cover}"/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="Price"/>
</mx:columns>
DataGridコントロールで表示(mx:columns)
・2 番目の列にはカスタムアイテムレンダラーを使用して、
 DataGrid コントロールにアルバムカバーとアルバムタイトルを表示
DataGrid コントロールにアルバムカバーとアルバムタイトルを表示
 ・アイテムレンダラーの
 Text コントロールと Image コントロールは、
 両方とも data プロパティを使用して値を初期化




  ▼▼▼


 なるほど。おぼろげながらも理解して来たぞ。
 後は、様々な先人の知恵・公開技術を探り、知識を深める・・・

Adobe Customer Care の Peter Ent さんのブログである itemRenderer シリーズを翻訳
 ( by バナナ研究所さん )
 /*----------------------------------------------------------*/

 □POINT
  ・Renderer の再利用
    > 1000個レコードを見せたい時に Listコンポーネントが
      1000個の itemRenderer を作成すると考えるのは誤り
    > Listのサイズを変更しない限り、itemRendererは
      新しいデータを表示するために位置移動するだけで
      インスタンスは再利用
    > itemRenderer は、
      受け取ったデータの値に基づいて自身を変更する必要がある
(例5)
<mx:List x="29" y="67" dataProvider="{testData.book}" width="286" height="190">
<mx:itemRenderer>
<mx:Component>
<mx:Label text="{data.author}: {data.title}" />
</mx:Component>
</mx:itemRenderer>
</mx:List>

・inlineRenderer を定義するために <mx:itemRenderer> タグを用いていること。
・そして、そのタグ内に <mx:Component> タグが用いられていること。
 □POINT
  ・itemRendererは<mx:Component> タグ内に定義
  ・List コントロールは、
   itemRenderer の data プロパティに値をセットすることにより、
   各 itemRenderer のインスタンスに
   dataProvider のレコード(各行)を渡す
  ・Listの全ての行にて、
   inline itemRenderer のインスタンスが data プロパティを持ち、
   そのプロパティに <book> XMLノードがセット
    > List コントロールをスクロール度に、
      新しく表示される行のために
      itemRenderer が再利用されて data プロパティの値が変化



 此の後、翻訳していただいた内容を、熟読するも完璧には
理解仕切れない。これからもたびたび読ませていただきます。
ありがとうございました。



Flex2基礎講座(第17章 DataGridへのカスタムレンダラーの設定)
 ( by NECシステムテクノロジー さん )
 /*----------------------------------------------------------*/

 □POINT
  ・カスタムセルレンダラー
    > ドロップインアイテムレンダラー、もしくは、
      ドロップインアイテムエディタとして挿入
    > DataGridの編集を可能にするため、
      DataGridのeditableプロパティをtrueにする必要
(例6)
<DataGridColumn headerText="check" dataField="check"
itemRenderer="mx.controls.CheckBox"/>




  ・itemEditorとitemRenderer
    表示
    > [itemEditor]常に表示
      [itemRenderer]常に表示
    編集
    > [itemEditor]常に可能
      [itemRenderer]rendererIsEditorをtrueにした場合
    コントロールの表示
    > [itemEditor]編集を行う時のみ
      [itemRenderer]常に表示


  ・itemRendererの外部ファイル化(コンポーネントitem Renderer)
    > itemRendererで指定するコントロールを外部ファイル化し、
      呼び出すこともできます。



 この頁も、これからもたびたび読ませていただきます。
ありがとうございました。


おぉ、ここで時間だ。
仕事に戻らなければならない・・・
なんという 奥の深さだ。
前途多難・・・

(そのほか 参照させていただいた頁)
FLEX3のitemRendererではまった
 ( by mojalog さん )
[Flex]itemRenderer使ってみる
 ( by Flex Coder さん )
Class ItemRenderer
 ( by jp.seagirl.genius.views.ItemRenderer )
Flex開発メモ18
 ( by AKABANA さん )

ありがとうございました。
commentsコメント
comment_post












管理者にだけ表示を許可する
commentトラックバック
トラックバックURL:
http://metaboy.blog23.fc2.com/tb.php/507-85fa2ac2
ようこそ
Add to Google 創るmetaboy:RSSフィード
My Yahoo!に追加
最新記事のRSS | 問い合わせ

仕事検索、アルバイト検索、依頼仕事の検索ポータル - 仕事検索.COM - www.jobkensaku.com ツクルン

創るmetaboy - WEB創る、サイト創る、何創る - 創ったmetaboy

 

リンク集

 

最近の記事

 

ブロとも申請フォーム
Sponserd by

さくらのレンタルサーバ さくらのレンタルサーバ
大容量・高機能レンタルサーバー heteml 大容量・高機能レンタルサーバー heteml
XREA (ValueDomain)
お名前.com お名前.com
名づけてねっと名づけてねっと
ムームードメインムームードメイン

 

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