LightSwitchではテーブル同士の（というかEntity同士）のリレーションは、データソースのテーブルに外部キーが設定してあれば自動的に張られる。
そのデータソースを基にすれば、簡単にテーブル同士が連携した画面を作ることが出来る。
しかし、実アプリケーションでは単純にテーブルの全データを使うのではなく、ある条件で絞り込んだ上で使用することが多い。（例えば、削除フラグが立っているデータは除くとか）
Accessとかであればテーブルとクエリを連結したり、クエリ同士を連結したりということがGUIで簡単にできる。
LightSwitchでこれを実現するにはいくぶん直感的でない作業が必要になるので、その方法を纏めておく。
＜データ＞
まずはいつもどおりNorthwindから以下のテーブルを追加してデータソースを作る。
- Customers
- Employees
- Orders
- Order_Details
＜画面＞
テンプレートに「一覧および詳細画面」を指定して画面を作成。
実行すると以下のような画面が表示される。
ここで、現在グリッド表示部分は「Orders」テーブルからそのまま表示されているが、これをクエリにしてみる。
＜クエリ＞
デザイン画面に戻って、左ペインの「Orders」から「クエ入りの編集」リンクをクリックする。
表示された「クエリデザイナ」画面にてフィルタを追加する。
ここでは便宜的に以下のフィルタを追加した。
これで実行すると以下のように「Ship Via」が「１」で絞りこまれた注文一覧が表示される。
これだけで良ければ直感的かつ簡単で良いのだが（実際これでも良いだろう）、ここで使用したクエリは画面レベルのクエリで、他の画面などでは使用できないし、フィルタが追加されていることがデザイン画面では容易に把握できないためある程度の規模になってくると見通しを悪くする可能性がありそうだ。
そこで、これをアプリケーション全体をスコープとするクエリに作り替えてみる。
- まずは今作ったフィルタを削除する。
- 「ソリューションエクスプローラー」の「Orders」テーブルを右クリックして表示されたメニューから「クエリの追加」を選択する。
- クエリの名前を「OrdersByShipVia1」と指定し、先ほどと同じフィルタを追加する。
- 「ソリューションエクスプローラー」にて「顧客別注文一覧」画面をダブルクリックしてデザイナー画面を表示させる。
- デザイナー画面、左ペインの「Orders」を右クリックして表示されたメニューから「削除」をクリックする。
- デザイナー画面上部のツールバーにて「データ項目の追加」をクリックし表示された「データ項目の追加」画面にて「OrdersByShipVia1」クエリを選択しOKをクリックする。
- 左ペインに追加された「OrdersByShipVia1」を画面ツリーの「Details Column」の下にドラッグして追加する。
- これで一旦表示してみると以下のような画面が表示される。
- 「Ship Via」は１のデータが表示されているが、顧客を選択しなおしても「Orders」のデータが変わらないのが分かる。
「Customers」と「OrdersByShipVia1」の関連ができていないのである。
ココらへんがもう少し簡単になれば良いと思うのだが、とりあえず以下のような手順になりそうだ。 - 「ソリューションエクスプローラー」にて「OrdersByShipVia1」をダブルクリックしてデザイナー画面を開く。
- 表示されたデザイナー画面にてフィルターを以下のように追加編集する。
（CutsomerIDを使ったパラメータクエリにする）
- 「ソリューションエクスプローラー」にて「顧客別注文一覧」をダブルクリックして表示されたデザイン画面の左ペインにて「OrdersShipVia1」の「CustomerID」パラメータを選択する。
- 「プロパティ」ウインドウにて「パラメータバインド」をクリックし、表示されたメニューで「Customers」を選択。
ピリオドを入力し「SelectedItem」を選択。
ピリオドを入力し「CustomerID」を選択。
これで左ペインを見ると「CustomerID」に矢印が引かれ、連結されたことが分かる。
- 以上を実行すると画面は以下のようになる。
こんどは「Customers」の選択に応じて「Orders」の表示が変わるのが分かる。 - 最後にレイアウトが今ひとつなので、これを調整する。
ちなみに、今のレイアウトは以下の状態に成っている。
これは、ルートノード「顧客別注文一覧」の下に４つのノードがあることを表している。
また、ルートノードは「列のレイアウト」となっているので、子どもの４つのノードは横並びになる。（HorizontalAlighが指定されたStackパネルが使われていると思われる） - データグリッドを以下のようにドラッグし、「Details Column」の子ノードにする。
- 以上で実行すると初期表示と同様のレイアウトで表示される。
0 件のコメント:
コメントを投稿