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

tell me more icon Creating a WebCenter Application

To begin creating a new WebCenter application, open the Create Application dialog by clicking New Application in the Application Navigator.   [ tell me more...]





  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.

    tell me more icon 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 .

    tell me more icon 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

tell me more icon Creating a New JSF Page

The pages you create for your WebCenter application are JavaServer Faces (JSF) documents. These documents have the .jspx file extension. You can create JSF pages using the Create JSF Page dialog. To begin creating a JSF page, right-click the ViewController project and select New. In the New Gallery, expand Web Tier, and select JSF and then JSF Page to open the Create JSF Page dialog.  [ tell me more...]





  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.

    tell me more icon 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

tell me more icon Adding Oracle Composer Components to the Page

The Oracle Composer library provides various components, such as Change Mode Link, Page Customizable, Show Detail Frame, and so on, to make a page editable and define the behavior of content on a page at runtime (for example, move, sequence, or hide components). You can display the list of Oracle Composer components by selecting Oracle Composer from the Component Palette dropdown list.   [ tell me more...]





  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.

    tell me more icon 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.

    tell me more icon 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 File > Save All Save All to save your work.

    tell me more icon 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

tell me more icon Adding Content to the Page

Once you have created a customizable page, you can design your page by adding the required content either at design time or at runtime. To enable runtime editing of a component, ensure that the component is nested within the Page Customizable component at design time.  [ tell me more...]





  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.

    tell me more icon 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

tell me more icon Editing the Page at Runtime

At runtime, you can personalize the page in View mode. In Edit mode, you can customize the page for yourself and for other users of the page.  [ tell me more...]





  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.

    tell me more icon 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.

false ,,,,,,,,,,,,,,,