検索
連載

Flexでリストの中にチェックボックスや画像を表示!?：現場で使えるFlex実践テクニック（4）（3/3 ページ）

[成瀬勉，クラスメソッド] PC用表示 関連情報
Share
Tweet
LINE
Hatena
前のページへ | 　　　　　　

【実践2】リストの内容を編集する、itemEditor

　itemEditorとは、リスト系コントロールのeditableプロパティをtrueに設定した際の、レコードの内容を編集する方法を定義したクラスです。デフォルトでは、TextInputコントロールが割り当てられています。

　itemEditorを指定する代わりにrendererIsEditorプロパティをtrueにすることで、itemRendererに指定したコントロールがitemEditorとしても機能するようになります。

　また、itemEditorで編集した値を反映するには、editorDataFieldプロパティに、itemEditorが持つ編集後のデータが格納されているプロパティ名を指定する必要があります。itemEditorがCheckBoxであれば“selected”、NumericStepperであれば“value”を指定します。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

　ところが、例えばCheckBoxは初期値がtrueかfalseかによって明示的にCheckBoxの状態を定義しない限り、チェックされない状態でしか表示されません。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

　この例を実行すると、設定された初期値がtrueかfalseかにかかわらずチェックボックスは未チェックの状態になってしまいます。

■ itemRendererの状態を完全に定義する

　これを回避するためには、dataプロパティに値が渡されたタイミングで、itemRendererの状態を完全に定義する必要があります。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

　この例では、「checkBoxSelected:Boolean」というプロパティを定義したCheckBoxを包括するBoxを、itemRendererおよびitemEditorに設定しています。

　Listからdataが渡されるたびにcheckBoxSelectedの値が変更され、バインディングによってCheckBoxのチェック状態が連動して変更されます。これにより、初期値を正しく表示できます。ListのeditorDataFieldにはcheckBoxSelectedを指定しています。

　直接CheckBoxのselectedを指定しない理由は、editorDataFieldの値が、itemEditorの最上位に定義されたプロパティにしかアクセスできないためです。

　このあたりの詳細に関しては、「アイテムレンダラーとアイテムエディタのライフサイクルについて」を参照してください。

【応用】リストをカラーピッカーにする

　最後に、応用例としてカラーピッカーをitemRendererで実現する方法を紹介します。この例では、レコードのカラーコードをそのまま、色で表現しています。ListではなくTileListを用いると、よりカラーピッカーらしくなります。

*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***

■ itemRendererでリストの利用範囲が広がり、直感的に操作できる

　冒頭でも述べましたが、itemRendererは応用範囲が非常に広いため、「複数の選択肢から選択させるコントロール」に当たるものであれば、itemRendererによる実装を検討してみるのもいいでしょう。

　次回はバリデータとフォーマッターについて解説します。

プロフィール

成瀬　勉（なるせ つとむ）
クラスメソッド株式会社　エンタープライズサービス部門アーキテクト

Macromedia FLASH MX 2004 Developer認定技術者
FlashエンジニアとしてWeb製作を経たのちWebアプリケーション開発に携わる。FlexやWPFなどのRIA開発および技術調査を日々行っている。

クラスメソッド株式会社での主な開発実績は、旭化成の電子ファイリングシステム、ひまわり証券のオンライントレードシステム、ベルシステム24の営業支援システムなど。
ブログ（C:\narun）も更新中。


「次回」へ


「現場で使えるFlex実践テクニック」バックナンバー
前のページへ | 　　　　　　

Copyright © ITmedia, Inc. All Rights Reserved.

ページトップに戻る