15 Working with Web Development Components on a Page

This chapter describes how to add the components in the Web Development section of the default resource catalog to a page and how to work with them.

For conceptual information about the different types of pages in WebCenter Portal, see Section 1.3.7, "What Are Pages?"

This chapter includes the following topics:

Section 15.1, "About Web Development Components"
Section 15.2, "Adding a Web Development Component to a Page"
Section 15.3, "Working with the Box Component"
Section 15.4, "Working with the Change Language Component"
Section 15.5, "Working with the HTML Markup Component"
Section 15.6, "Working with the Hyperlink Component"
Section 15.7, "Working with the Image Component"
Section 15.8, "Working with the Links Component"
Section 15.9, "Working with the Movable Box Component"
Section 15.10, "Working with the Text Component"
Section 15.11, "Working with the Web Page Component"

Permissions:

To perform the tasks in this chapter, you must be a portal moderator or a portal member with the portal-level permission Basic Services: Edit Page Access, Structure, and Content (standard permissions) or the Pages: Edit Pages (advanced permissions).

For more information about permissions, see Section 29.1, "About Roles and Permissions for a Portal."

15.1 About Web Development Components

Web Development components add dynamic content to a page, such as images, HTML, and links, as well as components that end users can modify at runtime, such as language selection and areas to add their own content. You can use these components to boost company branding (Image), provide a mission statement (Text), direct users to related information (Links and Hyperlink), and provide areas for users to add or work with content (Box).

15.2 Adding a Web Development Component to a Page

The process of adding a web development component to a page is the same as the process for any resource catalog component, as described in Section 14.2, "Adding a Component to a Page."

From the resource catalog in the page editor (Composer), click the Open link next to Web Development to display a selection of web development components (Figure 15-1).

Figure 15-1 Web Development Components in Resource Catalog

Description of "Figure 15-1 Web Development Components in Resource Catalog"

Tip:

Some components are provided as part of the page infrastructure and are not obviously exposed in the resource catalog. An example of this is the spacer component. Although you cannot add more of them to a page, you can configure their properties. For more information, see Chapter 16, "Working with Layout Components on a Page."

15.3 Working with the Box Component

This section provides an overview of the Box component and lists and describes its associated properties. It includes the following subsections:

Section 15.3.1, "About the Box Component"
Section 15.3.2, "Setting Box Component Properties"

15.3.1 About the Box Component

To add a Box component to a page, see Section 15.2, "Adding a Web Development Component to a Page."

A Box is a content area that you can use to place other components on the page. Unlike its counterpart, Movable Box (see Section 15.9.1, "About the Movable Box Component"), a Box cannot be moved around the page at application runtime, though its content can be rearranged. The Box component is the landing place for the task flows, portlets, and other components that you add to a page.

Common activities on this component are setting the background color and changing the padding, performed in the Component Properties dialog on the Style tab. See Section 14.3.6, "Working with Style and Content Style Properties."

In Composer, a Box is typically rendered as rectangle comprised of dashed lines, and Add Box, Edit, and Delete icons (Figure 15-2).

Figure 15-2 Box Component Above a Movable Box Component

Description of "Figure 15-2 Box Component Above a Movable Box Component"

Not all Box controls appear every time. What you see depends on your permissions, whether the Box is the top-most Box (which cannot be deleted, thus no Delete icon), whether the Box is stretched (in which case you cannot add other Boxes to it, thus no controls for doing so), and whether Box properties are set to show or omit certain controls (for more information, see Table 15-1, "Box Component Display Options").

You can place content within a Box, and you can place one or more Boxes within a Box (unless the Box is configured to stretch its content, that is, the Box property Layout equals stretch). You can configure Box properties to display content horizontally, vertically, or stretched. You can specify the display of a scrollbar or set the Box to devote all its area to a single component (stretched). You can use Box controls to add Boxes above, below, or to either side of a given Box and to add a tab or a tab set within the Box.

See Also:

For information about adding tab sets and configuring tabs, see Section 12.4.6, "Creating Layered Content Regions Using Tabs."

You could, if you like, add one Box to a page, and use its controls to add all the Boxes and tabs you require, rather than adding multiple Boxes from the resource catalog for that purpose (see Section 15.2, "Adding a Web Development Component to a Page").

15.3.2 Setting Box Component Properties

See Also:

For information about accessing and setting properties for any component on a page, see Section 14.3.2, "Setting Properties on a Component."

Box component properties provide a means of enabling or disabling the display of an Actions menu, a tab creation icon, and Box split icons; specifying the alignment and orientation of Box content; rearranging Box components; and providing tooltip text on the Box.

Box component properties include a Child Components tab with options for hiding, showing, and rearranging the Box content. For more information, see Section 14.3.5, "Working with Child Components."

A Style tab is available for setting styles on the component instance. The styles you set here override the styles that would otherwise govern the component's appearance— primarily the styles provided by the application skin. Box style properties are common to many other components. Commonly shared Style properties are listed and described in Section 14.3.6, "Working with Style and Content Style Properties."

Table 15-1 lists and describes Box component display options (Figure 15-3).

Figure 15-3 Box Component Properties

Description of "Figure 15-3 Box Component Properties"

Table 15-1 Box Component Display Options

Property	Description
`Horizontal Alignment`	Specifies how Box content should align between its left and right boundaries: `start`—Align content with the front position, determined by the reading order of the selected language. This value is provided to accommodate environments that support bidirectional languages. `center`—Align content with the center of the Box. `end`—Align content with the final position, determined by the reading order of the selected language. This value is provided to accommodate environments that support bidirectional languages. `left`—Align content with the left side of the Box. `right`—Align content with the right side of the Box.
`Layout`	Specifies the orientation of Box content: `vertical`—Align Box content in a vertical orientation (that is, as a column of objects). `horizontal`—Align Box content in a horizontal orientation (that is, as a row of objects). When `Layout` is set to `horizontal`, this component cannot be stretched by a parent component that stretches its children. `scroll`—Align Box content vertically with a vertical scrollbar. The scrollbar is rendered when the height of its content exceeds the Box's height. `stretch`—Stretch Box content to accommodate the specified size of the Box. If no `height` (see Section 14.3.6, "Working with Style and Content Style Properties") is specified for the Box, it defaults to a height of 200 pixels, unless the Box is placed inside another stretching component. In this case, the Box height is controlled by its parent (but see, `horizontal`). When you select `stretch`, you cannot drag and drop content into the Box. Additionally, you cannot split a Box with a `Layout` value of `stretch`. `auto`—The child component is stretched only if the Box is stretched by its parent. If not, the content scrolls.
`Short Desc`	Specifies tooltip text for the Box. Tooltip text appears when users roll their mouse pointers over the Box.
`Show Component`	Hides or shows the component on the page: Select to show the component Deselect to hide the component Once you hide a component in this way, any child components are also hidden. You can show the component again using Composer Structure view (see Section 12.4.1.3, "About Structure View in Composer"). In Structure view, right-click the hidden component and select Show Component from the resulting context menu.
`Vertical Alignment`	Specifies how Box content should align between its top and bottom boundaries: `top`—Align content at the top of the Box. `middle`—Align content with the middle of the Box. `bottom`—Align content at the bottom of the Box. `baseline`—Align content at the Box baseline, which is slightly above the bottom. `Vertical Alignment` applies only when the layout is horizontal.

See Also:

Display Options properties additionally provide access to an Expression Language (EL) editor, which you can use to enter and test EL values. If you need EL assistance, an application developer can provide an EL expression; see the "Expression Language Expressions" appendix in Oracle Fusion Middleware Developing Portals with Oracle WebCenter Portal and Oracle JDeveloper.

15.4 Working with the Change Language Component

See Section 61.3.1, "Adding a Change Language Task Flow to a Page."

15.5 Working with the HTML Markup Component

This section provides an overview of the HTML Markup component and lists and describes its associated properties. It also provides a sample use case for embedding a You Tube video onto a page.

This section includes the following subsections:

Section 15.5.1, "About the HTML Markup Component"
Section 15.5.2, "Setting HTML Markup Component Properties"
Section 15.5.3, "Embedding Video, Music, Slides, and Other Types of Content"

15.5.1 About the HTML Markup Component

To add an HTML Markup component to a page, see Section 15.2, "Adding a Web Development Component to a Page."

The HTML Markup component is a simple editor for entering raw text and HTML tags, including JavaScript embedded in HTML <script> tags (Figure 15-4).

Figure 15-4 An HTML Markup Component

Description of "Figure 15-4 An HTML Markup Component"

Enter markup through the editor's component properties:

Enclose JavaScript in the appropriate HTML markup. The HTML must be valid XHTML.

For example (Figure 15-5):
```
<script type="text/javascript">
   document.write("Welcome to the club");
</script>
```
If you need to enter non-XHTML, then it must be bracketed appropriately (that is, wrapped in CDATA). For example: <![CDATA[non-conforming HTML]]>.
JavaScript will execute only when the page is rendered with a full URL page request. If you navigate to the page from a tab in your portal, the JavaScript will not execute. You can work around this limitation by creating a page style to execute JavaScript when it loads.

WARNING:

This component must be used with caution as it can cause pages to break if not used properly. If necessary to resolve errors, you can remove the component in Structure view (see Section 12.4.1.3, "About Structure View in Composer"), or log out and log in again to reset Composer.

Figure 15-5 Sample JavaScript in HTML Markup Display Options

Description of "Figure 15-5 Sample JavaScript in HTML Markup Display Options"

The editor's header appears in Composer, but does not appear in page view mode. This enables you to place an individualized message on a page, for example, Welcome #{securityContext.userName}!, without cluttering the message with the component header.

Tip:

If you enter an EL expression, such as #{securityContext.userName}, the output is the value of the expression; in this case, the name of the current user.

15.5.2 Setting HTML Markup Component Properties

See Also:

For information about accessing and setting properties for any component on a page, see Section 14.3.2, "Setting Properties on a Component."

HTML Markup component properties provide a means of entering a brief bit of HTML markup, JavaScript, text, or Expression Language (EL). For example, use the HTML Markup component to embed a personalized message to page visitors, a You Tube video, a Google Gadget, a Pandora Music Station, and the like (for more information, see Section 15.5.3, "Embedding Video, Music, Slides, and Other Types of Content").

In addition to content entry, use the properties on the Display Options tab of the Component Properties dialog (Table 15-2) to control text entry behavior and provide tooltip text (in the Short Desc property).

HTML Markup component properties include a Style tab with options for setting styles on the component instance. The styles you set here override the styles that would otherwise govern the component's appearance. These include styles set on the component's parent container, the current page, and the application. HTML Markup style properties are common to many other components, and are listed and described in Section 14.3.6, "Working with Style and Content Style Properties."

Table 15-2 lists and describes HTML Markup component display options (Figure 15-5).

Table 15-2 HTML Markup Component Display Options

Property	Description
`Escape`	A check box for enabling or disabling literal evaluation of special characters. Use this property to make the output safe or not safe. Safe means that any tags, such as `<script>` are escaped into `<script>` so that they do not run. Not safe means whatever you enter for `value` finds its way onto the page, even if it does something undesirable. Checked (`true`) enables literal evaluation of such characters as angle brackets (<\|>) and HTML special characters. For example, when a user enters — it is rendered as —. Deselected (`false`) disables literal interpretation of special characters. For example, when a user enters —, it is rendered as —. False is the default value.
`No Wrap`	A check box for enabling or disabling text wrapping. Checked (`true`) disables text wrapping. Users must enter line breaks manually. Deselected (`false`) enables text wrapping. Lines wrap in accordance with the component width. False is the default value.
`Short Desc`	A field for entering tooltip text for the HTML Markup component. When users roll their mouse pointers over the component, this text appears as a tooltip.
`Show Component`	An option for hiding or showing the component on the page. Select to show the component Deselect to hide the component Once you hide a component in this way, any child components are also hidden. You can show the component again in Composer Structure view (see Section 12.4.1.3, "About Structure View in Composer"). In Structure view, right-click the hidden component, and select Show Component from the resulting context menu.
`Value`	A field for specifying the content that this component renders. In addition to text, this parameter also accepts HTML, JavaScript, and Expression Language (EL) expressions. For guidelines and examples, see Section 15.5.1, "About the HTML Markup Component" and Section 15.5.3, "Embedding Video, Music, Slides, and Other Types of Content" After you save your changes and close Composer, the HTML Markup component shows the evaluated value of the markup.

Tip:

15.5.3 Embedding Video, Music, Slides, and Other Types of Content

You can use the HTML Markup component to publish video, music, Google Gadgets, and other types of content to your application pages. Simply set the Value property on the Display Options tab to the HTML code you want to embed. For example:

<object width="640" height="385">
  <param name="movie"
      value="http://www.youtube.com/v/cAYw2zcSIPw?fs=1&amp;hl=en_US" />
  <param name="allowFullScreen" value="true" />
  <param name="allowscriptaccess" value="always" />
  <embed src="http://www.youtube.com/v/cAYw2zcSIPw?fs=1&amp;hl=en_US"
      type="application/x-shockwave-flash" allowscriptaccess="always"
      allowfullscreen="true" width="640" height="385" />
</object>

15.6 Working with the Hyperlink Component

This section provides an overview of the Hyperlink component and lists and describes its unique properties. It includes the following subsections:

Section 15.6.1, "About the Hyperlink Component"
Section 15.6.2, "Setting Hyperlink Component Properties"

15.6.1 About the Hyperlink Component

To add a Hyperlink component to a page, see Section 15.2, "Adding a Web Development Component to a Page."

Use the Hyperlink component to add a link to a page. The Hyperlink can point to a location that is either internal or external to the application.

A Hyperlink component (Figure 15-6) is comprised of two elements: the link text and the link URL, both of which are added through component properties.

Figure 15-6 Hyperlink Component

Description of "Figure 15-6 Hyperlink Component"

Hyperlinks can take both internal and external link targets. For an internal target, you can use a relative directory path. For an external target (a target outside of the portal), always use the full URL.

Tip:

An easy way to obtain the relative directory path of a portal page is to navigate to the target page and go through the motions of adding it as a Favorite. By default, the Add Favorite dialog provides the relative URL of the current page. Simply copy this information, and use it to define the Hyperlink target. For information about adding a Favorite to the portal, see the "Managing Your Favorites" chapter in Oracle Fusion Middleware Using Oracle WebCenter Portal.

An easy way to obtain the direct URL to a portal page is to access its Page Information dialog. For more information, see Section 13.6, "Viewing Information About a Page."

Hyperlink component properties include a Style tab with options for setting styles on the component instance. The styles you set here override the styles that would otherwise govern the component's appearance. These include styles set on the component's parent container, the current page, and the application. Hyperlink style properties are common to many other components. Commonly shared Style properties are listed and described in Section 14.3.6, "Working with Style and Content Style Properties."

15.6.2 Setting Hyperlink Component Properties

See Also:

For information about accessing and setting properties for any component on a page, see Section 14.3.2, "Setting Properties on a Component."

Hyperlink component properties provide a means of specifying link text, target destination, and open behavior.

Table 15-3 lists and describes Hyperlink component display options (Figure 15-7).

Figure 15-7 Hyperlink Component Properties

Description of "Figure 15-7 Hyperlink Component Properties"

Table 15-3 Hyperlink Component Display Options

Property	Description
`Destination`	A field for entering the hyperlink target URL. Enter the web address of the page to link to.
`Open in a new window`	Option for determining link target open behavior. Select to open the link target in a new browser tab or window. Deselect to open the link target in the current browser tab or window.
`Show Component`	An option for hiding or showing the component on the page: Select to show the component Deselect to hide the component Once you hide a component in this way, any child components are also hidden. You can show the component again in Composer Structure view (see Section 12.4.1.3, "About Structure View in Composer"). In Structure view, right-click the hidden component, and select Show Component from the resulting context menu.
`Title`	A field for specifying hyperlink text Enter a word or phrase to use as link text.

See Also:

15.7 Working with the Image Component

You can add images to a portal in any of the following ways:

An Image component, which can optionally link to another location when clicked. Note that image components cannot be returned in a search.
An image file, which is selected from the connected content repository to display on a page standalone or in a Content Presenter task flow (see Section 34.3, "Adding a Selected Folder or File to a Page"). Image files can be returned in a search.
An image added to a wiki document or wiki page, using the Embed Image tool in the Rich Text Editor (see the "About the Rich Text Editor Toolbar" section in Oracle Fusion Middleware Using Oracle WebCenter Portal).

This section provides an overview of the Image component, and lists and describes its associated properties.It includes the following subsections:

Section 15.7.1, "About the Image Component"
Section 15.7.2, "Setting Image Component Properties"

See Also:

For information about using images from the Documents service, see Section 34.2, "About Document Components."

15.7.1 About the Image Component

To add an Image component to a page, see Section 15.2, "Adding a Web Development Component to a Page."

Use the Image component to add graphic items such as a picture, a logo, or a linked image to another location, such as a web site or a portal page (Figure 15-8).

Figure 15-8 Image Component (showing default icon)

Description of "Figure 15-8 Image Component (showing default icon)"

Use any web-compatible image from any accessible location, such as the connected content repository or a URL. Do not use images from an external server that requires authentication.

Tip:

To display an image that is not linked and is returned in a search, consider using an image file (see Section 34.3, "Adding a Selected Folder or File to a Page").

15.7.2 Setting Image Component Properties

See Also:

For information about accessing and setting properties for any component on a page, see Section 14.3.2, "Setting Properties on a Component."

Image component properties provide a means of specifying the location of the image file, an optional hyperlink target, ALT text, and a target frame for the hyperlink.

Image component properties include a Style tab with options for setting styles on the component instance. The styles you set here override the styles that would otherwise govern the component's appearance. These include styles set on the component's parent container, the current page, and the application. Image style properties are common to many other components. Commonly shared Style properties are listed and described in Section 14.3.6, "Working with Style and Content Style Properties."

Table 15-4 lists and describes Image component display options (Figure 15-9).

Figure 15-9 Image Component Properties

Description of "Figure 15-9 Image Component Properties"

Table 15-4 Image Component Display Options

Property	Description
`Destination`	A URL for the Image link target destination. The link target can be a URL that is either internal or external to the application. For an internal target (a portal page), you can use a directory path relative to the application root directory. The runtime behavior differs depending on whether this value is set to an internal or external URL: For an internal URL (for example, `http://host:port/webcenter/spaces/page/myPage)`, clicking the image opens a new window displaying the target page. Clicking the image again opens a new window each time the image is clicked. For an external URL (for example, `http://www.google.com`), clicking the image opens a new window displaying the target site. Clicking the image again refreshes the same window each time the image is clicked.
`Icon`	The URL to the image file that represents the image in its active, unclicked state. Use any web-compatible image from any internal or publicly-accessible location.
`Short Desc`	Image `ALT` text. `ALT` text appears as a tooltip when users roll their mouse pointers over the image.
`Show Component`	An option for hiding or showing the component on the page: Select to show the component Deselect to hide the component Once you hide a component in this way, any child components are also hidden. You can show the component again in Composer Structure view (see Section 12.4.1.3, "About Structure View in Composer"). In Structure view, right-click the hidden component, and select Show Component from the resulting context menu.
`Target Frame`	Open behavior for the link target. Enter any standard browser target, such as: `_top`—Loads the link target in the current browser window (as opposed to the current frame) `_parent`—Loads the link target in the parent frame of the current frame. `_self`—Loads the link target within the same frame as the frame containing the link. `_blank`—Loads the link target in a new browser tab or window, without closing the original tab or window.
`Text`	An optional text label to accompany the image. The I`con Position` value determines whether the image is placed before or after the text specified here.

See Also:

15.8 Working with the Links Component

This section provides information about the Links component, how to set it up, and how to configure its properties. It includes the following subsections:

Section 15.8.1, "About the Links Component"
Section 15.8.2, "Adding Navigation Links Using the Links Component"
Section 15.8.3, "Configuring an Advanced Search for Content Links"
Section 15.8.4, "Configuring a Link in the Links Component"
Section 15.8.5, "Reordering Navigation Links"
Section 15.8.6, "Deleting a Link from the Links Component"
Section 15.8.7, "Setting Links Component Properties"

15.8.1 About the Links Component

To add a Links component to a page, see Section 15.2, "Adding a Web Development Component to a Page."

Use the Links component to add a navigation instance to a page. Links component navigation can include links to pages, external web sites, and application content. A browse capability is available to simplify the process of locating link targets. An advanced search feature is also available to assist in locating application objects, such as a file.

The Links component enables you to add a single instance of navigation to an application page, outside the more formal structure of your portal's navigation (Figure 15-10).

Figure 15-10 Links Component

Description of "Figure 15-10 Links Component"

The links component is associated with the page or template on which it is placed. When you put a links component on a page and add some links, those links are associated with the page. That is, the lifecycle of the links component respects the lifecycle of the page or template on which it is placed. For example:

When a page containing links is copied, all the links are also copied, and the page copy has its own set of links. Modifying links on the original page does not affect the page copy. The same is true for links on page templates.
When a page is deleted, all links associated with the page are also deleted. The same is true for links on page templates.
If a portal template contains pages with links, creating a new portal based on the template effectively creates a clone of the template. Consequently, the new portal has its own set of links, which can modified in the portal.
When a portal is exported or imported, any links associated with portal pages are also exported or imported.

The Links component's Add Link, Edit Link, and Delete Link actions are available in both page view mode and edit mode (Composer) to users with Edit Page permission on the page. Users without Edit Page permission see only the added navigation links. Changes in both edit and view modes are visible to all users who can view the page. That is, the addition of links falls outside the constraints of user customization, where changes made in page view mode are visible only to the user who made them.

A control is available for specifying that a link target is opened within the context of the current page template or in place of the page on which it was invoked. There are also controls on each link for configuring a given link's properties and deleting the link (Figure 15-11).

Figure 15-11 Controls on Individual Links

Description of "Figure 15-11 Controls on Individual Links"

The Links component's properties provide opportunities for controlling the behavior and look and feel of a Links component instance. For more information, see Section 15.8.7, "Setting Links Component Properties"

WARNING:

The Links component Parameters Navigation and Start Path are preconfigured and must not be changed. Changing these parameters can result in breaking the page.

15.8.2 Adding Navigation Links Using the Links Component

To add links using the Links component:

Click the Add Link menu (Figure 15-11) and select a link type:
- Page Link—Add a link that targets an application page.
- External Link—Add a link that targets a site that is external to the application.
- Content Link—Add a link that targets a document from a content repository.
To add a Page Link:
1. Select Page Link to open the New Page Link dialog (Figure 15-12).
  
  Figure 15-12 New Page Link Dialog
  
  Description of "Figure 15-12 New Page Link Dialog"
2. In the Name field, enter a display name for the link.
3. For Path, click the Search icon to open the Select a Page dialog (Figure 15-13).
  
  Figure 15-13 Select a Page Dialog
  
  Description of "Figure 15-13 Select a Page Dialog"
4. Select a page from the given options, or click Search to locate a page on the available list of pages.
  
  Tip:
  
  In the Home portal, you can select from pages that are available to you in your view of the Home portal. In other portals, you can select from pages that are available within the scope of the current portal.
5. Click Select.
6. Click OK.
To add an External Link:
1. Select External Link to open the New External Link dialog (Figure 15-14).
  
  Figure 15-14 New External Link Dialog
  
  Description of "Figure 15-14 New External Link Dialog"
2. In the Name field, enter a display name for the link.
3. In the URL field, enter the URL to the link target, for example:
```
http://www.mywebdestination.com
```
4. To present the link target content within the context of the current page template, select Render in page template.
  
  Deselect this check box to redirect the current page to the link target.
5. Click OK.
To add a Content Link:
1. Select Content Link to open the New Content Link dialog (Figure 15-15).
  
  Figure 15-15 New Content Link Dialog
  
  Description of "Figure 15-15 New Content Link Dialog"
2. In the Name field, enter a display name for the link.
3. For Path, click the Search icon to open the Select Document dialog.
  
  If necessary, use the Filter feature to locate the link target. For a more directed search, click Advanced. For more information, see Section 15.8.3, "Configuring an Advanced Search for Content Links"
  
  Figure 15-16 Select Document Dialog
  
  Description of "Figure 15-16 Select Document Dialog"
4. Click Select.
5. Click OK to close the New Content Link dialog.

15.8.3 Configuring an Advanced Search for Content Links

The Links component's Advanced Search feature provides controls for specifying additional search criteria and filters for Content Links searches. In the Select Document dialog (Figure 15-16), click Advanced to open the Advanced Search dialog (Figure 15-17).

Figure 15-17 Advanced Search Dialog

Description of "Figure 15-17 Advanced Search Dialog"

This search is very similar to an advanced document search. For more information, see the "Running an Advanced Document Search" section in Oracle Fusion Middleware Using Oracle WebCenter Portal.

15.8.4 Configuring a Link in the Links Component

Users with Edit Page permission on the page can access a configure control on a given link to revise the link's name and target. If you can see the Configure icon to the right of a link, you are authorized to configure links (Figure 15-18).

Figure 15-18 Configure Icon on a Link

Description of "Figure 15-18 Configure Icon on a Link"

To configure a link in a Links component:

In the Links component, click the Configure icon to open the Edit type Link dialog (Figure 15-19).

Figure 15-19 Edit External Link Dialog

Description of "Figure 15-19 Edit External Link Dialog"
Revise the values as required.

Note:

Different link types present different fields and require different values.

For information about the values required by Edit type Link fields, see Section 15.8.2, "Adding Navigation Links Using the Links Component."
Click OK.

15.8.5 Reordering Navigation Links

To reorder navigation links in a Links component in Composer or when viewing a page:

Click and hold on a link.
Drag the link to its new position in the list.
Release the link.

15.8.6 Deleting a Link from the Links Component

Authorized users can access a delete control on a given link to remove the link from the Links component. If you can see the Delete icon to the right of each link, you are authorized to delete links (Figure 15-20).

Figure 15-20 Delete Icon on a Link

Description of "Figure 15-20 Delete Icon on a Link"

To delete a link from the Links component:

Go to the Links component instance of interest.
Click the Delete icon next to the link of interest.
Click the Delete button in the confirmation dialog.

15.8.7 Setting Links Component Properties

See Also:

For information about accessing and setting properties for any component on a page, see Section 14.3.2, "Setting Properties on a Component."

The Display Options you set on the Links component affect only the particular instance. Links Display Options are common to many other components. Commonly shared Display Options are listed and described in Section 14.3.4, "Working with Component Display Options."

Similarly, links style properties are common to many other components. Commonly shared Style properties are listed and described in Section 14.3.6, "Working with Style and Content Style Properties." The styles you set on the Links component override the styles that would otherwise govern the component's appearance. These include styles set on the component's parent container, the current page, and the application skin.

15.9 Working with the Movable Box Component

This section provides an overview of the Movable Box component. It includes the following subsections:

Section 15.9.1, "About the Movable Box Component"
Section 15.9.2, "Setting Movable Box Component Properties"

15.9.1 About the Movable Box Component

To add a Movable Box component to a page, see Section 15.2, "Adding a Web Development Component to a Page."

A Movable Box (Figure 15-21) is a container wrapped around a Box that not only enables the placement of content on a page, but also provides a means of moving all of that content at once in both Composer (in Design view) and view mode.

Figure 15-21 Movable Box Component Below Box Component

Description of "Figure 15-21 Movable Box Component Below Box Component"

In Composer (in Design view) or when viewing a page, you can click on a Movable Box header and drag it and all of its content to a new position on a page. Movable Boxes can also be resized.

Tip:

Avoid adding a portlet to a Movable Box component. Doing so creates an unnecessary and potentially error-prone redundancy.

15.9.2 Setting Movable Box Component Properties

See Also:

For information about accessing and setting properties for any component on a page, see Section 14.3.2, "Setting Properties on a Component."

The Display Options associated with Movable Boxes provide a means of hiding or showing the Movable Box header, providing header text, adding a tooltip to the Movable Box that users see when they roll their mouse pointers over the header, and other like controls.

Movable Box Display Options are common to many other types of components and are listed in Table 14-1, "Display Options Properties".

Movable Box Display Options are presented on two subtabs: Basic and Advanced (Figure 15-22).

Figure 15-22 Movable Box Component Display Options

Description of "Figure 15-22 Movable Box Component Display Options"

By default, each Movable Box encloses a Box component. For information about Box component properties, see Section 15.3.2, "Setting Box Component Properties."

15.10 Working with the Text Component

This section provides an overview of the Text component and lists and describes its associated properties. It includes the following subsections:

Section 15.10.1, "About the Text Component"
Section 15.10.2, "Setting Text Component Properties"

15.10.1 About the Text Component

To add a Text component (Figure 15-23) to a page, see Section 15.2, "Adding a Web Development Component to a Page."

Figure 15-23 Text Component

Description of "Figure 15-23 Text Component"

The Text component provides a simplified rich text editor, which you can use to add text to a page (such as a brief statement, information, or page instructions) and apply text styles and formatting (Figure 15-24) The Source Code Editing Mode icon allows you to enter HTML.

Figure 15-24 Text Component Text Editor

Description of "Figure 15-24 Text Component Text Editor"

15.10.2 Setting Text Component Properties

See Also:

For information about accessing and setting properties for any component on a page, see Section 14.3.2, "Setting Properties on a Component."

The Display Options associated with the Text component provide a means of hiding or showing the component header, providing header text, adding a tooltip that users see when they roll their mouse pointers over the header, and other like controls.

Text Display Options are common to many other types of components and are listed in Table 14-1, "Display Options Properties".

Text component properties include a Style tab with options for setting styles on the component instance. The styles you set here override the styles that would otherwise govern the component's appearance. These include styles set on the component's parent container, the current page, and through the application skin. Text style properties are common to many other components. Commonly shared Style properties are listed and described in Section 14.3.6, "Working with Style and Content Style Properties."

15.11 Working with the Web Page Component

This section provides an overview of the Web Page component and lists and describes its associated properties. It includes the following subsections:

Section 15.11.1, "About the Web Page Component"
Section 15.11.2, "Setting Web Page Component Properties"

15.11.1 About the Web Page Component

To add a Web Page component to a page, see Section 15.2, "Adding a Web Development Component to a Page."

The Web Page component provides a means of opening a view onto another web page within the context of a portal page (Figure 15-25).

Figure 15-25 Web Page Component

Description of "Figure 15-25 Web Page Component"

The content exposed through a Web Page component retains all of the controls associated with the exposed web page. These controls retain their functionality, enabling you to, for example, control the volume of a video, edit a wiki, or post an entry to a blog, depending on the type of content you expose.

You can use internal and external link targets for a Web Page. For an internal target, you can use a relative directory path.

Tip:

In the portal, an easy way to obtain the relative directory path of an application page is to navigate to the target page and go through the motions of adding it as a Favorite. By default, the Add Favorite dialog provides the relative URL of the current page. Simply copy this information, and use it to define the Web Page target.

For more information, see the "Managing Your Favorites" chapter in Oracle Fusion Middleware Using Oracle WebCenter Portal.

The Web Page component provides a variation on the Web Page page style offered through the Create Page dialog (for more information, see Table 25-1, "Out-of-the-Box Page Styles"). The Web Page page style is useful for offering the full external web page experience. In contrast, the Web Page component is useful for including web page content along with other content types on an application page.

Web Page component properties include a Style tab with options for setting styles on the component instance. The styles you set here override the styles that would otherwise govern the component's appearance. These include styles set on the component's parent container, the current page, and the application. Web Page style properties are common to many other components. Commonly shared Style properties are listed and described in Section 14.3.6, "Working with Style and Content Style Properties."

15.11.2 Setting Web Page Component Properties

See Also:

For information about accessing and setting properties for any component on a page, see Section 14.3.2, "Setting Properties on a Component."

Web Page component properties provide a means of specifying the URL of the content to render in the Web Page area and the ALT text to display when users roll their mouse pointers over the component border.

Table 15-5 lists and describes Web Page component display options.

Figure 15-26 Web Page Component Properties

Description of "Figure 15-26 Web Page Component Properties"

Table 15-5 Web Page Component Display Options

Property Description

Property	Description
`Short Desc`	A field for entering `ALT` text for the Web Page area. Note that, for the Web Page component, the `ALT` text appears only when users hover their mouse pointers over the component border. You can increase the active area by increasing the padding around the component using the `Other CSS` property on the Component Properties Style tab. For example, you can enter the following in the `Other CSS` text box: padding-top:30px;
`Select`	A field for entering the fully qualified URL to the source Web content to render in the Web Page area. For example: http://www.oracle.com Note that `www.oracle.com` (that is, without `http://`) does not qualify. If a given URL is invalid, your content does not render within the Web Page component. Note: Use the component's Style properties to adjust the width and height of the display area (for more information, see Section 14.3.6, "Working with Style and Content Style Properties"). If you plan to display the content of another portal page, you can use a relative address. For more information, see Section 15.11.1, "About the Web Page Component"
`Show Component`	An option for hiding or showing the component on the page. Select to show the component Deselect to hide the component Once you hide a component in this way, any child components are also hidden. You can show the component again in Composer Structure view (see Section 12.4.1.3, "About Structure View in Composer"). In Structure view, right-click the hidden component, and select Show Component from the resulting context menu.

Short Desc

A field for entering ALT text for the Web Page area.

Note that, for the Web Page component, the ALT text appears only when users hover their mouse pointers over the component border. You can increase the active area by increasing the padding around the component using the Other CSS property on the Component Properties Style tab. For example, you can enter the following in the Other CSS text box:

padding-top:30px;

Select

A field for entering the fully qualified URL to the source Web content to render in the Web Page area.

For example:

http://www.oracle.com

Note that www.oracle.com (that is, without http://) does not qualify. If a given URL is invalid, your content does not render within the Web Page component.

Note: Use the component's Style properties to adjust the width and height of the display area (for more information, see Section 14.3.6, "Working with Style and Content Style Properties").

If you plan to display the content of another portal page, you can use a relative address. For more information, see Section 15.11.1, "About the Web Page Component"

Show Component

An option for hiding or showing the component on the page.

Select to show the component
Deselect to hide the component

Once you hide a component in this way, any child components are also hidden. You can show the component again in Composer Structure view (see Section 12.4.1.3, "About Structure View in Composer"). In Structure view, right-click the hidden component, and select Show Component from the resulting context menu.

See Also: