Expression Blend 4 で デザインする Silverlight 4 アプリケーション

Presentation on theme: "Expression Blend 4 で デザインする Silverlight 4 アプリケーション"— Presentation transcript:

1

2 Expression Blend 4 で デザインする Silverlight 4 アプリケーション
セッション ID: T6-304 Expression Blend 4 で デザインする Silverlight 4 アプリケーション マイクロソフト株式会社 デベロッパー & プラットフォーム統括本部 エバンジェリスト/Windows Phone 7 Champ 高橋

3 セッションの目的とゴール Session Objectives and Takeaways
Expression Blend 4 を使って Silverlight 4 の アプリケーション ユーザー インターフェースを どのようにデザインするのかをお伝えする デザイン手法を通じて、Silverlight 4 アプリケーションを どのように開発するのか、また デザインの為の開発者の役割について理解していただく セッションのゴール Silverlight 4 アプリケーションの UI 構成要素を理解する Silverlight 4 アプリケーションの開発方法を理解する Silverlight 4アプリケーション開発の体制を理解する

4 アジェンダ Expression Blend 4 でデザインする Silverlight 4 アプリケーション
開発方法の変化 UI 構成要素 データの取り扱い デザインの為の開発 開発プロジェクト まとめ

5 Silverlight 4 アプリケーション 開発方法の変化

6 VB/WinForm での開発との違い VB 開発者は何を変えないといけないのか
[デザイン] XAML による UI の実装 XAML ＝定義による UI の実装 UI の基本設計は同じ 動的処理に関する準備、考え方の違い [設計] 構成要素における実装モデルの違い コントロールの拡張性 レイアウトのためのコントロール インタラクションの実装 [実装] Silverlight は元々 Web テクノロジ 非同期処理 リソース アクセスへの制限

7 Silverlight アプリケーション開発環境 Silverlight 4 アプリケーション開発するには
Expression Blend 4 「Visual Studio で編集」コマンド Visual Studio 2010 Team Foundation Server (TFS) のサポート

8 Silverlight アプリケーションの開発 Silverlight アプリケーション開発プロジェクト
データ構造・アプリケーション構成の検討・設計 UI イメージ・画面設計 データ ソース コンバーター等 アプリケーション開発 ビジネス ロジック開発 デザイン レイアウト インタラクション データ連携 結合テスト・検証 作業見積もり・開発環境整備 Development Design

9 Silverlight 4 アプリケーション UI 構成要素

10 Silverlight アプリケーションの UI Silverlight の UI を構成する要素と技術
コントロールのデザイン テンプレート化 ビジュアル ステート マネージャー コントロールの機能拡張 オブジェクト バインディング ビヘイビアー レイアウト要素 ナビゲーション

11 コントロール 重要なのは数に非ず 必要十分なコントロール 60 種類以上 重要なのは数ではなくそのカスタマイズ性 デザイン要素の拡張
機能の拡張 2 つの拡張要素をテンプレート化 プリミティブ からコントロールの作成も可能 基本コントロール + テンプレート (デザイン定義 + 機能定義)

12 コントロールの拡張/デザイン コントロールをどのように拡張するか
Photoshop や Illustrator からレイヤ構造を維持しながら直接読込が可能。(添付) デザイン要素 プリミティブ ブラシ 状態の変化に対する表現 アニメーション/ストーリー ボード イージング アニメーションの変化曲線 各要素の管理 ビジュアルステートマネージャー リソース ディクショナリ 数十種類の イージングにより アニメーションが より効果的に!

13 コントロールの拡張/テンプレート コントロールをどのように拡張するか
色やサイズなど標準のプロパティを変更 スタイル テンプレート 複数の変更をまとめて管理 コントロールのビジュアルを完全に変える コントロール テンプレート スタイルも含めて管理 複数の状態のスタイルを定義 ビジュアル ステート マネージャー T7-404 で、より詳しく

14 ビジュアル ステート マネージャー 複数の状態のデザインをまとめて定義 ボタンの場合 通常のステート Normal MouseOver
Pressed Disabled フォーカス ステート Unfocused Focused

15 コントロールの拡張/機能 コントロールをどのように拡張するか
要素の紐づけ オブジェクト バインディング コントロールからのイベント ビヘイビアー イベント ハンドリング ビヘイビアーで コードレスのイベント 処理方法を実現

16 オブジェクト バインディング もっとも簡単な動的な表示処理
オブジェクトのプロパティを紐付ける データの変更に合わせて反映 一方向/双方向 バインディング エンジン 値コンバーター Object (Control) 依存関係プロパティ バインディング ターゲット バインディング ソース

17 ビヘイビアー コード不要のインタラクション定義
コードなしでインタラクションを定義 オブジェクトをドラッグ & ドロップするだけ 組み込みビヘイビアー ビヘイビアー アクション 条件付きビヘイビアー 独自のビヘイビアーの 定義も可能(SDK 参照)

18 カスタムビヘイビアー 独自のビヘイビアーの実装
クラスライブラリで実装 Behavior<T>クラス ターゲットオブジェクト イベント 振る舞い 読み込んで再利用可能 Microsoft Expression Community Gallery でも公開

19 レイアウト要素 グループ化でもありフォームでもある
Silverlight エレメントの基本 エレメントは階層で定義される が、基本的に子要素は持てない パネルコントロール 複数のエレメントを子要素として保持 論理的なグループ化としての利用 例えば処理単位毎にグループ化 子要素の (画面上での) 配置を管理 レイアウトを一元管理 配置方法が異なるパネル

20 ナビゲーション 画面遷移を管理する Silverlight 4 のナビゲーション機能 アプリケーション ナビゲーション
Frame コントロール Page コントロール Web ブラウザーに統合されたナビゲーション 外部ナビゲーション Hyperlink

21 Silverlight 4 アプリケーション データの取り扱い

22 データ ソース 実質はオブジェクト データ ソースしかない
Silverlight で扱うことのできるデータ XML データ ソース ライブ XML データ ソースは NG LINQ to XML/XmlReader オブジェクト データ ソース サンプル データ ソース 典型的なサンプルデータで UI の実装をフォロー

23 XMLデータの読み込み DownloadStringAsync で非同期の読込み
WebClient client = new WebClient(); Client.DownloadComplete += new DownloadStringCompletedEventHandler( client_DownloadCompleted); Uri xmlUri = new Uri(“Dat.xml”, UriKind.Relative); Client.DownloadStringAsync(xmlUri); Void client_DownloadComplete(object sender, …) { // 終了後処理 }

24 データ バインディング モデル Silverlight のデータ バインディング モデル
データの表示はデータの管理とは分離 接続を確立後、UI とデータ オブジェクト間をデータが移動できる ソースとコントロールの連携を定義 バインディング エンジン 値コンバーター Object プロパティ FrameworkElement 依存関係プロパティ テンプレート ビヘイビアー バインディング ターゲット バインディング ソース

25 バインディング ターゲット バインディング ターゲットの違いによる影響
上位のDataContext とバインディングすることで、下位のオブジェクトがバインドしたデータソースの子要素とバインド可能 Text={Binding Path=FirstName} データソースをまとめて管理 TextBlock Text {Binding} Grid DataContext {Binding Source} Data DataValue データ ソース ビジュアル ツリー

26 Silverlight 4 アプリケーション デザインのための開発

27 開発者は何をするべきか Expression Blend を使ってデザインする 人のために開発者は何を用意するべきか?
UI デザインのためのオブジェクトの準備 オブジェクト データ ソース コンバーター カスタム ビヘイビアー

28 オブジェクト データ ソース Silverlight アプリケーションのための オブジェクト データ ソース
INotifyPropertyChanged を継承 public class MyData : INotifyPropertyChanged { private name _name; public event PropertyChangedEventHandler PropertyChanged; public string Name { get{ return _name }; set{ … }}; } , ErrorMessage = "Bad!"

29 バリデーション バインド時に入力項目のチェック Two Way で Binding [Required()]
Publiv string MyName {・・・} [StringLength(25, MinimumLength=5)] [Range(0,100)] Publiv int UnitStock

30 カスタムバリデーション 独自のバリデーションロジックを組み込み Public class User {
[CustomValidation(typeof(validmethod),”valid”)] Publiv string MyName{ get; set; } } public class validmethod public static ValidationResult valid( string MyName, ValidationContext context) //独自のバリデーションロジック

31 コンバーター IValueConverter を継承 Convert, ConvertBack の実装
Public class DataConverter : IValueConverter { public object Convert(object value, … ) DateTime date = (DateTime)value; return( date.ToShortDateString()); } public object ConvertBack(object value, …) string s = (string)value; return( DateTime.Parse(s));

32 カスタム ビヘイビアー Behavior<> クラスを継承
public class SB : Behavior<FrameworkElement> { 　　protected override void OnAttached(){ base.OnAttached(); this.AssociatedObject.MouseLeftButtonDown += 　　} 　　protected override void OnDetaching() { 　　　　base.OnDetaching(); 　　 　　　　this.AssociatedObject.MouseLeftButtonDown -= 　　void　AssociatedObject_MouseLeftButtonDown(…) 　　{ 　　　　MessageBox.Show("left button down");

33 Silverlight 4 アプリケーション 開発プロジェクト

34 Silverlight アプリケーション プロジェクト 用意された標準アプリケーション テンプレート
Expression Blend 4 Silverlight アプリケーション Silverlight SketchFlow アプリケーション Silverlight データ バインド アプリケーション Silverlight コントロールライブラリ Visual Studio 2010 Silverlight Business Application Silverlight ナビゲーションアプリケーション

35 Silverlight アプリケーション プロジェクト SketchFlow アプリケーション
ドラフトデザインをツールで容易に作成 画面を線でつなぐだけで、画面遷移を定義 紙プロトタイピングのような専用コントロール 注釈やコメントをつけられるビューアー Word 文書に出力して、マニュアルや要件定義書に

36 Silverlight アプリケーション プロジェクト Silverlight データ バインド アプリケーション
MVVMモデルをベースとしたテンプレート データとコマンドのバインドを実現 XAMLによるエンティティのインスタンス MainView MainViewModelSample MainViewModel MianView Button TextBlock Bind Data Behavior XAML

37 Silverlight アプリケーション プロジェクト Visual Studio のプロジェクト オプション
WCF RIA サービスの有効化 ブラウザ外実行の設定 ブラウザ外実行時の設定ダイアログ

38 まとめ

39 Silverlight アプリケーションの開発 Silverlight アプリケーション開発プロジェクト
オブジェクト データ ソース・テンプレート UI イメージ・画面設計 (SketchFlow) コンバーター ビヘイビアー アプリケーション開発 ビジネス ロジック開発 デザイン 　スタイル 　テンプレート インタラクション 　アニメーション 　ステートマネージャー レイアウト 　パネル データバインド 結合テスト・検証 作業見積もり・開発環境整備 Development Design

40 Silverlight アプリケーション開発 Expression Blend でデザインために
Silverlight アプリは Blend でデザイン デザインを細分化 デザイン：スタイル・テンプレート インタラクション：アニメーション・ 　ビジュアル ステート マネージャー レイアウト バインド デザインの為のコンポーネント開発が重要 プロジェクトの初めから UI 設計を!

41 詳しくは、9月2日に”MSDNオンライン”上に公開される
【予告】9月2日よりスタート！ 『Windows 7 アプリ投稿キャンペーン』 Windows 7 の最新機能を 実装したアプリケーションを大募集！！ 投稿いただいたアプリケーションはマイクロソフトサイトでご紹介 抽選で素敵な 『開発快適グッズ』 もプレゼント!! 詳しくは、9月2日に”MSDNオンライン”上に公開される キャンペーンページをチェック！

42 関連セッション T6-303：Silverlight 4 のブラウザー外実行 徹底解説 第 2 弾
T6-401：WCF RIA Services を使った Silverlight 4 アプリケーション開発 ～ 迅速性と効率性の追求 ～ T7-302：Windows Presentation Foundation 4 ～ ビジュアル ステートを使ったカスタム コントロールの作り方 ～ T7-403：最新 OS WES 7 / WEC 7 / .NET Micro Framework に よるクラウド時代のデバイス UX 開発 Special Session

43 リファレンス Silverlight デベロッパー センター Silverlight ブラウザー外実行のサポート Microsoft Expression Blend 4 Official Microsoft Silverlight Site Microsoft Web Platform

44 ご清聴ありがとうございました。 T6-304 アンケートにご協力ください。

45 © 2010 Microsoft Corporation. All rights reserved
© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.