かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

LightSwitchで手軽に情報を出力したい

LightSwitchの本来の使い方ではないと思われるけど、データなしの画面とかも簡単に作れます。新規作成してBrowse画面を作ってしまえば、あとは画面にボタンを置いたり、カスタムコントロールおいてJavaScriptで好きなもの表示したりとかetc....

ということで、ちょっとした実験をするときの手軽な出力先(コンソールアプリとかみたいなのりで)をいくつか。

王道のconsole

こいつは各ブラウザの開発者ツールのコンソールに出力されます。データなしでBrowseの画面をSampleという名前で作ります。そしてボタンを追加します。
f:id:okazuki:20130810175553j:plain

Write my own methodを選択してメソッドの名前を適当につけます。
f:id:okazuki:20130810175819j:plain

JavaScriptのメソッド名を入れてOK
f:id:okazuki:20130810175819j:plain

画面の右側にメソッドが追加されるので右クリックからEdit Execute codeを選んでボタンを押した時の処理を書きます。
f:id:okazuki:20130810180703j:plain

コードはこんなかんじ。

/// <reference path="../GeneratedArtifacts/viewModel.js" />

myapp.Sample.OutputConsole_execute = function (screen) {
    // Write code here.
    console.info("Hello world");
};

実行して開発者ツールのコンソールを出した状態でボタンを押すとHello worldと表示されます。

f:id:okazuki:20130810181040j:plain

トーストに出力する

コンソールに出れば十分なんですが、遊び心を持たせたいというときは、トースト通知として出す方法もあります。一度Visual StudioをLogical ViewからFile Viewに変更します。
f:id:okazuki:20130810181235j:plain
この画面でHTMLClientのほうにNuGetでtoastrを追加します。
f:id:okazuki:20130810181414j:plain
toasterを追加したらHTMLClientのdefault.htmにtoastrのcssとjsを追加します。具体的には以下の二行を追加します。cssはheadタグのところに、jsはbodyタグのscriptタグが固まってるあたりにすればいいでしょう。

<link href="Content/toastr.css" rel="stylesheet" />
<script src="Scripts/toastr.min.js"></script>

因みにソリューションエクスプローラからtoastr.cssやtoastr.min.jsをdefault.htmを開いているエディタにドラッグアンドドロップしてやれば自動的にコードが吐かれるので、手書きする必要はありません。


次に、ボタンをクリックしたときの処理を書き換えます。Logical Viewに戻ってボタンを押した時の処理のjsファイルを開きます。

インテリセンスを効かせるためにJavaScriptのファイルの先頭にreferenceを追加します。これも、ソリューションエクスプローラからエディタにドラッグアンドドロップでいいのでさくっとやっちゃいましょう。(もう一度File Viewに切り替えないといけないのがめんどくさいですが…)


toastrの使い方はいたって簡単。tostr.info/warning/error/successに文字列を渡すだけです。さくっと書いてみましょう。

/// <reference path="../GeneratedArtifacts/viewModel.js" />
/// <reference path="../Scripts/toastr.js" />

myapp.Sample.OutputConsole_execute = function (screen) {
    // Write code here.
    toastr.info("Hello info");
    toastr.warning("Hello warning");
    toastr.error("Hello error");
    toastr.success("Hello success");
};

実行してボタンを押すと以下のようにトーストが表示されます。
f:id:okazuki:20130810182447j:plain

カラフルで見た目いい感じですね。

まとめ

jsでちょっと遊ぶときの土台としてもLightSwitch便利。これだけ自由度があるってことは、結構つぶしが効くテクノロジかもしれない。