フィールドを置くよ【家計簿を作るよ Vol.3】

はじめに

　前回はフォームをひとつ作成しましたが、真っ白なまま何も配置しませんでした。今回は画面の割り付けを考え、日付・金額・分類項目・摘要を入力するフィールドを配置してみましょう。

　最初の記事はこちらです。

表で画面を割り付け

　フォームは左上から右方向へ、下方向へと、フィールドを置いたり文字を書いたりすることができます。フォームで画面を区切って何かを置くときは表を使います。CSSを使わない昔のウェブページ(HTML)のつくりかたと同じですね。

　まずは表を配置しながら画面の割り付けを考えましょう。最初にフォームの白いところをクリックで選びます。ここに作るよという意味になります。

　次にメニューの[作成]から[表]を選びます。

　どのような表をつくるのか指定する画面がでてきます。今回は4行2列で、表の幅は『マージンに合わせる』にします。『OK』を押して表をつくりましょう。

　通常は『マージンに合わせる』を使いますが、用紙にあわせて印刷したいときは『固定幅』を使うことがあります。

　表ができました。まだ何をつくっているのか見えてきませんね。さぁ作り込んでいきましょう。

　次のように表題（タイトル）や入力欄まわりの説明やらの文字を入力します。どうですか、少しは伝票っぽくなりましたか？

　次はフィールドを配置しましょう。

日付のフィールドを配置

　日付行の右側の列をクリックして日付を入力するフィールドを置く場所を指定します。そしてメニューの[作成]から[フィールド]を選びます。

　カーソルがある場所に新しいフィールドができあがり、フィールドのプロパティの画面が表示されたとおもいます。
名前を『day』、種類を『日付/時刻』と設定しましょう。

　ひとつ右の制御タブに切り替えます。
　『日付の表示』にチェックしていることを確認してから、表示を『すべて』、特別は『常に4桁で表示』だけを選ぶようにします。
　『時刻の表示』のチェックは外しましょう。

　デフォルト値を『@today』と入力します。そして緑色のチェックボタンを選んで確定します。これで最初のフィールドができました。

金額のフィールドを配置

　金額行の右側の列、『円』の左側をクリックしてカーソルを移動させます。そしてメニューの[作成]から[フィールド]を選んで、新しいフィールドを配置します。
　名前を『amount』、種類を『数値』と設定しましょう。

　制御タブに切り替えて、小数点の位置の固定の左側を『0』、『変更』のチェックを外しましょう。表示形式を追加の『3桁ごとに分離記号を付ける』にチェックしましょう。

選択肢が固定のダイアログリストのフィールドを配置

　表の3行目の『の』の左側にフィールを置きます。名前を『categoryTo』、種類を『ダイアログリスト』にしましょう。

　制御タブに切り替えて、選択の右側の広い入力欄に『資産』『負債』『収益』『費用』と入力します。簿記に詳しいひとは、あれ『資本』はないの？と思われるかもしれません。資産と負債から資本を求めるようにしています。いいんです！
　オプションの『エントリ補助ボタンの表示』と『キーワードの変更時にフィールドを更新』にチェックします。

　いま作った『categoryTo』フィールドをマウスで選択して、メニューの[編集]から[コピー]を選んでコピーします。
　表の4行目の『の』の左側をマウスでクリックしてカーソルを貼り付けるところへ移動して、メニューの[編集]から[貼り付け]を選んで貼り付けます。
　名前を『categoryFrom』へ変更します。

テキストのフィールドを配置

　--- 摘要 ---の下に新しいフィールドをつくります。
　名前を『memo』、種類を『テキスト』にしましょう。

リッチテキストのフィールドを配置

　--- 添付ファイルなど ---の下に新しいフィールドをつくります。
　名前を『body』、種類を『リッチテキスト』にしましょう。

まとめ

　今回はフォームに色々な種類のフィールドを配置しました。次はビューから選択肢を持ってくるフィールドを配置するために、ビューを作成します。

　お気づきの点などありましたら好意的なコメントを残してください。きっと私たちの原動力になります。
　カミュプリィのホームページからメッセージを送ることもできます。

カミュプリィ

注意すべきところ

　大筋に影響ないのですが、より良いアプリケーションにするために気をつけるといいとおもうことをこれから書きます。