Flexノート_MXデータGrid、リスト、ツリー

16077 ワード

ListBaseとAdvancedListBase

  • すべてのMXリストはListBaseとAdvancedListBaseから派生している.
  • 属性:
    • columnCount、columnWidth、dataProvider、iconField、iconFunction、labelField、labelFunction、
    lockedColumnCount、lockedRowCount、rowCount、rowHeight、selectable、selectedIndex、
    selectedIndices、selectedItem、selectedItems、variableRowHeight、wordWrap
  • 事件:
    • change、dataChange、itemClick、itemDoubleClick、itemRollOut、itemRollOver

    データ・ソース、コレクションとdataProvider

  • dataProviderは、提供されたデータセット上で実行されるforループをカプセル化し、セット内の1つのオブジェクトを次のレンダリングに順番に割り当てる.
  • データ駆動コントロールとも呼ばれる.

    • DataProviderを入力:

  • Array、Boolean、Stringなどの低レベルのオブジェクトである可能性があります.
  • ただしListCollectionViewのデータ型(例えばArrayCollection)を拡張してdataProviderを埋め込むのが適切である.
  • 集合はソートおよびフィルタ機能を内蔵した高度な配列と見なすことができる.また、セットはdataProviderを使用するオブジェクトに共通のプラグアンドプレイインタフェースを提供します.
  • 集合は、そのデータが変化したときにdataChangeイベントをトリガーすることができ、その集合にバインドされた任意のコンポーネントが自動的にこのイベントを傍受し、それに基づいて自分の視覚状態を更新する.
  • dataChangeイベントはバインディング可能なイベントであり、他のコンポーネントはリスニングを行い、イベントが配布されたときに何らかの処理または操作を実行することができる.
  • 集合は、その状態が変化すると、表示されたデータをリフレッシュするために、自動的にその構成部品を使用して通知を送信する.このため,集合は変化を表すイベントをブロードキャスト形式でパブリッシュする.

    • コレクションのタイプ:

  • ArrayCollection:Arrayに基づいて構築された主な集合タイプ;
  • XMLListCollection:XMLおよびXMLListオブジェクトをカプセル化した上で標準的な集合機能を追加した;
  • GroupCollection:AdvanceDataGrid用、パケットデータ.

    • 集合の使用者:

    AdvancedDataGrid、ButtonBar、Charting components including、Legends、ColorPicker、ComboBox、
    Menu、MenuBar、OLAPDataGrid、PopUpMenuButton、Repeater、TabBar、DataGrid、DateField、
    HorizontalList、LinkBar、List、TileList、ToggleButtonBar、Tree

    コレクションの初期化

  • 関連ラベルを使用したMXML方法:
    • <s:ArrayCollection id="myAC">
<fx:Object label="item1" data="data1"/>
<fx:Object label="item2" data="data2"/>
<fx:Object label="item3" data="data3"/>
</s:ArrayCollection>
  • ActonScriptで初期化:
    • <fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
public var myAc:ArrayCollection = new ArrayCollection([
{ label:"item1", data:"data1"},
{ label:"item2", data:"data2"},
{ label:"item3", data:"data3"}
]);
]]>
</fx:Script>

    集合の塗りつぶし

  • 一般的に、リストベースのコントロールを動的に埋め込むために、一部の中間層アプリケーションサーバからデータが取得される.
  • 簡単に言えば、HTTP接続でXMLデータを取得したり、WebService(ColdFusion、LCDS、AMFPHP)関数を呼び出したりすることで、RemoteObject(Flexのバイナリデータ転送メカニズム)を用いてデータをロードすることができる.
  • データが戻った後、リストベースのコンポーネントが傍受可能なセットに変換する必要がある.

    • Listコンポーネント：

  • ハードコーディング方式
    • <?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<mx:List id="myFriends" x="10" y="10">
<fx:String>friend 1</fx:String>
<fx:String>friend 2</fx:String>
<fx:String>friend 3</fx:String>
</mx:List>
</s:Application>
  • コンポーネント方式
    • <?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<s:ArrayCollection id="myAC">
<fx:Object label="friend 1"/>
<fx:Object label="friend 2"/>
<fx:Object label="friend 3"/>
</s:ArrayCollection>
</fx:Declarations>

<mx:List id="myFriends" x="10" y="10" dataProvider="{myAC}">
</mx:List>
</s:Application>
  • ActionScript方式
    • <?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

[Bindable]
public var myAC:ArrayCollection = new ArrayCollection([
{label:"friend 1"},
{label:"friend 2"},
{label:"friend 3"}
]);
]]>
</fx:Script>

<mx:List id="myFriends" x="10" y="10" dataProvider="{myAC}">
</mx:List>
</s:Application>
  • labelField属性表示するデータ列指定
    • <?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

[Bindable]
public var myAC:ArrayCollection = new ArrayCollection([
{name:"friend 1"},
{name:"friend 2"},
{name:"friend 3"}
]);
]]>
</fx:Script>

<mx:List id="myFriends" x="10" y="10" dataProvider="{myAC}" labelField="name">
</mx:List>
</s:Application>

    HorizontalListコンポーネント

  • 製品選択テーブルや写真ビューアのサムネイルなど、アプリケーションで画像を並べて表示する場合によく使用されます.
    • <?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

[Bindable]
public var myAC:ArrayCollection = new ArrayCollection([
{name:"friend 1"},
{name:"friend 2"},
{name:"friend 3"}
]);
]]>
</fx:Script>

<mx:HorizontalList id="myFriends" x="10" y="10" dataProvider="{myAC}" labelField="name"/>
</s:Application>

    TileListコンポーネント

  • 同じ大きさのパッチを作成する.
  • 分方向:水平方向、垂直方向.各方面の上向きの内容がビューの表示範囲を超えている場合は、directionプロパティがどのように設定されているかによって、対応する方向のスクロールバーが表示されます.
  • columnCountおよびrowCount属性は、各ビューに表示される行数または列数を制御します.
    • <?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

[Bindable]
public var myAC:ArrayCollection = new ArrayCollection([
{name:"friend 1"},
{name:"friend 2"},
{name:"friend 3"},
{name:"friend 4"},
{name:"friend 5"},
{name:"friend 6"},
{name:"friend 7"},
{name:"friend 8"}
]);
]]>
</fx:Script>

<mx:TileList id="myFriends" x="10" y="10" dataProvider="{myAC}" labelField="name"
direction="vertical"/>
</s:Application>
  • columnWidthとrowHeight属性はtileブロックの大きさを制御でき、表示不全を避けることができる
    • direction="vertical"columnWidth="150"rowHeight="100"/>
     
  • TileListコンポーネントとTileコンポーネントは似ていますが、性能の違いがあります.前者は入力したデータ項目を動的にレンダリングし、レンダリングにかかるメモリを減らすことができます.後者のサブオブジェクトは一度にすべてレンダリングされ、CPUの使用量が高くなります.

    • DataGridコンポーネント

  • 追加属性:resizeableColumns(デフォルトはtrue)、sortableColumns(デフォルトはtrue)
  • DataGrid呼び出し:
    • <?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

<mx:DataGrid id="dg" width="500" height="200">
<mx:dataProvider>
<fx:Object name="item1" email="[email protected]"/>
<fx:Object name="item2" email="[email protected]"/>
<fx:Object name="item3" email="[email protected]"/>
</mx:dataProvider>
</mx:DataGrid>
</s:Application>
    <?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

[Bindable]
public var myAC:ArrayCollection = new ArrayCollection([
{name:"item1", email:"[email protected]", url:"www.url1.com"},
{name:"item2", email:"[email protected]", url:"www.url2.com"},
{name:"item3", email:"[email protected]", url:"www.url3.com"},
]);
]]>
</fx:Script>

<mx:DataGrid id="dg" width="500" height="150" dataProvider="{myAC}">
<mx:columns>
<mx:DataGridColumn dataField="name" headerText="Contact Name" width="300" />
<mx:DataGridColumn dataField="email" headerText="E-Mail" width="200" />
<mx:DataGridColumn dataField="url" headerText="Web Site" width="200" />
</mx:columns>
</mx:DataGrid>
</s:Application>
  • sortableColumns属性は、DataGridコンポーネント全体のソートを制御する.
  • sortable属性は、DataGridColumnがソートできるかどうかを制御する.
  • DataGridColumnがサポートするすべての属性:
    • dataField、headerText、headerWordWrap、labelFunction、minWidth、resizeable、
    sortable、sortCompareFunction、sortDescending(true:降順、false:昇順)、
    Visible、width、wordWrap(DataGridコンポーネントのvariableRowHeightプロパティがtrueに設定されていることを確認する)

    Treeコンポーネント

  • Listコンポーネントの子孫.
  • 階層化データの使用:XMLはネスト構造に従ってデータを組織する構造である;Flex 3では、XMLオブジェクトとXMLオブジェクトが多少冗長であるため、Flex 4ではXMLオブジェクトが削除され、代わりにXMLオブジェクトとXMLオブジェクトが使用される.
  • XMLListはラベルでしか宣言できない.sourceプロパティにより、個別のファイルからもインポートできます.
    • <?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<fx:XMLList id="myXML">
<friends>
<friend name="Item1"/>
<friend name="Item2"/>
<friend name="Item2"/>
</friends>
</fx:XMLList>
</fx:Declarations>
</s:Application>
    <mx:XMLList source="my.xml" id="myXML"/>
  • XMLListCollectionは、XMLListオブジェクトをパッケージ化し、ICollectionが実現する機能を追加する.
  • データが変化する可能性がある場合は、集合を使用して、変化が発生した場合にdataProviderプロパティを使用してデータをバインドしたコンポーネントにビューを更新することを通知することができます.
    • <?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<mx:XMLListCollection id="myXMLCollection">
<fx:XMLList id="myXML" xmlns="">
<friends label="Friends">
<friend label="Friend"/>
</friends>
<families label="Families">
<family label="Family"/>
</families>
</fx:XMLList>
</mx:XMLListCollection> 
</fx:Declarations>
</s:Application>
  • Treeコンポーネント呼び出し:
    • <?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<mx:XMLListCollection id="myXMLCollection">
<fx:XMLList id="myXML" xmlns="">
<friends label="Friends">
<friend label="Friend1"/>
<friend label="Friend2"/>
<friend label="Friend3"/>
</friends>
<families label="Families">
<family label="Family1"/>
<family label="Family2"/>
</families>
</fx:XMLList>
</mx:XMLListCollection> 
</fx:Declarations>
<mx:Tree dataProvider="{myXMLCollection}"
labelField="@label"
width="300" height="200"/>
</s:Application>

    ListベースMXコンポーネントとのインタラクション

  • リストイベント:
    • click、doubleClick、itemClick、change
  • 関数にイベントを渡す:
    • <?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.ItemClickEvent;
import mx.events.ListEvent;
import mx.controls.Alert;
[Bindable]
public var myAC:ArrayCollection = new ArrayCollection([
{name:"item1",email:"[email protected]"},
{name:"item2",email:"[email protected]"}
]);

public function contactDataGrid_clickHandler(event:ListEvent):void {
Alert.show("You have clicked on row " + event.rowIndex + " and col "
+ event.columnIndex + "." + "Witch is for " + 
event.currentTarget.selectedItem.name);
}
]]>
</fx:Script>
<mx:DataGrid id="contactDataGrid" width="500" height="150"
dataProvider="{myAC}"
itemClick="contactDataGrid_clickHandler( event )">
<mx:columns>
<mx:DataGridColumn dataField="name" headerText="Contact Name" width="300"/>
<mx:DataGridColumn dataField="email" headerText="E-mail" width="200"/>
</mx:columns>
</mx:DataGrid>
</s:Application>
  • 関数へのデータ転送:
    • itemClick="contactDataGrid_clickHandler( event.currentTarget.selectedItem )"
  • 選択された行への直接アクセス:
    • itemClick="contactDataGrid_clickHandler()
    ...
    public function contactDataGrid_clickHandler():void {
    Alert.show("Name : "+ contactDataGrid.selectedItem.name);
    }
  • 選択された行にバインド(または直接表示)

    •   xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx"minWidth="955"minHeight="600">

    import mx.collections.ArrayCollection;
    import mx.events.ListEvent;
    [Bindable]
    public var myAC:ArrayCollection = new ArrayCollection([
    {name:"item1",email:"[email protected]"},
    {name:"item2",email:"[email protected]"}
    ]);
    ]]>


    dataProvider="{myAC}">







    SQL 50題
    Spring-boot統合elastic-job