ページへのコンポーネントの追加

コンポーネントは、通常、ページ・デザイナのコンポーネント・パレットからドラッグし、キャンバスまたは構造ビューにドロップしてページに追加します。コンポーネントをページに追加した後、そのプロパティを設定し、スタイルを適用できます。

コンポーネント・パレットには、動的コンポーネントを含め、ページに追加できるOracle JETコンポーネントの広範なリストが含まれています。動的コンポーネントは、ユーザー独自のルールに基づいてユーザーに表示される内容を動的に変更するUIの開発に役立つため、これらを使用する際にはlayoutsおよび「ロジックの表示」も含まれます。「動的コンポーネントをページに追加」を参照してください。

Visual Builderでは、ユーザー・エクスペリエンスのためのOracle標準に基づいてRedwoodリソースにアクセスすることもできます。「Redwoodパターンを使用したページの作成」の場合、そのパターンのコンポーネントは、ページのコンポーネント・パレットで使用可能になります。また、ボタンなどの単一のUI要素から、バックエンド・サービス(フォームなど)に接続された複雑なモジュールまで、リッチなユーザー・エクスペリエンスを提供する個々のRedwoodコンポーネントにアクセスすることもできますが、ページで使用する前に、コンポーネント交換からインストールする必要があります。

ノート:

次世代のJETコンポーネント(コア・パック・コンポーネント)を使用する場合は、「早期アクセス」カテゴリで「コンポーネント」パレットに表示するオプションできます。コア・パック・コンポーネントは、パフォーマンスを向上させることができるが、テーマ化をサポートしない新しい実装を提供します。アプリのページでこれらのコンポーネントを使用すると、アプリをテーマにすることはできません。テーマを適用する唯一の方法は、コア・パック・コンポーネントの使用状況をレガシー・コンポーネントにロールバックし、アプリケーションを再実装することです。アプリのページでCore Packコンポーネントを使用する前に、この制限に注意してください。

ページでRedwoodコンポーネントを使用する場合は、次のステップに従います:
1. Redwoodコンポーネント・ライブラリを確認し、ページで使用する内容に注意してください。
2. ナビゲータでコンポーネント・タブ()を開きます。
3. 「ブラウズ」タブを選択し、使用するコンポーネントを検索します。たとえば、"レッド・ウッド入力電話\を使用して電話番号の入力コンポーネントを検索できます:
  
  図redwood-browse.pngの説明
  
  コンポーネントをダブルクリックしてキャンバス領域で開き、その詳細を確認できます。
4. 「インストール」 (またはキャンバスの「コンポーネントのインストール」)をクリックします。
  
  コンポーネントをインストールすると、そのコンポーネントはページのコンポーネント・パレットで使用可能になります。単にフィルタしてコンポーネントを検索します。
ページ・デザイナで、操作するページを開きます。

ページ・デザイナでページを開くと、ページのレイアウトの表示に使用するキャンバス、コンポーネントのリストを含むコンポーネント・パレット、およびページのコンポーネントの構造ビューを表示する構造ビューが表示されます。主にこれらを使用して作業しますが、データ・パレットに切り替えて、Visual Builderで提示されたコンポーネントにデータを表示できます。
コンポーネント・パレットからコンポーネントをドラッグし、キャンバスまたは構造ビューの位置にドロップします。「構造」ビューでコンポーネントの検索、選択および配置が簡単になる場合があります:

図page-designer-component-add-designmode.pngの説明

コンポーネント・パレット内の要素はタイプ別に編成されます。それぞれのタイプには、キャンバス上でどこで使用できるかを決定するルールと、配置可能なページのタイプがあります。コンポーネントが許可されていないキャンバスにコンポーネントを配置しようとすると、エラー・メッセージが表示されます。

ヒント:
コンテキスト・メニューの「コンポーネントの挿入」をクリックして、コンポーネントを追加することもできます。このオプションは、キャンバス上の任意の場所や構造ビューで、コンポーネントが選択されているときと、コンポーネントが選択されていないときに使用できます。特に複雑なレイアウトでは、構造ビューでコンポーネントを追加する位置に正確に配置する場合に便利です。選択したコンポーネントでこのオプションを選択すると、選択したコンポーネントの前、内部または後にコンポーネントを追加できます。選択したコンポーネントに複数のスロットがある場合は、次に示すように、コンポーネントを特定のスロットにドロップできます:

「図insert-component-structure-view.pngの説明」

コンポーネントを追加した後、コンポーネントの選択時にプロパティ・ペインに表示されるプロパティを編集することで、コンポーネントの動作を定義できます。コンポーネント・プロパティは、プロパティ・ペインのタブに編成されています。コンポーネント・タイプによって、表示されるタブが決まります。

コンポーネント・プロパティ	説明
一般	レイアウトやスタイルなど、選択したコンポーネントの最も重要なプロパティが含まれます。親コンポーネント・スロット内のコンポーネントのスロット値もここに表示されます。スロットに追加されたサブコンポーネント(ボタン・アイコンなど)を選択し、スロット値を変更して`startIcon`スロットから`endIcon`スロットに移動します。これにより、HTMLコードにアクセスせずに、削除されたコンポーネントのスロットを変更できます。サブコンポーネントによって使用されるスロットは、サブコンポーネントのすべてタブにも表示され、そこで変更できます(変数にバインドする場合など)。
データ	データにバインドされるべきプロパティが含まれます。「一般的な」タブおよびAllタブには、変数や式にバインドできるプロパティも含まれています。「コンポーネントをデータにバインド」を参照してください。
イベント	コンポーネントのイベントをバインドして、動作を定義するアクション・チェーンをトリガーするために使用されます(たとえば、ボタンがクリックされたときにURLをオープンする場合)。「コンポーネントからのアクション・チェーンの起動」を参照してください。
すべて	より高度なコンポーネント・プロパティが含まれ、カスタム・プロパティを含むすべてのプロパティが表示されます。カスタム・プロパティは、`data-` *属性などのコンポーネント・メタデータで定義されていないプロパティであり、一般属性の横にある+をクリックして追加できます。
クイック・スタート	コンポーネントで使用可能なクイック・スタート・ウィザードのリストが含まれます。表やリストなどのコレクション・コンポーネントを追加すると、このタブにはウィザードのリストが表示され、コレクションのデータへのマッピング、および作成および詳細ページの追加など、通常はコンポーネントに関連付けられているアクションを追加する際に役立ちます。