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:
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.
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:
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.
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
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."
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
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.
Click the Close button to exit the catalog.
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.
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."
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:
Section 18.2.3, "Working with the Movable Box Layout Component"
Section 18.2.4, "Working with the HTML Markup Layout Component"
Section 18.2.6, "Working with the Hyperlink Layout Component"
Section 18.2.9, "Working with the Web Page 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:
Section 18.2.1.1, "Setting Layout Component Properties in Design View"
Section 18.2.1.2, "Setting Layout Component Properties in Source View"
To set layout components properties in Design view:
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.
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 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."
To set layout component properties in Source view:
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.
From the View menu, select Source (Figure 18-4).
In the list of components, click the component of interest.
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 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.
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:
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).
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.
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 |
---|---|
Enables or disables the display of various actions on the Box and on the components you add to the box:
|
|
Specifies how Box content should align between its left and right boundaries:
|
|
Specifies the orientation of Box content:
|
|
Specifies tooltip text for the Box Tooltip text appears when users roll their mouse pointers over the Box. |
|
Hides or shows the component on the page:
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 or hide the icons that enable splitting a Box into one or more Boxes
|
|
Show or hide the icon that enables adding tabbed regions to a Box
|
|
Specifies how Box content should align between its top and bottom boundaries:
|
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."
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:
Section 18.2.3.1, "What You Should Know About the Movable Box Layout Component"
Section 18.2.3.2, "Setting Movable Box Layout Component Properties"
The Movable Box layout component (Figure 18-7) enhances the features of a Box by adding mobility.
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.
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
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."
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:
Section 18.2.4.1, "What You Should Know About the HTML Markup Layout Component"
Section 18.2.4.2, "Setting HTML Markup Layout Component Properties"
Section 18.2.4.3, "Embedding Video, Music, Slides, and Other Types of Content"
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
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
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.
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 |
---|---|
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
|
|
A checkbox for enabling or disabling text wrapping
|
|
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. |
|
An option for hiding or showing the component on the page
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. |
|
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."
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:
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&hl=en_US" /> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <embed src="http://www.youtube.com/v/cAYw2zcSIPw?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385" /> </object>
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.
In the Box or Movable Box of interest, click the Add Content button to open the Composer Catalog.
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.
Click the Close button to close the Catalog.
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
Click the Display Options tab to bring it forward, and then, in the Value field, paste the copied HTML code.
Click OK to close the Component Properties dialog.
Click Save and then Close to exit Composer.
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:
Section 18.2.5.1, "What You Should Know About the Links Layout Component"
Section 18.2.5.3, "Setting Links Layout Component Properties"
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).
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
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."
This section steps you through the process of setting up informal navigation using the Links component. It includes the following sections:
Section 18.2.5.2.1, "Adding Navigation Links Using the Links Component"
Section 18.2.5.2.2, "Configuring an Advanced Search for Content Links"
Section 18.2.5.2.3, "Configuring a Link in the Links Component"
Section 18.2.5.2.5, "Deleting a Link from the Links Component"
To add links using the Links component:
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.
Select Page Link to open the New Page Link dialog (Figure 18-14).
In the Name field, enter a display name for the link.
For Path, click Browse to open the Select a Page dialog (Figure 18-15).
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.
Click Select.
Click OK.
Select External Link to open the New External Link dialog (Figure 18-16).
In the Name field, enter a display name for the link.
In the URL field, enter the URL to the link target, for example:
http://www.mywebdestination.com
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.
Click OK.
Select Content Link to open the New Content Link dialog (Figure 18-17).
In the Name field, enter a display name for the link.
For Path, click Browse to open the Select Document dialog (Figure 18-18).
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."
Click Select.
Click OK.
The Links component's Advanced Search feature provides controls for specifying additional search criteria and filters for Content Links searches (Figure 18-19).
This search is very similar to an advanced document search. For more information, see Section 41.31.2, "Running an Advanced Document Search."
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).
To configure a link in the Links component:
Go to the Links component instance of interest.
Click the Configure icon to open the Edit type
Link dialog (Figure 18-21).
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."
Click OK.
You can reorder navigation links in a Links layout component by dragging and dropping:
Click and hold on a link.
Drag the link to its new position on the list.
Release the link.
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).
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.
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.
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:
Section 18.2.6.1, "What You Should Know About the Hyperlink Layout Component"
Section 18.2.6.2, "Setting Hyperlink Layout Component Properties"
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.
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."
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 |
---|---|
A field for entering the hyperlink target URL Enter the web address of the page to link to. |
|
Option for determining link target open behavior
|
|
An option for hiding or showing the component on the page
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. |
|
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."
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:
Section 18.2.7.1, "What You Should Know About the Image Layout Component"
Section 18.2.7.2, "Setting Image Layout Component Properties"
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."
Use the Image layout component to add a picture, a logo, a linked image, and the like to a page (Figure 18-24).
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."
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 |
---|---|
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. |
|
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. |
|
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. |
|
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. |
|
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. |
|
A selection of options for placement of the image
|
|
Image
|
|
An option for hiding or showing the component on the page
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. |
|
Open behavior for the link target Enter any standard browser target, such as:
|
|
An optional text label to accompany the image The I |
|
Sets both text and an access key on the image The access key is denoted by a leading ampersand (&). For example, enter An access key provides a keyboard shortcut to an action. In this case, users press |
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."
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:
Section 18.2.8.1, "What You Should Know About the Text Layout Component"
Section 18.2.8.2, "Setting Text Layout Component Properties"
The Text layout component provides a convenient way to add static display text and HTML to a Spaces application page (Figure 18-25).
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
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."
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:
Section 18.2.9.1, "What You Should Know About the Web Page Layout Component"
Section 18.2.9.2, "Setting Web Page Layout Component Properties"
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).
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."
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 |
---|---|
A field for entering Note that, for the Web Page component, the padding-top:30px; |
|
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 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." |
|
An option for hiding or showing the component on the page
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."
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:
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
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 |
---|---|
Provides a means of arranging a series of child components vertically or horizontally (no wrapping), or consecutively (wrapping). The |
|
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." |
|
The parent component of a tab set. For more information, see Section 18.2.10.4, "Setting panelTabbed Properties." |
|
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 For more information, see Section 18.2.10.5, "Setting showDetailFrame Properties." |
|
A child component of a tab set ( |
|
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."
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 |
---|---|
A means of expressing the horizontal alignment of component content Select one of:
|
|
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:
|
|
A means of specifying the orientation of component content Choose from:
|
|
A field for entering
|
|
An option for hiding or showing the component on the page
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. |
|
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:
No theme (none) is the default. |
|
A means of expressing the vertical alignment of component content. Select one of:
|
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."
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
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 |
---|---|
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. |
|
The width of the end facet. Use any standard CSS unit of measure, such as pt, px, pc, li, and so on. |
|
A field for entering tooltip text for the component The tooltip appears when users roll their mouse pointers over the component. |
|
An option for hiding or showing the component on the page
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. |
|
The width of the start facet. Use any standard CSS unit of measure, such as pt, px, pc, li, and so on. |
|
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:
No theme (none) is the default. |
|
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."
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 |
---|---|
Specifies when tab content is rendered
|
|
Specifies the source of the dimensions applied to the component
|
|
The position of the tab portion of the
In accessibility screen reader mode, the tab position is always |
|
A field for entering tooltip text for the component The tooltip appears when users roll their mouse pointers over the component. |
|
An option for hiding or showing the component on the page
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. |
|
Specifies whether some, none, or all tabs can be removed
|
See Also:
For information about working with tabs, see Section 17.3.5.5, "Creating Layered Content Regions Using Tabs."
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
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 |
---|---|
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. |
|
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) |
|
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 |
|
A field for entering tooltip text for the component The tooltip appears when users roll their mouse pointers over the component. |
|
An option for hiding or showing the component on the page
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. |
|
The text to render on the tab The default value, an EL expression, evaluates to |
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."
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 |
---|---|
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. |
|
A field for entering tooltip text for the component The tooltip appears when users roll their mouse pointers over the component. |
|
An option for hiding or showing the component on the page
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. |
|
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."
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:
Section 18.3.1, "Deleting a Layout Component in Design View"
Section 18.3.2, "Deleting a Layout Component in Source View"
To delete a layout component in Design view:
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.
If necessary, open the View menu and select Design.
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
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.
To delete a layout component in Source view:
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.
From the View menu, select Source (Figure 18-32).
In the list of components, select the component to delete.
Click the Delete button on the list header (Figure 18-33).
Figure 18-33 Delete Button in Source View
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.