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 Manage All privileges on the page group, or Create global privileges on all pages
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 Typelist, select Standard.
In the Namefield, enter <YourName>_OBE_page.
In the Display Namefield, 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 Cachingoptions 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 Templatelist, 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 Stylesection,
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 icon.
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 icon again.
11.
Now, you
should have three empty regions at the bottom of the page.
Click the Edit icon in the bottom-left region.
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 icon at the bottom region.
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 icon.
18.
Set the Region Type to Items.
Click Apply.
19.
In the Region Display
Options section, set the Widthto 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 icon to create a 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 to the right of the tab you just
created four times to create four additional tabs.
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 icon to configure the first tab.
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 icon to configure the second tab.
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 icon to configure the third tab.
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 icon to configure the fourth tab.
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 icon to configure the fifth tab.
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.
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.
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 icon in the bottom-left region.
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.
Add
an Image to Visually Separate the Page Content
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 icon in the middle region.
2.
Select the Simple
Image content item type.
3.
Click Next.
4.
Browse for the image
<portal_unzip>\portalOBE\images\vertLine.gif.
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 icon.
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%">
<tr>
<td width="947" colspan="3"> <font class="inplacedisplayid62787siteid0"><b>
<font face="Arial" color="#663300" size="2">Welcome
to Oracle By Example's
Business to Employee (B2EE) Portal</font></b></font></td>
</tr>
<tr>
<td width="230"> <img border="0" src="http://portalstudio.oracle.com/pls/ops/docs/FOLDER/OBE/WELCOMEIMAGE.GIF"
width="230" height="100"></td>
<td width="18"> </td>
<td width="699"><strong><font face="Arial"
size="2" color="#CD6C51">Oracle
By Example</font></strong><font color="#330000"
size="2" face="Arial" class="inplacedisplayid43197siteid0"><strong><font
color="#cd6c51">
B2E Portal</font></strong> <font color="#663300">is
a <strong>single</strong>/global
individualized portal where you can find and use the end-to-end business
solutions needed to support your business responsibilities. The portal
eventually
include access to a full complement of common services and tools that
help
you manage your work, life and career.</font></font></td>
</tr>
</table>
7.
Deselect the View
HTML Source check box. You should see a preview of the HTML code.
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 icon.
2.
Currently, this region
is not defined and it has the ability to hold items, portlets, or tabs.
Click the Add Portlet icon to add a portlet to
this region. The region is then automatically set to be a portlet region.
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
Bookmark
icon.
icon in the bottom-left region.
icon to create a tab.
icon in the bottom-left region.
icon.
icon to add a portlet to
this region. The region is then automatically set to be a portlet region.