Skip Headers
Oracle® Fusion Middleware Tutorial for Oracle WebCenter Developers
11g Release 1 (11.1.1)

Part Number E10273-05
Go to Documentation Home
Home
Go to Book List
Book List
Go to Table of Contents
Contents
Go to Index
Index
Go to Master Index
Master Index
Go to Feedback page
Contact Us

Go to previous page
Previous
Go to next page
Next
View PDF

7 Customizing Pages For Permissions and Runtime Editing

In this lesson, as a developer at design time, you will customize a specific page in the page hierarchy of your WebCenter Portal application, adding that page to the hierarchy so you can set permissions for user access and editing or modification of document content.

You will also drag and drop documents in HTML format from your UCM repository on to a consignable panel component in a new.jspx page and render that page as a Content Presenter task flow. The Content Presenter task flow lets you add content to your portal application, in this case, using the Documents service to display that document content stored in your content repository. The Documents service provides a user-friendly interface to manage, display, and search documents at runtime.

In the last step, you will enable authenticated users to edit the content of those HTML pages in-context at runtime. A pop-up window will open an editing session for adding or modifying content stored in your UCM repository.

At the end of this lesson, the home page you created in the previous lesson will look like Figure 7-1 when content editing is enabled at runtime.

Figure 7-1 The Portal Application Home Page Enabled for Editing at Runtime

Description of Figure 7-1 follows
Description of "Figure 7-1 The Portal Application Home Page Enabled for Editing at Runtime"

Introduction

This lesson contains the following steps:

Before you begin the steps in this lesson, ensure you have followed the steps up to this point in the Tutorial.

Step 1: Customize Pages and Set Permissions

Building on the steps of the previous lesson (Chapter 6), we can now move ahead to customize specific pages in our WebCenter Portal application, thus setting page permissions and user access.

To accomplish this task, we first need to create a new.jspx page, in this case, Contacts.jspx, and then add that page to the Page Hierarchy. By adding the page to the hierarchy, we can set page permissions, and in so doing, we can specify user access to those pages for security purposes.

To customize pages and set page permissions in our portal application:

  1. In JDeveloper, navigate to the pages folder in Application Navigator.

  2. Right-click New, expand Web Tier, select JSF and select the JSF Page, which launches the Create JSF Page dialog, as shown in Figure 7-2.

    Figure 7-2 The Create JSF Page Dialog with the Globe Page Template Selected

    Description of Figure 7-2 follows
    Description of "Figure 7-2 The Create JSF Page Dialog with the Globe Page Template Selected"

  3. Enter contacts.jspx in the File Name field and select Globe Page Template from the list of available templates as the Page Template.

  4. Click OK.

  5. Select contacts.jpsx and open it in Source view.

  6. Navigate to the code snippet shown in Figure 7-3 and set the value attribute value="#{bindings.pageTemplateBinding.templateModel}". Note that this is needed so the page picks up the template changes that occur at runtime.

    Figure 7-3 The Value Attribute Selected in the contacts.jspx File

    Description of Figure 7-3 follows
    Description of "Figure 7-3 The Value Attribute Selected in the contacts.jspx File"

  7. Now in Application Navigator, select home.jspx and open it in Source view.

  8. Copy the code line shown in Example 7-1 setting the value attribute which specifies page template bindings to the contacts.jspx file.

    Example 7-1 The Code Snippet for the value Attribute

    <af:pageTemplate value="#{bindings.pageTemplateBinding.templateModel}"
    
  9. In home.jspx, right-click and select the Go to Page Definition menu item, shown in Figure 7-4.

    Figure 7-4 Specifying the Page Definition in the home.jspx File in Source View

    Description of Figure 7-4 follows
    Description of "Figure 7-4 Specifying the Page Definition in the home.jspx File in Source View"

  10. Open the homePageDef.xml file in Source view and select the code snippet (the viewId attribute selected), as shown in Figure 7-5.

    Figure 7-5 The homePageDef.xml File in Source View with the viewId Attribute Selected

    Description of Figure 7-5 follows
    Description of "Figure 7-5 The homePageDef.xml File in Source View with the viewId Attribute Selected"

  11. Now open the contactsPageDef.xml file in Source view and select the code snippet shown in Figure 7-6. The snippet specifies the path and id attributes for the contacts page definition file.

    Figure 7-6 The path and id Attributes Selected in contactsPageDef.xml

    Description of Figure 7-6 follows
    Description of "Figure 7-6 The path and id Attributes Selected in contactsPageDef.xml "

  12. Select and copy the code snippet shown in Example 7-2, which specifies the viewId attribute into the contactsPageDef.xml file.

    Example 7-2 Code Snippet to Copy into contactsPageDef.xml

    <page viewID="${preferenceBean.defaultPageTemplate}"
           id="pageTemplateBinding" Refresh="ifNeeded"/>
    
  13. In JDeveloper, in the Component Palette, select Oracle Composer. Navigate down to the Page Customizable component and drag and drop that component on to the contacts.jspx Source view.

    Tip:

    The Page Customizable component denotes the customizable part of a page and appears in the Oracle Composer toolbar in Edit mode at runtime. Components enclosed within a Page Customizable component can be customized and edited.

    Figure 7-7 shows the code changed after dragging and dropping into the contacts.jspx file.

    Figure 7-7 The New Code Snippet Dragged and Dropped into contacts.jspx

    Description of Figure 7-7 follows
    Description of "Figure 7-7 The New Code Snippet Dragged and Dropped into contacts.jspx"

  14. Now open the Contact Us folder in the UCM repository folder called WebCenterTutorial and select contacts.jspx to open it.

  15. Right-click the contacts.jspx file and select the Create menu item and the Documents - Content Presenter task flow menu item shown in Figure 7-8.

    Tip:

    The Content Presenter task flow lets you conveniently add content to your portal application. You can select a single item of content, multiple content items, or query for content, and then select a template to render that content on a page in your application. In so doing, Content Presenter enables you to precisely customize the selection and presentation of your content in your WebCenter Portal application.

    Note that the Content Presenter task flow is available only when the connected content repository is Oracle Content Server and your WebCenter administrator has completed the prerequisite configuration. For more information about managing content repositories and UCM, see Oracle Fusion Middleware Administrator's Guide for Oracle WebCenter

    The Documents service enables you to display content from a content server or file system directly within your application. End users can then view and manage documents, as well as other types of content stored in content repositories.

    Figure 7-8 The Documents - Content Presenter Task Flow Selected for Creation

    Description of Figure 7-8 follows
    Description of "Figure 7-8 The Documents - Content Presenter Task Flow Selected for Creation"

  16. The Edit Task Flow Binding dialog appears, as shown in Figure 7-9. Note that in the Name field of Input Parameters, there is a UCM value for the data source.

    Figure 7-9 The Edit Task Flow Binding Dialog with a Data Source Value as a UCM Document Name

    Description of Figure 7-9 follows
    Description of "Figure 7-9 The Edit Task Flow Binding Dialog with a Data Source Value as a UCM Document Name "

  17. Click OK.

  18. Return to the portal application. Navigate to the pagehierarchy folder and select pages.xml.

  19. When the pages.xml Page Hierarchy pane opens, drag and drop the contacts.jspx file into the Root node, and uncheck the Visible checkbox, which is shown as checked in Figure 7-10.

    Figure 7-10 The pages.xml Page Hierarchy with Contacts Selected in the Root node

    Description of Figure 7-10 follows
    Description of "Figure 7-10 The pages.xml Page Hierarchy with Contacts Selected in the Root node"

  20. Now navigate to the default-navigation-model.xml folder and open the navigation dialog.

  21. Drag the contacts.jspx file to the default-navigation-model node (Figure 7-11), select the plus icon to add a link.

    Figure 7-11 The Contacts Link Added in the Navigation Model

    Description of Figure 7-11 follows
    Description of "Figure 7-11 The Contacts Link Added in the Navigation Model"

  22. In the Link ID field, enter contacts. In the URL Attributes pane, enter the Display Value as Contacts, as shown in Figure 7-12.

    Figure 7-12 The Navigation Pane with the Link Id for Contacts and the Display Value Specified as Contacts

    Description of Figure 7-12 follows
    Description of "Figure 7-12 The Navigation Pane with the Link Id for Contacts and the Display Value Specified as Contacts"

  23. Return to Application Navigator, select the Portal project and right-click Run to launch the application in a web browser.

    The application opens in a web browser with Contacts as part of the navigation model, as shown in Figure 7-13. The page will be populated with content using Oracle Composer, shown in Figure 7-14.

    For more information about customizing pages, see Oracle Fusion Middleware Developer's Guide for Oracle WebCenter.

    Figure 7-13 The MyPortalApplication shown in a Web Browser with the Contacts Link Added to Navigation

    Description of Figure 7-13 follows
    Description of "Figure 7-13 The MyPortalApplication shown in a Web Browser with the Contacts Link Added to Navigation"

Step 2: Edit Documents at Runtime

Now that we have customized our Contacts Page in our application, dragging and dropping the contacts.html document from our UCM repository on to the panelCustomizable component in contacts.jspx and rendering it as a Content Presenter task flow, we can move on to the task of enabling in-context HTML editing capability to our documents.

In-context document editing offers authenticated users easier access and control over document content. This feature is only available at runtime, however.

To edit documents at runtime:

  1. In Application Navigator, select the Portal project and right-click Run to launch the application in a web browser.

  2. Once the application opens in a web browser with Contacts as part of the navigation model, click the Contacts link in the banner to the right of the Menu link. The Contacts page displays the page on which you can enter document content, as shown in Figure 7-14.

    Figure 7-14 The Contact Page For Users to Enter Document Content

    Description of Figure 7-14 follows
    Description of "Figure 7-14 The Contact Page For Users to Enter Document Content"

  3. Login to the Home page as weblogic with weblogic1 as your password (Figure 7-15).

    Figure 7-15 Logging into the Home Web Page

    Description of Figure 7-15 follows
    Description of "Figure 7-15 Logging into the Home Web Page"

  4. Once you have successfully logged in, click the Administration link in the browser. The Home page in the web browser is refreshed and the page appears at the center with a hash-marked outline and a pencil icon below the navigation bar in the upper right corner, indicating that the outlined portion of the Home page can be edited for document content, as shown in Figure 7-16.

    Figure 7-16 The MyPortalApplication in a Web Browser with Content Editing Enabled

    Description of Figure 7-16 follows
    Description of "Figure 7-16 The MyPortalApplication in a Web Browser with Content Editing Enabled "

  5. Navigate in the outlined portion of the browser page to the pencil icon and click the icon to enable editing, as shown in Figure 7-17.

    Figure 7-17 The Pencil Icon Selected to Enable Editing of Home Page Document Content

    Description of Figure 7-17 follows
    Description of "Figure 7-17 The Pencil Icon Selected to Enable Editing of Home Page Document Content"

  6. An Edit window pops up at the center of the page where authenticated users can add content to the home.html page and edit that content using a rich text editor, as shown in Figure 7-18. Note that the document content is stored in the UCM content repository for easy access and retrieval.

    Figure 7-18 The Edit Window for In-context Editing of HTML Content

    Description of Figure 7-18 follows
    Description of "Figure 7-18 The Edit Window for In-context Editing of HTML Content"

  7. Users can then click the edit icon in the upper left top row and save their edits (Figure 7-19).

    Figure 7-19 The Edit-Save Window for Saving of In-context HTML Document Content

    Description of Figure 7-19 follows
    Description of "Figure 7-19 The Edit-Save Window for Saving of In-context HTML Document Content"

In this lesson, you have learned how to customize specific pages in the page hierarchy of your WebCenter Portal application and how to add those pages to the hierarchy so you can set permissions for user access. You have also learned how easy it is to enable runtime HTML editing of your document content stored in the UCM repository.