詳細アイコン IDE内の表示

ステップを完了すると、ビジュアル・エディタは次のようになります。

ビジュアル・エディタ

エディタ・ウィンドウの「ソース」をクリックすると、JDeveloperによって追加されたコードが表示されます。たとえば、レベル0のボタンに対するナビゲーション・ペインのコードは、次のようになります。

<af:navigationPane hint="buttons" level="0"
                   value="#{root_menu} var="menuInfo"..>
  <f:facet name="nodeStamp">
    <af:commandNavigationItem text="#{menuInfo.label}"
                              icon="#{menuInfo.icon}"
                              destination="#{menuInfo.destination}"
                              action="#{menuInfo.doAction}"../>
  </f:facet>
</af:navigationPane>

追加した他の2レベル(レベル1のタブとレベル2のタブ)のナビゲーション・ペインのコードは、hint属性とlevel属性の値以外はまったく同じです。

myTemplate.jspxの「構造」ウィンドウの「ソース」タブでは、「af:pageTemplateDef」の下の構造は次のようになります。

構造ウィンドウ、テンプレート

「af:panelStretchLayout」「center」ファセットには、ネストされた2つの「af:decorativeBox」コンポーネントがあります。各「af:DecorativeBox」には、その「top」ファセットに「af:navigationPane」コンポーネントが1つあります。

「af:panelStretchLayout」「top」ファセットには、「af:panelHeader」コンポーネントが1つあります。「af:panelHeader」には、その「menuBar」ファセットに「af:navigationPane」コンポーネントが1つあります。