5.1.2. エレメントを配置する¶
ここから、スケジュール登録を行うアプリケーション画面の作成を開始します。
「デザイナ」画面を利用し、アプリケーションを構成するエレメントを配置します。
5.1.2.1. エレメントを配置する¶
はじめに、レイアウトに分類されるエレメントを配置します。
「レイアウト（imui）」に分類されるエレメントの一覧から、「フォームコンテナ」をドラッグ&ドロップでコンテナに配置します。
図：「フォームコンテナ」エレメントの配置配置した「フォームコンテナ」エレメント内の「入力フォーム用テーブル」エレメントを選択します。
「エレメント固有」プロパティを以下のとおりに設定します。- rowCount : 4
図：「入力フォーム用テーブル」エレメント - 「エレメント固有」プロパティの設定「レイアウト」に分類されるエレメントの一覧から、「ボックス」を以下のとおりに配置します。
- 「入力フォーム用テーブル」エレメント - 4段目の「データセル」エレメント内に2つ配置
図：「ボックス」エレメントの配置「レイアウト」に分類されるエレメントの一覧から、「フレックスコンテナ」を以下のとおりに配置します。
- 「入力フォーム用テーブル」エレメント - 4段目の「データセル」エレメント - 下側の「ボックス」エレメント内に1つ配置
図：「フレックスコンテナ」エレメントの配置「フレックスコンテナ」エレメントを選択します。
「エレメント固有」プロパティを以下のとおりに設定します。- elementCount : 2
図：「フレックスコンテナ」エレメント - 「エレメント固有」プロパティの設定
以上で、レイアウトに分類されるエレメントの配置が完了しました。
次に、フォーム部品に分類されるエレメントを配置します。
「フォーム部品」に分類されるエレメントの一覧から、「ラジオボタン」を以下のとおりに配置します。
- 「入力フォーム用テーブル」エレメント - 1段目の「データセル」エレメント内に2つ配置
図：「ラジオボタン」エレメントの配置「フォーム部品」に分類されるエレメントの一覧から、「テキスト入力」を以下のとおりに配置します。
- 「入力フォーム用テーブル」エレメント - 2段目の「データセル」エレメント内に1つ配置
図：「テキスト入力」エレメントの配置「フォーム部品（imui）」に分類されるエレメントの一覧から、「日付入力」を以下のとおりに配置します。
- 「入力フォーム用テーブル」エレメント - 3段目の「データセル」エレメント内に2つ配置
図：「日付入力」エレメントの配置「フォーム部品」に分類されるエレメントの一覧から、「プルダウン」を以下のとおりに配置します。
- 「入力フォーム用テーブル」エレメント - 3段目の「データセル」エレメント - 各「日付入力」エレメントの右に1つずつ配置
図：「プルダウン」エレメントの配置「フォーム部品」に分類されるエレメントの一覧から、「テキストエリア」を以下のとおりに配置します。
- 「入力フォーム用テーブル」エレメント - 4段目の「データセル」エレメント - 上側の「ボックス」エレメント内に1つ配置
図：「テキストエリア」エレメントの配置「フォーム部品（imui）」に分類されるエレメントの一覧から、「ボタン」を以下のとおりに配置します。
- 「入力フォーム用テーブル」エレメント - 4段目の「データセル」エレメント - 左側の「フレックスコンテナ」エレメント内に1つ配置
図：「ボタン」エレメントの配置「フォーム部品（imui）」に分類されるエレメントの一覧から、「オペレーションパーツ」を以下のとおりに配置します。
- 「フォームコンテナ」エレメント内 - 「入力フォーム用テーブル」エレメントの下に1つ配置
図：「オペレーションパーツ」エレメントの配置「オペレーションパーツ」エレメント内の左側の「ボタン」エレメントを選択します。
ツールバーから、「削除」アイコンをクリックします。
図：「ボタン」エレメントの削除
以上で、フォーム部品に分類されるエレメントの配置が完了しました。
最後に、汎用、および、パーツに分類されるエレメントを配置します。
「汎用」に分類されるエレメントの一覧から、「ラベル」を以下のとおりに配置します。
- 「入力フォーム用テーブル」エレメント - 3段目の「データセル」エレメント - 1つ目の「プルダウン」エレメントの右側に1つ配置
図：「ラベル」エレメントの配置「パーツ（imui）」に分類されるエレメントの一覧から、「アイコン」を以下のとおりに配置します。
- 「入力フォーム用テーブル」エレメント - 4段目の「データセル」エレメント - 「フレックスコンテナ」エレメント - 右側のエレメント内に1つ配置
図：「アイコン」エレメントの配置
以上で、エレメントの配置が完了しました。
次節「変数、定数を定義する」では、作成するアプリケーション画面の変数、および、定数を定義します。