菊池 Blog

移転しました 続・菊池 和彦の足跡

AILight Banner
AILight Blog

プロフィール

菊池 Blog

目次

Blog 利用状況

記事分類

過去の記事

タグ

Quick Hack: SketchFlow for ASP.NET MVCの様なもの

タイトル通りにちょっとQuick Hackしてみた。

SketchFlow ってのは 画面遷移もカンタン設計、MSが新ツールをデモ - @IT とかにざっくりした概要はあるが要するに画面フローをWPF / SilverLight プロジェクトのプロトタイピングとして簡単にできるツールなわけで Expression Blend 3 についてる新機能です。

んで、画面フローをプロトタイピングして、その結果として「これでこの機能できるよねー」とかの検証をしたうえで実装に入るという開発プロセスを踏むわけです。

んで、検証された画面フローの使い道を WPF / SilverLight に限定してしまうのはモッタイナイというわけでやってみたちゅーこと。

手順は簡単で最初にとにかく適当に画面フローを SketchFlowで書いてみる。それをBlendからビルドして試しに動かしてみる。この辺入念に。

納得行く動きをする画面フローができたらおもむろに Blend を終了して、 Sketch.Flow ファイルを Visual Studio で開く。

なんてこたーないXMLが出てくるので XML メニューからスキーマを生成させて、xsd を保存。

XSDをLiquid XML Studioで読み込んで重要になりそうな要素を選んで右クリックでRefactor -> Convert to Global Type で型を割りつける。

自分は Data/Screens 配下の Screen と Data/Connections配下のConnectionが重要とみて実行。(QuickHackなので名前なんて気にしない、デフォルトで出た ScreenType、ConnectionType を名前としてそのまま使った)

XMLを見てみると Screen のTypeがNavigationな物が画面なんで、その画面に対してテンプレートを作る。

$@query
  from ScreenType s in input.Screens where s.Type=="Navigation" select new { filename=s.ClassName+".aspx" , item=s }
@$
$@itemType ScreenType
<html>
<head>
<title>$=item.DisplayName$</title>
</head>
<body>
<h1>$=item.DisplayName$</h1>
<p>リンク</p>
$@list( ConnectionType conn in from c in input.Connections where c.Type=="Navigation" && c.Source==item.ClassName select c )$
<% = Html.ActionLink("$= input.Screens.Single( s=>s.ClassName==conn.Target ).DisplayName$", "$=conn.Target$") %>
$ @$
<p>埋め込み</p>
$@list( ConnectionType conn in from c in input.Connections where c.Type=="Composition" && c.Source==item.ClassName select c )$
<% Html.RenderPartial("$= input.Screens.Single( s=>s.ClassName==conn.Target ).ClassName$"); %><br/>
$ @$

</body>
</html>

こいつは csxっていう自作のコードジェネレータジェネレータの為のテンプレート。要するに画面のクラス名に従って aspx を吐きだしてくれる。内部にはConnections配下にあるConnectionを元にNavigationをリンクとしてまとめて出してくれて、Composition として ascx への RenderPartial を吐く。

同様に Composition を

$@query
  from ScreenType s in input.Screens where s.Type=="Navigation" select new { filename=s.ClassName+".aspx" , item=s }
@$
$@itemType ScreenType
<html>
<head>
<title>$=item.DisplayName$</title>
</head>
<body>
<h1>$=item.DisplayName$</h1>
<p>リンク</p>
$@list( ConnectionType conn in from c in input.Connections where c.Type=="Navigation" && c.Source==item.ClassName select c )$
<% = Html.ActionLink("$= input.Screens.Single( s=>s.ClassName==conn.Target ).DisplayName$", "$=conn.Target$") %>
$ @$
<p>埋め込み</p>
$@list( ConnectionType conn in from c in input.Connections where c.Type=="Composition" && c.Source==item.ClassName select c )$
<% Html.RenderPartial("$= input.Screens.Single( s=>s.ClassName==conn.Target ).ClassName$"); %><br/>
$ @$

</body>
</html>

ってやり(それぞれ適当にtemplateを拡張子として保存)

>"c:\Program Files\csx\csx.exe" -xsd:Sketch.xsd -generateExe -schemaRoot:Data *.template

でコードジェネレータを作って

>Sketch.exe Sketch.Flow

で実行。

めでたくプロトタイプ通りの aspx と ascx が得られましたとさ。

xaml を解釈してもっと細かいデータ取ればより細かい生成制御はできると思う&人手でのデザイン(HTMLコーディング)と機械生成する部分の調整をしないと駄目なんだろうけど、Quick Hack としてはまず成功。

というわけで、斜め上に間違えたSketchFlowの使い方でした。

Let's Enjoy Generate Code!

投稿日時 : 2009年11月16日 11:46


コメントを追加

#  re: Quick Hack: SketchFlow for ASP.NET MVCの様なもの 2009年11月16日 11:48 菊池

ありゃ、ascx側のテンプレートにaspxと同じ物貼り付けちゃった。

タイトル
名前
URL
コメント