「LightSwitch から UX を見てみる」 セッション資料

技術ひろば.net の4月の勉強会 で 「LightSwitch から UX を見てみる」 というタイトルで 1コマ喋りました。

 

個人的な意見ですが、UX というと、つい画面に懲りたくなることがあると思います。が、それは UX の本質ではないはずです。シンプルでもユーザビリティーに優れたアプリケーションは作れるのではないかと。
色々懲りたくなる気持ちを抑えて、あくまでもシンプルに、できるだけ LightSwitch らしく作るほうがいいのではないか、というメッセージを込めてみました。LightSwitch は、誰がどんなアプリケーションを作っても、一定のユーザビリティーを提供できます。それに忠実に従うほうがユーザーのためになると思います。

image

 

レイアウト項目の配置はステップを踏むとわかりやすいと思います。情報の階層に応じて、レイアウト項目を整然と並べていきます。

image image
image image
image  

 


どうしても画面設計に懲りたい場合には LightSwitch を OData の Producer として使い、クライアントは Silverlight なり Metro スタイルアプリなりで作ることもできるという話もしました。

汎用的に使える技術であるということか LightSwitch そのものよりも OData の部分に興味を持った方が多いようです。
どうも PC の調子が悪く、デモをお見せできずにすみませんでした。

image

上手く行けば、JavaScript な Metro スタイルアプリ (Hello, World レベルですが) をお見せできたのですが・・・。

 


余談ですが、勢いでタイトルを決めてしまったので Windows Developer Days 頃から悩みまくり。そもそも UX なんて強くないので、毎日こんな感じ。次の機会は身の丈にあった内容にしますw

image
※ちゃんと iStockPhoto で買った素材ですw

LightSwitch Reporting with XtraReports でレポートのフィルタリングを LightSwitch らしくする方法

本稿が LightSwitch Reporting with XtraReports の記事の最後になる予定です。
※本稿の内容は、現時点では Visual Studio 11 Beta LightSwitch (LightSwitch V2) では利用できません。Visual Studio LightSwitch 2011 に対応した内容です。

前の記事 まででフィルタリングに対応した XtraReports の使い方を紹介しましたが、もともと Silverlight 用のコントロールと思われるものを拡張した性質上、見た目が LightSwitch らしくありません。

image

プロパティ変更とコードの追加で、もう少し LightSwitch らしくしてみます。


【0 – 前提】

フィルタリング対応のレポート出力ができていることが前提です。(こちらの記事


【1 – パラメーターウィンドウの非表示】

レポートデザイナーを開き、データソース (これまでの手順通りであれば “lightSwitchDataSource2”) → [QueryParameters] → Parameter コレクションエディターを開きます。
Visible = false に変更してください。これで実行時にパラメーターウィンドウが非表示になります。

image


【2 – Employee の概要プロパティの確認】

フィルタリングのキーとして使用する “Employee” テーブルの “概要プロパティ” を確認します。

image 

次の手順で社員のドロップダウンリストを画面に配置しますが、これで各項目の表示が LastName になります。


【3 – 画面デザイン】

レポート画面の画面デザイナー(レポートデザイナーではありません)を開いて、社員選択のコントロールを配置します。

まずは画面のデータ要素を追加します。
[データ項目の追加] をクリックしてダイアログボックスを開きます。
[メンバーの種類] として [ローカルプロパティ] の “NorthwindData.EmployeesItem” を選択します。名前は “Employee” としておきます。
ここで “クエリ” ではなく “ローカルプロパティ” を選択することに注意してください。

image

今追加した “Employee” を画面レイアウトにドロップします。ReportViewer の上がいいでしょうね。

image

レイアウトしたらコントロールの型が “オートコンプリートボックス” (ドロップダウン) になっていることを確認してください。また、あとで実行してみるとレポート部分の左側の余白が気になるので、“Employee” のプロパティウィンドウで [ラベルの位置] を “上詰め” に変えておくといいと思います。


【4 – コード追加】

データ項目の “Employee” (レイアウトの Employee ではなく) を選択→ [データの追加] で “Employee_Changed” メソッドを追加します。つまり Employee が変更されたら(ここでは、ドロップダウンで社員が選択されたら)、レポートを作成すると言うことです。

image

Employee_Changed では、レポートのパラメーターに選択された社員名(LastName)を渡します。さらに、レポートを生成するため “CreateDocument” メソッドを呼び出します。ここで注意するのは、コントロールの描画の要求なので UI スレッドを取得して BeginInvoke することです。
さらに LightSwitch ではレポートコントロールは “CustomizeReportPreviewModel” の引数でしか取得できないので、あらかじめローカル変数に代入しておくようにします。

image


【5 – 完成】

以上で完成です。実行してみると、LightSwitch のドロップダウンと XtraReports との組み合わせで動作していることがわかると思います。

image
image

以上で LightSwitch のレポーティングについての一連の記事は終わり。以下の記事とこの記事とを使って、レポーティング機能を持った LightSwitch アプリ開発をしてみてください。

LightSwitch Reporting with XtraReports でレポートのフィルタリング

LightSwitch Reporting with XtraReports の使い方シリーズです。 簡単な手順で LightSwitch アプリケーションにレポーティング機能を追加できます。
※本稿の内容は、現時点では Visual Studio 11 Beta LightSwitch (LightSwitch V2) では利用できません。Visual Studio LightSwitch 2011 に対応した内容です。

 

顧客ごとにグループ化したレポート に担当社員ごとのフィルタリング機能をを追加してみましょう。
すっかり間が空いてしまいました。空きすぎてしまったので、改めて XtraReports の使い方の基本からやり直したほうがいいかもしれませんね。すみません。


【0 – 前提】

顧客ごとにグループ化したレポート表示ができていることが前提です(レポートのグループ化 まで完成した状態)。

groupingreport


【1 – クエリの追加】

レポート対象の Order テーブルにクエリを追加します。ここではクエリの名前を OrdersByEmployee としておきます。

image


【2 – レポートのデータソースの変更】

レポートデザイナーに移動して、データソースを変更します。前の手順で追加した OrdersByEmployee を選択してください。データソース名はデフォルトでは lightSwitchDataSource2 となると思いますが、ひとまずそのままで使いましょうか。なお前のデータソース lightSwitchDataSource 1 はもう必要ないので削除してかまいません。

image

続いて、データソースのクエリパラメーターを確認します。EmployeeLastName の Visible が true であることを確認してください。これで担当社員の選択(指定)ができるようになります。

image


【3 – 途中経過】

この状態で一度実行してみます。

image

確かにパラメーターの選択が出来るようになったようですが TextBox に入力しなければなりません。例えば数値などであればこれでもいいかもしれませんが、社員名でこれはないでしょう。ということで、コンボボックスで選択できるようにします。


【4 – Screen クラスにコード追加】

社員名をドロップダウンリストから選択できるようにするには、デザイナー内での設定はできません。画面クラスにコードを追加します。

image

コードのポイントは:

  • _Activated メソッドでコンボボックスの要素を組み立てる
  • CustomizeParameterEditors イベントハンドラで、パラメーターエディタの設定をする

【5 – 完成】

以上で完成。実行するとこんな風になります。

image

・・・が、パラメーターウィンドウが LightSwitch っぽくなくてちょっと残念。次回はそこを変更してみましょうか。

 

※XtraReports についての投稿も次の1回まで。そろそろ OData 対応とか Metro アプリ開発とか書きたいことはいろいろあります。

技術ひろば.net 2012年3月の勉強会を開催しました。テーマは LightSwitch と Windows 8 CP #hirobatech

3月17日(土) に技術ひろば.net 2012年3月の勉強会を開催しました。

http://hiroba-tech.net/tabid/138/Default.aspx

今回は急遽開催を決め、準備期間が短かったこともあり、土曜夜の開催となりました。
内容も(スピーカーのアテンドの余裕がなく・・・) 瀬尾が LightSwitch ネタをやりました。
・・・ということで、なかなか集まりづらい勉強会になってしまい申し訳ありませんでした。
(今回は、何とか3月に開催するということが一つの目標であったため、「えいやっ!」で開催してしまいました)


 

LightSwitch セッションは、どうしても「そもそも LightSwtich って何?」 とか 「聞いたことはあるけど・・・」 という人が多いので、超基本のデモからスタートしています。
それはそれで LightSwitch について何となくイメージをつかんでもらえたかなと思いますが、今回喋りたかったのは次期版の新機能。OData 対応です。

Visual Studio 2011 では通信部分(ベースは RIA Services)がブラックボックス化されており、他のシステムやデータソースと連携することは基本的にできませんでした。

それに対して VS11 LightSwitch では、これまで通り開発をすることで、サーバーサイドは OData の Producer にもなっています。つまり、例えば PowerPivot やその他の Consumer でもデータを利用することができます。
また外部データソースとして、任意の OData Producer を利用できます。

どちらとも、外部との連携がやりやすくなったことを意味します。LightSwitch に出来ること、というか利用可能な場所が広がって、面白いツールになったということです。
もう 「オモチャみたい」 とは言わせません!

 

Windows 8 CP については、実際に画面や操作性を見ていただきました。瀬尾の他に、参加者の一人も Windows 8 インストール済みのスレートを持って来てくれたので、合計3台の Windows 8 をお見せしました。
スペック的に・・・な TW217 でもかなり快適に動作するのがわかってもらえたかな?特に起動の速さはいいです。


技術ひろば.net の勉強会、3月はミニミニ勉強会でしたが、4月以降はまた各回の企画・テーマを考えて開催します。ぜひ遊びに来てください。
まもなく告知できると思います。

LightSwitch in Visual Studio 11

Visual Studio 11 BetaWindows 8 Consumer Preview とともにリリースされました。
すでにインストール済みの方も多いかと。

LightSwitch ですが、11 では Visual Studio 自体の中に含まれるようです。
※バージョン 1 にあたる Visual Studio LightSwitch 2011 では単独のプロダクトだったわけですが。

Visual Studio 11 Beta を初めて起動すると、既定の環境設定の候補としてちゃんと “LightSwitch 開発設定” があります。

image

もちろん、新しいプロジェクトとして LightSwitch アプリケーションのテンプレートも含まれています。

image

開発環境の見た目は、Visual Studio 11 らしくなっていますが、デザイナ画面の構成などは特に変わっていないようです。
(今後どうなっていくかはわかりませんが)

image
image
image

開発したアプリケーションの見た目も今までと同様。

image
image

「ランタイムはどうなっているのかな~」と見てみると、Silverlight 5 でした。

image

これまでと変わらずに LightSwitch 開発ができそうですが、OData 対応など機能追加があるようなので、これから少しずつ見ていきたいと思います。
ひとまず LightSwitch in Visual Studio 11 Beta のリソースはこちら。

LightSwitch Reporting with XtraReports でレポートのグループ化

LightSwitch にレポーティング機能を簡単に追加することができる LightSwitch Reporting with XtraReports の使い方シリーズです。
基本的な使い方は こちらの記事 を参照してください。

今回は グループ化 の方法です。
こちらの記事 で Northwind の受注一覧をレポート出力しましたが、以下では受注一覧を顧客ごとにグループ化してみます。


【0 – 前提】

受注一覧(Orders) のレポート表示ができていることが前提です(こちらの記事)。

image26


【1 – グループの追加】

[Group and Sort] ウィンドウの “Add a Group” を選択して、グループ化したいプロパティを指定します。ここでは “CustomersItem.CompanyName” にします。

image

 

グループ化フィールドが追加され、(プロパティの指定にもよりますが、デフォルトでは)デザイン画面にグループヘッダー領域が追加されます。

image


【2 – グループヘッダーのデザイン】

“Field List” から “CustomersItem.CompanyName” をグループヘッダー領域にドロップします。

image

今回はフォントを大きくして下線を引いてみます。表示が切れないようにコントロールのサイズも変更。

image


手順はこれだけ。実行してみると、顧客ごとにグループ化されるのがわかると思います。

image

XtraReports を日本で使用するための Tips

Developer Express の LightSwitch Reporting with XtraReports を使えば簡単な手順で LightSwitch にレポーティング機能を追加できます。
が、アメリカ製ということもあって、デフォルトでは日本(日本語環境)で使うには変更したほうがいい設定があります。

  1. 長さの単位
    デフォルトではインチで位置指定をしますが、日本ではやはりメートル(ミリメートル)で指定したいところ。
    “ReportUnit” プロパティを “TenthsOfAMillimeter” にします。
    image
  2. 用紙サイズ
    デフォルトでは “Letter” になっています。PaperKind を “A4” などにします。
    imageimage
  3. フォント
    PDF エクスポートの文字化け対応には日本語フォントの指定が必須なのは 前の記事 の通り。
    image

XtraReports の PDF エクスポート文字化け対策

LightSwitch アプリケーションにレポーティング機能を追加する方法として、LightSwitch Reporting with XtraReports使い方ローカライズ方法 の紹介をしました。

XtraReports を使うと簡単にレポーティング機能を実装することができ、うまく動作しているように見えます。が、エクスポートした  PDF ファイルでは日本語が文字化けすることがわかりました。
※印刷、Excel エクスポート、CSV エクスポートなどはデフォルトのままで問題なく日本語出力できます。

プレビュー表示では

image

なのが、PDF エクスポートすると

image


文字化け対策は簡単で、レポート画面または各コントロールで フォントを変更するだけ

image

これで PDF エクスポートも文字化けしなくなります。

image

 

ここだけ気をつければ日本語出力も問題ないようです。

XtraReports の日本語ローカライズ

前の記事 で、DevExpress の LightSwitch Reporting with XtraReports の開発手順を紹介しましたが、話がややこしくなりそうなので、一つ説明を省いた内容があります。
それがアプリケーション自体のローカライズの問題。
※それとは別にエクスポート機能の日本語文字化け対策という話もあるのですが、それはまた別の記事で。

前の記事では何事もないかのように書いてますが、実は XtraReports を単にインストールしただけでは XtraReports のコントロール自体が英語のままです。

image

対応は簡単で、別途配布されているサテライトアセンブリ(=各国語のリソースファイル)をインストール、というかコピーするだけ。

サテライトアセンブリは この辺のページ で配布されています。
サテライトアセンブリは DevExpress アセンブリのバージョンごとに存在するので、もしかすると今後のバージョンアップなどで配布のアドレスが変わる可能性があります。もしサテライトアセンブリが見つからなかったら、Developer Express のトップページ の検索窓で “localize” とでも入れると見つかるはず。

この記事を書いている時点では LightSwitch 対応の XtraReports は 11.1 が最新。それより新しい 11.2 は現時点では LightSwitch 対応していないので注意。

image

ZIP を解凍すると “DevExpress.DLL” フォルダ内に各ロケールのサブフォルダーがあります。この中の “ja” フォルダを “C:\Program Files (x86)\DevExpress 2011.1\Components\Bin\Silverlight” にフォルダーごとコピーします。

image

あとはアプリケーションをリビルドすれば OK。アプリケーションが日本語化します。

image

LightSwitch Reporting with XtraReports の使い方(基本編)

LightSwitch にレポーティング機能を追加するためには Developer Express 社LightSwitch Reporting with XtraReports が便利です。
が、少しだけ独特のお作法が必要です。ということで以下、XtraReports の基本的な使い方。


【0 – データベースの準備】

ApplicationData でももちろんレポート出力は可能ですが、今回および次回以降の関連する記事では多数のデータを作る代わりに Northwind を使ってみます。
当然ですが、ここは XtraReports に必須の手順というわけではないので、それぞれのアプリケーションに必要なデータベースを使うことになります。

  1. MS のサイトから Northwind Sample Database をダウンロード→インストール
  2. [外部データソースにアタッチ] → データベース名の指定 

    image image image
  3. 今回は “Customers”、 “Employees”、 “Orders” を選択して [完了]
    image

【1 – エクステンションの選択】

プロジェクトのプロパティを開いて、拡張機能ページで “DevExpress XtraReports” をチェックしてください。

image


【2 – データソースの追加】

データソースを追加します。 LightSwitch Reporting with XtraReports では、データソースとして WCF RIA Services を使います。これはデータベースが ApplicationData であっても外部データベースであっても同じプロジェクト内のデータベースに対して、XtraReports 専用の RIA Services を用意します。

  1. ソリューションエクスプローラーで [データソースの追加]
    image
  2. “WCF RIA サービス” を選択
    image
  3. “DevExpress.XtraReports.LightSwitch.Server.XtraReportsService” を選択
    ※リストに表示されていないようならば、いったんウィザードを閉じてリビルドするといいはず。
    image
  4. “MessageEnvelop” を選択して [完了]。これは XtraReports に固定のエンティティなので、素直に選択してください。
    image
  5. エンティティが生成されるので、プロパティの [複数形の名前] を “MessageEnvelope” から “MessageEnvelopes” に変更しておくといいです(複数形の s を末尾に付ける)。これは後の手順で生成されるスケルトンが MessageEnvelopes を前提にしたコードを生成するため、その対応。もちろんスケルトン側を変更することもできなくはないが、こちらで変更しておくほうがラク。
    ※Visual Studio のオプション設定によっては、はじめからここが複数形の s 付きで生成されているかも(未確認)。その場合は気にせず次の手順へ。
    image

【3 – レポートクラスの追加】

  1. ソリューションエクスプローラーで [ファイルの表示] に切り替える
    image
  2. “Server” プロジェクトで [追加]-[新しい項目] を選択
    image
  3. “XtraReport Class” を選択。名前はご自由に。
    image

【4 – レポートのデザイン】

  1. レポートデザイン画面が開いたら、左上のアイコンをクリックしてデータソースの選択。ここでは “Orders” を選択しています。
    image
  2. 適宜コントロールの配置、バインディングの設定をしてレポートをデザインしていきます。ここでは “XRTable” を [Detail] 領域に配置しています。Detail に置くことでレコード数分繰り返してくれます
    image
    image
    image
  3. 必要に応じて [Format String] などのプロパティも設定
    image

【5 – レポート画面の追加】

  1. ソリューションエクスプローラーの表示を [論理ビュー] に戻す
  2. [画面の追加] で “Report Preview Screen” を選択。画面名はご自由に。
    image
    image
  3. 画面の “Activated” メソッドを記述。スケルトンは生成されているが、ReportTypeName で名前空間の指定がもれているので、 “LightSwitchApplication.” を追加しておく。
    image
    image
  4. 手順はこれで終わり。実行するとこんな風になります。
    image

 

と、いくつか独特の手順はありますが、かなり簡単な手順でレポーティング機能を追加できます。LightSwitch アプリケーション内ではレポート領域のツールバーが若干浮いている気もしますが、ここが問題にならなければ上の手順で帳票印刷、ファイルへのエクスポートが簡単に実現できます。

フォロー

Get every new post delivered to your Inbox.

現在513人フォロワーがいます。