WPF

わかりやすい MVPVM を実践するために

えムナウ — Mon, 18 Jun 2012 00:17:00 GMT

私の提唱する MVPVM パターンの目的は View と ViewModel の密結合を減らすことにあります。

サンプルは以下のページの Community Open Day 2012 TwitterSample を参照してください。
http://www.mnow.jp/tabid/220/Default.aspx

実装における注意点は以下の通りです。

MVVMパターンからの変更点

View

１）ViewModelからメッセンジャーの通信を受けてビヘイビアを起動する処理を書かない。
　Commandの処理はPresenterが行うのでViewを直接操作できる。

2)DataTemplate の DataType は利用するが、DataTemplateSelector は利用しない。
　ViewModel の派生クラスを使えば DataTemplateSelector を使わずに DataTemplate の DataType で識別できる。

ViewModel

1)Commandの処理を書かない。
　Commandの処理はPresenterが行う。

2)ViewModel は Command も含め、プロパティを View に提供することが主処理となる。

3)コンストラクタ・終了処理は今までの通り書いていいがイベントは生成しない。

4)View と ViewModel 間で完結する入力検証は行っていい。

5)ソート・絞り込みなど ViewModel 内部で完結するデータ操作は行っていい。

Application

1)初期に起動する Presenter を決めプレゼンテーションロジックを書かない。
　プレゼンテーションロジックは Presenter に含む。

2)初期に起動する Presenter の初期処理と終了処理を行う。

Presenter

1)ViewModel の Command を上書きして Command の処理を行う。

2)描画時には Model のデータを取得して ViewModel に設定する。

3)Command の処理で Model を更新し、ViewModel を更新する。

4)子供の Presenter の初期処理と終了処理を行い、描画を指示する。ダイアログは終了をまつ。

注意点は一応以上ですが順次追加するかもしれません。
上記 MVVM からの変更点を見ながらサンプルソースを眺めてみてください。

Community Open Day 2012 資料公開

えムナウ — Sun, 10 Jun 2012 16:24:00 GMT

Community Open Day 2012 「俺流MVPVMパターン」資料公開しました。

http://www.mnow.jp/tabid/220/Default.aspx

是非PPTX ファイルと同時に、Community Open Day 2012 TwitterSampleをダウンロードして ViewModel のコーディング量の少なさを実感してください。

MVVM ViewModel Diagram と Portable Library Tools が必要です。

MVVM ViewModel Diagram は上記リンクにもありますし、CodePlexにもあります。

http://viewmodeldiagram.codeplex.com/
残念ながら Ver1.1.3.0 は Visual Studio 2012 ではインストールできませんでした。
(Visual Studio 2012 RC 対応のDSL Toolkit が出ています。そのうち対応しようと思っています)

Visual Studio 2010 では ViewModel Diagram の図の修正も含めてお試しできます。

（TwitterSample プログラムのコンパイル実行は Visual Studio 2012 でも可能です。）

Portable Library Tools は以下のページを参照してください。

http://msdn.microsoft.com/ja-jp/library/gg597391.aspx

MVPVM パターン

えムナウ — Fri, 06 Jan 2012 19:34:00 GMT

WPF はなんかおかしい、ビヘイビアーといいデータテンプレートセレクターといい、View と ViewModel を両方知らないと達成できないものがそこここにちりばめられている。

特にデータテンプレートセレクターはコントローラ的な性格をもつものだと思っっていた。

SilverlightではテンプレートセレクターがないのでAppのPartialとしてViewModel を初期化してView を切り替えるものを作成し、ビジネスにからデータを取得する機能も便利なので付け加えた。

一方で更新系はViewModel からビジネスを呼ぶほうが断然便利なのでそのルートは確保したままにしている。
これは層を追加することによってアプリケーションファザード的な薄皮をプレゼンターに作る無駄なコーディングが増えることを嫌ったせいだ。

WPFでもその考えを踏襲して作成している。

去年のMSDNマガジンに「WPF 向けのモデル - ビュー - プレゼンター - ビューモデル設計パターン」という記事があった。
http://msdn.microsoft.com/ja-jp/magazine/hh580734.aspx

これは、私のやり方と合致するものだと思った。

図にするとこんな感じだが、MSDNマガジンとは、2点異なっている。

１）更新系はViewModel からビジネスを呼ぶ。
２）View から ViewModel （ICommand）を経由してPresenterを呼ぶ。

Expression Design の RIAのキャラ

えムナウ — Thu, 11 Aug 2011 22:50:00 GMT

Client App Dev の MVP の薬師寺聖さんがRIAのキャラを作成してくれています。

Expression Design ファイル
http://sei.seindesign.net/image/RIA_chara.zip

（左がHTMLイメージ、右がSilverlightイメージです）

利用する場合は以下の条件を参照ください。

RIAに関わる開発者個人や任意団体の宣伝および、サンプルや記?事の素材に、利用できます（私に了解をとる必要はありません）。
ただし、HTMLのロゴの再配布や、機種が特定されるPhoneの着色は、ライセンスの問題になるとイヤだから、ダウンロードファイルからは省いています。Silverlightの方のベルトのバックルをVSのロゴそのものの形にするといった加工はダメで?す。
加工可能な範囲とExpression Designの操作手順は、また、ブログにでも書きます。

Blogはこちらです。
http://blogs.itmedia.co.jp/seindesign/

RIAアーキテクチャ研究会を立ち上げます。

えムナウ — Wed, 03 Aug 2011 23:06:00 GMT

Tech Party 2011 in Tokyo -RIA アーキテクチャ研究会- をキックオフとしてRIAアーキテクチャ研究会を立ち上げます。

私がリーダとなりましたが、今回のスピーカメンバーも発起人の皆さんです。

目的

下記の通りです。

・今後開発において主流となるであろう MVVM パターンの利用によるアプリケーション開発を始めるきっかけとする

・Cloud 時代の RIA について広くアーキテクチャを検討できる場とする

・対象は、Windows Phone、HTML5、Silverlight、WPF、等

・月1回開催のセミナーとディスカッションを通じ、RIA や MVVMパターンに対する理解を深める

・MSDN Architecture Center にサイトを構築し、毎回の活動報告とサマリーを提供する

・リソースやマテリアルを最終的に整備することで、開発者のRIAやMVVM パターン等アーキテクチャへの認知度・習熟度を上げる

・マイクロソフトのリソースである Patterns & PracticesやApplication Architecture Guideline とも連携を模索する

・Codeplex にあるアセット（Prism、Caliburn等）の研究も行う

対象者

・業務システムのアーキテクト/デベロッパー
・業務システムのデザイナー

・コンシューマー向けシステムのアーキテクト/デベロッパー
・コンシューマー向けシステムのデザイナー

・Web デベロッパー
・Web デザイナー

とほぼすべてにわたります。当然のことながら、Windows Phone、HTML5を含みます。

初期メンバー及び発起人

発起人メンバー = MVP の方を中心に数名で構成させて戴いています。アドバイザーとして、MSRDの方にもお願いしています。

将来的な構成予定としては、SIer、エンドユーザー、ISV/CSV、等様々な方に参加して戴ければと思っています。

Microsoft 鈴木章太郎さんに支援していただいています。

活動内容

?セミナー、ディスカッションの定期的開催

（案）月一、土曜日午後~夕方

FaceBookに公開グループを作成しました。

http://www.facebook.com/#!/groups/182996675100851/

https://www.facebook.com/?sk=inbox&action=read&tid=id.141092922643227#!/groups/182996675100851/?notif_t=group_added_to_group

キックオフセミナー

Tech Party 2011 in Tokyo -RIA アーキテクチャ研究会-

懇親会は、各コミュニティのセッション終了後に開催されます。参加費用は2,000円程度です。ぜひご参加ください！

トランザクションスクリプトとドメインモデル

えムナウ — Mon, 27 Jun 2011 23:35:00 GMT

MVVMパターンの構築手法その３のセッションで、ビジネスエンティティがドメインモデル形態の実装で、ビジネスワークフローやビジネスコンポーネントがトランザクションスクリプト形態の実装という説明に違和感を覚えた方もいらっしゃるようです。
特に JAVA を長年やっていた方はそう感じたようです。

ADO.NET の DataSet や　LinqToSQL や Entity Framework はドメインモデルを構築しやすい構造になっています。
WCF RIA Services で提供されるのは、ドメインサービスでクライアントにドメインモデルを構築しやすい構造になっています。
つまりビジネスエンティティにデータベースサーバーのデータベースの必要なサブセットを構築しやすいようになっています。
なおかつエンティティはパーシャルで拡張できビジネスルールを作成できます。
リッチクライアントでは起動時やログイン時に必要なデータをサーバーより取得してきて、UIによる変更情報をビジネスエンティティに蓄え、ユーザーの保存ボタンなどのアクションによってサーバーに保存します。
ビジネスエンティティはデータベースのサブセットとしてドメインモデル形態の実装を行うのが自然です。

トランザクションスクリプトはMartin Fowlerの造語ですが、プロシージャスタイルのことで、プロシージャは最初に必要なデータを取得して更新情報を作成してSQLなどの更新手段を作成して実行します、この間にビジネスルールは一般に入りません、データベースサーバーがビジネスルールを持ち結果をプロシージャに返します。
ビジネスワークフローやビジネスコンポーネントはユースケースの実現を行うことに主眼を置きます。
ビジネスワークフローは１ユースケースの成功の脚本や代わりの脚本や失敗の脚本をトランザクション的に行い事後条件を満足することを目的とします。
ビジネスワークフローはビジネスコンポーネントに依頼して必要な情報をビジネスエンティティから取得します、更新情報を作成して更新手段となるビジネスコンポーネントを利用してをビジネスエンティティを更新します。ビジネスエンティティはビジネスルールを持ち更新結果を返します。
つまり、ビジネスワークフローとビジネスコンポーネントはデータベースではなくビジネスエンティティに対してトランザクションスクリプトのプロシージャスタイルを行っています。

ビジネスエンティティがドメインモデル形態の実装で、ビジネスワークフローやビジネスコンポーネントがトランザクションスクリプト形態の実装という意味を理解していただけることを期待します。

補足情報としてアプリケーションアーキテクチャ２．０におけるビジネス層の形態とユースケースの例を添付します。

ユースケース名	受注
アクター（かかわる人やサービス）	販売担当者、仕入販売システム
トリガー（起点）	顧客よりの受注
ガード（事前条件）	なし
目標（事後条件）	在庫不足があれば仕入指示して在庫不足を解消し出荷指示をする
脚本	1.在庫照会をする 2.在庫があれば出荷指示する
代わりの脚本	2a.在庫が不足があれば仕入指示する 3.出荷指示する
失敗の脚本

MvvmLightBehavior.0.1 公開

えムナウ — Mon, 10 Jan 2011 01:07:00 GMT

MvvmLightBehavior.0.1　を公開しました。
http://www.mnow.jp/tabid/220/Default.aspx

サンプルを実行するとこんな風に画面が遷移します。

（１）=>（２）＝＞

（１）の遷移は ShowDialogMessageAction ・ ShowDialogMessageTrigger を使っていて、 ShowDialogMessage を Messenger で送ることで実行しています。
この状態で MessageBoxSettingViewModel が自分の Window を閉じるには以下のようにコーディングするとできます。

CloseDialogMessage message = new CloseDialogMessage(true);

Messenger.Default.Send<CloseDialogMessage>(message, this);

（２）の遷移は DialogMessageAction ・ DialogMessageTrigger を使っていて DialogMessage を Messenger で送ることで実行しています。

また、Sample のプロジェクトは、MVVM Light Toolkit VM 用の Mvvm Property,Command の T4 テンプレートのサンプルにもなっています。
詳しくはソースを見てもらうとして MainViewModel.cs や MessageBoxSettingViewModel.cs がすっきりしているのを実感していただけると嬉しいです。

縦書き TextBlock ver0.2 公開

えムナウ — Thu, 30 Dec 2010 23:26:00 GMT

縦書き TextBlock ver0.2 を公開します。
公開場所はこちらの一番下です。

http://www.mnow.jp/tabid/220/Default.aspx

今回からしばらくはライブラリ形式でソースは公開しません。
BinフォルダにDLLで入っています。

こんなプロパティを用意しました。（黒いひし形マークのところです）

XAMLはこんな感じです。

<Window x:Class="JapaneseTextBlockSample.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:mnowlibtb="clr-namespace:Mnow.Windows.Library;assembly=Mnow.Windows.Library.JapaneseTextBlock"

Title="MainWindow" Height="664" Width="517"

xml:space="preserve">

<Grid><Grid.RowDefinitions><RowDefinition /><RowDefinition />Grid.RowDefinitions>

<mnowlibtb:JapaneseTextBlock

IsVertical="True" Text="私の名前はえムナウです。
「１＋１＝２」 ABCDE 12345 、じゃーね。"

FontSize="60" FontStretch="Normal" FontStyle="Normal" FontWeight="Normal" FontFamily="MS PMincho"

Foreground="#FF2700FF" Background="Lime" TextWrapping="Wrap" Padding="0" />

Grid>

Window>

動作画像です。

Windoes7の64bit

えムナウ — Sat, 19 Dec 2009 00:34:00 GMT

Windows7の64bitでは VisualStdio2008 SP1 に Silverlight3_Tools を入れても IE8 では Silverlightアプリケーションのシンプルなものがデバッグ実行で動作しなかった。

Firefoxを既定のブラウザにして確認したら Silverlightアプリケーションのシンプルなものがデバッグ実行で動作した。

Firefox でも DeepZoom はデバッグ実行で動作せず。

結局、Virtual PC で Windows Vista の32Bitで VisualStdio2008 に SP1 を入れて Silverlight3_Tools を入れて DeepZoom デバッグ実行確認した。

なんかものすごい疲れたけど。
この動きって正しいんですかね？

Windows7の64bitで VisualStdio2008 SP1 に Silverlight3_Tools を入れて IE8 で Silverlightアプリケーションデバッグ実行で動くよって人いますかね？
同じくDeepZoom デバッグ実行できるよって人もいますかね？

何か私が間違えているんでしょうか？？？

Microsoft Expression Design ＣＧイラストの描き方

えムナウ — Fri, 16 Oct 2009 16:51:00 GMT

妻に Microsoft Expression Design でCGを描くのに、ノウハウや便利な小技があったらまとめておいてくださいと言っていました。
第一弾は今年の4月から5月に書いてくれました。
今回、第二弾がはじまりましたので紹介します。
これを見て理解できて実際に Microsoft Expression Design でできそうかどうか教えてくださいと申しております。
解説的なことに関して素人なんでこうしたほうがいいということがあれば教えてください。

Expression Designで描く「A chair」その１「描くための準備」
http://bellinheaven.cocolog-nifty.com/blog/2009/10/expression-desi.html
Expression Designで描く「A chair」その２
http://bellinheaven.cocolog-nifty.com/blog/2009/10/expression-de-1.html
Expression Designで描く「A chair」その３
http://bellinheaven.cocolog-nifty.com/blog/2009/10/expression-de-2.html
Expression Designで描く「A chair」その４
http://bellinheaven.cocolog-nifty.com/blog/2009/10/expression-de-3.html
Expression Designで描く「A chair」その５
http://bellinheaven.cocolog-nifty.com/blog/2009/10/expression-de-4.html
Expression Designで描く「A chair」その６・パス演算
http://bellinheaven.cocolog-nifty.com/blog/2009/10/expression-de-5.html

前回紹介した第一弾もリンクを貼っておきます。

WPF