リストとデータソース (7/8)

では、リストの項目をクリックしたら表示されるビューを切り替える、という処理を作成しましょう。これは、リストのonClick属性に関数を割り付ければよいでしょう。ここでは「listClick」という名前の関数を設定することにします。また、２つ目のビューに用意したプッシュボタンにも、戻る処理を用意する必要がありますね。こちらは「backbtnClick」という関数として用意することにしました。

下のリスト欄に、関数のソースコードを掲載しておきました。作成したら実際にプロジェクトを実行して動作を確認しましょう。リストから項目をタッチすると、右から左にスライドするようにして次のビューが現れ、そこに選択した項目の内容が表示されます。戻るボタンをクリックすれば、リストに戻ります。――では、表示切替の処理について見てみましょう。

1. StackLayoutのオブジェクトについて
listClickでは、表示するビューを２つ目のものに切り替える処理をしています。またbackbtnClickでも、１つ目のビューに戻す処理をしていますね。これらは、StackLayoutを操作することで行います。

StackLayoutを操作するには、まずgetElementByIdでStackLayoutに設定したidのDOMオブジェクトを取得します。そして、例によってこのDOMオブジェクトに用意されている「object」プロパティに保管されるオブジェクトを操作して作業を行います。

2. 表示するビューの切り替え
ビューの切り替えは、「組み込まれた全ビューを配列として取得し、そこから表示したいビューを取り出して設定する」という形で処理をします。これを行っているのが以下の部分です。

var views = stacks.object.getAllViews();
stacks.object.setCurrentView(views[1]);

「getAllViews」が、StackLayoutに組み込まれている全ビューを配列として取り出すメソッドです。そして「setCurrentView」は、引数に指定したオブジェクトを画面に表示するビューに設定するためのものです。これで指定したビューに表示が切り替わります。

ここでは汎用性を考えてgetAllViewsから表示するビューを取り出しましたが、実を言えばビューの切り替えはもっと簡単に行うこともできます。表示するビューのidがあらかじめ分かっているなら、setCurrentView('view1')というように直接idを指定してもかまいません。

これで表示の切り替えはおしまいです。……というと、「あれ、視覚効果の設定は？」と思った人。実は、ありません。リストには、setCurrentViewで表示を切り替えるときに視覚効果を行うような仕組みが備わっていますが、デフォルトで「右から左にスライドする」という効果が設定済みなのです。ですから、単にsetCurrentViewでビューを変更するだけで、自動的に「画面がスライドして次のビューが現れる』ということができるのです。

3. 逆向きにスライドして戻る
続いて、戻るボタンです。こちらも基本的にはsetCurrentViewで前に戻るのに変わりはありません。が、よく見ると、setCurrentView(views[0],true);というように、２つ目の引数にtrueが渡されていますね。これは「逆向きに視覚効果をかける」ことを示すものです。これがfalseなら普通に右から左へスライドしますが、trueだと左から右にスライドするのです。

4. リストの選択状態について
backbtnClickでは、こうして表示を戻る他にもう１つやるべきことがあります。それは「選択されたリストを、未選択の状態に戻す」ということです。これは以下のように行なっています。

var list = document.getElementById('list');
var n = list.object.setSelectionIndexes(null);

リストの選択状態の設定は、「setSelectionIndexes」というobjectのメソッドで行います。これで引数にnullを指定すれば、何も選択されない状態になります。


――さあ、これでとりあえず、リストを使って表示を切り替えたり戻したりする基本的な操作ができるようになりました！　やれやれ、お疲れさまでした。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

function listClick(event)
{
	var stacks = document.getElementById('stackLayout');
	// ２つ目のビューに表示を切り替える
	var views = stacks.object.getAllViews();
	stacks.object.setCurrentView(views[1]);
}

function backbtnClick(event)
{
	var stacks = document.getElementById('stackLayout');
	var views = stacks.object.getAllViews();
	// 逆向きに戻る
	stacks.object.setCurrentView(views[0],true);
	// リストを未選択にする
	var list = document.getElementById('list');
	var n = list.object.setSelectionIndexes(null);
}