Build a JSF Page that is Editable at Runtime

Create a New JSF Page: Create a new JSF page for adding components such as Change Mode Button or the Show Details Frame.

Add Oracle Composer Components to the Page : From the Oracle Composer tag library, add different components, for example, Change Mode Button, Show Detail Frame, and so on to the JSF page.

Add Content to the Page: Add content, for example, an image and a Rich Text Editor, to the JSF page.

Edit the Page at Runtime : Run the page to display it in a browser and edit page settings, add content, change the component layout, and so on.

Create a WebCenter Application

1. Open the Create Application dialog [ go to dialog or window icon]  .
2. On Step 1, in the Application Name field, enter MyWebCenterApp, to follow along with the example.
3. In the Directory field, specify a directory.
4. Leave the Application Package Prefix field blank. Optionally, you can enter a prefix to use for packages created within this application.
5. From the Application Template list, select WebCenter Application.
   

   Oracle WebCenter Application Template

   The WebCenter Application template contains the necessary technology scope for including Oracle WebCenter features in your application, such as Oracle Composer, the Resource Palette, task flows, content integration, and WebCenter Services. The WebCenter Application template also divides the application into two projects:  [ tell me more...]

   
   
   
6. On Steps 2 through 4, click Next to accept the default values.
7. On Step 5, click Finish .
   

   In the IDE

   When you create your application and projects using the WebCenter Application template, the Application Navigator should look like this:   [ tell me more...]

   
   
   

Create a New JSF Page

1. In the Application Navigator, select the ViewController project and launch the Create JSF Page dialog [ go to dialog or window icon] .
2. In the File Name field, enter myPage.
3. Select the Create as XML Document (*.jspx) checkbox.
4. Click OK.
   

   In the IDE

   When you create your JSF page, the Application Navigator should look like this:  [ tell me more...]

   
   
   

Enable Runtime Editing Using Oracle Composer

1. In the Application Navigator, under the MyWebCenterApp application, click the myPage.jspx file to open it in the editor window.
2. On the Component Palette, from the dropdown list, select Oracle Composer.
3. From the Oracle Composer library, drag Change Mode Link inside the af:form element of the page in the Structure window.
4. From the Oracle Composer library, drag Page Customizable below the pe:changeModeLink element inside the af:form element in the Structure window.
   

   Page Customizable

   This component defines the editable area of a page at runtime. Within this area, you can add content to the page, edit properties for a selected component, arrange content, and so on. When you add a Page Customizable component to the page, a Panel Customizable component is added as a child component of the Page Customizable component, and a Page Editor Panel component is added to its editor facet.   [ tell me more...]

   
   
   
5. From the Oracle Composer library, drag Layout Customizable under the cust:panelCustomizable element, which is nested inside the pe:pageCustomizable element in the Structure window.
   

   Layout Customizable

   This component enables you to apply a particular layout to an area of your page or by selecting from a set of predefined layouts (for example, two column, three column, and so on). By default, one Panel Customizable component is added as a direct child, and two are added in the facets of the Layout Customizable component.   [ tell me more...]

   
   
   
6. From the Oracle Composer library, drag Show Detail Frame under the cust:panelCustomizable element, which is nested inside the pe:layoutCustomizable element in the Structure window.
7. Repeat step 6 to add a cust:ShowDetailFrame element under each cust:panelCustomizable element in the Layout Customizable facets in the Structure window.
8. Click Save All to save your work.
   

   In the IDE

   When you add Oracle Composer components to your page, the Structure window and Design view should look like this:  [ tell me more...]

   
   
   

Add Content to the Page

1. In the Application Navigator, under the MyWebCenterApp application, click the myPage.jspx file to open it in the editor window.
2. On the Component Palette, from the dropdown list, select ADF Faces.
3. From the ADF Faces library, drag Image in the contentA (in the first facet) element under the cust:showDetailFrame element , which is nested inside the cust:panelCustomizable element in the Structure window, and specify the path to the image file that you want to add to the page.
4. From the ADF Faces library, drag Rich Text Editor under the pe:layoutCustomizable element > contentB > cust:panelCustomizable > cust:showDetailFrame element, in the Structure window.
5. In the Structure window, right-click af:richTextEditor and choose Go to Properties. Under the Appearance tab, set the value of the Simple property to true.
6. Click Save All to save your work.
   

   In the IDE

   When you add content, for example an image, to your page, the Structure window and Design view should look like this:  [ tell me more...]

   
   
   

Edit the Page at Runtime

1. In the Application Navigator, under the MyWebCenterApp application, locate the myPage.jspx file.
2. Right-click the mypage.jspx file and select Run. The page opens in a browser window.
3. Click the Edit link to switch to Edit mode of the page.
4. From the View dropdown list, select Source.
5. To select the image on the page, first click on the component either from the Structure Navigator or directly from the page. Then on the Source View header, click Edit. The Component Properties dialog displays the attributes of the image.
6. Edit the Source attribute for the image to specify the path and click OK.
7. From the View dropdown list, select Design.
8. To add the content in the Rich Text Editor component, click Edit Text and enter the required text.
9. Click Done Editing to save the changes made to this component.
10. Click Close to view the page in the View mode.
    

    In the IDE

    When you run the page, you see it in View mode along with the Edit link. Click Edit to see your page in Edit mode.  [ tell me more...]

    
    
    

Copyright © 1997, 2009, Oracle. All rights reserved.