機械翻訳について

ページ・デザイナの使用

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

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

ページ・デザイナには、ページを操作するための様々な方法が用意されています。 具体的には、次のことができます。

• 「コンポーネント」パレットを使用して、コンポーネントをページにドラッグ・アンド・ドロップ
• 「構造」ビューで、階層的なパースペクティブからコンポーネントを操作
• 「データ」パレットを使用して、データから開始し、ユーザー・インタフェースでデータを表す方法を決定
• 「プロパティ」ペインを使用して、キャンバスで現在選択されているものの外観と動作を制御するプロパティを表示および更新します。

これらのパネルのいずれかを右クリックして、コンポーネント、データ、構造およびプロパティ・パネルの位置を変更できるメニューを開きます。 各パネルは、キャンバスの左上、左下、右上または右下に移動できます(構造ビューについては、次を参照):

ヒント:

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

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

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

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

ページ・デザイナの上部には、ページ・デザイナ自体を構成できるツールバーがあります:

ツールバー・アイテム	説明
	ページをリロード
	ページの入力パラメータを入力するためのダイアログ・ボックスを開きます。
	ライブ・ビューでページをプレビューするときに使用するユーザー・ロールを選択するためのダイアログを開きます。
	キャンバスが表す画面サイズを選択するためのメニューを開きます。 このメニューには、キャンバスのサイズを変更するデフォルトの「キャンバスに合わせる」オプションが含まれており、左ペインと右ペイン間の使用可能な領域を常に占有します。 ビューポート解像度の最小値と最大値を設定し、キャンバスのサイズを必要なサイズ(600x900など)に変更することもできます:
	キャンバスの倍率を変更するためのダイアログ・ボックスを開きます。
	「ライブ」、「デザイン」および「コード」ビューを切り替えます: ライブ: パブリッシュ時に表示および動作するページを表示します。 ライブ・ビューを使用して、コンポーネントをクリックしてその動作を確認できる対話モードに切り替えます。たとえば、フォームにデータを入力し、ユーザーが行うように送信すると、変更が有効になります。 ライブ・ビューでは、必要なコンテキストが欠落している場合でも、アプリケーション・コードを微調整してページをレンダリングすることもできます。 「ビジュアル・アプリケーションのプレビュー」を参照してください。 設計: ページにコンポーネントを配置および配置するために使用するキャンバス領域が含まれます。 これは、最も頻繁に使用するモードです。 コード: ページのコードを編集する場合に使用します。 コード・ビューでは、コンポーネント・パレットからコンポーネントをドラッグし、エディタのコード内の有効な場所に直接ドロップできます。 構造ビューを使用してエレメントを編集および再配置すると、変更内容がコードに自動的に反映されます。 「コンポーネント」パレット、「構造」ビューおよび「プロパティ」ペインは、「ライブ」、「デザイン」および「コード」ビューでも同じ方法で使用できます。 あるビューで項目を選択すると、別のビューに切り替えると、その項目は選択されたままになります。 「デザイン」ビューから「コード」ビューに切り替えると(たとえば)、キャンバスで選択したコンポーネントのソース・コードがコード・エディタで強調表示されます。 すべてのビューが同期されるため、「プロパティ」ペインまたは「構造」ビューで行った変更は、別のビューに切り替えると表示されます。 ヒント: Ctrlキー(Macでは「コマンド」)を保持して、「ライブ」ビューと「設計」ビューを一時的に切り替えます。 カーソルがキャンバス上にあることを確認し、Ctrlキーを保持します。 たとえば、Ctrlキーを押しながらキャンバス上のメニューをクリックするだけで、ドロップダウン・メニューの値を確認できます。
	キャンバスの下部(ツールバーではなく)に、選択したコンポーネントのリンクの階層リストがブレッドクラム・パスに表示され、ページの構造内での配置が示されます。 ... (ブレッドクラム・パスの最後のリンク)にマウス・ポインタを重ねると、コンポーネントの子に移動します。 コンポーネントの兄弟を表示して切り替えることもできます: ブレッドクラム・パスのリンクにマウス・ポインタを重ねてから、切り替えるコンポーネントをメニューから選択します: ブレッドクラム・パスでコンポーネントをクリックすると、キャンバスおよび「構造」ビューでそのコンポーネントが選択され、「プロパティ」ペインにその詳細を表示できます。 (デフォルトで表示される)ブレッドクラムを非表示にするには、コンテキスト・メニューで「ブレッドクラムの非表示」を選択します。
	ページのレンダリングに要した時間を表示し、キャンバスに表示します。 アイコンをクリックすると、次の例に示すように、ページを表示するために様々なタスク(ブートストラップ、シェル・ページのロードなど)にかかる時間の内訳が表示されます: レンダリングはランタイム実行モードで実行され、ページ・デザイナがページの表示に必要なリソースを提供します。 各リソースはランタイム初期化の異なるフェーズでリクエストされるため、これらのリソース・リクエスト間の時間は測定および要約されます。 したがって、この情報は、アプリケーションのロードが遅くなる可能性のある実行時の問題を分離するのに役立ちます。 たとえば、RESTコールが長いためにページの時間がかかる場合は、コールを延期するか、並行して実行するかを決定できます。 ページにランタイム・エラーが含まれている場合は、かわりにエラー・メッセージが表示されます。 メッセージをクリックしてエラーの詳細を取得し、ページが正しくレンダリングされるように解決します。