Dynamics CRM 2011 Silverlight ナビゲーションアプリケーションの利用

Article
02/20/2012

みなさん、こんにちは。

今回は開発者向けに US の Premium Field Engineering チームブログの記事を
紹介します。この記事では Silverlight Web リソースの開発手法に関して紹介しています。
紹介するにあたり一部意訳、構成変更をしていますので、是非元記事もご覧ください。

情報元 : Building Multi-Purpose Silverlight Web Resources in Dynamics CRM 2011

Dynamics CRM 2011 の拡張において、様々な箇所で再利用が可能でかつ既存の UI の
拡張にも利用可能である Web リソースの存在はとても重要です。Web リソースを利用した
UI の拡張機能は、ASP.NET や Web Form、MVC アプリケーションを利用した拡張の代替手段
として機能し、認証等の複雑な処理を考える必要がありません。

Dynamics CRM 2011 の Web リソースに関する詳細な情報は以下のリンクをご覧ください。
Microsoft Dynamics CRM の Web リソース
https://msdn.microsoft.com/ja-jp/library/gg309473.aspx

これらの利点に加え、Dynamics CRM 2011 ではより充実したユーザーエクスペリエンスを
提供できる Silverlight (.XAP) を Web リソースとしてサポートしています。この記事では
Silverlight Web リソースを利用して開発する際の手法に関して情報を提供します。

Silverlight Web リソースを利用した開発のトレンド

今のところ Silverlight Web リソースは、エンティティのフォームのような UI を拡張するために
用いられることが多いようです。開発の現場では、画面やパーツごとに XAP ファイルを作成して
います。規模が小さい場合はあまり問題になりませんが、規模が大きくなるにつれこの手法では
ソリューションのトータルサイズが増大していき、フォームやページを開く場合のパフォーマンスに
懸念が出てきます。

例えば以下のようなものがソリューションのサイズを大きくする要因です。

- WCF データサービスが生成したクラス (csdl ファイル)
- 自社開発の複数の XAP で共有されるライブラリやリソース
- サードパーティー製のライブラリ

OrganizationData.svc 用のクラスは数 MB のサイズがあり、結果として XAP ファイル
のサイズに影響します。特にカスタムエンティティが多い環境では、その分生成される
ファイルサイズも大きくなります。

また共有ライブラリやサードパーティー製のライブラリを Silverlight 開発に利用する場合にも、
その参照数により XAP のサイズは大きくなります。もしそれらのライブラリを参照する XAP が
5、10、20 と増えていくと、重複した参照を含む XAP がソリューションのサイズを圧迫します。

Silverlight ナビゲーションアプリケーション

上記の状況を避ける手法として、Silverlight ナビゲーションアプリケーションが考えられます。
Silverlight ナビゲーションアプリケーションでは、それぞれの画面はビューとして定義され、
ユーザーがビューを指定することで、メインページを開く際に任意のビューを開くことが可能です。
この場合複数のビューが同じアプリケーションとして実装されるため、ライブラリ参照やサービス
参照を共有できます。

Silverlight ナビゲーションの詳細は、以下を参照してください。

ナビゲーションの概要
https://msdn.microsoft.com/ja-jp/library/cc838245(v=VS.95).aspx

Dynamics CRM でこのアプローチを利用するには、まず 1 つの Silverlight ナビゲーション
アプリケーションを作成し、複数のビューで参照されるライブラリやサービス参照を追加します。
そして実際の画面はそれぞれビューとして定義します。

ユーザーが Silverlight Web リソースを読み込む際に、ビュー名を引数として渡すことで
任意のビューを表示させることが可能です。

もし開発規模がそれほど大きくない場合、全てのビューを含む Silverlight Web リソースを
1 つだけ利用できますが、規模が大きい場合や複雑なソリューションを開発する場合には
その機能等でグループ化して、別の Web リソースとするほうが良いこともあります。
開発の規模や開発者の数とバランスを取るようにしてください。

では実際にどのようにこの手法が利用できるか、以下に解説します。

Silverlight ナビゲーションアプリケーションの適用方法

※元記事と内容を少し変えています。元記事も是非参考にしてください。

Silverlight ナビゲーションアプリケーションの開発

以下のシナリオを考えます。

営業案件のフォームを拡張して、3 つの Silverlight コントロールを配置する。

- 顧客の情報の詳細表示画面
- 編集可能な製品のリストをサブグリッドとして表示

通常であれば、2 つの XAP を開発しますが、今回は上記 2 つの機能用のビューを
含んだ 1 つの Silverlight ナビゲーションアプリケーションを開発します。
尚、各画面の開発の詳細は省略します。

1. Visual Studio 2010 を起動します。

2. Silverlight より Silverlight ナビゲーションアプリケーションを選択します。
アプリケーション名は Microsoft.Xrm.SilverlightNavSample としました。

3. MainPage.xaml の Grid を以下のように書き換えます。
UriMapper でどのビューにユーザーを誘導するかを指定しています。

またサービス参照やライブラリ参照等、必要な参照を追加します。

※2012 年 5 月 21 日追記※
また、コードビハインドファイル内の、 MainContentFrame_Loaded メソッド
にて、インプットパラメーターを処理する必要があります。

private void MainContentFrame_Loaded(object sender, RoutedEventArgs e)
{

    // インプットパラメータを取得
    if (App.Current.Host.InitParams.ContainsKey("data"))
    {
        var viewUriString = string.Format("/{0}", App.Current.Host.InitParams["data"].ToString());
        MainContentFrame.Navigate(new Uri(viewUriString, UriKind.Relative));
    }
}

4. ビューを追加します。まず顧客の情報の詳細表示画面用にページを
追加して、OpportuntyCustomerDetailsView.xaml とします。Views
フォルダを右クリックして、追加 | 新しい項目をクリックします。

5. Silverlight ページを選択して、OpportuntyCustomerDetailsView と
名前を設定します。

6. OpportuntyCustomerDetailsView.xaml を開いて、Grid に以下の
内容を追加します。

<sdk:Label Content="取引先企業番号 :" Height="20" HorizontalAlignment="Left" Margin="10,10,0,0" Name="lblAccountNumber" VerticalAlignment="Top" Width="120" />
<TextBox Height="20" HorizontalAlignment="Left" Margin="154,10,0,0" Name="txtAccountNumber" VerticalAlignment="Top" Width="161" />
<sdk:Label Content="取引先責任者 :" Height="20" HorizontalAlignment="Left" Margin="10,45,0,0" Name="lblPrimaryContact" VerticalAlignment="Top" Width="120" />
<TextBox Height="20" HorizontalAlignment="Left" Margin="154,45,0,0" Name="txtPrimaryContact" VerticalAlignment="Top" Width="161" />
<sdk:Label Content="代表電話 :" Height="20" HorizontalAlignment="Left" Margin="10,80,0,0" Name="lblMainPhone" VerticalAlignment="Top" Width="120" />
<TextBox Height="20" HorizontalAlignment="Left" Margin="154,80,0,0" Name="txtMainPhone" VerticalAlignment="Top" Width="161" />

画面は以下のようになります。

7. 必要に応じて OpportuntyCustomerDetailsView.xaml.cs にコードを
記述します。今回は省略します。

8. 同じ手順で OpportunityForcastGridView.xaml を追加します。
また OpportunityForcustGridView.xaml で Grid の代わりに以下を
追加します。

画面は以下のようになります。

9. 必要に応じて OpportunityForcastGridView.xaml.cs にコードを
記述します。今回は省略します。

10. 上記手順より、ソリューション構成は以下のようになります。

11. プロジェクトをコンパイルします。

開発した XAP の展開とフォームへの設置

1. Internet Explorer で Dynamics CRM 2011 またはオンラインに接続します。

2. 任意のソリューションを設定 | カスタマイズより開きます。

3. Web リソースを選択して、新規をクリックします。

4. 以下のように Silverlight Web リソースを作成します。

5. 公開をクリックして、画面を閉じます。

6. カスタマイズしたい、営業案件エンティティのフォームを開きます。

7. タブを 1 つ追加して、Silverlight サンプルと名前をつけます。

8. 作成したタブに Web リソースを挿入します。先ほど作成した Silverlight Web
リソースを指定し、カスタムパラメーター欄に OpportuntyCustomerDetailsView
ビュー名を指定します。

9. もう 1 つ Web リソースを追加し、同じ Silverlight Web リソースを
指定します。カスタムパラメーター欄には OpportunityForcastGridView
ビュー名を指定します。

10. フォームを保存して、公開します。

11. 営業案件レコードを開いて、フォームを確認します。

同じ Silverlight Web リソースを読み込んでいますが、異なる
ビューが表示されています。

まとめ

今回は Silverlight アプリケーション開発手法の一例を紹介しましたが、メリットと
デメリットを検討する必要があります。Silverlight ナビゲーションアプリケーションの
場合、複数の Silverlight 画面(ビュー) で参照を共有することができるため、複数の
XAP に比較すると合計のファイルサイズは小さくなり、メンテナンスも容易になる一方
1 つの XAP ファイルのサイズが大きくなるため、ユーザーによっては無駄なリソースを
ダウンロードすることにもつながります。

今後も開発手法の例が公開されれば、こちらのブログでも案内していきますので
お楽しみに！

- Dynamics CRM サポート中村憲一郎

Partager via

Dynamics CRM 2011 Silverlight ナビゲーションアプリケーションの利用

Ressources supplémentaires

Partager via

Dynamics CRM 2011 Silverlight ナビゲーション アプリケーションの利用

Ressources supplémentaires

Dynamics CRM 2011 Silverlight ナビゲーションアプリケーションの利用