「LightSwitch で Web 開発」 デモ ~ 画面定義

 Community Open Day 2013「LightSwitch で Web 開発」 セッション ではデモをご覧いただく予定です。事前に動画キャプチャーを撮りましたので、ここで紹介しています。全10本のうち、今回は画面定義に関する動画です。

テーブル定義はどんどん定義していくフェーズで、それだけでは動きがなかったわけですが、今回はその成果を使って画面を作っていきます。実際の動きが見えますね

1. 一覧画面の作成、新規登録画面/詳細閲覧画面の作成
最初の画面を作成します。今回のデモでは顧客の一覧を表示する画面です。
さらに、これだけでは空の画面が表示されるだけなので、データ(顧客)の新規登録画面および閲覧画面をあわせて作成します。
画面の作成方法と、別画面への遷移の方法が理解できると思います。

2. 詳細閲覧画面から編集画面への遷移
前の手順では一覧画面から詳細画面への遷移を行っていますが、次は詳細の閲覧画面から編集画面への遷移を行います。
[ボタンの追加] ダイアログで、ナビゲーションとして何を選択するかで次の画面が閲覧画面になるのか、編集画面になるのか、さらにポップアップ表示するのかが決まります。

3. 親子関係のあるデータの表示とタブ切り替えの方法
テーブル間のリレーションシップを持つデータを表示する方法です。画面左側のペイン(MVVM の ViewModel のデザインビュー)に関連するデータを追加して、画面デザイナー(中央のペイン)にドロップするだけで実現できます。
モバイルデバイスを考えると一画面(1ページ)に多数のデータを表示するのは考慮が必要です。この対応として LightSwitch では簡単にタブ切り替えができるようになっています。
さらに各レコードのサマリー表示をフィールド表示に変更する方法、レコードの新規作成時にフィールドに任意の初期値を指定する方法も紹介します。

4. クエリの編集
今回は一覧のソート順を変更するために、クエリを編集してみます。SQL 文や LINQ 式を書くのではなくて、クエリもデザイナー画面で編集していきます。
※今回は紹介していませんが、デザイナー画面で編集できないような複雑なクエリが必要な場合は C# (LINQ) で既述することもできます。

5. 一覧表示画面をタイルリスト表示画面に変更
一覧表示は LightSwitch で一番基本的な画面ですが、デバイスの画面の領域を上手に使えていない感もあります。
タイルリスト表示(Windows 8  や Windows Phone のアレです)に簡単に変更できます。タイル表示はいわゆるレスポンシブな画面なので、スマホから PC まで適切にレイアウト変更してくれます。

6. クエリの追加とフィルタリング機能(検索機能)の追加
画面定義の最後として、フィルタリング機能(検索機能)を実装してみます。あわせて、パラメータークエリを実装します。

 

画面については、種類、レイアウト(リストの行表示/タイル表示)、別画面への遷移/タブ/ポップアップ、さらにクエリなど、仕様検討や実装の際に考慮する事項があります。本稿の内容で基本的なことはさらっていますので、これらを組み合わせて操作性と視認性がよい Web アプリを「簡単に!」作ってみてください。

他に Render 関数や PostRender 関数を使うことで、さらに見栄えのするアプリが作れますが、それについては改めて。ただし使いすぎにはくれぐれも注意。せっかくの LightSwitch のメリットである開発生産性を下げかねません。
今回紹介したテクニックでは実現できない内容についてのみ利用を検討するのがよいと思います。例えば、負の数値の場合のみ赤字で表示するとか、住所を地図で表示するとか。サードパーティー製の jQuery Widget / コントロールを利用してグラフ表示やゲージ表示するなどがありますね。
※Preview 2 の頃にRender については 
こちらの記事、postRender については こちらの記事 で紹介しています。現在の RTM 番でも考え方は同じなので参考までに。

いずれにしても、前の記事と本稿、資料とで LightSwitch の生産性を感じていただければ。次回は jQueryMobile で画面のデザインをカスタマイズする方法を紹介します。

広告
カテゴリー: コミュニティー, LightSwitch タグ: , パーマリンク

「LightSwitch で Web 開発」 デモ ~ 画面定義 への1件のフィードバック

  1. ピンバック: 「LightSwitch で Web 開発」 デモ ~画面カスタマイズと Excel 連携 | 技術との戯れ

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中