デザイナのツアー
「ビジュアル・アプリケーション」は、「あなたの」ビジュアル・アプリケーション内でアプリケーションを設計および開発するために使用する宣言環境であるデザイナへのチケットです。
デザイナには、次の5つの領域があります(このイメージで強調表示されています):
図newvisapp.pngの説明
| ラベル | 要素 |
|---|---|
| 1 | ヘッダー |
| 2 | ナビゲータ |
| 3 | Canvas/Editors |
| 4 | 「プロパティ」ペイン |
| 5 | フッター |
これらの各領域を見て、それぞれの機能について詳しく説明します。
XMLヘッダー
| Label/Icon | 要素 | 説明 |
|---|---|---|
 |
メイン・メニューの切替え | サイド・パネルを開き、「すべてのアプリケーション」を選択してホーム・ページに移動できます。 管理者の場合は、「設定」および「証明書」を管理するための追加オプションが表示されます。  をクリックして、Oracle Integrationのホーム・ページに移動することもできます。 |
| MyFirstVisualApp | ビジュアル・アプリケーション名 | 作業中のビジュアル・アプリケーションの名前。 |
| 開発、ステージ、またはライブ | ステータス・インディケータ | ビジュアル・アプリケーションのステータス。 |
| 1.0 | バージョン | ビジュアル・アプリケーションのバージョン。 |
 |
元に戻す | 1つ以上の変更を元に戻します。 最新の変更を元に戻すには、「元に戻す」をクリックします(アイコンの上にカーソルを置くと、元に戻すアクションが表示されます)。 複数の変更を元に戻すには、元に戻すドロップダウン・リストをクリックし、元に戻す処理を選択します。 たとえば、このイメージで見出しの挿入アクションを選択すると、見出しが削除され、見出しの追加後に加えたその他の変更が元に戻されます: ヒント: 一度に最大10の変更を元に戻すことができます(最後の500アクションはブラウザに保存され、キャッシュをクリアすると失われます)。 10個を超えるアクションを元に戻すには、いくつかのアイテムを元に戻してから、ドロップダウン・リストを再度開きます。 |
 |
再実行 | 元に戻した1つ以上の変更をやり直します。 最新の変更を再実行するには、「やり直し」をクリックします(アイコンの上にカーソルを置くと、再実行するアクションが表示されます)。 複数の変更をやり直すには、やり直しドロップダウン・リストをクリックし、やり直すアクションを選択します。 たとえば、このイメージで見出しの設定アクションを選択すると、以前に取り消された2つのアクションが元に戻されます: |
 |
Git | ビジュアル・アプリケーションをGitリポジトリと統合します。 |
 |
「File」に移動します | applicationのソースをファイル名で検索します。 最初に「ファイルに移動」をクリックすると、最近使用したファイルが表示されます。 探しているファイルがリストに表示されない場合は、検索ボックスに名前を入力し始め、検索候補で目的のファイルを選択します。 |
 |
通知 | 過去2日間に受信した通知を表示します。 注意を喚起するために、通知はウィンドウの右下隅に即座にポップアップ表示されます。ここでは、情報、確認および警告メッセージは5秒後に自動的にクリアされますが、エラー・メッセージは手動でクリアされるまで保持されます。 通知がないか、再度確認する場合は、ヘッダーの「通知」をクリックして、過去2日間のすべての通知を表示します。 2日より古い通知は自動的にクリアされます。または、「すべてクリア」をクリックしてクリアすることもできます。
未読通知を取得すると、受信した通知のタイプに応じて「通知」アイコンがバッジ管理されます。 欠落した情報、確認および警告メッセージは、青い点 |
 |
プレビュー | 「プレビュー」アイコンを使用してアプリケーションをテストし、ページの外観と動作、特にページ間のナビゲーション、および外部ページへのリンクを確認します。 プレビューでは、新しいブラウザ・タブにアプリが開き、ページ・デザイナのライブ・ビューを使用する場合よりも正確に公開した場合のアプリの動作が表示されます。 「ビジュアル・アプリケーションのプレビュー」を参照してください。
通常はプレビュー・モードを使用しますが、デバッグ・プレビュー・モードを使用してアプリケーションに関する問題をデバッグすることもできます。 「デバッグ・モードでのアプリケーションのプレビュー」を参照してください。 |
 |
メニュー | 共有、インポートおよびエクスポート・アクションを含むメニューと、設定エディタを開くオプションを開きます。 Visual Builderヘルプ・センターおよびディスカッション・フォーラムに移動することもできます。 |
でバッジ管理されます。欠落したエラー・メッセージは、赤い点
でバッジ管理されます。ナビゲータ
| アイコン | 要素 | 説明 |
|---|---|---|
 |
Webアプリケーション | ここでは、次のことを行います:
|
 |
サービス |
ビジュアル・アプリケーションで外部REST APIと対話するには、これらのAPIエンドポイントへのアクセスを提供するサービスへの接続を作成します。 また、Oracle Cloud ApplicationsやOracle Integrationなどのbackendsを使用して、事前定義済サービスのカタログにアクセスすることもできます。 たとえば、Oracle Cloudアプリケーション・バックエンドは、Human Capital Management、Salesなどから、ビジュアル・アプリケーションがすぐに使用できるREST APIを公開します。 このカタログにリストされていないサービスに接続することもできます。 「サービス接続の管理」を参照してください。 |
 |
ビジネス・オブジェクト | ビジネス・オブジェクトは、アプリケーションのビジネス・ロジックを実装するカスタム・データ・オブジェクトです。 ビジュアル・アプリケーションは、Visual Builderが生成するRESTエンドポイントを介して作成したビジネス・オブジェクトにアクセスして操作できます。 デフォルトでは、このデータは環境のVisual Builderインスタンスに関連付けられた埋込みデータベースに格納されます。 「ビジネス・オブジェクトの操作」を参照してください。 |
 |
レイアウト | レイアウトは、1つ以上の関連動的コンポーネント(表やフォームなど)に表示されるデータ・フィールドのセットを表します。 ここで新規レイアウトを作成するには、データ・ソースを選択し、そのデータの外観と動作を制御するルール・セットを定義します。 「動的コンポーネントでレイアウトを作成する方法」を参照してください。 |
 |
コンポーネント | 「コンポーネント」タブでは、コンポーネント交換からダウンロードするカスタムwebコンポーネント(Visual Builderインスタンスにインストールできるコンポーネントのリポジトリ)をインストールおよび管理できます。 「コンポーネント交換の使用」を参照してください。 |
 |
ソース | Designerは主にビジュアル・エディタですが、必要に応じてソース・コードを操作できます。 「コードの処理」を参照してください。 |
キャンバス/エディタ
ページを開いたときにナビゲータの右側に表示されるキャンバスは、Visual Builderで作業の大部分を実行する場所です。 ページを開くと、ページ・デザイナ、アクション、イベント・リスナーなど、ページで使用されるアーティファクトを変更および作成しやすいように、上部に様々なエディタが表示されます: 
図canvas-editors.pngの説明
カスタマイズまたは構築するページのどの側面に応じて、Visual Builderは適切なエディタを起動して必要なエクスペリエンスを提供し、そのエディタをキャンバスに表示します。 最も重要なエディタはページ・デザイナで、「ページ・デザイナの使用」で詳しく説明します。
エディタを介して行ったすべての変更(ページ・デザイナ、アクション、イベント・リスナーなど)は、JSONとして保存され、JSONペインの設定の横からアクセスできます。 また、JavaScriptペインを使用して、必要なカスタム関数を入力できます。 様々なエディタの詳細は、「使用するエディタ」を参照してください。
ヒント:
複数のアーティファクト(ページ、フロー、ビジネス・オブジェクトなど)を操作する場合、各アーティファクトはタブ・バーに個別のタブとして開きます。 作業領域でこれらをより適切に管理する方法を次に示します:- タブを右クリックして、特定のタブを閉じる、他のタブを閉じる、右側のタブを閉じる、またはすべてのタブを閉じるオプションを表示します。 このメニューを使用して、ナビゲータで特定のタブを選択することもできます:
タブ・バーの使用可能な領域がオーバーフローしている場合は、タブ・バーの端にある
をクリックし、開くタブを選択します。 アクティブなタブは常にフォーカスされていることに注意してください。
- タブ・バーの空のスペースを右クリックし、閉じたタブを再度開くオプションを選択します。 最近閉じたタブはセッション履歴に保存されます。そのため、開き直すまでタブを開いたままにできます。
プロパティ・ペイン
名前が示すように、プロパティ・ペインでは、キャンバスで現在選択されているものの外観と動作を制御するプロパティを指定できます。 変数エディタでは、たとえば、プロパティ・ペインを使用して変数のデフォルト値、タイプおよびその他の属性を設定します。 ページ・デザイナのページでコンポーネントをクリックすると、プロパティ・ペインが即時に更新され、コンポーネント・プロパティが反映されます。 コンポーネントによっては、プロパティ・ペインに、コンポーネントの属性またはその動作を変更するための追加のタブが表示される場合があります。
表やリストなどのコレクション・コンポーネントをキャンバスに追加すると、プロパティ・ペインに「クイックスタート」タブが追加されます:
図propertiespane.pngの説明
プロパティ・ペインを表示または非表示にするには、タブ自体をクリックします。
フッター
デザイナの下部には、ビジュアル・アプリケーションのデバッグに役立ついくつかのツールがあります:
| 要素 | 説明 |
|---|---|
| 監査 | ビジュアル・アプリケーションのコードでエラーおよび警告をスキャンします。 コードは、監査ペインを開くとスキャンされます。 「監査アプリケーション・コード」を参照してください。 |
| ファイル内を検索 | アプリケーションのGitリポジトリでテキスト文字列を検索します。 |
| ログ | ビジュアル・アプリケーションがステージングおよび公開されたときにビルド・ログを表示します。 「ビルドの問題のトラブルシューティング」を参照してください。
また、ロギングを有効にして、ビジネス・オブジェクトのルールを開発する際のデバッグを支援します。 「スクリプト・イベントのロギング使用可能」を参照してください。 |
| Tests | ビジュアル・アプリケーションでアクション・チェーンに定義されたすべてのテスト・ケースを実行し、それらを実行して、コード変更によって機能が破損していないことを確認します。 「ビジュアル・アプリケーションでのテスト・フッターの使用」を参照してください。 |
| トレース | ビジネス・オブジェクトのエンドポイント・リクエストのトレースを有効にして、パフォーマンス・ボトルネックを診断します。 「エンドポイント・コールを監視するためのトレースの有効化」を参照してください。 |
色テーマ
Visual Builderは、デフォルトでは、Redwoodに基づくライト・テーマを使用して、作業環境のカラー・パレットを設定します。 このテーマをパーソナライズして、ダーク・テーマに切り替えたり、OS設定と同期したりできます。
- Designerの右上隅にある「メニュー」をクリックします。
- テーマを選択し、オプションを選択します:
- 「暗い」を選択すると、低光条件に適した暗い色の表示が使用されます。 このオプションでは、ページ・デザイナ・キャンバスを除き、すべてのエディタで使用されるバックグラウンドとテキストが切り替わります。ページ・デザイナ・キャンバスでは、アプリケーション・ページは暗いテキストの明るいバックグラウンドに対して引き続き表示されます。
- 「OSデフォルト」を選択して、オペレーティング・システムの設定で使用されるテーマを継承します。 システム設定がダーク・モードを使用するように構成されている場合、デザイナもこれらの設定を使用します。
- デフォルトを変更した場合は、「明るい」を選択して、暗いテキスト表示で明るいバックグラウンドに戻ります。
アプリをユーザーに表示する方法を変更する場合は、アプリのテーマをカスタマイズして、暗いバックグラウンドにコンポーネントをレンダリングできます。ライトまたはダーク・テーマのいずれかをユーザーが選択することもできます。 「Webアプリの外観をカスタマイズ」を参照してください。