第45話 一覧画面と詳細画面

エヌ・ケイ・カスタマイズの大村でございます。
春眠暁を覚えずと申しますが、よく考えると私は季節に関係なく眠いような気がする今日この頃です。

さて前回は、レイアウトの見栄えを整えるために、「テーマ」を変更したり、「タブコントロール」や「スライドコントロール」を配置して、使いやすく整理された詳細レイアウトを作ってみました。この「タスク詳細」レイアウトは1件ずつを詳細表示するための「フォーム形式」のレイアウトです。今後、たくさんのタスクを登録していくと、1件ずつではなく一覧でズラーっと確認できると便利です。今回は、「リスト形式」を使って、すべてのタスクを一覧で表示するためのレイアウトを作成しましょう。

一覧画面をつくる

早速、新しいレイアウトを作成しましょう。
(1) 「タスク詳細」レイアウトでレイアウトモードに切り替えます。
(2) 新しいレイアウトを作成します。
  a. [レイアウト]-[新規レイアウト/ レポート]メニューを選択します。
  b. [新規レイアウト/ レポート]ダイアログが表示されます。
   ・[レコードを表示:]は、「タスク管理」TO を選択します。
   ・[レイアウト名]に「タスク一覧」と入力します。
  c. [コンピュータ]をクリックします。
  d. 下に現れた表示形式の中から[リスト]をクリックします。
(3) [完了]をクリックします。
(4) レイアウトが作成されます。

リスト形式を選択


タスク一覧レイアウト

「リスト形式」で新規作成されたレイアウトでは、「ボディ」部分が細い(縦に狭い)レイアウトが作成されます。
ここにフィールドを配置しましょう。

(1) レイアウトモードで左パネルを表示し「フィールド」タブでドラッグ設定をおこないます。
 ・現在のテーブルは 「タスク管理」
 ・フィールド配置は 「横」
 ・フィールドラベルは 「上」
 ・コントロールスタイルは、 「編集ボックス」
(2) 次の4 つのフィールドを配置してレイアウトを保存します。
 ・「タスク」
 ・「期限」
 ・「ステータス」
 ・「カテゴリー」

フィールドを配置

(3) フィールドが配置されました。
(4) 「タスク一覧」の4 つのフィールドは入力不可の設定をしておきましょう。
  右パネルのインスペクタで「データ」タブ内の[動作]の「フィールド入力」でレイアウト上でフィールドごとに設定します。

ブラウズモードのチェックをオフに

これで、「タスク詳細」と「タスク一覧」の2つのレイアウトができました。次に、この2つのレイアウトを切り替えるボタンを設置しましょう。今回は、「上部ナビゲーション」パートにボタンを設置します。

「タスク詳細」レイアウトに「上部ナビゲーション」パートを作成します。

(1) 「タスクの詳細」レイアウトでレイアウトモードに切り替えます。
(2) パートを作成します。
  a. [レイアウト]-[パート設定…]メニューを選択します。
  b. [パート設定]ダイアログが表示されます。
  c. [作成…]をクリックします。
  d. [パートの定義]ダイアログが表示されます。
  e. 「上部ナビゲーション」をクリックして[OK]をクリックします。
  f. [終了]をクリックします。

(3) レイアウトに「上部ナビゲーション」パートが追加されました。
(4) パートの高さを50pt 位にします。
(5) レイアウトを保存します。
(6) 同じ要領で「タスク一覧」レイアウトにも「上部ナビゲーション」を追加してください。

さらに「タスク一覧」と「タスク詳細」レイアウトを行き来するボタンを作成します。

できあがり例

ここまで、入力と表示のためのレイアウトをつくりながら、必要なテーブルオカレンスの作成や、それらのリレーションシップの定義、レイアウトを見栄え良く使うためのツールなどをみてきました。

次回以降、「スクリプト」を自分で作って、一連の作業を自動化することを学んでいきましょう。
グッとアプリっぽくなってきますよ。楽しみましょう!

Follow me!