BEMLのデータバインディングをマスターする

前回の記事では、BEMLを使ってレイアウトを組む例をご紹介しました。BEMLはテキスト(XML)を使ってレイアウトを組むため、レイアウト変更の度に特別なツールでの作業が必要なく、また、そこで組んだレイアウトはiPhone/iPadへの配信時にも同じものが反映されるというメリットがありました。
今回は、前回の記事で少し紹介したデータバインディングを掘り下げてご紹介します。

データバインディングとは、BEMLのコンポーネント間でデータをやりとりするための技術のことを指します。
例えば、プレイヤーで現在再生している動画の名前をラベルに表示したり、動画に設定されたリンクを表示するために使います。データバインディングを利用することで、『現在再生中の動画』というコンテキストに合わせた形で情報を表示できるようになります。
下の図は、実際のプレイヤーでデータバインディングによってどのようにデータが渡されているかを模式的に記した図です。矢印の元にあるコンポーネントが、矢印の先にあるコンポーネントのデータを読み取り、それを表示しています。


図1: データバインディングでのデータの流れの模式図
 

それでは、実際にデータバインディングをBEMLのコードレベルで見てみましょう。
Compact Tabbed Navigation 3.0のBEMLコードを元に解説します。Publishingモジュールのプレイヤーテンプレート画面で、Compact Tabbed Navigation 3.0のコードを複製してください。


図2: Compact Tabbed Navigation 3.0テンプレートの複製
 

■プレイリストタブで現在選択されているプレイリストの中身を、リストの中に表示する。
Listコンポーネントの記述は以下のようになっています。data属性で、リストの中に表示すべきデータをどこから取得するかを指定しています。『playlistTabs』はTabBarコンポーネントに割り当てられているIDで、現在選択されているタブ(selectedItem)のvideoDTOsを引っ張ってくる、という記述となっています。
<List id="videoList" data="{playlistTabs.selectedItem.videoDTOs}">

余談ですが、リストの動画一つ一つの描画方法もBEMLで記述されています。ListItemタグ内に記述したレイアウトが、リストの一つ一つの項目をそれぞれどのように描画するかを決めています。Compact Tabbed Navigation 3.0の場合は、左にサムネイル、右に動画名と短い説明を出すように記述されています。
 

■リストで現在選択されている項目をプレイヤーにバインドする
VideoPlayerコンポーネントの記述は以下のようになっています。video属性で、リストで現在選択されている項目をバインドする記述をしています。
IDが『videoList』のものの中で現在選択されている項目(selectedItem)という記述になっているため、リスト上で選択されている動画が変わった時点で、VideoPlayer上で再生する動画も自動的に切り替わります。
<VideoPlayer id="videoPlayer" width="480" video="{videoList.selectedItem}"/>


■動画プレイヤーで再生している動画に紐付いている情報(関連リンクなど)をバインドする
Linkコンポーネントの記述は以下のようになっています。リンクのテキスト(text属性)をvideoPlayerで現在再生中の動画に設定したリンク名({videoPlayer.video.linkText})、リンクで開くURLをvideoPlayerで現在再生中の動画に設定したリンクURL({videoPlayer.video.linkURL})に設定しています。
<Link x="1" y="-5" size="10" id="relatedLink" text="{videoPlayer.video.linkText}" vAlign="bottom" url="{videoPlayer.video.linkURL}"/>
 

データバインディングの際、どのコンポーネントの情報を持ってくるかを特定するために、各コンポーネントにはIDを割り振る必要があります。その際、コンポーネントのIDは任意のものを割り当てることが出来ますが、コンポーネントによって標準的に割り当てているIDがあります。

  • VideoPlayerやChromessPlayerコンポーネント…IDは『videoPlayer』
  • 動画のリスト(Listコンポーネント)…IDは『videoList』
  • プレイリストのタブ(tabBarコンポーネント)…IDは『playlistTabs』
  • プレイリストのコンボボックス(ComboBoxコンポーネント)…IDは『playlistCombo』

このように、IDの割り当て方を共通のものとしておくことで、他者が作ったBEMLを読み解きやすくなります。
また、プレイヤー公開コード上でのプレイリストの割り当てや動画の割り当てはこのIDを元に行われるため、プレイリストや動画の割り当てがうまく行えないという事態を防ぐためにも、これらのコンポーネントには標準のIDを設定するようにしてください。

最後に、データバインディングにはもう一つ機能があり、簡単なメソッドであればデータバインディングの記述で呼び出せます。
例えば、以下のように記述すると、動画プレイヤーがフルスクリーンに移行するリンクを設置できます。
<Link text="フルスクリーンへ" width="50" height="17" click="{videoPlayer.goFullScreen()}"/>

これ以外にも、『MediaControls の例』をご覧頂くと、BEML内でメソッド呼び出しをしている例をご覧頂けます。