FileMaker 【11】画面設計(レイアウト)

前回までは構造設計を学びカスタムAPPを作成しました。
今回は、開発の3つの中の画面設計について学んでいきます。

レイアウトの種類とツール

レイアウトを作成していく上で使うツールの種類、位置、名称の確認です。

レイアウト画面

① ステータスバー
② 右パネル
・タブ
・スタイルタブ
・外観タブ
・データタブ
③ 左パネル
・フィールドタブ
・オブジェクトタブ
パートラベル
ボディーパートなど

レイアウト作成の準備

新しいレイアウトを作成する。

1、⌘L レイアウトモードに切り替え。

2、新しいレイアウトを作成します。
[レイアウト][新規レイアウト / レポート]メニューを選択。
[新規レイアウト / レポート]ダイアログが表示される。

[新規レイアウト / レポート]ダイアログを表示

[レコードを表示:] どのテーブルオカレンスの出口にレイアウトを作成するかという意味。
クリックし[データベースの管理…]をクリック、新規でテーブルオカレンスを作成

[テーブルを指定] >>> テーブルオカレンスの入り口をどのテーブルにするか。(どのテーブルを表示するか)

3、[OK]をクリック。[新規レイアウト / レポート]ダイアログが表示される。[レコードを表示:]の内容が新規で作成した名称に変わっている。

4、[レイアウト名]を決める(入力)。[コンピューター]を選択。下に現れているレイアウトの形式を選択。[完了]

フィールドの配置

左右のパネルを使いながらドラック&ドロップで配置していく。
一部紹介。

左パネル[フィールドタブ][ドラッグ設定] >>> [フィールドの配置]や[ラベル]の表示位置を設定できる。
右パネル[データタブ][コントロールスタイル] >>> 垂直スクロールバーを表示
右パネル[データタブ][フィールド入力] >>> ブラウズモードのチェックを外すとブラウズモードの入力ができなくなる。

作成したレイアウト上に新たなテーブルのデータを表示させたい

新規でテーブルを作成する。自動でテーブルオカレンスが作成される。
※今回の新規テーブルのデータは、最初に作ったレイアウト上に表示させたい。そこに繋がるテーブルオカレンスを作成する必要がある。

1、テーブルオカレンスの新規作成。今作った新規テーブル名を、入り口に設定
2、テーブルオカレンスの名前を決める(入力)
3、最初に作ったレイアウトを出口に設定しているテーブルオカレンスとリレーションを組む
主キーと外部キーを繋ぐ。
4、[リレーションシップの編集]の[このリレーションシップを使用して、このテーブルでのレコードの作成を許可]にチェック。[OK]

[このリレーションシップを使用して、このテーブルでのレコードの作成を許可] >>> 親から子レコードを作る。

関連レコードの配置

1、⌘L レイアウトモード 
2、左パネル[フィールドタブ]
3、現在のテーブル  「関連させたいテーブルオカレンス」を選択。
4、下にフィールドが表示される。
[フィールドの配置]や[ラベル]の表示位置を設定
クリック&ドロップで配置。

ポータル設定

1、⌘L レイアウトモードに切り替え。
2、[ポータルツール]アイコンをクリック。
3、ポータルを配置したい位置でドラッグして□を描くように指定。
4、 マウスボタンを離すと[ポータル設定]ダイアログが表示される。

[ポータル設定]のダイアログ

[書式][行数]に数字を入れると、複数のレコードを入力できるようになる。
[スクロールを許可]で複数のレコードが収まり切らない場合スクロールで表示してくれる。

[ OK]をクリックすると新たなダイアログが表示される。

レイアウト上に表示させたいフィールドを移動させる。担当者の名前も表示させる必要がある。
今回は「担当者割り当て」という中間テーブル(上記)を通過して「タスク担当」テーブルが存在している。↓↓↓

[使用できるフィールド]から「タスク担当」を選択、「姓」「名」を移動。
[OK]

テーマの変更

FileMakerではレイアウトのテーマの選択によってデザインの変更ができる。

1、⌘L レイアウトモード
2、レイアウトツールバーの左[テーマ変更]アイコンをクリック
3、[テーマの変更]ダイアログが表示される
4、選択して[OK]

※テーマの名前の後ろに〜〜〜タッチ と付くもの
タッチデバイス用 iPadi、Phonなどで使用するためのレイアウト(FileMaker Goの時)

レイアウトの整理

・限られたスペースをより有効に使う。
・必要なデータをグループ化する。
レイアウト上のフィールドやポータルを見やすく整理する必要がある。
2点。

タブコントロール

各パネルの上部にタブがついていてクリックしたタブが前面に表示されるというレイアウトオブ
ジェクト


1、⌘L レイアウトモードに切り替え。
2、[タブコントロール]アイコンをクリック。
3、タブコントロールを配置したい位置でドラッグして大きく□を描くように指定。
4、マウスボタンを離すと[タブコントロール設定]ダイアログが表示される。
5、タブ名などを入力[作成]。その他の設定をし[OK]
6、各タブ上に前回作成したポータルを貼り付ける。

スライドコントロール

スライドコントロールはタブコントロールと同じく重なったパネルですが、上部のタブ部分が無い。代わりにパネルの下にナビゲーションドットという●がパネルの数だけ表示される。また、パネルの切り替えが左右に動くスワイプでできる。

1、⌘L レイアウトモードに切り替え。
2、[タブコントロール]アイコンを長押し。
3、[スライドコントロール]を選択できるようになる。
4、スライドコントロールを配置したい位置でドラッグして大きく□を描くように指定。
5、マウスボタンを離すと[スライドコントロール設定]ダイアログが表示される。
6、ページ数、その他の設定で[OK]
7、各ページ上に前回作成したポータルを貼り付ける。

※その他の設定
[スワイプジェスチャを有効にする] >>> iPhonなどでスワイプできる。
[ナビゲーションドットを表示] >>> スライド下のパネル数表示

タブコントロールとスライドコントロールの使い分け
似たような機能だが、タブは上部に各ページの名称がついていて分かりやすい。
スライドはスワイプできるためiPonなどで操作しやすい。

※タブコントロール内にスライドコントロールを設定するなどの重複利用はやめたほうがいい。

ナビゲーションパート

Webサイトでいう、上部のメニューバー

  • ページをスクロールしてもナビゲーションパートは固定されたまま
  • 印刷の場合は非表示

1、⌘L レイアウトモードに切り替え。
2、[レイアウト][パート設定]でパートの新規作成。
3、上部ナビゲーションを選択。[OK]
4、レイアウトを揃えるために、各レイアウト画面で設定し、高さなどを揃える。
5、ボタンなどを配置していく。

コメント

タイトルとURLをコピーしました