Flex4.6の新コンポーネントを使ってみた(その2)


11月末にリリースされたFlex4.6で追加された新コンポーネントたちを、2回に分けてご紹介したいと思います。
今回は以下の主な新コンポーネントについて、ご紹介します。

  • Callout
  • SplitViewNavigator
  • 以下の3つについては、前回「その1」の方でご紹介しました。

  • SpinnerList
  • DateSpinner
  • ToggleSwitch
  • Callout

    吹き出しのようなポップアップを表示できるコンポーネントで、画面サイズに限りがあるデバイス系で重宝しそうです。

    CalloutButtonコンポーネントを使うと、ボタンとセットになったCalloutが使えます。(上図の左)
    以下のコードでは、calloutContent内にボタンを直接並べてますが、別のViewコンポーネント等を表示することもできます。

    <s:CalloutButton id=”cb” label=”Action Callout” verticalPosition=”after” calloutDestructionPolicy=”never”>

      <s:calloutLayout>

        <s:VerticalLayout horizontalAlign=”center” gap=”5″/>

      </s:calloutLayout>
      <s:calloutContent>

        <s:Button label=”test1″/>
        <s:Button label=”test2″/>
        <s:Button label=”test3″/>
        <s:Button label=”test4″/>
        <!– <views:TestView/> –/>

      </s:calloutContent>

    </s:CalloutButton>

    また、以下のコードのようにボタン以外にもCalloutを表示することができます。(上図の右)
    Callout内のListで選択した値を、Closeイベント時に渡して、テキストに表示するサンプルです。

    <fx:Declarations>

      <s:ArrayCollection id=”arr”>

        <fx:Object label=”FlashBuilder”/>
        <fx:Object label=”Flex”/>
        <fx:Object label=”Flash”/>
        <fx:Object label=”Photoshop”/>

      </s:ArrayCollection>

      <s:Callout id=”callout” close=”textInput.text = event.data.label” verticalPosition=”after”>

        <s:List id=”list” dataProvider=”{arr}” width=”240″ change=”callout.close(true, list.selectedItem)”/>

      </s:Callout>

    </fx:Declarations>
    <s:TextInput id=”textInput” width=”100%” ?focusIn=”callout.open(textInput)”/>

    SplitViewNavigator

    SplitViewNavigatorは、タブレット向けに追加された新コンポーネントで、縦画面・横画面でレイアウトを切り替えることができます。以下は、2つのViewの内1つを縦画面時はCalloutに隠してしまい、横画面時はそのまま表示する例になります。

    まず、resizeイベントで縦横を検知し、ステートを切り替えます。

    protected function resizeHandler(event:ResizeEvent):void
    {

      // リサイズイベントで縦画面/横画面かを判定し、
      // ステートを切り替える
      currentState = aspectRatio;

    }
    <s:states>

      <s:State name=”portrait”/>
      <s:State name=”landscape”/>

    </s:states>

    SplitViewNavigatorに複数のViewNavigatorを設置し、それぞれのfirstViewプロパティにViewを設定します。
    autoHideFirstViewNavigatorプロパティをtrueにしておくと、縦(portrait)表示時に自動的に1つ目のViewNavigatorを隠してくれます。

    <s:SplitViewNavigator id=”splitNavigator” width=”100%” height=”100%”
    autoHideFirstViewNavigator=”true”>


      // リストを含んだViewを表示する1つ目のViewNavigator
      <s:ViewNavigator id=”listView” height=”100%” firstView=”views.ListView”/>

      // リストで選択された値を表示するViewを、表示する2つ目のViewNavigator
      <s:ViewNavigator id=”testViewNavi” width=”100%” height=”100%” firstView=”views.TestView”>


        //縦画面の時だけ、actionContentにCalloutButtonを表示する
        <s:actionContent.portrait>

          // Buttonがクリックされたら、1つ目のViewNavigatorをPopup表示する
          // デフォルトでCalloutが使用されます。
          <s:Button id=”btn” label=”TestList”
          click=”splitNavigator.showFirstViewNavigatorInPopUp(btn);”/>

        </s:actionContent.portrait>

      </s:ViewNavigator>

    </s:SplitViewNavigator>

    1つ目のViewNavigatorで表示される「ListView」で選択した値に応じて、
    2つ目のViewNavigatorで表示される 「TestView」に表示する内容を変えるので、
    「ListView」で、以下のように実装します。

    //リストの選択変更時のイベントハンドラー
    protected function testList_changeHandler(event:IndexChangeEvent):void
    {

      // 自身の親Navigatorを取得
      var splitNavigator:SplitViewNavigator = navigator.parentNavigator as SplitViewNavigator;
      // getViewNavigatorAt()でsplitNavigatorの2つ目のViewを取得
      var testViewNavi:ViewNavigator = splitNavigator.getViewNavigatorAt(1) as ViewNavigator;
      // dataプロパティに値を入れて、pushView()でViewを表示
      testViewNavi.pushView(views.TestView, event.currentTarget.selectedItem);

    }

    参考

    Devgirl’s Weblog のFlex4.6系記事
    Flex 4.6 and SplitViewNavigator in AIR : Demo application – Finnkino Movies
    Reference 「SplitViewNavigator」
    Reference 「Callout」