flex itemRenderer使用(四):ステータスと遷移

7714 ワード

itemRendererはアプリケーションのユーザーとの通信が最も得意です.通信が簡単で、名前を表示するだけである場合があります.時にはもっと洗練された色を使うことがあります.インタラクティブな場合があります.
itemEditorは本格的なインタラクティブ制御ですが、本稿の重点ではありません.これらの例では、データ自体またはユーザー操作に基づいてビジュアルの外観を変更するitemRendererを示します.
FlexはitemRendererの外観を変更する理想的な方法です.ステータスの使用が簡単で、移行と組み合わせて使用すると、ユーザーにフィードバックと快適な体験を提供することができます.
この例では、リストにMXML itemRendererを新規作成します(必要に応じてActionScriptを使用してください).このitemRendererには、画像、本名、著者、価格、およびこの本を購入するためのButtonが表示されます.

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="/2006/mxml">
 
      <mx:Image id="bookImage" source="{data.image}" />
      <mx:VBox height="115" width="100%" verticalAlign="top" verticalGap="0" paddingRight="10">
            <mx:Text text="{data.title}" fontWeight="bold" width="100%"/>
            <mx:Label text="{data.author}" />
            <mx:HBox id="priceBox" width="100%">
                  <mx:Label text="{data.price}" width="100%"/>
                  <mx:Button label="Buy" />
            </mx:HBox>
      </mx:VBox>
</mx:HBox>

ただし、書籍が空になっている場合(yesまたはnoのノードが含まれている)は、価格と「購入」Buttonが消えます.価格とButtonのHBOxの親にid属性を追加し、ここの符号化をより簡単にします.これにより、HBOxとpriceBoxの可視性を変更することで、それらのプロジェクトの可視性を変更できます.
set data関数を上書きすることで、priceBoxの視認性を直接変更するのではなく、次のステータス定義を使用します.

<mx:states>
            <mx:State name="NoStockState">
                  <mx:SetProperty target="{priceBox}" name="visible" value="false"/>
            </mx:State>
      </mx:states>

ルートタグの下に次の内容を置きます.
この例は、単純なタスクを実行するのに適していないため、複雑すぎますが、ステータスの使用方法を説明しています.次の2つの状態があります.
•基本状態:コンポーネントの正常な状態です.ステータスを使用しないコンポーネントは基本ステータスです.この例では、基本状態のpriceBox visibleプロパティはtrue(デフォルト)です.instockがyesの場合です.
•NoStockState:instockの値がnoの場合の状態です.この状態では、SetPropertyコマンドが実行されます.targetプロパティは、どのクラスメンバーに問題があるかを決定します.nameプロパティは、ターゲット上で変更するプロパティの名前であり、valueはそのプロパティの新しい値です.
set data関数はinstockの値を表示することによって、どの状態を使用するかを決定します.

override public function set data( value:Object ) : void
            {
                  super.data = value;
                  
                  if( data )
                  {
                        if( data.instock == "yes" ) 
                              currentState = "";
                        else
                              currentState = "NoStockState";
                  }
            }

CurrentStateは、すべてのUIcomponent制御のプロパティです.どの状態がアクティブかを決定します.状態間を切り替えると、Flexフレームワークは基本状態から始まり、所定の状態のルールが適用されます.
注意:itemRendererはリサイクルされているので、常に値を復元する必要があります.elseなしでitemRendererにifを保持しないでください.
リスクが高いと感じたら、この例のset dataオーバーライドを削除できます.データバインド式を使用してルートタグにcurrentStateを直接設定します.

<mx:HBox xmlns:mx="/2006/mxml" width="400" currentState="{data.instock == 'yes' ? '' : 'NoStockState'}" >

ルートタグに接続するdataをチェックする.instockはcurrentStateの値を設定します-良い手口ですが、メンテナンスが難しいかもしれません.
このitemRendererでは、instack値がyesの場合にのみ価格と「購入」ボタンが表示されます.もちろんステータスを使用しなくてもいいですが、itemRendererがより多くの制御を追加または削除する場合は、itemRendererのcurrentStateプロパティを設定することで、制御外観を簡単に制御できるため、ステータスがより適切です.
ステータスを使用してラベルを追加し、価格やButtonを簡単に削除するのではなく、商品が売り切れたことをユーザーに伝えます.変更後のステータスは次のとおりです.

<mx:states>
            <mx:State name="NoStockState">
                  <mx:SetProperty target="{priceBox}" name="visible" value="false"/>
                  <mx:AddChild relativeTo="{priceBox}" position="before">
                        <mx:Label text="-- currently not in stock --" color="#73DAF0"/>
                  </mx:AddChild>
            </mx:State>
      </mx:states>

タグは、LabelをpriceBoxに追加することを示します.priceBoxのvisibleプロパティをfalseに設定する以外に、友好的なメッセージで置き換えます.
再度、このラベルをset data関数に追加するか、そのまま追加できます.可視性をfalseに設定し、set data関数でtrueに変更するだけです.しかし、ステータスの値が表示されると思います.instockがno条件になる要求が複雑になると、NoStockStateを調整するだけです.切り替え状態のActionScriptコードはそのままです.
注意:Flex Builderのデザインビューでステータスを変更できます.
本例はList制御にはあまり適していないが,VboxとRepeaterには十分適している.リストをスクロールする必要がある場合、この拡張適切な位置プロジェクトの問題は少し冒険になります.想像してみてください.リストの項目の高さは同じです.プロジェクト2の高さを拡張します.現在順調に進んでいる:プロジェクト2は他の可視プロジェクトより高い.肝心なのはここです:visibleプロジェクト.リストをスクロールします.itemRendererはリサイクルされていることを覚えておいてください.したがって、プロジェクト2がビューからスクロールすると、itemRendererがリストの下部に移動します.高さをリセットする必要があります.大丈夫です.これはかなり簡単です.リストをスクロールして、プロジェクト2をビューに戻します.拡張された高さのはずです.itemRendererはどうしてそんなことを知ってるの?以前の記事では、データ自体または外部ソースからの情報を知っていました.
サイズを調整するitemRendererは複雑すぎて、そうする価値がないと思います.VboxとRepeaterを使うと、より良い方法でそれができると信じています.ただし、Repeaterの鍵は、各子を作成することです.1000個のレコードを持ってRepeaterを使用すると、itemRendererの1000個のインスタンスが得られます.
この例では、itemRendererを作成しますが、Vboxの子として使用します.リスト要素はかなり簡単に見えます.本の名前とその作者です.ただしitemRendererをクリックすると、拡張されます.私たちは2つの戦術を使ってこれを達成しました.
•itemRendererには、追加情報が含まれている状態があります.
•itemRendererはResize遷移を使用して、itemRendererによりスムーズな拡張と収縮を提供します.
itemRendererの基本状態はかなり簡単です

<mx:HBox width="100%">
            <mx:Label text="{data.author}" fontWeight="bold"/>
            <mx:Text  text="{data.title}" width="100%" fontSize="12" selectable="false"/>
      </mx:HBox>

ExpandedStateは、itemRendererの高さに使用する他の要素を追加します.

<mx:states>
            <mx:State name="ExpandedState">
                  <mx:AddChild position="lastChild">
                        <mx:HBox width="100%">
                              <mx:Image source="{data.image}"/>
                              <mx:Spacer width="100%"/>
                              <mx:Label text="{data.price}"/>
                              <mx:Button label="Buy"/>
                        </mx:HBox>
                  </mx:AddChild>
            </mx:State>
      </mx:states>

itemRendererを使用して、トランジションを追加するようにサイズを変更するのは簡単です.

<mx:transitions>
            <mx:Transition fromState="*" toState="*">
                  <mx:Resize target="{this}" />
            </mx:Transition>
      </mx:transitions>

タグの下に置きます.
ステータスのfromStateプロパティとtoStateプロパティがワイルドカードであるため、ステータスが変更されるたびに遷移が適用されます.これで、itemRendererをクリックして(ルートタグにclickイベントを追加する)イベント処理関数を追加し、ステータスを変更するだけです.

<mx:Script>
      <![CDATA[
            
            private function expandItem() : void
            {     
                  if( currentState == "ExpandedState" )
                        currentState = "";
                  else
                        currentState = "ExpandedState";
            }
      ]]>
      </mx:Script>

ステータスはitemRendererのビジュアル外観を大量に修正する良い方法です.複数の変更を1つのStateにまとめ、itemRendererのcurrentStateプロパティを設定するとすべて完了します.
次の記事では、UIcomponentを拡張してより効率的なitemRendererを作成する方法について説明します.

c++STL標準容器のIterator使用

谷藤賢一『いきなりはじめるPHPワクワク・ドキドキの入門教室』でPHPを勉強するのをやめた話