XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介

3,516 views
3,389 views

Published on

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,516
On SlideShare
0
From Embeds
0
Number of Embeds
80
Actions
Shares
0
Downloads
11
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介

  1. 1. XAML /C# を使ったWindows ストアアプリ(LOB)構築 TIPS- Prism 4.5 & Kona Project 等のご紹介 - 鈴木 章太郎 テクニカルエバンジェリスト 兼 MTC アーキテクト 日本マイクロソフト株式会社 http://blogs.msdn.com/b/shosuz/
  2. 2. https://www.facebook.com/shosuzテクニカルエバンジェリスト http://blogs.msdn.com/b/shosuzMTC アーキテクト http://www.microsoft.com/ja-jp/business/mtc/ads.aspx呟きネタは主に、Windows Azure, Windows、Windows Phone, RIA, HTML5, MVVM,iOS/Android x Windows Azure連携, Guitar … 等ASPIC 執行役員 (‘05 ~)Wipse モバイル x クラウド部会長(’11 ~)2005-2012 早稲田大学大学院非常勤講師、2008-2010 中央大学非常勤講師Microsoft 軽音楽部 広報担当 (Gt./Key./DAW)(2012 ~)
  3. 3. アジェンダ     
  4. 4. Windows ストア LOB アプリ LOB アプリケーションにも本格導入検討中の企業が多い 課題としては  既存のアプリケーションとの共存の方法  開発リソースの確保、技術研修等  既存アプリケーションの互換性確認の問題  Windows RT か Windows 8 Pro/Enterprise か  配布の方法(Windows ストア、SCCM、Active Directory、 Intune、他)
  5. 5. データソースとしての選択肢 ストアアプリケーションは基本的にデータベース直接接続不可 LOB アプリケーションはヘテロな環境に追加される  新規に構築する and/or 既存のリレーショナルデータベース  新規に公開する and/or 既存の Web サービス  新規に構築する and/or 既存のコンテンツサーバー  マスターデータが置かれているサーバー, etc. ASP.NET MVC4 Web API か WCF Data Services か  データベース(特に SQL Server )は Data Services  サービスの公開だと Web API が有用だが、LINQ で制限あり  Data Services は RDBMS、Web API はそれ以外のもの  組み合わせて使う(Windows Azure の場合は Mobile Services もあり)
  6. 6. 百貨店の店舗用商品カタログのフロー例 XML-RPC商品情報 マスター情報を検索を検索REST 画像 URLを 7:37 AM 含む商品情 画像 URL マスター 報を取得 を検索 REST 情報を取得 SharePoint Site se http://sharepoint/url ar ch Site Actions Browse Page username Parent > Parent > Current Page Page Title Current Page Page One Page Two This Site: site search画像情報を Libraries Site Pages Shared Documentsリクエスト 画像 URL Drop Off Library Custom library画像情報を を取得返す
  7. 7. Entity Framework + Code First クラスを作成してデータベースを作成  System.ComponentModel.DataAnnotations  スキーマ修正、マイグレーション可能  テストデータを入れられる  新規サービス立ち上げやマッシュアップサービスの構築ニーズに合致 ASP.NET MVC4 Web API でも WCF Data Services でも利用可能  ただし前者の場合は、使いやすいようにクラス設計をすべき
  8. 8. Web API によるサービスの公開 簡単に自動生成可能  コントローラ名決定  スキャフォールディング オプションから選択  テンプレート  モデルクラス  データコンテキストクラス クラスを適宜修正・追加  メソッドの追加、等
  9. 9. Kona プロジェクトとは? • • •
  10. 10. Kona Project とは?http://konaguidance.codeplex.com CodePlex に公開された MVVM フレームワーク Prism 4.5の一部を利用 C# / XAML に特化 Windows ストア LOB アプリ開発 のために最適化  設定・検索チャーム  各フレームへの遷移  バリデーション  その他順次追加予定
  11. 11. その前に Prism – 元々は…WPF, Silverlight, Windows Phone 開発用 • • • • • •
  12. 12. Prism は Windows ストアアプリ向きか? • Modularity • UI Composition • Region Navigation • Decoupled Communication • Commands • MVVM Support
  13. 13. 1. Windows Phone 開発の経験を十分に活用する Windows Phone アプリ Windows ストアアプリ Deactivate/Tombstoned/Reactiv Suspend/Terminate/Resume ate Microsoft Push Notification Windows Push Notification Service (MPN) Service (WNS) Windows Phone Marketplace Windows Store app certification certification & Application Excellence Review (AER) App manifest declares App manifest declares capabilities capabilities
  14. 14. 2. AttachedBehavior にフォーカスする• AttachedBehavior の経験を活 かし、それにフォーカス  後からコントロールに動作を追加できる• Blend のBehavior<T> → 使わない• Expressions のバインディング → 使わない
  15. 15. 3. Push 通知には要 Windows ストア開発者登録 • Windows ストアに、開発した アプリを申請し、正しいクレ デンシャルを取得する (SID 及びシークレットキー) • 完全にサイドローディングで 配布する前提で設計・開発を 行ったアプリからは、WNS (Windows Notification Service)を使ったプッシュ配 信はできない → 通知ハブ?
  16. 16. 4. .NET 4.5 の async と await を活用するasync Task<int> AccessTheWebAsync(){ HttpClient client = new HttpClient(); Task<string> getStringTask = client.GetStringAsync("http://msdn.microsoft.com"); DoIndependentWork(); string urlContents = await getStringTask; return urlContents.Length; }
  17. 17. ページ遷移とナビゲーション
  18. 18. 5. LayoutAwarePage クラスの使用ページ遷移、状態管理、および Visual State の管理のためNavigation support protected virtual void GoHome(object sender, RoutedEventArgs e) protected virtual void GoBack(object sender, RoutedEventArgs e) protected virtual void GoForward(object sender, RoutedEventArgs e)Visual state switching public void StartLayoutUpdates(object sender, RoutedEventArgs e) public void StopLayoutUpdates(object sender, RoutedEventArgs e)Process lifetime management protected override void OnNavigatedTo(NavigationEventArgs e) protected override void OnNavigatedFrom(NavigationEventArgs e) protected virtual void LoadState(Object navigationParameter, Dictionary<String, Object> pageState) protected virtual void SaveState(Dictionary<String, Object> pageState)
  19. 19. Navigation と Visual State のサポートXAML:<Button Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot} "Style="{StaticResource BackButtonStyle}“/><UserControl Loaded="StartLayoutUpdates" Unloaded="StopLayoutUpdates“>
  20. 20. LoadState と SaveState : SuspensionManagerprotected override void SaveState(System.Collections.Generic.Dictionary<string, object> pageState){ var virtualizingStackPanel = VisualTreeUtilities.GetVisualChild<VirtualizingStackPanel>(itemGridView); if (virtualizingStackPanel != null && pageState != null) { pageState["virtualizingStackPanelHorizontalOffset"] = virtualizingStackPanel.HorizontalOffset; }}protected override void LoadState(object navigationParameter, System.Collections.Generic.Dictionary<string, object> pageState){ if (pageState != null && pageState.ContainsKey("virtualizingStackPanelHorizontalOffset")) { double.TryParse(pageState["virtualizingStackPanelHorizontalOffset"].ToString(), out virtualizingStackPanelHorizontalOffset); }}
  21. 21. 6. Visual State のサポートによる landscape, portrait, fill, and snap<VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="ApplicationViewStates"> <VisualState x:Name="FullScreenLandscape"/> <VisualState x:Name="Filled"/> <VisualState x:Name="FullScreenPortrait"> <Storyboard> ... </Storyboard> </VisualState> <VisualState x:Name="Snapped"> <Storyboard> ... </Storyboard> </VisualState> </VisualStateGroup></VisualStateManager.VisualStateGroups>
  22. 22. グローバル対応
  23. 23. 7.グローバル対応 - ロケールごとに分離されたリソース <ToolTip x:Uid=“PreviewCartoonizeAppBarButtonToolTip” Content=“Preview Cartoonization” … />
  24. 24. Model-View-ViewModel Pattern
  25. 25. 8. ページ遷移:View First かViewModel First かView First:this.Frame.Navigate(typeof(ItemDetailPage), itemId);ViewModel First:Var itemDetailPageViewModel = new ItemDetailPageViewModel(…) { ItemId = itemId };navigationService.Navigate(itemDetailPageViewModel);
  26. 26. 9. BindableBase クラスの利用による INotifyPropertyChanged の提供public abstract class BindableBase : INotifyPropertyChanged{ public event PropertyChangedEventHandler PropertyChanged; protected bool SetProperty<T>(ref T storage, T value, [CallerMemberName] String propertyName = null) { if (object.Equals(storage, value)) return false; storage = value; this.OnPropertyChanged(propertyName); return true; } protected void OnPropertyChanged([CallerMemberName] string propertyName = null) { var eventHandler = this.PropertyChanged; if (eventHandler != null) { eventHandler(this, new PropertyChangedEventArgs(propertyName)); } }}
  27. 27. 10. Kona ViewModelLocator の利用• Convention ベースのルックアップ • MyNamespace.MyPage -> MyNamespace.MyPageViewModel• ルールに基づく例外により Conventionのオーバーライドが可能• ViewModel をインスタンス化するのにコンテナを活用可能
  28. 28. WPF/Silverlight における 典型的なバリデーション• Implement INotifyDataErrorInfo• UI コントロールでエラーのディクショナリにバインド • NotifyOnValidationError=True<TextBox Text="{Binding Id, Mode=TwoWay, ValidatesOnExceptions=True,NotifyOnValidationError=True}"/>
  29. 29. 11. Kona BindableValidator の利用View:<TextBox Text="{Binding Address.FirstName, Mode=TwoWay}" behaviors:HighlightFormFieldOnErrors.PropertyErrors= "{Binding Errors[FirstName]}" />-----------------------------------------------------------------------------ViewModel:_bindableValidator = new BindableValidator(_address);public BindableValidator Errors{ get { return _bindableValidator; }}
  30. 30. Decoupled Eventing • “ハリウッド式ペアレンタル スタイルの UI コンポジション” (ユーザーコントロール) • 子コントロールは、長時間持続す るサービスにより発生したイベン トをリッスンする必要があるも、 自らそれを、取り外すことはでき ない • Prism の EventAggregator 部分 をポーティング
  31. 31. 12. 必要に応じて EventAggregator 使用public SubscriberViewModel(IEventAggregator eventAggregator){ eventAggregator.GetEvent<ShoppingCartUpdatedEvent>() .Subscribe(s => UpdateItemCountAsync());}public PublisherViewModel(IEventAggregator eventAggregator){ _eventAggregator = eventAggregator;}_eventAggregator.GetEvent<ShoppingCartUpdatedEvent>() .Publish(string.Empty);
  32. 32. Commanding と ViewModel Method InvocationICommand: void Execute(object) bool CanExecute(object) event EventHandler CanExecuteChangedCommand Invoker: ButtonBase-----------------------------------------------------Event -> Action
  33. 33. 13. コントロールに ICommand をサポートする DelegateCommand を使用View:<Button Content=“Go to shopping cart” Command="{Binding ShoppingCartNavigationCommand}" />---------------------------------------------------------------------ViewModel:ShoppingCartNavigationCommand = newDelegateCommand(NavigateToShoppingCartPage, CanNavigateToShoppingCartPage);ShoppingCartNavigationCommand.RaiseCanExecuteChanged();
  34. 34. 14. AttachedBehavior や Action を使用するView:<GridView x:Name="itemGridView“ ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}" ItemTemplate="{StaticResource KonaRI250x250ItemTemplate}" SelectionMode="None“ IsItemClickEnabled="True" behaviors:ListViewItemClickedToAction.Action= "{Binding CategoryNavigationAction}">----------------------------------------------------------------------------------ViewModel:CategoryNavigationAction = NavigateToCategory;
  35. 35. Suspend, Resume, 及びTerminate
  36. 36. 15. Kona RestorableStateAttribute と MVVM フレームワークの利用public class MyViewModel : ViewModel, INavigationAware{ private string _name; [RestorableState] public string Name { get { return _name; } set { SetProperty(ref _name, value); } }}
  37. 37. 16. Visual Studio との統合 Windows Windows Azure Store Phone Store
  38. 38. ALM ソリューションの提供
  39. 39. ALM ソリューションの提供
  40. 40. クライアント Visual Studio Ultimate 2012 アプリケーション ライフサイクル全体を包括的にカバー Visual Studio Premium 2012 統合開発環境とテスト機能を搭載 Visual Studio Visual Studio Professional 2012 Test Professional 2012 開発機能を提供する統合開発環境 包括的なテストの実施と管理を支援サーバー Visual Studio Team Foundation Server 2012 アプリケーション開発プロジェクトの統合開発基盤
  41. 41. 参考情報 Visual Studio 2012 導入事例  http://aka.ms/VS2012-Case Visual Studio 2012 が提供する統合ソリューション  http://aka.ms/VS2012-Sol Visual Studio 2012 製品ガイド(PDF, 16MB)  http://aka.ms/VS2012-Prod Visual Studio 2012 試用版  http://aka.ms/VS2012-Try Visual Studio 2012 ライセンス ホワイトペーパー  http://aka.ms/VS2012-Lic
  42. 42. Resource http://konaguidance.codeplex.com  英語版 OS でないと .exe は解凍できない場合あり  Source Code → Download で .zip を落としてください

×