This lesson describes how to design OracleAS Portal pages and how to place items and portlets on a page for display.
This module discusses the following topics:
Place the cursor on this icon to display all screenshots. You can also place the cursor on each icon to see only the screenshot associated with it.
You are now ready to begin adding portlets and items to the page. As a page designer, you might do this yourself, or perhaps ask the content contributors and content managers of your page to add content based on the layout you have built for the page.
In OracleAS Portal, content takes one of two forms: a portlet or an item. A portlet is a reusable building block for easily publishing information and applications to your community. An item is a lower-level building block used to display content, such as documents, URLs, text, and images, or to provide navigation.
For this lesson, assume that you will finish the Home page by yourself.
The steps and privileges required for creating this lesson are listed in the table below.
Step |
Privileges Required |
| Create a Page |
Member of
Page Designers group, or
|
| Adding Content | Manage Content global privileges on all pages |
In order to perform the tasks in this lesson successfully, you must have performed the following:
| 1. |
Completed the Installing the Oracle Application Server 10g Infrastructure lesson |
| 2. |
Completed the Installing the Oracle Application Server 10g Portal and Wireless lesson |
| 3. |
Downloaded portalOBE.zip and unzip into your working directory |
| 4. |
Completed the Building the Portal Site lesson |
The Home page contains four regions.
| |
Region 1 contains the reusable navigation banner that you created earlier. | |
| |
Region 2 shows items and portlets vertically. | |
| |
Region 3 contains tabs. The tabs control what is shown in Region 4. | |
| |
Region 4 contains tab-specific content. |
|
Perform the following tasks:
| 1. | In the top right of the page, click the Navigator link. |
| 2. | In the Path link, click < YourName> Oracle By Example . |
| 3. | Click the Pages link. |
| 4. | Click the Create New... Page link at the top left of the page. |
| 5. | In the
Page Type
list, select
Standard.
In the Name field, enter < YourName >_OBE_page . In the Display Name field, enter < YourName> OBE Home Page . In the Navigation Page For Banner list, select < YourName> OBE Banner . This is the page that you had earlier created in the Creating a Navigation Page topic in the Building the Portal Site lesson . Accept the default Cache Page Definition Only option button and click Next. Note: The contents of a OracleAs Portal page are the various items and portlets that have been added to the page. Page caching enables faster and more efficient means to assemble Web pages dynamically. The Page Caching options enable you to store copies of the page�s definition and contents in memory. The page definition includes information about the page such as its layout and look and feel. You can use the Page Caching options to improve the performance of your page, especially if you expect many users to access it frequently. |
| 6. | In the
Page Template
list, accept the default selection,
None. Click
Next.
A page template provides a way of enforcing a particular layout, style, set of privileges, and content for multiple pages. Because you are building only a single page, there is no need for a template. You define the look and feel, privileges, and content on the page itself. |
| 7. | In the Choose Style
section, choose
<
YourName>
Page Style from the Style list. Click
Next.
The Page Style chosen specifies the fonts and colors to be used by all regions on the page. However, item regions on a page can be configured to override the page style. |
| 8. | In the
Grant Access section, enter
AUTHENTICATED_USERS
in the
Grantee field and select
View from the list containing various privileges.
Click the Add button. This provides all users, who can log in to OracleAS Portal, the privilege to view your portal pages. Click Finish. |
| 9. | You now define the page layout. On the empty region at the bottom of the page, click the
Add Region Right
Use regions to divide the page into different sections. Each region has settings to determine what type of content it contains and settings to render the content.
|
| 10. | You have two empty regions at the bottom of the page. Click the
Add Region Right
|
| 11. |
Now, you should have three empty regions at the bottom of the page. Click the
Edit
|
| 12. | Set the Region Type to
Items. Click
Apply.
After you specify what type of content a region should contain, you can set the properties to define how the content in that region should be rendered. |
| 13. | In the Region Display Options section, set the Width to 19%. Click OK. |
| 14. | Click the
Edit
|
| 15. | Set the Region Type to Items. Click Apply. |
| 16. | In the Region Display Options section, set the Width to 1%. Click OK. |
| 17. | In the bottom-right region, click the
Edit
|
| 18. | Set the Region Type to Items. Click Apply. |
| 19. | In the
Region Display Options section, set the
Width
to
80%.
In the Item Display Options section, set Space Between Items and Space Around Items to 0 (zero) pixels. Click OK. |
| 20. | In the bottom-right region, click the
Add Tab
Tabs enable you to organize your page content so that it is not all displayed at once. Content placed in a tabbed region is shown only when the tab is active. To add content to a particular tab, ensure that tab is active when you add the content to the region specified by the tab. |
| 21. | Click
Add Tab
|
| 22. | Your page should resemble the following: |
OracleAS Portal provides a default look for tabs. Styles provide the ability to change the tab color, font, and font color. If desired, you may upload custom images for tabs. You can specify both the active and inactive images for a tab. In this lesson, you will use custom images for your tabs, utilizing a rollover effect with both active and inactive tab images.
| 1. | Click the
Edit
|
| 2. | In the Display Name field, enter Home . |
| 3. | Browse for <portal_unzip>\portalOBE\images\a_home.gif for the Active Tab Image. |
| 4. | Browse for <portal_unzip>\portalOBE\images\i_home.gif for the Inactive Tab Image. |
| 5. | Click
Apply to see the images refreshed on the page. Click
OK.
Note: You do not see the tab image in edit mode for the page. In order to see the images displayed in context, click the View Page link at the top right. Click the Edit link on the banner to get back to edit mode. |
| 6. | Click the
Edit
|
| 7. | In the Display Name field, enter HR . |
| 8. | Browse for <portal_unzip>\portalOBE\images\a_hr.gif for the Active Tab Image. |
| 9. | Browse for <portal_unzip>\portalOBE\i_hr.gif for the Inactive Tab Image. |
| 10. | Click OK. |
| 11. | Click the
Edit
|
| 12. | In the Display Name field, enter Key Indices . |
| 13. | Browse for <portal_unzip>\portalOBE\images\a_keyIndices.gif for the Active Tab Image. |
| 14. | Browse for <portal_unzip>\portalOBE\images\i_keyIndices.gif for the Inactive Tab Image. |
| 15. | Click OK. |
| 16. | Click the
Edit
|
| 17. | In the Display Name field, enter Personal . |
| 18. | Browse for <portal_unzip>\portalOBE\images\a_persContent.gif for the Active Tab Image. |
| 19. | Browse for <portal_unzip>\portalOBE\images\i_persContent.gif for the Inactive Tab Image. |
| 20. | Click OK. |
| 21. | Click the
Edit
|
| 22. | In the Display Name field, enter Email . |
| 23. | Browse for <portal_unzip>\portalOBE\images\a_myEmail.gif for the Active Tab Image. |
| 24. | Browse for <portal_unzip>\portalOBE\images\i_myEmail.gif for the Inactive Tab Image. |
| 25. | Click OK. |
Users with an appropriate privilege level can add content to a page by adding items, such as text, hyperlinks, images, and so on to an item region. In addition to the built-in item types available with OracleAS Portal, you can create and configure your own item types within your portal, if needed. Item content and metadata are stored in the Portlet Repository. Items are rendered on the page according to the layout, style, and attribute display properties defined for the item region.
| |
Add the Current Date | |
| |
Add an Image to Visually Separate the Page Contents | |
| |
Add a Text Item Using Standard HTML | |
OracleAS Portal provides a few built-in item types. One of these built-in item types is Portal Smart Text. The Portal Smart Text items are self-configuring. For example, if you add a Portal Smart Text item (such as current date, current user, or current page) to a navigation page, the information is published automatically without any coding efforts.
To add the current date, perform the following steps:
| 1. | Click the
Add Item
|
| 2. | Select Portal Smart Text from the Built-In Navigation Item Types list. |
| 3. | Click Next. |
| 4. | For Text Type, choose Current Date. |
| 5. | Click Finish. |
You can add an image of a vertical line to visually separate the navigation area on the left side of the page from the content area on the right side of the page.
| 1. | Click the
Add Item
|
| 2. | Select the Simple Image content item type. |
| 3. | Click Next. |
| 4. | Browse for the image <portal_unzip>\portalOBE\images\vertLine.gif. |
| 5. | Click Finish. |
Add a Text Item Using Standard HTML
Text Items enable you to enter any text that you want to display on a page. You can use the Rich Text Editor to specify the text color or font and HTML tags to further enrich the text displayed.
Note: The Rich Text Editor is available only if you are using the Microsoft Internet Explorer browser. The Rich Text Editor can be enabled or disabled in the Page Group properties (Item tab).
| 1. | Ensure that the
Home tab is the active tab.
Note: OracleAS Portal makes it very easy to place content on different tabs as new items or portlets are always added to the active tab. |
| 2. | In the region directly under the tabs, click the
Add Item
|
| 3. | Select the Text content item type. |
| 4. | Click Next |
| 5. | In the
Item Attribute Text section, click the
View HTML source check box.
You can enter the text directly in this text area, or switch to HTML source view where you can have full control over writing any valid HTML. Toggling the View HTML source check box enables you to move between the two views. |
| 6. |
Paste the following code snippet of an HTML table into the text area. This code can also be copied from the
<poratl_unzip>\portalOBE\welcomeHTML.txt
file. It may be difficult to see when the text box is empty, but ensure the
View HTML source check box is selected before you paste the HTML code sinppet into the text area.
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="90%">
|
| 7. | Deselect the View HTML Source check box. You should see a preview of the HTML code. |
| 8. | Click Finish. |
So far, all the regions created on the page have been item regions. Portlet regions must be created in order to hold portlets. A portlet is a reusable, pluggable Web component that typically displays portions of Web content. The region within which a portlet is contained determines whether the portlet should show information, such as its header and border.
| 1. | Create a region under the current date item by clicking the
Add Region Below
|
| 2. | Currently, this region is not defined and it has the ability to hold items, portlets, or tabs. Click the
Add Portlet
|
| 3. | In the
Search field, enter
search
and click the
Go button.
This searches the Portlet Repository for available portlets. The Portlet Repository is a schema within an Oracle database in which content and metadata associated with an instance of OracleAS Portal are stored and managed. |
| 4. |
In the Portlet Repository Search Results section, click the Basic Search link from the Content page. The portlet is moved to the Selected Portlets section. All the portlets shown in the Selected Portlets section are available on your region. |
| 5. | In the
Search field, enter
favorites
and click the
Go button.
Notice how you can place as many portlets as desired in the region while in this screen. |
| 6. |
In the Portlet Repository Search Results section, click the Favorites link from the Content page. The portlet is moved to the Selected Portlets section. |
| 7. | In the Search field, enter external and click the Go button. |
| 8. | In the Portlet Repository Search Results section, click the External Applications link from the SSO/OID page. The portlet is moved to the Selected Portlets section. |
| 9. | Click OK. |
Moving the Basic Search Portlet
First, you will create a region and move the Basic Search portlet to this region. You will then set the region properties so that portlets in this region do not display the portlet header or portlet border.
| 1. | Click the
Add Region Above
|
| 2. | Click the
Edit
|
| 3. | Select the Portlet option for the region type and click Apply. |
| 4. |
Specify the settings for the P ortlet Display Options section as shown below, and then click OK.
|
| 5. | In order to move portlets from region to region, you must switch from the current
Graphical mode to
Layout mode. Click the
Layout editing view link at the top of the page.
OracleAS Portal provides three different views for building pages.
|
| 6. |
Select the check box next to Basic Search and click the Move button at the top of the page. Note: The Basic Search portlet is in the bottom-left region on the page. |
| 7. | Select the
middle left region and click the
Move Portlet button. This is the newly created region.
Note: The item regions do not have an option button. This is because you are moving a portlet. If you had selected an item to move, then item regions would be available for selection. |
| 8. | In order to return to the Graphical editing view, click the Graphical link at the top of the page. |
| 9. | The portlet has been moved to the new region, and is displayed according to the region settings. |
Associating an Image to the Search Portlet
You will now use an image to make a suitable header for the Basic Search portlet. You can combine item and portlet regions to look like one visual area on the page.
| 1. | Click the
Add Item
|
| 2. | Select the Simple Image content item type. |
| 3. | Click Next. |
| 4. | Browse for the < portal_unzip>\portalOBE\images\Search.gif image and click Finish. |
The Web Clipping portlet can be used to consolidate content from various external Web sites into a centralized portal environment. It offers an easy, intuitive way to capture content from existing Web sites and render that content as portlets. The simplest forms of Web clippings can be sections of HTML code in a Web page, including non-HTML components, such as applets or JavaScript code. To create a Web Clipping portlet, use a Web browser to navigate to the Web page containing the desired content. Next, select the portion of the page to clip. Page parameters can be used to map any input data, which the clipped area might require.
| 1. |
The clipped content should show directly below the welcome text item. You currently do not have a portlet region, so you must create one. In the bottom-right region that contains the
welcome text item, click the
Add Region Below
|
| 2. | Click the
Add Portlet
|
| 3. | Enter clipping in the Search field and click the Go button. |
| 4. | In the Portlet Repository Search Results section, click the Web Clipping Portlet link. |
| 5. | The portlet is moved to the Selected Portlets section. Click OK. |
| 6. | Click the
Edit
|
| 7. | Specify the following address to clip content from http://portalcenter.oracle.com and click the Start button. |
| 8. | In the upper right corner of the Web Clipping Studio page, click the
Section icon link. Notice how the zoom-in and zoom-out controls enable you to change the selection areas.
Note: If the Portal Center site has changed drastically, choose any section of the Portal Center page to clip. |
| 9. | Scroll down and click the Choose
Note: The clipped content is synchronized with the source Web page content. Therefore, any changes to the source Web page, including the display sequence, style, and font used for the content is reflected in the Web Clipping portlet. |
| 10. | Click the Select link in the upper right corner of the screen. |
| 11. | Select None from the URL Rewriting list. This option does not rewrite the URL link. Therefore, any action performed within the portlet will take you out of OracleAS Portal into the clipped content Web site, Portal Center. |
| 12. | In the Title field, enter Portal Center . |
| 13. | Click OK. |
| 14. | Edit the region properties by clicking the
Edit
|
| 15. | Deselect both the Show Portlet Headers and the Show Portlet Borders check boxes to turn off the portlet header and border. |
| 16. | Click OK. |
| 17. |
Click the View Page link in the upper right corner to preview the page. Click the browser's Back button, or the Edit smart link to return to the Edit mode on the page. For more information about how to clip content using the Web Clipping portlet, refer to the Publishing External Content Using the Web Clipping Portlet OBE lesson. |
OracleAS Portal supports the use of a Web-based Distributed Authoring and Versioning protocol (WebDAV). WebDAV access is intended to make it easy for content contributors and content managers to upload content to the portal directly from their desktops. Using a WebDAV client, such as Windows Explorer, you can map OracleAS Portal page groups to your desktop as Web Folders and seamlessly drag and drop content, files, and folders back and forth between your portal and desktop. In addition, using Web Folders, you can perform in-place opening, editing, and saving of file-type items by using desktop applications that support WebDAV, such as Microsoft Office 2000.
Note: When Oracle Application Server is installed, the required oraDAV parameters are set with values that enable access to Oracle database content through a Web browser or a WebDAV client. By default, the OracleAS Portal DAV URL is: http://< hostname>:< port>/dav_portal/portal
Mapping the Local Network Drive to a WebDAV Client
| 1. | From Microsoft Windows, open the Windows Explorer window. |
| 2. | From the Tools menu, select the Map Network Drive menu item. |
| 3. | Click the Create a Shortcut to a Web Folder or FTP site link. |
| 4. |
Ask your portal administrator for the location of the Network Place. Enter the URL to access your OracleAS Portal. The default URL that OracleAS Portal uses is: http://<hostname>:<port>/dav_portal/<dadname> |
| 5. | Click Next. |
| 6. | Enter your OracleAS Portal login name and password and click
OK.
Note: You can use the same login name and password, which you used to log into OracleAS Portal at the beginning of this OBE. |
| 7. | Enter
OBE WebDAV
for the name of this Network Place.
You can see this name in your Windows Explorer window.
|
| 8. | Click
Finish.
The Windows Explorer window should open showing the contents of your portal. The < YourName> OBE page group should be one of the directories listed. |
Creating a Portal Page Using Web Folders
You will now create a Portal page by using a WebDAV client (Web Folders) and copy files from your local machine to the new Portal page.
| 1. | In the Windows Explorer window, right click the < YourName>OBE directory to open it. You should see the contents of < YourName> OBE Page Group . |
| 2. | Create a new folder by right-clicking and selecting New > Folder. |
| 3. | Rename the new folder as
OBEWebDAV.
Creating a directory in the WebDAV client has created a new page in the OracleAS Portal environment. |
| 4. | Right-click the OBEWebDAV folder to open it. |
| 5. | Copy the contents of the <portal_unzip>\portalOBE\HR directory. |
| 6. | Paste the files into the OBEWebDAV directory. |
| 7. | Return to the browser keeping OracleAS Portal open. Click the
Navigator link in the upper right corner of the page. Your path should be
Path:
Page Groups > <
YourName> Oracle By Example >
Pages
.
Notice that a new standard page is created in your portal, when you created a new folder in the Windows Explorer window. |
| 8. | Click the
Edit link for the OBEWebDAV page.
Note: All the files that were copied using the Windows Explorer window show as a link on the page. Clicking any of the links will open that file and you can use these items in your portal. |
| 9. | Click Page: Access link at the top of the page. |
| 10. | Select the Display Page to Public Users check box to make these files available to any OracleAS Portal user. |
| 11. | Click OK. |
You have seen how content contributors and content managers can integrate files from their desktop to the OracleAS Portal using a WebDAV client. Now, you will perform the steps to automatically publish that content by using the search capabilities of OracleAS Portal.
Navigating to < YourName> OBE Home Page
| 1. | Click the Navigator link at the upper right corner. |
| 2. | Ensure that your path points to Path: Page Groups > < YourName> Oracle By Example > Pages. |
| 3. | Click the Edit link to the right of < YourName> OBE Home Page . |
Adding a Custom Search Portlet
| 1. | Click the
Add Portlet
|
| 2. | In the Search field, enter Search and click Go. |
| 3. | In the Portlet Repository Search Results section, click the Custom Search link to move this portlet to the Selected Portlets section. |
| 4. | Click OK. |
| 5. |
You must now configure the Custom Search portlet on your page to search for the appropriate content. Click the
Edit
|
| 6. | Select the Automatically display search results option button. This shows the results of the search on your page, instead of the search form. |
| 7. | Enter WebDAV Files in the Portlet Header Title field. |
| 8. | Click the What to Search tab. |
| 9. | Specify that you want to search for Items. |
| 10. | Restrict the search to the
<
YourName> Oracle By Example
page group.
|
| 11. | Click the Search Criteria tab. |
| 12. |
In the Search For field, enter portal . |
| 13. |
In the Find Results that list, select the partially match all of the terms (%term%) option. You can choose any attributes associated with your content to search within your portal. You use the Filter By options to define search submission attributes for the search query. |
| 14. | Click the Results Display tab. |
| 15. | Deselect the Save Search link with link text check box. |
| 16. | In the Style list, select < YourName> Page Style . |
| 17. | Ensure that the Display Name and Image Link field is the only field selected in the Displayed Attributes section. |
| 18. | Click OK. Because you are performing an automatic search, the search results are displayed directly in this portlet. |
| 19. |
Click the View Page link in the upper right corner to preview the page. |
| 20. |
Click the browser's Back button, or the Edit smart link to return to the Edit mode on the page. |
In this lesson, you built a Portal page and structured your page to display content. You created and organized your Portal page with tabs and specified a layout for it. Then, you added images, text, and portlets to your portal. In addition, you integrated content from another Website using the Web Clipping portlet. You also accessed OracleAS Portal from a WebDAV client and published items directly from your desktop to your portal. Finally, you customized the search form and the results page according to your needs. In the next lesson, you will create data-driven portlets, such as reports and charts. You will also integrate these portlets into your portal, displaying dynamic database content.
For more information about OracleAS Portal, please visit Oracle Portal Center Home.
If you have questions or comments, please post them in the Oracle by Example discussion forum on the Oracle Technology Network.
Place the cursor on this icon to hide all screenshots.
| |
||
| Copyright © 2004, Oracle Corporation. All rights reserved. | Contact Us Legal Notices and Terms of Use Privacy Statement | |
