機械翻訳について

ページ・デザイナの使用

デザイナには複数のエディタを使用できますが、最も頻繁に使用するエディタはページ・デザイナです。 ページ・デザイナを開くには、ナビゲータのWebアプリケーション(または「モバイル・アプリ)」ペイン)でページをクリックします:


page-designer-overview.pngの説明は以下のとおりです
「図page-designer-overview.pngの説明」
ページ・デザイナには、ページを操作するための様々な方法が用意されています。 具体的には、次のことができます。
  • コンポーネントパレットを使用して、コンポーネントをページにドラッグ・アンド・ドロップ
  • 構造ビューで、階層的なパースペクティブからコンポーネントを操作
  • データパレットを使用して、データから開始し、ユーザー・インタフェースでデータを表す方法を決定
  • プロパティペインを使用して、キャンバスで現在選択されているものの外観と動作を制御するプロパティを表示および更新します。
これらのパネルのいずれかを右クリックして、コンポーネント、データ、構造およびプロパティ・パネルの位置を変更できるメニューを開きます。 各パネルは、キャンバスの左上、左下、右上または右下に移動できます(構造ビューについては、次を参照):
パネルの右クリック・メニュー

ヒント:

「コンポーネント」「データ」「構造」または「プロパティ」タブをクリックすると、これらのペインの表示と非表示を切り替えることができます。

ページを設計するには、コンポーネント・パレットからキャンバスにコンポーネントをドラッグします。 コンポーネントを追加すると、構造ビューには、キャンバス上のコンポーネントの階層ビューが表示されます。 プロパティ・ペインを使用して、コンポーネントのプロパティを表示または編集したり、選択したコンポーネントで使用できるクイック・スタートを開きます。

コンポーネントを右クリックすると、ポップアップ・メニューが開き、親コンポーネントの選択、他のコンポーネントや要素との関連、削除など、コンポーネントに対して複数のアクションを実行できます。 選択したコンポーネントの前、内部、または後にコンポーネントを挿入することもできます。
insert-component.pngの説明は以下のとおりです
図insert-component.pngの説明

キャンバスまたは構造ビューの両方で、コンポーネントを選択せずに右クリック(またはコンテキスト)メニューを表示することもできます。 コンポーネントが選択されていない場合、メニュー内のオプションは異なります。

ページ・デザイナの上部には、ページ・デザイナ自体を構成できるツールバーがあります:
ツールバー・アイテム 説明
リロード・ページ・アイコン ページをリロード
ページ入力パラメータ・アイコン ページの入力パラメータを入力するためのダイアログ・ボックスを開きます。
Who Am Iアイコン ライブ・モードでページをプレビューするときに使用されるユーザー・ロールを選択するためのダイアログを開きます。
デバイス・セレクタ・アイコン キャンバスが表す画面サイズを選択するためのメニューを開きます。 このメニューには、キャンバスのサイズを変更するデフォルトの「キャンバスに合わせる」オプションが含まれており、左ペインと右ペイン間の使用可能な領域を常に占有します。 「カスタム」オプションを使用してビューポート解決の最小値と最大値を設定し、キャンバスを任意のサイズに変更できます。
ベゼルの表示/非表示アイコン インポートされたモバイル・アプリの場合、モバイル・デバイスのベゼル(デバイスの画面とそのフレームの間のボーダー)を表示または非表示にします。
ズーム・キャンバス・アイコン キャンバスの倍率を変更するためのダイアログ・ボックスを開きます。
Live/Design/Codeトグル・アイコン ライブ、デザイン、コードの各モードを切り替えます:
  • ライブ・モード: ページが公開されたときと同じように表示され、動作します。 ライブ・モードを使用して、アプリケーション内のページと対話し、様々なページに移動したり、ビジネス・オブジェクトを作成および変更したり、アプリケーションが期待どおりに動作することを確認します。

  • 設計モード: ページへのコンポーネントの配置および配置に使用するキャンバス領域が含まれます。 これは、最も頻繁に使用するモードです。

  • コード・モード: ページ・コードを編集するために使用します。 コード・モードでは、コンポーネント・パレットからコンポーネントをドラッグして、エディタのコード内の有効な場所に直接ドロップできます。 構造ビューを使用してエレメントを編集および再配置すると、変更内容がコードに自動的に反映されます。

コンポーネント・パレット、構造ビュー、およびプロパティ・ペインは、各モードでも同じ方法で使用できます。 あるモードでアイテムを選択した場合、別のモードに切り替えると、そのアイテムは選択されたままになります。 たとえば、デザイン・モードからコード・モードに切り替えると、キャンバスで選択されたコンポーネントのソース・コードがコード・エディタで強調表示されます。 すべてのモードが同期されるため、プロパティ・ペインまたは構造ビューで行った変更は、別のモードに切り替えると表示されます。

ヒント:

Ctrlキー(MacではCmd)を保持して、「ライブ」モードと「設計」モードを一時的に切り替えます。 カーソルがキャンバス上にあることを確認し、Ctrlキーを保持します。 たとえば、Ctrlキーを押しながらキャンバス上のメニューをクリックするだけで、ドロップダウン・メニューの値を確認できます。

ブレッドクラム・パスの例

キャンバスの下部(ツールバーにはない)で、ページ構造での配置を示すために、選択したコンポーネントのリンクの階層リストを表示するブレッドクラム・パス。 ブレッドクラム・パスのリンクをクリックすると、キャンバスおよび構造ビューでそのコンポーネントが選択され、プロパティ・ペインでその詳細を表示できます。 (デフォルトで表示される)ブレッドクラムを非表示にするには、コンテキスト・メニューで「ブレッドクラムの非表示」を選択します。

Loading Timeアイコン ページのレンダリングに要した時間を表示し、キャンバスに表示します。 アイコンをクリックすると、次の例に示すように、ページを表示するために様々なタスク(ブートストラップ、シェル・ページのロードなど)にかかる時間の内訳が表示されます:
ページのレンダリングにとられるタスクの内訳

レンダリングはランタイム実行モードで実行され、ページ・デザイナがページの表示に必要なリソースを提供します。 各リソースはランタイム初期化の異なるフェーズでリクエストされるため、これらのリソース・リクエスト間の時間は測定および要約されます。 したがって、この情報は、アプリケーションのロードが遅くなる可能性のある実行時の問題を分離するのに役立ちます。 たとえば、RESTコールが長いためにページの時間がかかる場合は、コールを延期するか、並行して実行するかを決定できます。

ページにランタイム・エラーが含まれている場合は、かわりにエラー・メッセージが表示されます。 メッセージをクリックしてエラーの詳細を取得し、ページが正しくレンダリングされるように解決します。