ScrollBar コントロール -- Flex 2.01

VScrollBar (垂直の ScrollBar) コントロールおよび HScrollBar (水平の ScrollBar) コントロールを使用すると、データが多すぎて表示領域に収まらない場合に、表示される部分のデータを制御できます。

VScrollBar コントロールと HScrollBar コントロールをスタンドアローンのコントロールとして使用することもできますが、通常は、スクロール機能を実装したカスタムコンポーネントとして、他のコンポーネントと一体化されています。詳細については、Flex 2 コンポーネントの作成と拡張を参照してください。

ScrollBar コントロールは、2 つの矢印ボタン、1 つのトラック、および 1 つのサムの合計 4 つのパーツで構成されます。サムの位置とボタンの表示は、ScrollBar コントロールの現在の状態に依存します。ScrollBar コントロールでは、表示状態を計算するために次の 4 つのパラメータが使用されます。

サブトピック

ScrollBar コントロールの作成

次の例に示すように、ScrollBar コントロールは、<mx:VScrollbar> タグ (垂直スクロールバーの場合) または <mx:HScrollBar> タグ (水平スクロールバーの場合) を使用して MXML 内で定義します。MXML の他の場所 (別のタグまたは ActionScript ブロック) のコンポーネントを参照する場合は、id 値を指定します。

<?xml version="1.0"?>
<!-- controls\bar\SBarSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

     <mx:Script>
        <![CDATA[
    
            import mx.events.ScrollEvent;
    
            // Event handler function to display the scroll location.
            private function myScroll(event:ScrollEvent):void {
                showPosition.text = "VScrollBar properties summary:" + '\n' +
                    "------------------------------------" + '\n' +
                    "Current scroll position: " + 
                    event.currentTarget.scrollPosition  + '\n' +
                    "The maximum scroll position: " + 
                    event.currentTarget.maxScrollPosition + '\n' +
                    "The minimum scroll position: " + 
                    event.currentTarget.minScrollPosition;
            }
        ]]>
    </mx:Script> 
  
    <mx:Label 
        width="100%" 
        color="blue" 
        text="Click on the scroll bar to view its properties."/>
        
    <mx:VScrollBar id="bar" 
        height="100%" 
        minScrollPosition="0" 
        maxScrollPosition="{this.width - 20}"
        lineScrollSize="50" 
        pageScrollSize="100"  
        repeatDelay="1000" 
        repeatInterval="500" 
        scroll="myScroll(event);"/>
          
    <mx:TextArea id="showPosition" 
        height="100%" width="100%" 
        color="blue"/>
</mx:Application>

ScrollBar コントロールのサイズ設定

ScrollBar コントロールは、上下の矢印ボタンよりも小さいサイズで表示しようとした場合、正しく表示されません。この状態に対するエラーチェック機構は存在しません。このような場合は、ScrollBar コントロールを非表示にすることをお勧めします。サムを表示するだけの領域がない場合、サムが非表示になります。

ユーザーの操作

マウスボタンで ScrollBar コントロールの各部分をクリックすると、リスナーに対してイベントが送出されます。ScrollBar コントロールのイベントを待機するオブジェクトによって、表示するデータの領域が更新されます。スクロール操作が実行されると、ScrollBar コントロールの表示が新しい状態を反映するように更新されます。