JSP/HTMLビジュアル・エディタ

アプリケーション・ナビゲータのJSP/HTMLファイル用のコンテキスト・メニュー次の選択「開く」(またはファイルをダブルクリック)

JSP/HTMLビジュアル・エディタはWYSIWYGツールで、JSPまたはHTMLページ・コンポーネントを作成して編集できます。ファイルをビジュアル・エディタで開くと、Webブラウザと同様に、ページはHTMLでレンダリングされ、Webフォーマットに関連付けられます。編集結果は即座に表示されます。

ビジュアル・エディタは、「構造」ウィンドウ、コンポーネント・パレット、プロパティ・インスペクタ、および「データ・コントロール」パネルに統合されており、単純なドラッグ・アンド・ドロップ操作を使用したデータバインドWebページのアセンブリをサポートしています。ビジュアル・エディタで加えられた変更は、ソース・コードにおいて自動的に更新されます。ビジュアル・エディタとソース・エディタを使用して、同時にWebページを編集できます。

モバイル対応JSPドキュメントの場合、選択したデバイス・カテゴリのビュー・ポートが設計ビューでエミュレートされます。ツールバーには、デバイス・カテゴリ・アイコンが参照デバイス・ドロップダウン・リストとともに表示されます。

ビジュアル・エディタでファイルを開くと、次の処理が行われます。

JSP/HTMLビジュアル・エディタ内の任意の場所を右クリックすると、コマンドのコンテキスト依存メニューが表示されます。

ビジュアル・エディタを使用してWebページを編集するときには、次の操作を実行できます。

JavaScript要素などの動的コンテンツを除き、ビジュアル・エディタにはすべてのWebページ要素がビジュアルに表示されるか、または構造的に表現されます。JSTLなどのJSPタグやBC4Jタグは、アイコン名とタグ名を使用してビジュアルにビジュアル・エディタに表示されます。一方、HTMLテンプレートのコンテンツはブラウザでの見た目どおりにレンダリングされます。ボディ・コンテンツが埋め込まれたタグのスコープは、影付きの四角形で囲まれたタグのアイコンと名前によって構造的に表現されます。タグ・コンテナはネストされて(構造的に)表示され、たとえば表内の繰り返し行などを表します。タグをクリックするとカーソルが現れ、タグ・コンテナにコンテンツを入力できます。

JSP/HTMLビジュアル・エディタのデザインタイム機能

JSP/HTMLビジュアル・エディタのツールバー

ページのリフレッシュ2種類のリフレッシュのタイプから選択できます。「リフレッシュ」ボタンからドロップダウン・メニューを選択します。

ページのリフレッシュ
「ページのリフレッシュ」は、ページの内部データ構造を再構築し、再度レンダリングします。このツールはインクルードされたページ(ページ・テンプレートなど)が変更され、このインクルードされたページでの効果を確認したい場合に使用します。

完全リフレッシュ
「完全リフレッシュ」を使用して、ページ・プロジェクトの内部デザインタイムを完全に再起動します。このとき、web.xmlのサーブレット・コンテキストとタグ・ライブラリが、またFacesプロジェクトの場合はfaces-config.xmlからのFacesコンテキストが再構築されます。「完全リフレッシュ」によって、アクティブなページの内部データ構造が再構築され、再度レンダリングされます。

コンポーネントのステータスの表示
コンポーネントのアクションおよびステータスに関するオプションを選択する場合に、このドロップダウン・リストを使用します。デフォルトの「コンポーネント・アクション」を選択すると、現在フォーカスが置かれているコンポーネントに対して矢印ドロップダウン・アイコンが表示されます。この矢印をクリックすると、そのコンポーネントに対して実行可能なアクション(非表示、再バインド、ページ定義への移動など)のリストが表示されます。「コンポーネント・ステータス」ドロップダウン・リストを使用すると、コンポーネントに警告不完全、またはエラー・ステータスのマークを付けるかどうかを選択できます。また、テキスト・リソースと式ビルダーの値を様々なフォームに表示したり、コンポーネント上にまったく表示しないようにすることもできます。

ブラウザでプレビュー ブラウザでプレビュー(Shift+F10、W)
デフォルトのブラウザで表示されるとおりにページを表示する場合にクリックします。

テキストの書式の選択 フォーマット
ドロップダウン・リストを使用して、選択したテキストにデフォルトのブロック・スタイルを適用します。見出しスタイルについては、最大の見出しを示す「ヘッダー1」を含む標準の階層構造が書式設定済のテキストに適用されます。ここで選択したフォーマットのレンダリングと表示は、各ブラウザでのタグの解釈に基づいて行われます。

次を検索 フォント
ドロップダウン・リストを使用して、ビジュアル・エディタで選択したテキストに適用するフォントを選択します。

テキストのサイズの選択 フォント・サイズ
ドロップダウン・リストを使用して、デフォルトのフォント・サイズ3を基準とした相対的なフォント・サイズ(1から7)を選択および適用します。HTMLタグではフォントのポイント・サイズは指定できません。したがって、様々な種類のテキストのサイズを指定するにはCSSスタイルシートを使用します。

テキストの色の選択 テキストの色
テキストの表示色を選択する場合にクリックします。カラー・パレットで事前定義済の色を選択するか、グラデーションが掛かったカラー・パレット内をクリックして(またはカラー・チューザでRGB値を入力して)、カスタム・カラーを定義します。

テキストの背景色の設定 背景色
選択したテキストの背景色を選択する場合にクリックします。カラー・パレットで事前定義済の色を選択するか、グラデーションが掛かったカラー・パレット内をクリックして(または「カラー・チューザでRGB値を入力して)、カスタム・カラーを定義します。

リンクの作成 リンクの作成(Ctrl+L)
<a href>タグを使用してハイパーリンクまたは電子メール・アドレスを挿入する場合にクリックします。「リンクの挿入」ダイアログを完了して、ハイパーリンクの位置に表示されるテキストを指定し、使用するハイパーリンク・ターゲットのタイプを選択します。「ヘルプ」をクリックすると、ダイアログの入力に関する詳細が表示されます。

テキストへの太字、イタリック、下線の設定 太字イタリック下線(Ctrl+B、Ctrl+I、Ctrl+U)
選択したテキストにそれぞれのスタイルを適用する場合にクリックします。

順序付けられたリスト 順序付けられたリスト
HTMLの<ol>タグを使用して番号付きリストを作成する場合にクリックします。

順序付けられていないリスト 順序付けられていないリスト
HTMLの<ul>タグを使用して箇条書きリストを作成する場合にクリックします。

インデント インデント(Ctrl+Alt+右大カッコ)
選択したテキストをインデントする場合にクリックします。テキストを選択した場合は<blockquote>タグ、リストを選択した場合は<ul>または<ol>タグが使用されます。

アウトデント アウトデント(Ctrl+Alt+左大カッコ)
選択したテキストをアウトデントする場合にクリックします。

左揃え、右揃え、中央揃え 左揃え、右揃え、中央揃え(Ctrl+Alt+Shift+L、Ctrl+Alt+Shift+C、Ctrl+Alt+Shift+R)
選択したテキストにそれぞれの整列方法を適用する場合にクリックします。


Webページおよび設計ツールの操作