114 lines
8.2 KiB
Markdown
114 lines
8.2 KiB
Markdown
# InlineForm
|
||
|
||
**コントロール機能**：行内に送信可能なフォームを埋め込むためのもので、フィールド入力、検証、ツールバー操作（送信、リセット、キャンセル）をサポートしています。軽量なフォームを埋め込みたいシーンに適しています。
|
||
**タイプ**：通常コントロール
|
||
**親クラスコントロール**：`bricks.FormBase`
|
||
|
||
## 初期化パラメータ
|
||
|
||
| パラメータ名 | 型 | 説明 |
|
||
|--------|------|------|
|
||
| `fields` | 配列 | フォームフィールド設定配列。各フィールドオブジェクトには name、label、uitype などの情報が含まれます。 |
|
||
| `height` | 文字列 | 任意。デフォルトは `"100%"`。コントロールの高さを設定します。 |
|
||
| `width` | 文字列 | 任意。デフォルトは `"100%"`。コントロールの幅を設定します。 |
|
||
| `overflow` | 文字列 | 任意。デフォルトは `"auto"`。コンテンツがオーバーフローした際の表示方法を制御します。 |
|
||
|
||
> 注意：すべてのオプションはコンストラクタに `opts` 経由で渡されます。
|
||
|
||
## 主要イベント
|
||
|
||
| イベント名 | 発火条件 | コールバック引数 |
|
||
|--------|----------|---------|
|
||
| `submit(data)` | ユーザーが「送信」ボタンをクリックし、データが検証を通過した後に発火します。 | `data`: FormData オブジェクトまたは通常のオブジェクト。フォームデータを含みます。 |
|
||
| `submited(resp)` | 送信リクエスト完了後（成功・失敗問わず）に発火します。 | `resp`: レスポンスオブジェクト。`await resp.json()` で戻り値を取得できます。 |
|
||
| `cancel` | ユーザーが「キャンセル」ボタンをクリックしたときに発火します。 | 引数なし。 |
|
||
| `reset` | ユーザーが「リセット」ボタンをクリックしたときに発火します。 | 引数なし。 |
|
||
| カスタムコマンドイベント | ツールバーにカスタムボタンが追加され、`action` または名前が設定されている場合にクリック時に発火します。 | `event.params` にボタン情報が含まれます。 |
|
||
|
||
---
|
||
|
||
# Form
|
||
|
||
**コントロール機能**：完全なフォームコンテナーコントロールで、タイトル、説明文、複数フィールドのレイアウト、テキスト/非テキストフィールドの分離、ツールバーの自動生成、送信URLおよびメソッドの設定が可能です。独立したページやポップアップ内のフル機能フォームに適しています。
|
||
**タイプ**：コンテナーコントロール
|
||
**親クラスコントロール**：`bricks.FormBase`
|
||
|
||
## 初期化パラメータ
|
||
|
||
| パラメータ名 | 型 | 説明 |
|
||
|--------|------|------|
|
||
| `title` | 文字列 | 任意。フォームのタイトル。大きな文字で表示されます。 |
|
||
| `description` | 文字列 | 任意。フォームの説明文。タイトルの下に表示されます。 |
|
||
| `fields` | 配列 | 必須。フィールド設定リスト。構造は InlineForm と同じです。 |
|
||
| `submit_url` | 文字列 | 任意。フォーム送信先の URL。設定すると自動的に HTTP リクエストが送信されます。 |
|
||
| `method` | 文字列 | 任意。HTTP メソッド。デフォルトは `'POST'`。 |
|
||
| `notoolbar` | 真偽値 | 任意。デフォルトは `false`。デフォルトのツールバー（送信/リセット/キャンセル）を非表示にするかどうか。 |
|
||
| `toolbar` | オブジェクト | 任意。デフォルトツールバーの拡張または置き換え設定。構造は `{ tools: [...] }`。 |
|
||
| `input_layout` | 文字列 | 任意。入力フィールドのレイアウト方式。`"VBox"`（垂直）または `"HBox"`（水平）をサポート。デフォルトは `"VBox"`。 |
|
||
| `dataurl` | 文字列 | （予約）初期データ読み込み用のインターフェースアドレス（現時点では直接使用されていません）。 |
|
||
|
||
## 主要イベント
|
||
|
||
| イベント名 | 発火条件 | コールバック引数 |
|
||
|--------|----------|---------|
|
||
| `submit(data)` | フォーム送信前に検証通過後に発火。データの中断や前処理に利用可能。 | `data`: 送信されるデータオブジェクトまたは FormData。 |
|
||
| `submited(resp)` | `submit_url` へのリクエスト送信完了後に発火。 | `resp`: Response オブジェクト。レスポンス結果の処理に利用可能。 |
|
||
| `cancel` | ユーザーが「キャンセル」ボタンをクリックしたときに発火。 | 引数なし。 |
|
||
| `reset` | ユーザーが「リセット」ボタンをクリックしたときに発火。 | 引数なし。 |
|
||
| カスタムイベント | ツールバー内のカスタムボタンがクリックされ、`action` またはイベント名が定義されている場合に発火。 | `event.params` にボタンのメタデータが含まれます。 |
|
||
|
||
---
|
||
|
||
# FormBody
|
||
|
||
**コントロール機能**：`Form` 内部で使用される本体コンテンツ領域。すべての非テキストフィールド（`FieldGroup` 経由）とテキストフィールド（読み取り専用表示）をレンダリングし、実際の入力エリアを保持するコンテナです。
|
||
**タイプ**：コンテナーコントロール
|
||
**親クラスコントロール**：`bricks.VScrollPanel`
|
||
|
||
## 初期化パラメータ
|
||
|
||
| パラメータ名 | 型 | 説明 |
|
||
|--------|------|------|
|
||
| `form` | オブジェクト | 所属するフォームインスタンス。フィールド定義や name_inputs などの状態にアクセスするために使用。 |
|
||
| `opts` | オブジェクト | 設定項目。自動的に `width: '100%'`、`height: '100%'` が設定されます。 |
|
||
|
||
> 注：このコントロールは通常、開発者が直接作成するものではなく、`Form` の構築過程で内部的にインスタンス化されます。
|
||
|
||
## 主要イベント
|
||
|
||
このコントロール自体は外部へイベントを発行しませんが、コンテナーとして `VScrollPanel` のスクロール関連機能を継承しており、主に視覚的な表示に使用されます。
|
||
|
||
- 業務イベントを主動的に発火させません。
|
||
- 子コントロール（例：入力フィールド）の変更は上位の `Form` の状態に影響を与えます。
|
||
|
||
---
|
||
|
||
# FieldGroup
|
||
|
||
**コントロール機能**：補助クラス。フォーム内のフィールドグループ（入れ子の group 構造も可）を再帰的に構築するためのもので、フィールドをレイアウトルールに従って動的列（DynamicColumn）や入力コンテナ（VBox/HBox）に組織化します。
|
||
**タイプ**：通常コントロール（ロジックコンポーネント）
|
||
**親クラスコントロール**：なし（基本クラス）
|
||
|
||
## 初期化パラメータ
|
||
|
||
| パラメータ名 | 型 | 説明 |
|
||
|--------|------|------|
|
||
| `opts` | オブジェクト | 現在は実際には使用されていません。将来の拡張性のために保持されています。 |
|
||
|
||
> 注：このクラスは UI コントロールではなく、DOM を直接レンダリングしません。構築ロジックモジュールとしてのみ存在します。
|
||
|
||
## 主要イベント
|
||
|
||
このクラスにはイベント機構はなく、同期メソッド呼び出しにのみサービスを提供します：
|
||
|
||
- `build_fields(form, parent, fields)`：核心メソッド。再帰的にフィールドUIを生成し、指定された親コンテナにマウントします。
|
||
|
||
---
|
||
|
||
> ✅ **説明まとめ**：
|
||
>
|
||
> - `InlineForm` と `Form` はユーザーが直接使用できるフォームコントロールです。
|
||
> - `FormBody` と `FieldGroup` は内部実装コンポーネントであり、通常は個別にドキュメント化して使用する必要はありません。
|
||
> - すべてのフォームコントロールは、統一されたデータ収集、検証、送信プロセスを共有しています。
|
||
> - ファイル型フィールド（file/audio/video）は、`FormData` を使用することで自動認識されます。
|
||
> - ツールバーは高度なカスタマイズ拡張をサポートしています。 |