「LightSwitch で Web 開発」 デモ ~画面カスタマイズと Excel 連携

Community Open Day 2013 で担当するセッション 「LightSwitch で Web 開発」 のデモを事前に(もちろんご覧になるタイミングによっては事後にごゆっくりどうぞ)ストリーミングで公開するシリーズ。

テーブル定義を紹介した 1回目は こちら、画面定義を紹介した 2回目は こちら

 

3回目は jQueryMobile で画面デザインをカスタマイズする方法、および Excel との連携です。
※厳密に言うと、Excel 連携は HTML Client 限定の話ではないですけどね。

jQueryMobile ThemeRoller で画面をカスタマイズする方法は、以前 Preview 2 の頃に一度紹介してますが、今回は動画で実際の手順を紹介しました。
お世辞にも美的センスがあるとはいえない私でも、なんかそれっぽいイケてる画面が作れてしまいます。
今回はデモなので(?)あえて業務アプリにはなかなか見られない色使いにしてみましたけど(笑)。

image

1. jQueryMobile ThemeRoller で画面カスタマイズ
LightSwitch HTML Client の CSS は、jQueryMobile ThemeRoller 互換、というか、ThemeRoller そのものの CSS を使っています。イコール、ThemeRoller で配色をデザインしてdefault.htm を1行変更するだけで簡単にアプリに反映させることができるということです。

なお、Visual Studio 2012 Update 2 (LightSwitch HTML Client RTM)では jQueryMobile のバージョンは 1.2.0 ですが、数日前にリリースされた Runtime Update 1 では 1.3.0 対応になったようです。
このあたりはまだまだ不勉強なので出直してきます。

2. Excel 連携
LightSwitch v2 (Visual Studio 2012) から OData 対応されたわけですが、HTML Client でもこれを利用しない手はないと思います。(LightSwitch の OData 対応については2012年のCOD で担当した際の セッション資料 をご覧ください)
例えばカスタムコントロールで HTML Client 内にグラフ表示することはできますし、そういうニーズもあると思います。が、グラフを描いたりデータを集計したりするのは Excel がお手のもの。

一つのアプリを作るまでの一連の手順を 10本の動画で紹介しました。それぞれ数分の素材ですし、音声無しなので静かな職場でもバッチリお楽しみいただけます

カスタムコントロールの利用で、さらに見栄えのするアプリケーションを作れるようになりますが、基本的な開発手順だけでもこれだけのアプリが作れます。
今回のデモで書いたコードは 1行だけ(C# ではなく jQuery !!)、それと CSS 切り替えで 1行変更しただけです。コードを書いていないのでバグも最小限です。それなのに必要な機能は一通り揃っています。
これってすごくないですか?

COD のネタは資料もデモ動画も全て公開してしまいましたが、ぜひ当日はセッションに足を運んでください。実際目の前で見ると LightSwitch のすごさが改めて分かると思いますよ。

コメントを残す