Entry search

第7回 日記アプリケーションを作る ―その３ 入力画面と閲覧画面の作成）

一覧画面を作成したところで、今回は、入力画面と閲覧画面を作成してみよう。といっても作り方は閲覧画面と変わりはない。コントロールが多いので細かい設定が必要なだけだ。

では、前回までに作成した「MyDiary」プロジェクトを開いてから作業を進めよう。

入力画面を作成する

第5回で一覧画面を作成したように、入力画面を作成しよう。「プロジェクト」メニューから「Windows フォームの追加」を選択し、「新しい項目の追加」ダイアログから入力画面用のフォームを作成する。ファイル名は「editForm」としよう。

フォームが表示されたら、まずはフォームのタイトルから設定する。プロパティウィンドウで以下のように設定しよう。

コントロール 項目 内容
editForm Text 日記を書く

続けてコントロールを配置する。今回は配置するコントロールの数が多いので、順に配置していこう。配置は第3回での設計を参考にしていくといい。

第3回 日記アプリケーションのしくみを考える
http://www.willcom-fan.com/wzero3/entries/staff/000205/

ここでは、4個のコントロールを配置する。

  • DateTimePicker コントロール
  • PictureBox コントロール
  • TextBox コントロール 2個

DateTimePickerは日付を指定するためのコントロールで日記を作成する日付を指定する。PicterBoxは画像を表示するためのコントロールで、絵日記のために使う。TextBoxコントロールは第4回でも使用した入力を行うためのコントロールで、日記のタイトルと本文を入力するために使用する。

01s.jpg

画面への配置が終わったら「プロパティ」ウィンドウで各コントロールの設定を行う。コントロールを選択してからそれぞれのプロパティを設定していこう。PictureBoxのAnchor設定では左側をクリックしてはずしておくことを忘れないように。

コントロール 項目 内容
DateTimePicker1 (Name) editDate
Anchor Top, Left, Right
PictureBox1 (Name) contentPicture
Anchor Top, Right
SizeMode StrechImage (選択)
TextBox1 (Name) titleText
Anchor Top, Left, Right
Font-Size 11pt
Text タイトル

さて、2つめのTextBoxだがここでは、まずAnchorを指定せずに以下の設定だけを行う。

コントロール 項目 内容
TextBox2 (Name) contentText
MultiLine True (選択)

TextBoxをMultiLineにすると、複数行の入力が可能になる。もちろん日記本文を入力するためだ。ほかのアプリケーションでも1行しか入力できないテキストボックスと複数行入力できるテキストボックスを見たことがあるだろう。

MultiLine設定をTrueにするとTextBoxコントロールの縦のサイズも変更することができるので、ソフトキーメニューのところまでテキストボックスを大きく変更しよう。

02.jpg

変更が完了したら改めてTextBox2の設定を完了させよう。

コントロール 項目 内容
TextBox2 Anchor Top, Left, Right,Bottom
Font-Size 11pt
ScrollBars Vertical
Text 本文

最後は、ソフトキーの設定だ。ソフトキーは第5回でもやったように、画面上でTextプロパティを入力し、(Name) の設定はプロパティウィンドウで行う。

03.jpg

コントロール 項目 内容
左ソフトキー (Name) saveMenu
Text 保存
右ソフトキー (Name) pictureMenu
Text 画像読込

いったんここまでの作業を保存しておこう。「ファイル」メニューから「すべてを保存」を選択して作業を一通り保存しておく。

閲覧画面を作成する

続いて閲覧画面を作成しよう。「プロジェクト」メニュー→「Windows フォームの追加」から、「viewForm」を作成する。フォームが表示されたら、フォームのタイトルを設定しよう。

コントロール 項目 内容
viewForm Text 日記を書く

続けてコントロールを配置だ。もう慣れてくるころだろう。なおこの閲覧画面はそれぞれの工夫の見せ所だ。自分なりのアレンジを加えてみるといいだろう。

ここでは、5個のコントロールを配置する。

  • Label コントロール 3個
    PictureBox コントロール
    TextBox コントロール (MultiLine)

04.jpg

Labelコントロールは文字を表示するために使用する。ここではタイトルや日付を表示するために使用する予定だ。残りのコントロールは入力画面と同じだ。TextBoxは配置したらMultiLineプロパティをTrueにしてから大きさを調整しよう。

TextBoxとLabel

文字を表示できるコントロールとして、TextBoxコントロールとLabelコントロールが登場した。どちらも文字を表示するための機能があるが、ではこの2つのコントロールをどのように使い分けるべきだろうか？

TextBoxコントロール
  • 入力が可能
  • 複数行表示が可能
  • 編集機能をオフにもできるがその場合背景の色がグレーになる
Labelコントロール
  • 表示のみが可能
  • 1行表示しかできない

比較するとわかるが、基本的に表示だけならLabelコントロールを使ったほうがいい。表示された文字をユーザーが編集できてしまうからだ。しかしもし複数行を表示させたいのであればTextBoxコントロールを使うしかない。もちろん、編集を必要とするならばTextBoxを使うしかないのは当然である。

画面への配置が終わったら「プロパティ」ウィンドウで各コントロールの設定をする。コントロールを選択してからそれぞれのプロパティを設定していこう。

コントロール 項目 内容
PictureBox1 (Name) contentPicture
Anchor Top, Right
SizeMode StrechImage (選択)
Label1 (Name) titleLabel
Anchor Top, Left, Right
Font-Size 12pt
Text タイトル
Label2 (Name) monthLabel
Font-Size 12pt
Text Align TopCenter（選択）
Text 12月
Label3 (Name) dateLabel
Font-Size 36pt
Text Align TopCenter（選択）
Text 31
TextBox1 (Name) contentText
MultiLine True（選択）
Anchor Top, Bottom,Left, Right
Text 内容
BorderStyle None (選択)

コントロールのプロパティを設定した後は、コントロールのサイズが変化するものがある。プロパティを設定したらもう一度コントロールの配置を調整しておこう。

そして、ソフトキーの設定だ。閲覧画面でのソフトキーは日記の表示日の移動に使用する。

コントロール 項目 内容
左ソフトキー (Name) previousMenu
Text 前の日記
右ソフトキー (Name) nextMenu
Text 次の日記

さて、ここで閲覧画面はちょっとお色直しをしてみよう。まず、画面の余白の部分をクリックしてフォームを選択した状態で（もしくはプロパティウィンドウのドロップダウンリストからviewFormを選択した状態で）、Shiftキーを押しながらすべてのコントロールを選択していく。

05s.jpg

5つのコントロールを選択してプロパティウィンドウを見てみると、すべてのコントールに共通なプロパティとして、「BackColor」が選択できるようになっている。ここでBackColorに好きな色を選択しよう。システムカラー、Webカラー、カスタムカラーから自由に使用していい。ただし、システムカラーを使うとテーマなどによって色が変わるものもあるので注意が必要だ。

いったんここまでの作業を保存しておこう。「ファイル」メニューから「すべてを保存」を選択して作業を一通り保存しておく。

まとめ

画面の作成はオリジナリティーを出す重要なポイントだ。これまで自分が使ってきて使いやすいアプリケーションを参考にしながら使いやすい画面を考えてみるといいだろう。

さてせっかく作った画面だが、まだこの画面を表示させることができない。次回はこの画面を表示させる機能を実装しよう。

＜執筆者プロフィール＞

高橋 忍
元は、某重工業メーカにて航空機の自動操縦システムのソフトウェア 開発に従事。 その後、マイクロソフトにて開発サポート、コンサルタントを経て、 現在はエバンジェリストとして開発者に新しい技術を紹介している。難しい技術を楽しくわかりやすく伝えるのがモットー。
http://blogs.msdn.com/shintak/

高橋 忍のブログ
http://blogs.msdn.com/shintak/default.aspx
MSDN eye: 第 8 回「Windows Mobile 開発」
http://www.microsoft.com/japan/msdn/eye/

＜書籍情報＞

Windows Mobile 5.0のアプリケーション開発について、もっと詳しく知りたくなったら

Windows Mobile 5.0 アプリケーション開発 Beginner's Book

Windows Mobile 5.0 アプリケーション開発 Beginner's Book

高橋 忍・著／280ページ／2色印刷／B5変形／CD-ROM付
価格3129円（税込）／ISBN4-7741-2891-0／技術評論社・刊
発売日・2006年9月22日

This article posted by staff on 2006/10/05 15:25

Track back URL

http://www.willcom-fan.com/adm/mt-tb.cgi/147

Track backs: