スライド 1

Size: px

Start display at page:

Download "スライド 1"

いぶきよしくに
6 years ago
Views:

1 実践! NetAdvantage Silverlight 虎の巻 ~ 業務アプリ実装に役立つ活用 Tips インフラジスティックスジャパン山田達也

2 自己紹介山田達也インフラジスティックスジャパンデベロッパーエバンジェリスト 2

3 アジェンダ NetAdvantage Silverlight のラインアップ Silverlight LOB の活用ポイント実践テクニック RIA アプリ実装の秘訣と 3

4 NetAdvantage Silverlight ラインアップ業務用途向けコントロール集 NetAdvantage for Web Client に含まれる jp.infragistics.com データ視覚化に特化したコントロール集単体製品としてご提供ともにSilverlight3準拠 4

5 2009 Vol.1 収録コントロールデータグリッドツリービューメニューダイアログウインドウ Outlook ナビゲーション数値マスクエディタースペルチェッカータグクラウドタイルビュー主要チャート Excel 入出力エンジン 5

6 2009 Vol.1 収録コントロールチャート ( フルセット ) ゲージマップタイムライン 6

7 時間もあまりないのでさっそく本題に入ります 7

8 コントロール活用ポイント今回は 3 つのコントロールに注目データグリッドタイルビュータグクラウド 8

9 データグリッド業務用途に欠かせないデータグリッド特徴は? 機能が豊富ハイパフォーマンス 9

10 の特徴 ~ 豊富な機能 ~ たとえば標準のデータグリッドとの違いは? データ構造に応じてを表現をフレキシブルに設定などの設定が簡単によるユーザーアシストもビルトインもお手のもの 10

バインド対象のエンティティデータモデル受注データ顧客の子プロパティ jp.infragistics.

11 の活用ポイント 1/6 階層構造の表現データの親子関係を自動的に階層表示たとえばバインドしたエンティティが IList, IEnumerable などのリストコレクション型プロパティをもつ場合顧客データバインド対象のエンティティデータモデル受注データ顧客の子プロパティ jp.infragistics.com 受注明細データ受注の子プロパティ各階層の列定義は ColumnLayout クラスで指定可能たとえば自己参照構造なども定義できます 11

12 の活用ポイント 2/6 列の固定表示任意の列を左右に固定可能 jp.infragistics.com 左側の固定列スクロール範囲右側の固定列エンドユーザー操作による設定ドラッグドロップ操作ピンアイコンの設定コードによる設定 <iggrid:textcolumn Key="Birth" HeaderText="生年月日" IsFixable="True" IsFixed="Right"/> this.gridview.columns.datacolumns["birth"].isfixed = FixedState.Right; 12

13 の活用ポイント 3/6 グループ化やフィルタープロパティだけで簡単に設定可能 jp.infragistics.com グループ化 = GroupBySettings フィルター = FilteringSettings 13

14 の活用ポイント 4/6 遅延スクロールスクロール時に画面更新を遅延させ最小限必要なヒントを表示２つのメリットパフォーマンスの向上ユーザビリティ向上ヒントの表示内容はテンプレートでカスタマイズ可能 jp.infragistics.com DefferedScrollTemplate 遅延スクロール用テンプレート通常のテンプレート GroupByDefferedScrollTemplate グルーピング行向けのテンプレート 14

15 の活用ポイント 5/6 マウスホイールスクロールビルトインで実現 15

16 の活用ポイント 6/6 エクセル連携 Excel エンジンを搭載 Excel 連携ソリューションをクライアント上 (Silverlight のみ ) で完結可能サーバーへのラウンドトリップを削減主な機能ワークブックワークシートの保存とロード書式コメント数式リージョンセル結合行列フリーズドキュメントプロパティ読み取り専用 etc.. 16

17 参考資料と標準グリッドの機能比較機能 XamWebGrid 標準 DataGrid 階層構造データの表示列ソートグループ化フィルター行ページング選択機能 ( 行 ) 選択機能 ( 列 ) 選択機能 ( セル ) 列の移動列幅調整新規行固定列遅延スクロールマウスホイール操作データ仮想化 17

18 xamwebgrid と標準グリッドの機能比較補足事項階層構造データの表示 XamWebGrid 可能親子関係を持つ EntityModel を直接バインドした際はその関係性が自動的に階層として展開される各階層のレイアウトは ColumnLayout を通して定義可能標準 DataGrid 不可能行に対する付加情報としては RowDetailsTemplate を使用することが可能だが階層構造を形成することは困難列ソートグループ化フィルター行ページング XamWebGrid ビルトイン機能として提供 XAML 定義のみで実現でき Expression Blend のプロパティデザイナーで容易に設定可能標準 DataGrid バインド対象のモデルクラスに ICollectionView インターフェースを適用することで実現可能選択機能 XamWebGrid 行選択列選択セル選択それぞれに単一複数の選択パターン標準 DataGrid 行選択のみ単一複数パターンを実現可能新規行 XamWebGrid AddNewRowSettings 設定によりデータ追加のための新規行の位置や編集動作をカスタマイズ可能標準 DataGrid 新規行に対する特別なサポートはない固定列 XamWebGrid 任意の複数カラムについて左右位置でのスクロール固定が可能インタラクションのタイプ ( ピンドラッグアンドドロップ ) を選択可能標準 DataGrid 左側に列固定可能だが任意の列を指定できず Index の若い順に固定化する列数を設定できるのみ設定用の UI についてはカスタマイズが必要遅延スクロール XamWebGrid スクロールの遅延とヒント表示によりパフォーマンスユーザビリティの向上が可能標準 DataGrid サポートなしマウスホイール操作によるスクロール XamWebGrid 標準機能で実装標準 DataGrid カスタムコーディングが必要列の移動 XamWebGrid 列移動時のエフェクトを変更可能列幅調整 XamWebGrid ダブルクリックによる自動幅設定複数列のリサイズセル領域でのリサイズも可能データ仮想化 XamWebGrid 生成オブジェクトの再利用有無についても CellControlAttached イベントおよび Cell ごとの IsDirty プロパティ設定により制御可能 18

19 xamwebgridの特徴パフォーマンス業界最速速さの理由は jp.infragistics.com コンポーネントの軽量化描画処理の仮想化エンジン常に必要な部分だけの描画を行うオブジェクトを適時再利用して生成コストを抑える 19

20 xamwebgrid のパフォーマンス xamwebgrid と他社グリッドの性能比較 jp.infragistics.com 秒単位処理にかかる時間データバイン遅延スクローリアルタイムディングルスクロール xamwebgrid 他社製品A 他社製品B 5541 数値列ソート文字列ソートテスト内容データバインディングソートは100万行のデータをスクロールは91列 600行データを対象とします詳しくはホワイトペーパー xamwebgridのパフォーマンスをご参照ください 20

アプリケーションのパフォーマンスが高いと UXと生産性が向上たとえばコールセンターの顧客処理で

2,116 12,880 10,764 文字ソート 10,107 17,568 7,461 874

21 アプリケーションのパフォーマンスが高いと UXと生産性が向上たとえばコールセンターの顧客処理で内部処理データの読み込みデータバインディング 1,949 2, 数値ソート 2,116 12,880 10,764 文字ソート 10,107 17,568 7, ,160 13,286 15,046 47,486 32,440 データの絞り込みデータ閲覧視認 jp.infragistics.com 合計 xamwebgrid 処理時間遅延スクロール他社製品A 処理時間削減可能な時間秒業務処理 1件平均5分の処理を30秒削減すると 1件あたりロングスパンでを実現 21

22 パワフル & パフォーマンス実践テクニックセルスタイリングのコツ 22

23 セルのスタイリング CellControlAttached イベントの実装 private void gridview_cellcontrolattached(object sender, Infragistics.Silverlight.CellControlAttachedEventArgs e) { // イベント変数をもとに対象行の Data プロパティから Batter を取得 var batter = e.cell.row.data as Batter; if (batter == null) return; // 打率の場合値に応じてセル内のコントロールに強調色を付加する処理 if (e.cell.column.key == "AVG") { //3 割以上でセルを強調 if (batter.avg >=.3) { this.emphasiscontrol(e.cell.control); } // 仮想化エンジンによる自動再利用を避けるため IsDirty フラグを設定 e.isdirty = true; } } private void EmphasisControl(Control c) { c.background = new SolidColorBrush(Colors.Yellow); c.borderbrush = new SolidColorBrush(Colors.Orange); c.borderthickness = new Thickness(2); } 23

24 特徴のおさらい特徴とメリット機能が豊富機能実装の製品に Blend を使ったプロトタイピング時にも有効ハイパフォーマンスさまざまな業務用途に耐えうる性能 24

25 タイルビュータイル表示を行うコンテナー特徴視覚アピールの高いデータコンテナー直感的で迷いにくい操作性 25

26 ビジュアル系データコンテナー活用例 26

27 特徴おさらい特徴とメリット視覚アピールの高いデータコンテナーデータバインド可能レイアウトは自由にカスタマイズアニメーション効果直感的で迷いにくい操作性 3 種類 ( 最大標準最小 ) の表示状態ドラッグアンドドロップ操作導入メリットとを容易に実現 27

28 タグクラウドナビゲーションコントロール特徴 Webでおなじみのタグクラウドを簡単に実現 28

29 そもそもタグクラウドとは? UX パターンの一つ情報に対して自由に名札 ( タグ ) を付ける用途に合わせた重み付けルールによって重要なタグを強調表示して目立たせるクラウド ( 雲 ) のように配置して名前と重要性の双方の観点から選択可能にする 29

30 タグクラウドの一般的な使い方検索キーワードの一覧表示情報量やアクセス頻度によって重み付け jp.infragistics.com 補助的なフィルタリングUI として 30

31 タグクラウドの一歩進んだ活用法単純なタグクラウド = 単なる情報のランク付け別の観点を加えることによってが大幅に向上する可能性例 )US Presidential Speeches Tag Cloud» 31

32 注目機能データバインディングデータソースを元にタグクラウドを自動生成重み付け用プロパティを指定するだけスタイリングテンプレートによるカスタマイズスケーリングサイズ自動調整スムーズスケーリングオーバーフロー時動作 32

33 シンプル & 効果的 xamwebtagcloud 活用デモ 33

34 xamwebtagcloud 導入のメリットメリットなナビゲーションユーザー自身のを促進 34

35 ここまで 3 つのコントロールをご紹介しましたが最後にそれらを組み合わせたデモアプリをご紹介します今日はご紹介しきれなかったその他の NetAdvantage コントロールもたくさん使っています.NET RIA Service を使っていますソースコードを公開しますのでぜひ試してみてください 35

36 NetAdvantage Silverlight LOB 活用例 NPB Stats Viewer アプリケーションデモ 36

37 .NET RIA Serviceの活用 DBをもとにデータ処理に必要なサービス側クライアント側のライブラリを自動的に生成データドリブンなシステムの速成が可能現在 2009 July Preview版が最新となります jp.infragistics.com ベータ版ながら Go Live ライセンス対象ただし日本語Visual Studio環境にインストールするためには一工夫が必要ですマイクロソフト大西さんがブログ上で解説されています 37

38 ゲストスピーカー株式会社アークウェイ代表取締役森屋英治様 38

39 最後に本日のテーマに則って NetAdvantage Silverlightによるコントロールの機能性必要な機能をビルトインで提供商品価値を高める可能にコントロールのパフォーマンスパフォーマンス向上は向上に直結 jp.infragistics.com させる各種コントロール例 xamwebtileview, xamwebtagcloud とユーザーの使用意欲を高めることによる 39

40 関連資料とリソースデモのソースコードセッション後 Blog 上で公開します NetAdvantage Silverlight 最新情報近日発表の情報にも注目くださいナレッジベースフォーラム ( ベータ版 ) 40

41 ご清聴ありがとうございました 41

Windows クライアント UX 再考インフラジスティックスジャパンデベロッパーエバンジェリスト池原大然 1

Windows クライアント UX 再考インフラジスティックスジャパンデベロッパーエバンジェリスト池原大然 1 Windows クライアント UX 再考インフラジスティックスジャパンデベロッパーエバンジェリスト池原大然 dikehara@infragistics.com 1 自己紹介池原大然 ( いけはらだいぜん ) デベロッパーエバンジェリスト WPF トレーナー Blog http://blogs.jp.infragistics.com/blogs/dikehara/ 2 あなたのアプリケーションは