AI + フォーム可視化編集
可視化編集は VJSP のコア機能の一つで、*.html フォームファイルに対して WYSIWYG（What You See Is What You Get）のインタラクティブなデザインをサポートします。開発者は HTML コードを記述または修正することなく、IDE 内でフォームの構造、スタイル、動作をリアルタイムで調整できます。
一、機能概要
可視化編集は VJSP のコア機能の一つで、以下を含みます：
🖱️ ドラッグアンドドロップレイアウト：フィールドの位置と順序を自由に調整
⚙️ 属性クイック設定：コントロール名、プレースホルダー、デフォルト値、必須チェックなどのルールを設定
🔗 イベントとロジックバインディング：クリック、入力、値変更などのインタラクティブな動作を設定
🎨 複数レイアウトモード：レスポンシブ、テーブル、自由レイアウトなど、さまざまなレイアウト方法をサポート
🔁 自動同期：すべての視覚的変更がリアルタイムで標準 HTML に変換され、ソースファイルに書き戻されます
すべての *.html タイプのフォームファイルに適用され、頻繁に反復が必要なビジネスシナリオに特に適しています。
二、操作フロー
ステップ 1：フォームファイルを準備（オプション）
新機能開発の場合：AI を使用して VJSP 仕様に準拠した初期フォームを生成できます（例：「顧客承認フォームを生成」と入力）
既存フォームの最適化の場合：追加操作なしで次のステップに進みます
ステップ 2：ターゲットフォームファイルを特定
IDE のリソースマネージャーで、プロジェクト内のターゲット HTML フォームファイル（例：approve.html）を見つけ、選択します。
✅ 例のパス：
src/main/resources/static/vjsphtml/modules/customer/approve.html
ステップ 3：可視化編集を開始
ファイルを右クリックし、コンテキストメニューから「フォームを編集」オプションを選択します。
システムは自動的にフォームコンテンツをロードし、組み込みの可視化編集パネルを開きます。
ステップ 4：フォーム構造とスタイルを調整
編集インターフェースに入ると、以下の機能エリアを使用して操作できます：
| エリア | 機能説明 |
|---|---|
| デザインエリア | フォームのレンダリング効果をリアルタイムで表示し、ズーム、スクロール、要素選択をサポート |
| コンポーネントライブラリ | 入力ボックス、ドロップダウン選択、日付コントロール、ボタンなどの一般的な UI 要素を提供 |
| 属性パネル | 選択したコントロールの名前、プレースホルダー、デフォルト値、必須チェックなどの属性を設定 |
| イベントパネル | クリック、入力、変更などのインタラクティブな動作をバインド |
| スタイル設定 | 幅、配置、余白などの基本的なスタイルを調整 |
以下の操作が可能です：
任意のフィールドをクリックして属性を変更
コントロールをドラッグしてレイアウトを再配置
コンポーネントライブラリから新しい要素を追加
ステップ 5：保存してコードを同期
編集が完了したら、上部ツールバーの「保存」ボタンをクリックします。システムはすべての視覚的調整を標準 HTML 構造に自動変換し、元のファイルに書き戻し、コードとデザインが完全に一致するようにします。
可視化ツール-フォームプレビュー/実行操作
プロジェクトファイルリストで、プレビューが必要な HTML フォームファイルを見つけ、右クリックして「フォームを編集」オプションを選択します。システムは自動的にフォームプレビューウィンドウを開き、フォームのページスタイル、インタラクティブな効果、フィールドレイアウトをリアルタイムで表示し、開発者が迅速にフォームデザインを調整できるようにします。
エディタ内クイックコール
IDE コードエディタでターゲットコードスニペットを選択し、右クリックして「VJSP」メニューを選択すると、プラグインのコア機能を迅速に呼び出すことができます。操作をトリガーすると、AI は選択されたコードコンテキストに基づいてリアルタイムで応答し、エディタの横に処理結果を直接ポップアップ表示し、インターフェースの切り替えコストを削減します。 