LightSwitch HTML Client アプリ開発(超基本) – ステップバイステップ

LightSwitch HTML Client アプリケーション開発の超入門として、開発手順をステップバイステップでまとめてみました。
もちろんこれだけで開発の全てが分かるわけではありませんが、「LightSwitch って結局どんななの?」とか「HTML Client ってどうやって作るの?」というベースにはなるかと。開発の概要を感じてもらえるとうれしいです。

以下はデモとして、簡単な住所録(メールアドレス録と言うべきか)を作ってみます。


0. Visual Studio を英語環境にする

現時点の HTML Client Preview 2 は日本語環境の Visual Studio では動作しません。そのため英語環境に変更する必要があります。と言っても、日本語 VS をアンインストールして英語 VS を入れ直すなどは不要です。
手順は簡単です、こちら をどうぞ。

 

1. データ (テーブル) を作成する

このあたりは Siliverlight クライアントと変わる部分はありませんが、一応画面キャプチャーを載せておきます。

SNAGHTML541244dimage

なお、(開発に必須の手順ではありませんが) 電話番号の書式を日本向けに変更するとアプリがそれっぽくなります。

image

 

2. 画面(一覧画面)を作る

画面を作ります。HTML Client はスマホなどの解像度の低いデバイスを意識してかデフォルトではグリッドのようなコントロールを持っていません。一覧画面はデフォルトではテーブルのサマリ(LightSwitch ではテーブルにある String 型の最初の列がデフォルト、変更は可能です)をリスト状に表示するようになっています。

デザイナー画面で [Client] – [Screen] を選択して、”Browse Data Screen” を選択します。画面名や対象のテーブル(今回は Addresses テーブルしかありませんが) を指定します。

imageSNAGHTML5485194

一応、一度動かしてみましょうか。データはないので当然、空の状態で表示されるだけですが、何もしていないわりに格好いい画面になっています。

SNAGHTML54a08e1

 

3. 画面の追加(詳細画面/新規登録ダイアログ)

詳細画面を追加します。今回は詳細の表示も編集もできる画面にします。
“Add/Edit Details Screen” を選択して、画面名と対象のテーブルを指定します。

imageSNAGHTML558d2c4

新規登録の画面はメイン画面(最初に作った画面)のダイアログとして表示するようにしてみます。
Main 画面のデザイナーを開いて、[Dialog] – [Add Dialog] を選択します。“Rows Layout” が追加されるので、忘れないうちに名前を変えておくといいです。

imageimage

さらに [Add] を選択して、[Addresses] – [Seleted Item] を指定します。

SNAGHTML5602f26

このままだと表示させたときにダイアログが小さく表示されてしまうので、サイズを変えておきます。

image

 

4. 画面遷移のアクションを追加

画面遷移のためのアクションを追加します。まずは一覧画面(メイン画面)の項目タップで詳細画面に遷移するアクション

“List – Addresses” を選択して、プロパティの [ItemTap] の “None” リンクをクリックします。詳細画面の表示メソッドを指定し、詳細画面を終了するためのアクションを指定、さらに一覧画面の選択アイテムを表示する旨を指定します。

image

新規作成のダイアログはメイン画面にボタンを置いて、これのクリックで表示することにします。
”Rows Layout – Address List” を選択して [Add] をクリックします。プルダウンが開いたら “New Button“ を選択します。
ボタンタップ時のアクションはダイアログを開くようにしてします。メソッドとして “Addresses.addNewAndEditNew” を指定します。

SNAGHTML5668293image

以上で完成です!1行もコードを書いていません。(もちろん、いつもこれでいいわけではありません)


実際に実行してみます。

SNAGHTML571a9c2SNAGHTML56eeb25[4]

 

SNAGHTML56f94acSNAGHTML56f7460

せっかくなので(?)、iPhone (エミュレーターですが)での実行結果も載せておきます。

SNAGHTML5705d0aSNAGHTML5708245SNAGHTML5709d06

スタイルを変更したい場合は、こちらこちら のページを参考に。

広告
カテゴリー: LightSwitch タグ: , パーマリンク

LightSwitch HTML Client アプリ開発(超基本) – ステップバイステップ への2件のフィードバック

  1. ピンバック: LightSwitch HTML Client アプリ開発(超基本)– 動画で説明 « 技術との戯れ

  2. ピンバック: LightSwitch HTML Client : Tile List / Details Screen に写真を表示(してちょっと格好よくする) « 技術との戯れ

コメントを残す

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中