CodeZine(コードジン)

特集ページ一覧

WCF RIAServicesで業務アプリケーションをよりシンプルに

Silverlight 4で作る新しいRIAアプリケーション(3)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
目次

コンボボックスの表示

 [図 15]の検索結果では、お小遣い分類テーブルのIDがそのまま表示されていることが分かります。お小遣い分類データソースを追加して、コンボボックスにお小遣い分類の名前を表示するように修正しましょう。

 データグリッドの中のコンボボックスにリストデータをバインドする場合は、次の手順でXAMLを修正してコンボボックスのリストデータをバインドします(リスト3)。

  1. お小遣い分類ドメインデータソースをStaticResourceとして定義する。
  2. お小遣い分類Idのデータテンプレートを編集し、CellTemplateプロパティとCellEditingTemplateプロパティに1のデータソースを表示するようにコンボボックスを設定する。
リスト3 お小遣い分類コンボボックスの表示
<sdk:DataGrid AutoGenerateColumns="False" 

  ... 略 ...

  <!-- 1.お小遣い分類ドメインデータソースをStaticResourceとして定義する。-->
  <sdk:DataGrid.Resources>
    <riaControls:DomainDataSource
      x:Key="お小遣い分類"
      AutoLoad="True" 
      Name="お小遣い分類DomainDataSource" 
      QueryName="Getお小遣い分類Query">

      <riaControls:DomainDataSource.DomainContext>
        <my:お小遣いContext />
      </riaControls:DomainDataSource.DomainContext>
    </riaControls:DomainDataSource>
  </sdk:DataGrid.Resources>

  ... 略 ...

  <!-- 2.お小遣い分類Idのデータテンプレートを編集し、
         CellTemplateプロパティとCellEditingTemplateプロパティに1のデータソースを表示するようにコンボボックスを設定する。-->
  <sdk:DataGridTemplateColumn Header="お小遣い分類" Width="SizeToHeader" >
    <sdk:DataGridTemplateColumn.CellEditingTemplate>
      <DataTemplate>
        <ComboBox IsSynchronizedWithCurrentItem="False" 
                  ItemsSource="{Binding Source={StaticResource お小遣い分類}, Path=Data}"
                  SelectedValue="{Binding Path=お小遣い分類Id, Mode=TwoWay}" 
                  SelectedValuePath="お小遣い分類Id"
                  DisplayMemberPath="分類名称" />
      </DataTemplate>
    </sdk:DataGridTemplateColumn.CellEditingTemplate>
    <sdk:DataGridTemplateColumn.CellTemplate>
      <DataTemplate>
        <ComboBox IsSynchronizedWithCurrentItem="False" 
                  ItemsSource="{Binding Source={StaticResource お小遣い分類}, Path=Data}"
                  SelectedValue="{Binding Path=お小遣い分類Id, Mode=TwoWay}" 
                  SelectedValuePath="お小遣い分類Id"
                  DisplayMemberPath="分類名称" />
      </DataTemplate>
    </sdk:DataGridTemplateColumn.CellTemplate>
  </sdk:DataGridTemplateColumn>

 実行すると、お小遣い分類がコンボボックスで表示されたことが確認できます(図16)。

図16 ドロップダウンリストの追加
図16 ドロップダウンリストの追加

データの更新とキャンセル

 ここまでで、データの一覧表示ができるようになりました。

 データグリッドのデータを直接編集することは可能ですが、このままではサーバ上のデータベースへ値の反映が行われません。データグリッドに行った修正をサーバー側に反映するには、DomainDataSource経由で値の確定かキャンセルを行う必要があります。

 データグリッドの下に保存ボタンとキャンセルボタンを用意します(リスト4)。

リスト4 保存ボタンとキャンセルボタン
<StackPanel Orientation="Horizontal">
  <Button Content="保存" Height="20" Width="60" />
  <Button Content="キャンセル" Height="20" Width="60" />
</StackPanel>

 保存ボタンの設定から行ってみましょう。

 ボタンにお小遣い明細テーブルへの保存機能を持たせるためには、「お小遣い明細DomainDataSourceオブジェクト」のSubmitChangesCommandメソッドをボタンに関連付けます。

 XAMLを直に編集しても良いのですが、ここはVisual Studioのデザイナーから設定してみましょう。Visual Studioのデザイナーでのバインディングは、次の3つの手順で行います(図17)。

  1. 対象オブジェクトのプロパティで、データバインドの適用を選択する。
  2. バインド元のオブジェクトを選択する。
  3. バインド先のプロパティ(パス)を選択する。
図17 Visual Studioを使ったバインディングの手順
図17 Visual Studioを使ったバインディングの手順

 データの保存と、データのキャンセルの実装は完了です。早速実行して、画面からデータを修正し、保存ボタンを押してください。Loadボタンで読み直すと、サーバ側のデータが更新されたことを確認できます。データ編集中は、Loadボタンをクリックすることはできません。また、何も編集していない状態では保存ボタンやキャンセルボタンをクリックすることはできません。

まとめ

 今回は、単純にデータの検索と更新をVisual Studioのデザイナーを利用して作成しました。検証や共有コードといった機能はまだ解説していませんが、WCF RIA Servicesを使って簡単にn階層のアプリケーションを作成できることを確認してもらえたのではないでしょうか。

 次回の後編では、データの検証、サーバ側とのコードの共有、WCF RIA Servicesの仕組みについて触れていきます。

参考



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:Silverlight 4で作る新しいRIAアプリケーション

もっと読む

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

  • WINGSプロジェクト かるあ (杉山 洋一)(カルア(スギヤマ ヨウイチ))

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5