Skip Headers
Oracle® Fusion Middleware User's Guide for Oracle WebCenter Portal: Spaces
11g Release 1 (11.1.1.6.0)

Part Number E10149-10
Go to Documentation Home
Home
Go to Book List
Book List
Go to Table of Contents
Contents
Go to Index
Index
Go to Feedback page
Contact Us

Go to previous page
Previous
Go to next page
Next
PDF · Mobi · ePub

18 Adding and Configuring Page Layout Components

Layout components provide a means of enhancing a page's given layout with additional content areas, images, links, text, and the like. You can use page layout components to boost company branding (Image), provide a mission statement (Text), direct users to related information (Links and Hyperlink), and so on.

This chapter describes how to work with page layout components that are packaged with WebCenter Portal: Spaces. It includes the following sections:

Audience

This chapter is intended for users granted the application-level permission Pages: Create, Edit, and Delete Pages or the space-level permission Basic Services: Edit Page Access, Structure, and Content. Typically such users want to enhance page layout by adding and configuring layout components. Such users include authorized users working in the Home space and in spaces.

Your application administrator has the authority to expose or hide application resources and revise default permissions. Tasks discussed in this chapter are not available to you if the relevant resource is hidden or you are not authorized to perform them.

18.1 Adding a Layout Component to a Page

The process of adding a layout component to a page is the same for every layout component. Therefore, you can use the steps in this section for any layout component you add to a page.

See Also:

This section provides information about adding a layout component while the page is in Design view. For information about adding content while the page is in Source view, see Section 17.5.1.2, "Adding a Component to a Page in Source View."

To add a layout component to a page:

  1. Go to the page of interest, and open it in Composer.

    Tip:

    One way to enter page edit mode (Composer) is to press Ctrl-Shift-E.
  2. In the content area where you want to place the layout component, click the Add Content button to open the Resource Catalog (Figure 18-1).

    Figure 18-1 Add Content Button and Resulting Resource Catalog

    Add Content button and resulting Resource Catalog
    Description of "Figure 18-1 Add Content Button and Resulting Resource Catalog"

    Note:

    In the Spaces application, the content of the Resource Catalog varies according to the services that are integrated with the application, the location from which the catalog is opened, and the resources provided by your administrator. For example, the components that appear in the catalog when you open it from the Home space differ from those that appear when you open it from a space. Additionally, authorized users can create custom catalogs that may or may not contain the components you want. Such users can reconfigure the catalog if needed components are not present. They can also rename catalog folders. For more information, see Chapter 16, "Working with Resource Catalogs."
  3. In the catalog, click the Open link next to Web Development to display a selection of layout components (Figure 18-2).

    Figure 18-2 Web Development Components in Resource Catalog

    Web Development components in Resource Catalog
    Description of "Figure 18-2 Web Development Components in Resource Catalog"

  4. Click the Add link next to the component you want to add to the page.

    Tip:

    By default, new components are added to the top of their content areas.

    When you add a component to a page, you must wait for the application status indicator to finish processing before taking additional action.

  5. Click the Close button to exit the catalog.

  6. Optionally, drag-and-drop the newly-added component to the desired position on the page, or use the Move icons on the component to reposition it.

    Tip:

    As you drag a component around, a dark box marks the target drop location.
  7. Click Save to save your changes, and then Close to exit Composer.

Tip:

Some layout 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 Section 18.2.10, "Working with Internal Layout Components."

18.2 Working with Layout Components

Each layout component has associated properties that you can use to refine the appearance and behavior of a layout component instance. This section provides information about accessing and providing values for layout component properties. It contains the following subsections:

18.2.1 Setting Properties on a Layout Component

Layout components have associated properties, which authorized users can access from the Composer Component Properties dialog.

Note:

When you enter most types of property values in the Component Properties dialog and then click Apply, the dialog remains open. With values other than expected value types, the dialog closes, and the page is refreshed to reflect the new value. For example, if a component takes a java.util.ArrayList of java.awt.Color classes, then the Component Properties dialog closes after you add the value, and Composer does a full-page-refresh.

There are two ways to access the Component Properties dialog: through Composer Design view and Composer Source view. This section describes both methods. It includes the following subsections:

18.2.1.1 Setting Layout Component Properties in Design View

To set layout components properties in Design view:

  1. Go to the page of interest, and open it in Composer.

    Tip:

    One way to enter page edit mode (Composer) is to press Ctrl-Shift-E.
  2. Click the Edit icon (Figure 18-3) on the layout component of interest to open the Component Properties dialog.

    Figure 18-3 Edit Icon on a Layout Component

    Edit icon on a layout component
    Description of "Figure 18-3 Edit Icon on a Layout Component"

  3. Edit component properties, and click OK when you finish.

    Tip:

    in addition to entering literal text (value), you can also enter an Expression Language (EL) expressions (#{value}). For information about EL expressions, see Appendix B, "Expression Language Expressions."

    Note:

    Wherever you enter EL on the generic Display Options tab in the Component Properties dialog, the entry is automatically validated. If the EL is invalid, an error appears and the value is neither applied nor saved. Generic Display Options are those cataloged in Table 17-1. For more information about ELs in the Spaces application, see Appendix B, "Expression Language Expressions."

    EL validation is not performed on non-generic display options.

See Also:

For information about properties associated with a particular layout component, see the section that covers the particular component. For example, see Section 18.2.2.2, "Setting Box Layout Component Properties" for information about properties associated with the Box layout component.

For detailed information about properties that are common to most types of components, see Section 17.5.2, "Setting Properties on Page Components."

18.2.1.2 Setting Layout Component Properties in Source View

To set layout component properties in Source view:

  1. Go to the page of interest, and open it in Composer.

    Tip:

    One way to enter page edit mode (Composer) is to press Ctrl-Shift-E.
  2. From the View menu, select Source (Figure 18-4).

    Figure 18-4 Source Option on View Menu

    Source option on View menu
    Description of "Figure 18-4 Source Option on View Menu"

  3. In the list of components, click the component of interest.

  4. Click the Edit icon in the Source view header (Figure 18-5) to open the Component Properties dialog.

    Figure 18-5 Edit Button and Selected Box Layout Component

    Edit button and selected Box layout component
    Description of "Figure 18-5 Edit Button and Selected Box Layout Component"

  5. Edit component properties, and click OK when you finish.

    Tip:

    in addition to entering literal text (value), you can also enter an Expression Language (EL) expressions (#{value}). For information about EL expressions, see Appendix B, "Expression Language Expressions."

    Note:

    Wherever you enter EL on the generic Display Options tab in the Component Properties dialog, the entry is automatically validated. If the EL is invalid, an error appears and the value is neither applied nor saved. Generic Display Options are those cataloged in Table 17-1. For more information about ELs in the Spaces application, seeAppendix B, "Expression Language Expressions."

    For non-generic display options, EL validation is not performed.

18.2.2 Working with the Box Layout Component

A Box is a content area that you can use to place other components on the page. Unlike its counterpart, Movable Box, a Box cannot be moved around the page at application runtime, though its content can be rearranged. This section provides an overview of the Box layout component and lists and describes its associated properties. It includes the following subsections:

18.2.2.1 What You Should Know About the Box Layout Component

The Box layout component is the landing place for the task flows, portlets, and layout components that you add to a page.

In page edit mode, a Box is typically rendered as rectangle comprised of dashed lines, an Add Content button, and Add a Tab Set or a Tab, Add Box, Edit, and Delete icons (Figure 18-6).

Figure 18-6 Box Layout Component

Box layout component
Description of "Figure 18-6 Box Layout 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 18-1, "Box Layout 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 17.3.5.5, "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.

18.2.2.2 Setting Box Layout Component Properties

Box layout 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 layout component properties include a Child Components tab with options for hiding, showing, and rearranging the Box content. For more information, see Section 17.5.2.6, "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 17.5.2.7, "Working with Style and Content Style Properties."

See Also:

For information about setting layout component properties, see Section 18.2.1, "Setting Properties on a Layout Component."

Table 18-1 lists and describes Box layout component display options.

Table 18-1 Box Layout Component Display Options

Property Description

Allow Action

Enables or disables the display of various actions on the Box and on the components you add to the box:

  • all—Show the Add Content button on the Box, show the Add Box icons, display the Actions menu on all child components that support it, and allow the movement of Movable Boxes into and out of the Box.

  • none—Hide the Add Content button on the Box, hide the Add Box icons, and disable the display of the Actions menu on all child components. Additionally, any Movable Boxes inside the Box are frozen and cannot be moved; and users cannot move Movable Boxes into the Box.

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 scrollbar. The scrollbar is rendered when the height/width of its content exceeds the Box's height or width.

  • stretch—The Box content stretches to accommodate the specified size of the Box. If no height (see Section 17.5.2.7, "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, the Add Content button is hidden after one component is added to the Box, and 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

  • Clear 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 Source view. In Source view, right-click the hidden component and select Show Component from the resulting context menu.

Show Split Action

Show or hide the icons that enable splitting a Box into one or more Boxes

  • Select the checkbox to show Add Box icons on the Box

  • Clear the checkbox to hide the icons on the Box

Show Tab Action

Show or hide the icon that enables adding tabbed regions to a Box

  • Select the checkbox to show the Add a Tab Set or a Tab icon on the Box

  • Clear the checkbox to hide the icon on the Box

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. For more information, see Appendix B, "Expression Language Expressions."

18.2.3 Working with the Movable Box Layout Component

A Movable Box is a container wrapped around a Box that not only enables the placement of content on a page (via the Box), but also provides a means of moving all of that content at once in both page edit mode and page view mode. This section provides an overview of the Movable Box layout component. It includes the following subsections:

18.2.3.1 What You Should Know About the Movable Box Layout Component

The Movable Box layout component (Figure 18-7) enhances the features of a Box by adding mobility.

Figure 18-7 Movable Box Layout Component

Movable Box layout component
Description of "Figure 18-7 Movable Box Layout Component"

Users can grab the Movable Box by its header and drag it and all of its content to a new position on a page. Users can reposition a Movable Box in both page edit and page view modes. Movable Boxes can also be resized.

Tip:

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

18.2.3.2 Setting Movable Box Layout Component Properties

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 17-1, "Display Options Properties".

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

Figure 18-8 Movable Box Layout Component Display Options

Movable Box display options
Description of "Figure 18-8 Movable Box Layout Component Display Options"

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

18.2.4 Working with the HTML Markup Layout Component

The HTML Markup layout component is a simple editor for adding HTML markup to a page. (This includes JavaScript embedded in HTML <script> tags.) This section provides an overview of the HTML Markup layout component and lists and describes its associated properties. It also provides a sample use case for embedding a YouTube video onto a page.

This section includes the following subsections:

18.2.4.1 What You Should Know About the HTML Markup Layout Component

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

Figure 18-9 An HTML Markup Layout Component

HTML Markup layout component
Description of "Figure 18-9 An HTML Markup Layout Component"

Enter markup through the editor's component properties. Enter any type of valid HTML. Enclose JavaScript in the appropriate HTML markup. For example, enter (see Figure 18-10):

<script type="text/javascript">
   document.write("This is my JavaScript.");
</script>

Figure 18-10 Sample JavaScript in HTML Markup Display Options

Sample JavaScript in HTML Markup component
Description of "Figure 18-10 Sample JavaScript in HTML Markup Display Options"

The editor's header appears in page edit mode, 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.

18.2.4.2 Setting HTML Markup Layout Component Properties

HTML Markup layout 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 layout component to embed a personalized message to page visitors, a YouTube video, a Google Gadget, a Pandora Music Station, and the like (for more information, see Section 18.2.4.3, "Embedding Video, Music, Slides, and Other Types of Content").

In addition to content entry, use the properties on the Display Options tab to control text entry behavior and provide tooltip text (see Table 18-2).

HTML Markup layout 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 17.5.2.7, "Working with Style and Content Style Properties."

See Also:

For information about setting layout component properties, see Section 18.2.1, "Setting Properties on a Layout Component."

Table 18-2 lists and describes HTML Markup layout component display options.

Table 18-2 HTML Markup Layout Component Display Options

Property Description

Escape

A checkbox 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 &lt;script&gt; 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 &#8212; it is rendered as &#8212;.

  • Cleared (false) disables literal interpretation of special characters. For example, when a user enters &#8212;, it is rendered as —. False is the default value.

No Wrap

A checkbox for enabling or disabling text wrapping

  • Checked (true) disables text wrapping. Users must enter line breaks manually.

  • Cleared (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 layout 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

  • Clear 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 Source view. In Source 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 18.2.4.1, "What You Should Know About the HTML Markup Layout Component," and Section 18.2.4.3, "Embedding Video, Music, Slides, and Other Types of Content."

After you save your changes and close the page editor, the HTML Markup component shows the evaluated value of the markup.


Tip:

Display Options properties additionally provide access to an Expression Language (EL) editor, which you can use to enter and test EL values. For more information, see Appendix B, "Expression Language Expressions."

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

You can use the HTML Markup layout component to publish video, music, Google Gadgets, and other types of content to your application pages. This section describes how.

Note:

When you add a component to a page, you must wait for the application status indicator to finish processing before taking additional action.

To embed different types of media on an application page:

  1. Copy 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>
    
  2. Go to the application page of interest, and open the page in edit mode.

    Tip:

    One way to enter page edit mode (Composer) is to press Ctrl-Shift-E.
  3. In the Box or Movable Box of interest, click the Add Content button to open the Composer Catalog.

  4. Click the Open link next to Web Development, and then click the Add link next to HTML Markup.

    Optionally, use the Catalog Search feature to locate the HTML Markup layout component, and then click the Add link next to the component.

  5. Click the Close button to close the Catalog.

  6. Click the Edit icon on the HTML Markup component (Figure 18-11) to open the Component Properties dialog.

    Figure 18-11 Edit Icon on an HTML Markup Layout Component

    Edit icon on an HTML Markup layout component
    Description of "Figure 18-11 Edit Icon on an HTML Markup Layout Component"

  7. Click the Display Options tab to bring it forward, and then, in the Value field, paste the copied HTML code.

  8. Click OK to close the Component Properties dialog.

  9. Click Save and then Close to exit Composer.

18.2.5 Working with the Links Layout Component

Use the Links layout 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 Documents service file.

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

18.2.5.1 What You Should Know About the Links Layout Component

The Links layout 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 18-12).

Figure 18-12 Links Layout Component

Links layout component
Description of "Figure 18-12 Links Layout 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 space template contains pages with links, creating a new space based on the template effectively creates a clone of the template. Consequently, the new space has links that are separate from the ones in the template.

  • When a space is exported or imported, any links associated with space pages are also exported or imported.

The Links component's Add, Edit, and Delete Link UI is available in both page view and page edit modes 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 18-13).

Figure 18-13 Controls on Individual Links

Controls on individual links
Description of "Figure 18-13 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 18.2.5.3, "Setting Links Layout Component Properties."

18.2.5.2 Configuring the Links Component

This section steps you through the process of setting up informal navigation using the Links component. It includes the following sections:

18.2.5.2.1 Adding Navigation Links Using the Links Component

To add links using the Links component:

  1. Open the Add Link menu 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 18-14).

      Figure 18-14 New Page Link Dialog

      New Page Link dialog
      Description of "Figure 18-14 New Page Link Dialog"

    2. In the Name field, enter a display name for the link.

    3. For Path, click Browse to open the Select a Page dialog (Figure 18-15).

      Figure 18-15 Select a Page Dialog

      Select a page dialog
      Description of "Figure 18-15 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 space, you can select from pages that are available to you in your view of the Home space. In other spaces, you can select from pages that are available within the scope of the current space.
    5. Click Select.

    6. Click OK.

    To add an External Link: 

    1. Select External Link to open the New External Link dialog (Figure 18-16).

      Figure 18-16 New External Link Dialog

      New External Link dialog
      Description of "Figure 18-16 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. Select Render in page template to present the link target content within the context of the current page template.

      Clear this checkbox 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 18-17).

      Figure 18-17 New Content Link Dialog

      New Content Link dialog
      Description of "Figure 18-17 New Content Link Dialog"

    2. In the Name field, enter a display name for the link.

    3. For Path, click Browse to open the Select Document dialog (Figure 18-18).

      Figure 18-18 Select Document Dialog

      Select Document dialog
      Description of "Figure 18-18 Select Document Dialog"

      If the link target is not on view, you can use the Filter feature to locate it. For a more pointed search, click Advanced. For more information, see Section 18.2.5.2.2, "Configuring an Advanced Search for Content Links."

    4. Click Select.

    5. Click OK.

18.2.5.2.2 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 (Figure 18-19).

Figure 18-19 Advanced Search Dialog

Advanced Search dialog
Description of "Figure 18-19 Advanced Search Dialog"

This search is very similar to an advanced document search. For more information, see Section 41.31.2, "Running an Advanced Document Search."

18.2.5.2.3 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 18-20).

Figure 18-20 Configure Icon on a Link

Configure icon on a link
Description of "Figure 18-20 Configure Icon on a Link"

To configure a link in the Links component:

  1. Go to the Links component instance of interest.

  2. Click the Configure icon to open the Edit type Link dialog (Figure 18-21).

    Figure 18-21 Edit Page Link Dialog

    Edit Page Link dialog
    Description of "Figure 18-21 Edit Page Link Dialog"

  3. 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 18.2.5.2.1, "Adding Navigation Links Using the Links Component."

  4. Click OK.

18.2.5.2.4 Reordering Navigation Links

You can reorder navigation links in a Links layout component by dragging and dropping:

  1. Click and hold on a link.

  2. Drag the link to its new position on the list.

  3. Release the link.

18.2.5.2.5 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 18-22).

Figure 18-22 Delete Icon on a Link

Delete icon on a link
Description of "Figure 18-22 Delete Icon on a Link"

To delete a link from the Links component:

  1. Go to the Links component instance of interest.

  2. Click the Delete icon next to the link of interest.

  3. Click the Delete button in the confirmation dialog.

18.2.5.3 Setting Links Layout Component Properties

The Display Options you set on the Links layout 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 17.5.2.5, "Working with Component Display Options."

See Also:

For information about setting layout component properties, see Section 18.2.1, "Setting Properties on a Layout Component."

Links style properties are common to many other components. Commonly shared Style properties are listed and described in Section 17.5.2.7, "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.

18.2.6 Working with the Hyperlink Layout Component

Use the Hyperlink layout component to add a link to a page. The Hyperlink can point to a location that is either internal or external to the application. This section provides an overview of the Hyperlink layout component and lists and describes its unique properties.

This section includes the following subsections:

18.2.6.1 What You Should Know About the Hyperlink Layout Component

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

Figure 18-23 Hyperlink Layout Component

Hyperlink layout component
Description of "Figure 18-23 Hyperlink Layout 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, that is, a target outside of the Spaces application, always use the full URL.

Tip:

An easy way to obtain the relative directory path of a Spaces 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 Hyperlink target. For information about adding a Favorite to the Spaces application, see Section 37.3, "Adding Favorites."

An easy way to obtain the direct URL to a Spaces application page is to access its About this Page dialog. For more information, see Section 29.9.2, "Accessing Page Information."

Hyperlink layout 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 17.5.2.7, "Working with Style and Content Style Properties."

18.2.6.2 Setting Hyperlink Layout Component Properties

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

See Also:

For information about setting layout component properties, see Section 18.2.1, "Setting Properties on a Layout Component."

Table 18-3 lists and describes Hyperlink layout component display options.

Table 18-3 Hyperlink Layout 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.

  • Clear 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

  • Clear 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 Source view. In Source 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:

Display Options properties additionally provide access to an Expression Language (EL) editor, which you can use to enter and test EL values. For more information, see Appendix B, "Expression Language Expressions."

18.2.7 Working with the Image Layout Component

There are two places in the Resource Catalog from which to add images:

  • The Image layout component

  • Image files from the Documents folder

Unlike images from the Documents folder, Image layout components provide controls for associating a link target with the image. You have the option of associating or omitting a link with an Image layout component.

Tip:

Another difference between image files from the Documents folder and an Image layout component is that image files can be discovered in a search, Image layout components cannot, preventing a return of irrelevant search results.

This section provides an overview of the Image layout component, and lists and describes its associated properties.

This section includes the following subsections:

See Also:

For information about using images from the Documents service, see Section 41.1, "What You Should Know About the Documents Service Task Flows."

18.2.7.1 What You Should Know About the Image Layout Component

Use the Image layout component to add a picture, a logo, a linked image, and the like to a page (Figure 18-24).

Figure 18-24 Image Layout Component

Image layout component
Description of "Figure 18-24 Image Layout Component"

Use any web-compatible image from any accessible location. Do not use images from an external server that requires authentication.

Tip:

If you want to display an image that is not linked and is returned in a search, consider using the Documents service Content Presenter task flow in lieu of the Image layout component. For more information, see Section 41.1, "What You Should Know About the Documents Service Task Flows."

18.2.7.2 Setting Image Layout Component Properties

Image layout 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 layout 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 17.5.2.7, "Working with Style and Content Style Properties."

See Also:

For information about setting layout component properties, see Section 18.2.1, "Setting Properties on a Layout Component."

Table 18-4 lists and describes Image layout component display options.

Table 18-4 Image Layout Component Display Options

Property Description

Depressed Icon

A URL to the image that represents the image in a clicked state

Use any web-compatible image from any internal or publicly-accessible location.

Destination

A URL for the Image link target destination

For your link target, you can use URLs that are internal or external to the application.

For an internal target, that is, for a Spaces application page, you can use a directory path relative to the application root directory.

Disabled Icon

A URL to the image that represents the image in a disabled state

Use any web-compatible image from any internal or publicly-accessible location.

Hover Icon

A URL to the image that represents the image when a mouse pointer hovers over it

Use any web-compatible image from any internal or publicly-accessible location.

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.

Icon Position

A selection of options for placement of the image

  • leading—The image renders at the start of its associated text

  • trailing—The image renders at the end of its associated text

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

  • Clear 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 Source view. In Source 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 Icon Position value determines whether the image is placed before or after the text specified here.

Text And Access Key

Sets both text and an access key on the image

The access key is denoted by a leading ampersand (&amp;). For example, enter &amp;click me to set the text to click me and the access key to c.

An access key provides a keyboard shortcut to an action. In this case, users press Alt-<access_key>, or Alt-Shift-<access_key> to jump to the image's target destination. The keys that users press to engage the access key depend on the requirements of their browsers.


See Also:

Display Options properties additionally provide access to an Expression Language (EL) editor, which you can use to enter and test EL values. For more information, see Appendix B, "Expression Language Expressions."

18.2.8 Working with the Text Layout Component

The Text layout component provides access to a simple editor you can use to add a brief statement, page instructions, or any other kind of informative content to a page. This section provides an overview of the Text layout component and lists and describes its associated properties.

This section includes the following subsections:

18.2.8.1 What You Should Know About the Text Layout Component

The Text layout component provides a convenient way to add static display text and HTML to a Spaces application page (Figure 18-25).

Figure 18-25 Text Layout Component

Text layout component
Description of "Figure 18-25 Text Layout Component"

The Text layout component provides a simplified rich text editor, which you can use to enter text, apply text styles, and add links and images (Figure 18-26).

Figure 18-26 Text Layout Component Text Editor

Text layout component text editor
Description of "Figure 18-26 Text Layout Component Text Editor"

18.2.8.2 Setting Text Layout Component Properties

The Display Options associated with the Text layout 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 17-1, "Display Options Properties".

Text layout 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 17.5.2.7, "Working with Style and Content Style Properties."

18.2.9 Working with the Web Page Layout Component

The Web Page layout component provides a means of opening a view onto another web page within the context of an application page. This section provides an overview of the Web Page layout component and lists and describes its associated properties.

This section includes the following subsections:

18.2.9.1 What You Should Know About the Web Page Layout Component

The Web Page layout component provides a means of displaying a window onto another web page within the context of a Spaces application page (Figure 18-27).

Figure 18-27 Web Page Layout Component

Web Page layout component
Description of "Figure 18-27 Web Page Layout Component"

The content exposed through a Web Page layout 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 Spaces application, 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 information about adding a Favorite to the Spaces application, see Chapter 37, "Creating and Managing Your Personal Favorites."

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

Web Page layout 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 17.5.2.7, "Working with Style and Content Style Properties."

18.2.9.2 Setting Web Page Layout Component Properties

Web Page layout 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.

See Also:

For information about setting layout component properties, see Section 18.2.1, "Setting Properties on a Layout Component."

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

Table 18-5 Web Page Layout Component Display Options

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;

Source

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 layout component.

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

If you plan to display the content of another Spaces application page, you can use a relative address. For more information, see Section 18.2.9.1, "What You Should Know About the Web Page Layout Component."

Show Component

An option for hiding or showing the component on the page

  • Select to show the component

  • Clear 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 Source view. In Source view, right-click the hidden component, and select Show Component from the resulting context menu.


See Also:

Display Options properties additionally provide access to an Expression Language (EL) editor, which you can use to enter and test EL values. For more information, see Appendix B, "Expression Language Expressions."

18.2.10 Working with Internal Layout Components

This section provides information about the types of layout components that support page infrastructure, but are not available through the Resource Catalog (thus, internal). Such components are exposed through Source view of page edit mode.

This section includes the following subsections:

18.2.10.1 What You Should Know About Internal Layout Components

Some page layout components are not exposed for use in the Catalog. They are nonetheless on view and configurable when you edit a page and set Composer to Source view (Figure 18-28).

Figure 18-28 Internal Layout Components in Source View

Internal layout components in Source view
Description of "Figure 18-28 Internal Layout Components in Source View"

Table 18-6 lists and describes the internal layout components you are likely to encounter in Source view of page edit mode.

Table 18-6 Internal Layout Components

Layout Component Description

panelGroupLayout

Provides a means of arranging a series of child components vertically or horizontally (no wrapping), or consecutively (wrapping). The Layout property determines the arrangement of the child components. For more information, see Section 18.2.10.2, "Setting panelGroupLayout Properties."

panelStretchLayout

Provides a means of arranging content in defined areas on a page. Useful useful for enabling content to stretch when the browser is resized. For more information, see Section 18.2.10.3, "Setting panelStretchLayout Properties."

panelTabbed

The parent component of a tab set. For more information, see Section 18.2.10.4, "Setting panelTabbed Properties."

showDetailFrame

Renders a border, or chrome, around its child component along with a header that contains icons to enable users to perform some operations. These include a menu icon with options for moving the component, along with its content, to new positions on the page. Users can drag and drop showDetailFrame components from one panelCustomizable component to another on the page. Note that a showDetailFrame must be included inside a panelCustomizable component for it to be movable.

For more information, see Section 18.2.10.5, "Setting showDetailFrame Properties."

sidebarItem

A child component of a tab set (panelTabbed). For more information, see Section 18.2.10.6, "Setting sidebarItem Properties."

spacer

Provides a means of incorporating some blank space in pages so that the page appears less cluttered than it would if all the components were presented immediately next to each other or immediately below each other. For more information, see Section 18.2.10.7, "Setting spacer/Separator Properties."


See Also:

For information about setting component properties, see Section 18.2.1, "Setting Properties on a Layout Component."

18.2.10.2 Setting panelGroupLayout Properties

The panelGroupLayout component provides a means of arranging a series of child components vertically or horizontally (no wrapping), or consecutively (wrapping). The component's Layout property determines the arrangement of child components.

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

See Also:

For information about setting layout component properties, see Section 18.2.1, "Setting Properties on a Layout Component."

Table 18-7 lists and describes the panelGroupLayout properties that appear on the Display Options tab in the Component Properties dialog.

Table 18-7 panelGroupLayout Display Options

Property Description

Halign

A means of expressing the horizontal alignment of component content

Select one of:

  • start—align content horizontally, starting from the starting position

    This is either left or right depending on whether the current context is localized for a left-reading or right-reading language.

  • center—align content horizontally, starting from the center

  • end—align content horizontally, starting from the ending position

    This is either right or left depending on whether the current context is localized for a left-reading or right-reading language.

  • left—align content horizontally, starting from the left

  • right—align content horizontally, starting from the right

Landmark

A means of enhancing user accessibility as described by the Web Accessibility Initiative for Accessible Rich Internet Applications (WAI-ARIA). Each option describes the intended role of a content area to assist in using the area as a navigational landmark on the page.

Screen readers and other assistive technologies can make use of these landmarks in page navigation.

Select an option to clarify the role or purpose of a content area's content:

  • none—A content area that is not intended as a page navigational landmark

  • banner—A content area containing mostly site-oriented content, rather than page-specific content, such as the company logo or the portal-wide search feature

    Typically, a banner appears at the top of a page and spans the page width.

  • complementary—Supporting content, designed to be complementary to the main content at a similar level on the page, but still meaningful when separated from the main content, such as related documents

  • contentinfo—A content area that contains information about the application, such as the copyright or privacy statement.

  • main—The main content area of the page

  • navigation—A collection of navigational elements (usually links) for navigating the page or related pages.

  • search—A content area that contains one or more widgets used to define and execute a search.

Layout

A means of specifying the orientation of component content

Choose from:

  • default—align content vertically.

  • horizontal—align content horizontally

  • vertical—align content vertically

  • scroll—align content vertically with a scrollbar

    The scrollbar is rendered when the height/width of component content exceeds the component height or width.

Short Desc

A field for entering ALT text for the component

ALT text appears as a tooltip when users roll their mouse pointers over the component.

Show Component

An option for hiding or showing the component on the page

  • Select to show the component

  • Clear 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 Source view. In Source view, right-click the hidden component, and select Show Component from the resulting context menu.

Theme

The component style theme to apply to the children of this component. Use this property to change the theme without causing associated skin changes. Application skins are the sources of the themes. Some skins may have no theme definitions.

Enter one of:

  • dark

  • medium

  • light

No theme (none) is the default.

Valign

A means of expressing the vertical alignment of component content.

Select one of:

  • middle—content is aligned with the middle of the parent component

  • top—content is aligned with the top of the parent component

  • bottom—content is aligned with the bottom of the parent component

  • baseline—content is aligned with the baseline of the parent component


See Also:

Display Options properties additionally provide access to an Expression Language (EL) editor, which you can use to enter and test EL values. For more information, see Appendix B, "Expression Language Expressions."

18.2.10.3 Setting panelStretchLayout Properties

The panelStretchLayout component provides a means of arranging content in defined areas on a page. This component is useful for enabling content to stretch when the browser is resized.

The panelStretchLayout component's defined areas are called facets (Figure 18-29).

Figure 18-29 Facets of a panelStretchLayout Component

facets of a panelStretchLayout component
Description of "Figure 18-29 Facets of a panelStretchLayout Component"

Note:

Figure 18-29 shows the facets when the language reading direction of the application is configured left-to-right. If instead the language direction is right-to-left, the start and end facets are switched.

Facets are controlled by the values you enter for its Display Options properties. When you set the height of the top and bottom facets, any contained components are stretched to fit the height. Similarly, when you set the width of the start and end facets, any components contained in those facets are stretched to that width. If no components are placed in a facet, then the facet does not take up any space.

See Also:

For information about setting layout component properties, see Section 18.2.1, "Setting Properties on a Layout Component."

Table 18-8 lists and describes the panelStretchLayout properties that appear on the Display Options tab in the Component Properties dialog.

Note:

All panelStretchLayout height and width facets take the value auto; however, using auto slows page performance.

Table 18-8 panelStretchLayout Display Options

Property Description

Bottom Height

The height of the bottom facet. Use any standard CSS unit of measure, such as pt, px, pc, li, and so on.

Never express a Height value as a percentage. Because of differences between browsers and between layout containers, percentages do not work as you expect. If you want your component to take up 100% of a page, consider creating a page using the Stretch page style and adding the component to it.

End Width

The width of the end facet. Use any standard CSS unit of measure, such as pt, px, pc, li, and so on.

Short Desc

A field for entering tooltip text for the component

The tooltip appears when users roll their mouse pointers over the component.

Show Component

An option for hiding or showing the component on the page

  • Select to show the component

  • Clear 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 Source view. In Source view, right-click the hidden component, and select Show Component from the resulting context menu.

Start Width

The width of the start facet. Use any standard CSS unit of measure, such as pt, px, pc, li, and so on.

Theme

The component style theme to apply to the children of this component. Use this property to change the theme without causing associated skin changes. Application skins are the sources of the themes. Some skins may have no themed definitions.

Enter one of:

  • dark

  • medium

  • light

No theme (none) is the default.

Top Height

The height of the top facet. Use any standard CSS unit of measure, such as pt, px, pc, li, and so on.

Never express a Height value as a percentage. Because of differences between browsers and between layout containers, percentages do not work as you expect. If you want your component to take up 100% of a page, consider creating a page using the Stretch page style and adding the component to it.


See Also:

Display Options properties additionally provide access to an Expression Language (EL) editor, which you can use to enter and test EL values. For more information, see Appendix B, "Expression Language Expressions."

18.2.10.4 Setting panelTabbed Properties

The panelTabbed layout component is the parent component of a tab or tab set. Its unique set of Display Options controls the behind-the-scenes method of tab creation, the source for the tabs dimensions, the tab's position, and the like.

See Also:

For information about working with tabs, see Section 17.3.5.5, "Creating Layered Content Regions Using Tabs."

Table 18-9 lists and describes Display Options associated with the panelTabbed layout component.

Table 18-9 panelTabbed Display Options

Property Description

Child Creation

Specifies when tab content is rendered

  • immediate—All tab content is rendered as soon as the page is accessed.

  • lazy—Tab content is rendered when the tab is brought forward and is maintained in cache thereafter. This selection may enhance performance when content is fetched from cache.

  • lazyUncached—Tab content is rendered when the tab is likely to be brought forward and may be removed when the tab is not forward.

Dimensions From

Specifies the source of the dimensions applied to the component

  • auto—Either parent or disclosedChild, depending on the panelTabbed parent container. If the parent's Layout attribute is set to stretch, then parent is used; otherwise disclosedChild is used.

  • disclosedChild—The dimension is taken from the currently active tab.

  • parent—(default) The dimension is taken from any values specified on the component; if no values are specified, then they are taken from the parent; if no values are specified on the parent, then they are taken from the skin.

Position

The position of the tab portion of the panelTabbed

  • above—(default) Tabs are shown above the tab content area.

  • below—Tabs are shown below the tab content area.

  • both—Tabs are shown above and below the tab content area.

In accessibility screen reader mode, the tab position is always above.

Short Desc

A field for entering tooltip text for the component

The tooltip appears when users roll their mouse pointers over the component.

Show Component

An option for hiding or showing the component on the page

  • Select to show the component

  • Clear 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 Source view. In Source view, right-click the hidden component, and select Show Component from the resulting context menu.

Tab Removal

Specifies whether some, none, or all tabs can be removed

  • none—Tabs cannot be deleted from the tab set

  • all—All tabs can be deleted from the tab set

  • allExceptLast—All but one the last tab can be deleted from the tab set

    Note: The selection allExceptLast renders a Close icon on all except the last tab when users hover their mouse pointers over them. Additional coding is required on the panelTabbed component before the Close action can execute.

    Developers must write code to respond to ItemEvent with a listener attached to the showDetailItem's itemListener attribute. For example:

    <af:panelTabbed tabRemoval="allExceptLast" id="pt1">
       <af:showDetailItem itemListener="myBean.onRemove" id="sdi1">
    …
    

    Write the deletion code in a Java bean named myBean with the method onRemove.


See Also:

For information about working with tabs, see Section 17.3.5.5, "Creating Layered Content Regions Using Tabs."

18.2.10.5 Setting showDetailFrame Properties

The showDetailFrame component renders a border, or chrome, around its child component along with a header that contains icons to enable users to perform some operations. These include a menu icon with options for moving the component, along with its content, to new positions on the page. Users can drag and drop showDetailFrame components from one panelCustomizable component to another on the page. Note that a showDetailFrame must be included inside a panelCustomizable component for it to be movable.

A showDetailFrame component enables the following actions:

  • Collapse and expand the component

  • Move content to different positions on the page

  • Rearrange task flows using options on the Actions menu

  • Edit and save text in a text editor.

The Display Options associated with showDetailFrame are common to many other types of components and are listed in Table 17-1, "Display Options Properties" with one exception: the showDetailFrame layout component does not expose the property Allow Child Selection.

Display Options for showDetailFrame are presented on two subtabs: Basic and Advanced (Figure 18-30).

Figure 18-30 Basic and Advanced Display Options

Basic and Advanced display options
Description of "Figure 18-30 Basic and Advanced Display Options"

18.2.10.6 Setting sidebarItem Properties

The sidebarItem component is a child component of panelTabbed (see Section 18.2.10.4). Unlike panelTabbed, which provides all of the properties associated with a tab set, sidebarItem provides all of the properties associated with a single tab.

Table 18-10 describes the sidebarItem properties that appear on the Display Options tab in the Component Properties dialog.

Table 18-10 sidebarItem Display Options

Property Description

Disclosed

Indicates the current active tab, that is, the tab that is forward

This value is set by default depending on whether the selected tab is forward. Changes you make to this value have no effect.

Icon

The URL to an image

Use any Web-compatible image from any accessible location. That is, do not put in a path to an image on an external server that requires authentication.

Enter a full URL or a URL that is relative to the application root. Use CSS formatting. For example, enter:

url(http://www.abc.com/image.jpg)

Inflexible Height

The number of pixels the component will use when in a container that allocates size among multiple sibling items

If the component requires more than the set limit, its sibling components are pushed to overflow menus. The default is 100 pixels.

Note: This attribute is valid only when the parent container is a panelAccordion component.

Short Desc

A field for entering tooltip text for the component

The tooltip appears when users roll their mouse pointers over the component.

Show Component

An option for hiding or showing the component on the page

  • Select to show the component

  • Clear 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 Source view. In Source view, right-click the hidden component, and select Show Component from the resulting context menu.

Text

The text to render on the tab

The default value, an EL expression, evaluates to New Tab.


See Also:

Display Options properties additionally provide access to an Expression Language (EL) editor, which you can use to enter and test EL values. For more information, see Appendix B, "Expression Language Expressions."

18.2.10.7 Setting spacer/Separator Properties

The spacer component provides a means of incorporating some blank space in pages so that the page appears less cluttered than it would if all the components were presented immediately adjacent to each other.

Tip:

In the Resource Catalog, this component is called a Separator.

See Also:

For information about setting layout component properties, see Section 18.2.1, "Setting Properties on a Layout Component."

Table 18-11 lists and describes the spacer properties that appear on the Display Options tab in the Component Properties dialog.

Table 18-11 spacer Display Options

Property Description

Height

A field for specifying the spacer height

Use any standard CSS unit of measure, such as pt, px, pc, li, and so on.

Never express a Height value as a percentage. Because of differences between browsers and between layout containers, percentages do not work as you expect.

Short Desc

A field for entering tooltip text for the component

The tooltip appears when users roll their mouse pointers over the component.

Show Component

An option for hiding or showing the component on the page

  • Select to show the component

  • Clear 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 Source view. In Source view, right-click the hidden component, and select Show Component from the resulting context menu.

Width

A field for specifying spacer width

Use any standard CSS unit of measure, such as pt, px, pc, li, %, and so on.


See Also:

Display Options properties additionally provide access to an Expression Language (EL) editor, which you can use to enter and test EL values. For more information, see Appendix B, "Expression Language Expressions."

18.3 Deleting Layout Components

When you delete a layout component, such as a Box, all of the component's children—that is, anything contained in the component—are also deleted. For example, if you delete a Box that contains multiple task flows, the Box and all of the task flows it contains are deleted.

The controls for deleting a component are located on the component itself in Composer Design view and on the header of the list of components in Source view. This section describes how to delete layout components in both Design view and Source view. It includes the following subsections:

18.3.1 Deleting a Layout Component in Design View

To delete a layout component in Design view:

  1. Go to the page where you want to delete a layout component, and open it in Composer.

    Tip:

    One way to enter page edit mode is to press Ctrl-Shift-E.
  2. If necessary, open the View menu and select Design.

  3. Click the Remove icon on the component header or, if no header is shown, on the component's floating palette (Figure 18-31).

    Figure 18-31 Remove Icon on a Layout Component

    Remove icon on a layout component
    Description of "Figure 18-31 Remove Icon on a Layout Component"

  4. In the resulting confirmation dialog, click the Delete button.

    The layout component is permanently removed from the page. If the layout component had any child components, those child components are deleted as well.

18.3.2 Deleting a Layout Component in Source View

To delete a layout component in Source view:

  1. Go to the page where you want to delete a layout component, and open it in Composer.

    Tip:

    One way to enter page edit mode is to press Ctrl-Shift-E.
  2. From the View menu, select Source (Figure 18-32).

    Figure 18-32 Source Option on View Menu

    Source option on View menu
    Description of "Figure 18-32 Source Option on View Menu"

  3. In the list of components, select the component to delete.

  4. Click the Delete button on the list header (Figure 18-33).

    Figure 18-33 Delete Button in Source View

    Delete button in Source view
    Description of "Figure 18-33 Delete Button in Source View"

  5. In the resulting confirmation dialog, click the Delete button.

    The layout component is permanently removed from the page. If the layout component had any child components, those child components are deleted as well.