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

「図page-designer-overview.pngの説明」

ヒント:
「コンポーネント」、「データ」、「構造」または「プロパティ」タブをクリックすると、これらのペインの表示と非表示を切り替えることができます。ページを設計するには、コンポーネント・パレットからキャンバスにコンポーネントをドラッグします。 コンポーネントを追加すると、構造ビューには、キャンバス上のコンポーネントの階層ビューが表示されます。 プロパティ・ペインを使用して、コンポーネントのプロパティを表示または編集したり、選択したコンポーネントで使用できるクイック・スタートを開きます。
コンポーネントを右クリックすると、ポップアップ・メニューが開き、親コンポーネントの選択、他のコンポーネントや要素との関連、削除など、コンポーネントに対して複数のアクションを実行できます。 選択したコンポーネントの前、内部、または後にコンポーネントを挿入することもできます。
「
図insert-component.pngの説明」
キャンバスまたは構造ビューの両方で、コンポーネントを選択せずに右クリック(またはコンテキスト)メニューを表示することもできます。 コンポーネントが選択されていない場合、メニュー内のオプションは異なります。
| ツールバー・アイテム | 説明 |
|---|---|
| ページをリロード | |
| ページの入力パラメータを入力するためのダイアログ・ボックスを開きます。 | |
| ライブ・モードでページをプレビューするときに使用されるユーザー・ロールを選択するためのダイアログを開きます。 | |
| キャンバスが表す画面サイズを選択するためのメニューを開きます。 このメニューには、キャンバスのサイズを変更するデフォルトの「キャンバスに合わせる」オプションが含まれており、左ペインと右ペイン間の使用可能な領域を常に占有します。 「カスタム」オプションを使用してビューポート解決の最小値と最大値を設定し、キャンバスを任意のサイズに変更できます。 | |
| インポートされたモバイル・アプリの場合、モバイル・デバイスのベゼル(デバイスの画面とそのフレームの間のボーダー)を表示または非表示にします。 | |
| キャンバスの倍率を変更するためのダイアログ・ボックスを開きます。 | |
ライブ、デザイン、コードの各モードを切り替えます:
コンポーネント・パレット、構造ビュー、およびプロパティ・ペインは、各モードでも同じ方法で使用できます。 あるモードでアイテムを選択した場合、別のモードに切り替えると、そのアイテムは選択されたままになります。 たとえば、デザイン・モードからコード・モードに切り替えると、キャンバスで選択されたコンポーネントのソース・コードがコード・エディタで強調表示されます。 すべてのモードが同期されるため、プロパティ・ペインまたは構造ビューで行った変更は、別のモードに切り替えると表示されます。 ヒント: Ctrlキー(MacではCmd)を保持して、「ライブ」モードと「設計」モードを一時的に切り替えます。 カーソルがキャンバス上にあることを確認し、Ctrlキーを保持します。 たとえば、Ctrlキーを押しながらキャンバス上のメニューをクリックするだけで、ドロップダウン・メニューの値を確認できます。 |
|
|
キャンバスの下部(ツールバーにはない)で、ページ構造での配置を示すために、選択したコンポーネントのリンクの階層リストを表示するブレッドクラム・パス。 ブレッドクラム・パスのリンクをクリックすると、キャンバスおよび構造ビューでそのコンポーネントが選択され、プロパティ・ペインでその詳細を表示できます。 (デフォルトで表示される)ブレッドクラムを非表示にするには、コンテキスト・メニューで「ブレッドクラムの非表示」を選択します。 |
|
ページのレンダリングに要した時間を表示し、キャンバスに表示します。 アイコンをクリックすると、次の例に示すように、ページを表示するために様々なタスク(ブートストラップ、シェル・ページのロードなど)にかかる時間の内訳が表示されます: ![]() レンダリングはランタイム実行モードで実行され、ページ・デザイナがページの表示に必要なリソースを提供します。 各リソースはランタイム初期化の異なるフェーズでリクエストされるため、これらのリソース・リクエスト間の時間は測定および要約されます。 したがって、この情報は、アプリケーションのロードが遅くなる可能性のある実行時の問題を分離するのに役立ちます。 たとえば、RESTコールが長いためにページの時間がかかる場合は、コールを延期するか、並行して実行するかを決定できます。 ページにランタイム・エラーが含まれている場合は、かわりにエラー・メッセージが表示されます。 メッセージをクリックしてエラーの詳細を取得し、ページが正しくレンダリングされるように解決します。 |
