Japan Dynamics CRM Team Blog

Microsoft Dynamics CRM technical information for partners and customers

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

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

  • Comments 0

みなさん、こんにちは。

今回は開発者向けに 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 リソース
http://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 ナビゲーションの詳細は、以下を参照してください。

ナビゲーションの概要
http://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 としました。

image

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

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

<Grid x:Name="LayoutRoot" Style='{StaticResource LayoutRootGridStyle}'>
    <Grid.Resources>
        <!-- Uri Mapping -->
        <uriMapper:UriMapper x:Key="NavigationMapping">
            <uriMapper:UriMapping Uri="/{webResource}" MappedUri="/Views/{webResource}.xaml"/>
        </uriMapper:UriMapper>
    </Grid.Resources>
    <navigation:Frame x:Name="MainContentFrame"
                        Loaded="MainContentFrame_Loaded"                          
                        UriMapper="{StaticResource NavigationMapping}">           
    </navigation:Frame>
</Grid>

※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 と
名前を設定します。

image

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" />

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

image

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

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

<ScrollViewer x:Name="LayoutRoot">
    <StackPanel Width="650">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <Button Grid.Column="0">
                <TextBlock Text="製品の追加"/>
            </Button>
            <Button Grid.Column="1">
                <TextBlock Text="変更の保存"/>
            </Button>
            <Button Grid.Column="2">
                <TextBlock Text="製品の除外"/>
            </Button>
        </Grid>
        <sdk:DataGrid AutoGenerateColumns="False" Height="150" Name="ForecastGrid" >
            <sdk:DataGrid.Columns>
                <sdk:DataGridCheckBoxColumn Width="35"/>
                <sdk:DataGridTextColumn Header="製品名" Width="275" />
                <sdk:DataGridTextColumn Header="見積金額" Width="100" />
                <sdk:DataGridTextColumn Header="見積数" Width="100" />
                <sdk:DataGridTextColumn Header="見積合計" Width="125" />
            </sdk:DataGrid.Columns>
        </sdk:DataGrid>
        <Grid HorizontalAlignment="Right">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="95"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <TextBlock Grid.Row="0" Grid.Column="0" Text="合計:"  FontSize="13" HorizontalAlignment="Right"/>
            <TextBlock Grid.Row="1" Grid.Column="0" Text="合計予測:"  FontSize="13" HorizontalAlignment="Right"/>
            <TextBlock Grid.Row="2" Grid.Column="0" Text="マージン見積:"  FontSize="13" HorizontalAlignment="Right" FontWeight="Bold"/>
            <TextBlock Grid.Row="3" Grid.Column="0" Text="コミッション見積:"  FontSize="13" HorizontalAlignment="Right" FontWeight="Bold"/>
            <TextBlock Grid.Row="0" Grid.Column="1"  FontSize="13" Text="$0.00"/>
            <TextBlock Grid.Row="1" Grid.Column="1"  FontSize="13" Text="$0.00"/>
            <TextBlock Grid.Row="2" Grid.Column="1"  FontSize="13" FontWeight="Bold" Text="$0.00"/>
            <TextBlock Grid.Row="3" Grid.Column="1"  FontSize="13" FontWeight="Bold" Text="$0.00"/>
        </Grid>
    </StackPanel>
</ScrollViewer>

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

image

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

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

image

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

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

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

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

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

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

image

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

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

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

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

image

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

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

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

image

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

まとめ

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

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

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

  • Loading...
Leave a Comment
  • Please add 2 and 8 and type the answer here:
  • Post