Oracle® Fusion Middleware Tutorial for Oracle WebCenter Developers 11g Release 1 (11.1.1) Part Number E10273-05 |
|
|
View PDF |
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
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.
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:
In JDeveloper, navigate to the pages
folder in Application Navigator.
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
Enter contacts.jspx
in the File Name field and select Globe Page Template from the list of available templates as the Page Template.
Click OK.
Select contacts.jpsx
and open it in Source view.
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
Now in Application Navigator, select home.jspx
and open it in Source view.
Copy the code line shown in Example 7-1 setting the value
attribute which specifies page template bindings to the contacts.jspx
file.
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
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
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
Select and copy the code snippet shown in Example 7-2, which specifies the viewId
attribute into the contactsPageDef.xml
file.
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:
ThePage 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
Now open the Contact Us folder in the UCM repository folder called WebCenterTutorial and select contacts.jspx
to open it.
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
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
Click OK.
Return to the portal application. Navigate to the pagehierarchy
folder and select pages.xml
.
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
Now navigate to the default-navigation-model.xml
folder and open the navigation dialog.
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
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
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
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.
In Application Navigator, select the Portal project and right-click Run to launch the application in a web browser.
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
Login to the Home page as weblogic
with weblogic1
as your password (Figure 7-15).
Figure 7-15 Logging into the Home Web Page
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
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
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
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
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.