WebCenter_009：Portal开发指南之四：创建一个运行时可以修改的JSF Page

运行环境：JDeveloper 11.1.1.6.0 + Oracle Database 10g Express Edition 10.2.0.1。

完成《Build a JSF Page that is Editable at Runtime》。
说明：文档是针对11.1.1.3的，我是使用JDeveloper 11.1.1.6.0重新做的。

学习要点：
1. 创建WebCenter应用

2. 为页面增加Oracle Composer组件
Composer组件可以在运行时修改页面。

（1）Change Mode Link
（2）Page Customizable
该组件定义运行时可以修改的区域。
（3）Layout Customizable
该组件定义运行时可以修改的页面布局。
（4）Show Detail Frame
完成后的页面代码如下：

<f:facet name="content">
  <af:group id="g1">
    <pe:changeModeLink id="cml1"/>
    <pe:pageCustomizable id="pageCustomizable1">
      <cust:panelCustomizable id="panelCustomizable1" layout="scroll">
        <pe:layoutCustomizable id="layoutCustomizable1">
          <cust:panelCustomizable id="panelCustomizable2">
            <cust:showDetailFrame text="showDetailFrame 1" id="sdf1"/>
          </cust:panelCustomizable>
          <f:facet name="contentA">
            <cust:panelCustomizable id="panelCustomizable3">
              <cust:showDetailFrame text="showDetailFrame 2"
                                    id="sdf2">
                <af:image source="/57996_1600x1200-wallpaper-cb1344523063.jpg"
                          id="i1"/>
              </cust:showDetailFrame>
            </cust:panelCustomizable>
          </f:facet>
          <f:facet name="contentB">
            <cust:panelCustomizable id="panelCustomizable4">
              <cust:showDetailFrame text="showDetailFrame 3"
                                    id="sdf3">
                <af:richTextEditor label="" id="rte1"/>
              </cust:showDetailFrame>
            </cust:panelCustomizable>
          </f:facet>
        </pe:layoutCustomizable>
      </cust:panelCustomizable>
      <f:facet name="editor">
        <pe:pageEditorPanel id="pep1"/>
      </f:facet>
    </pe:pageCustomizable>
  </af:group>
</f:facet>

3. 运行效果



Project 下载：MyWebCenterApp(2).7z