10 Working with Resource Catalog Components on a Page

Select from a resource catalog to add resources to a portal page, page template, page style, or task flow.

Permissions:

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

See About Roles and Permissions for a Portal.

Topics:

• About Resource Catalogs

• Adding a Component to a Page

• Performing Actions on a Component

• Saving a Customized Task Flow to a Resource Catalog

• Modifying Component Properties

• Deleting a Component from a Page

About Resource Catalogs

On the Assets and Shared Assets pages, WebCenter Portal provides three built-in resource catalogs:

• Default Portal Catalog, assigned to portal pages by default, contains resources to add to pages and task flow assets in a portal.

• Default Home Portal Catalog, assigned to pages in the Home portal by default, contains resources to add to a personal or business role page.

• Default Page Template Catalog, assigned to page templates and page styles by default, contains a Navigations folder and a Portal Components folder, which provide access to resources specifically used in page templates and page styles. Note that all pages in a portal use the same page template, though there may be several page templates available as portal assets.

Alternatively, portal designers can develop custom resource catalogs. Within a portal, you can create a new resource catalog from scratch or copy an existing resource catalog into a new resource catalog. If a resource catalog is a shared asset (available to all portals), it is shown on the Assets page of all portals along with portal-specific resource catalogs.

Resource catalogs are portal assets that expose components and connections that you can add to a portal. You can use a resource catalog to populate pages, page templates, page styles, and task flows. The items listed in a resource catalog are collectively referred to as resources.

The resource catalog available to you as you edit a page, page template, page style, or task flow is established by the portal administration settings, and may be a built-in resource catalog or a custom resource catalog.

Displaying and Using a Resource Catalog

When you edit a page, page template, page style, or task flow, the resource catalog is shown when you click Add Content in any region, or when you click the Show Catalog icon. A resource catalog is organized into folders and subfolders to categorize resources. You can click a folder to expand the resource category, then select the resource that you want to add.

You can navigate back through the resource catalog hierarchy using the icons in the resource catalog menu bar. Use the Search field to locate resources by name or description. Click the Refresh icon to update the resource catalog with newly added resources.

Figure 10-1 shows the Default Portal Catalog, one of the built-in resource catalogs described in About the Built-In Resource Catalogs.

Figure 10-1 Default Portal Catalog

Adding a Component to a Page

The method for adding a component to a page is the same for every resource in the resource catalog.

Notes:

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

• The content of the resource catalog varies according to the services that are integrated with the portal, 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 portal differ from those that appear when you open it from a portal.

• For a full list of all components available in WebCenter Portal, you can see the Resource Registry. If the component you want is not present in the resource catalog assigned to the portal pages, you may need to add it.

To add a component to a page:

1. Open the page in the page editor.

   Figure 10-2 Page Editor

   
   Description of "Figure 10-2 Page Editor"
2. (Optional) To show the resource catalog, click Add Content in an area of the page or click the Show Catalog icon. Click the icon again to hide the resource catalog.

   Figure 10-3 Showing and Hiding the Resource Catalog

   
   Description of "Figure 10-3 Showing and Hiding the Resource Catalog"
3. In the resource catalog, navigate to the component you want to add to the page by clicking folders to drill down to related components, or search for it.

   If the component that you want to add to the page is not included in the resource catalog used by the page, you can create a new version of the resource catalog that includes the components you need, and assign that resource catalog to the page.

   As an example, the following figure shows the components available in the Web Development folder in the resource catalog.

   Figure 10-4 Web Development Components in Resource Catalog

   
   Description of "Figure 10-4 Web Development Components in Resource Catalog"
4. Add new components to the page in the following ways:

   • Click a component in the resource catalog to add it to the area where you clicked Add Content.

   • Drag the component from the resource catalog to a target location on the page.

5. To move components on the page, click the Move icon in the component toolbar and drag it to a new position, or click the View Actions menu and select Move Up or Move Down.

   Figure 10-5 Component Toolbar: Move Icon

   

   Figure 10-6 Component Toolbar: View Actions Menu

   
6. Click Save to save your changes.

Performing Actions on a Component

When editing a page, you can view and perform available actions on any component.

To view and perform actions on a component on a page:

1. Open the page in the page editor.
2. In the component toolbar, click the View Actions menu to view the available actions.

   The available actions may include custom actions added by a developer. The following shows the built-in component actions.

   Figure 10-7 Actions Menu on a Component

   
   Description of "Figure 10-7 Actions Menu on a Component"
3. Select the desired action:

   • Parameters, Access, Display Options, Style, and Content Style to open the associated properties dialog for the component.

   • Move Up and Move Down to reposition the component on the page.

   • Add to Catalog to add the component as a new custom component to the resource catalog for reuse on other portal pages.

   • Delete to delete the component from the page.

Saving a Customized Task Flow to a Resource Catalog

Note:

To perform this task on shared resource catalogs, you must have the application-level Create, Edit and Delete Resource Catalogs permission. Users with the Application Specialist role have this permission by default.

To perform this task on a portal-level resource catalog, you must have the portal-level permission Create, Edit and Delete Assets (standard permissions) or Create, Edit, and Delete Resource Catalogs (advanced permissions).

The resource catalog assigned to pages in a portal contains many task flows that you can add to a page (for example, task flows for all tools and services such as analytics, documents, and so on).

Note:

For a full list of all task flows available in WebCenter Portal, you can refer to the Task Flows folder of the Resource Registry. If you want to use a task flow that is not available to the resource catalog assigned to the portal pages, you can create a custom resource catalog that includes the task flow, and assign that resource catalog to the pages of your portal.

After you have added a task flow to a page, you can modify the properties of the task flow, then save the task flow with those customizations to the resource catalog as a new task flow. This means that you can reuse the customized task flow in other locations in your portal without having to modify the property settings for each instance. This saves time, and ensures consistency.

For example, you can add an RSS task flow to a page, modify the RSS properties to point to a news feed, and set the title to "News". If you save this customized task flow to the resource catalog as "News", then other users can simply select it from the resource catalog to add it to a page. Note that only changes to the properties of a task flow are saved in the new task flow added to the resource catalog. Changes to the content of the task flow remain unique to the task flow instance and are not included when saving the task flow to the resource catalog as a new task flow.

Once added to the resource catalog, the task flow can be selected in the resource catalog by any user who has permissions to edit pages in the portal.

To add a task flow to the resource catalog assigned to pages in a portal:

1. Open the page containing the task flow in the page editor.
2. Optionally, edit the task flow properties to modify parameters and display options as desired. Click Save.
3. In the task flow component's toolbar, click the Actions menu and select Add to Catalog.

   Note:

   The Add to Catalog action is available only if you have permission to create a resource catalog. The existing default resource catalog is copied to a new editable resource catalog, which is set as the default resource catalog for the pages in the portal.

   Figure 10-8 Actions Menu on a Task Flow

   
   Description of "Figure 10-8 Actions Menu on a Task Flow"
4. In the Add to Catalog dialog:

   1. Enter a name for the custom task flow in the resource catalog. A name that duplicates an already existing task flow name is allowable.

   2. Optionally, enter a description.

   3. From the Folder list, select the folder where you want the custom task flow to appear in the resource catalog.

   4. Click Add to Catalog.

   Figure 10-9 Add to Catalog Dialog

   
   Description of "Figure 10-9 Add to Catalog Dialog"
5. Click Save.

   Note:

   Only changes to the properties of a task flow are saved in the new task flow added to the resource catalog. Changes to the content of the task flow remain unique to the task flow instance and are not included when saving the task flow to the resource catalog as a new task flow.

6. Check the resource catalog to confirm that the task flow is listed in the selected folder in the resource catalog. If you do not see the new task flow, try clicking the Refresh icon in the resource catalog.

   Note:

   If a built-in resource catalog, such as the (non-editable) Default Portal Catalog, is assigned to portal pages and you add a task flow to the resource catalog, a new editable version of the resource catalog is automatically created and set as the default resource catalog for the portal. You will find the new editable resource catalog listed on the portal Assets page as Copy of original resource catalog. If desired, you can further edit and manage the new resource catalog.

7. Perform a test by adding the task flow to the current page to verify that it includes the customizations that you made.

   The task flow can be selected in the resource catalog by any user who has permissions to edit pages that are assigned that resource catalog in the portal.

Modifying Component Properties

The components that you can add to a page from the resource catalog have configurable properties that control the appearance and behavior of the component. The properties available differ from component to component.

This section describes how to customize and set properties on page components, including component access:

• About Component Properties

• Setting Properties on a Component

• Setting Component Parameters

• Setting Component Access

• Setting Component Display Options Properties

• Setting Style and Content Style Properties

About Component Properties

You can use component properties to adjust the appearance and behavior of a component instance and to wire components to each other and to page parameters and page definition variables.

The properties for a component are set in the following dialogs:

Note:

For those properties that allow you to type a value, there is no validation of the value that you enter. If you enter an invalid value for such properties, then the component will ignore the property setting.

• Parameters—Settings, unique to the component type, that can control such things as the source of the component's content.

• Access—Security settings to show or hide the component to specific roles, users, or groups.

• Display Options—Settings for determining content orientation, hiding and showing a header, selecting a display method for an actions menu, and so on.

• Style—Font, color, and dimension settings on the component that override such values on the parent component, the page, and the application. Style values affect component content and the elements that surround the content, but may or may not be exposed depending on whether or not the component elements (such as the skin) support modifications to these settings.

• Content Style—Font, color, and dimension settings on component content that override such values specified for Style. These settings may or may not be exposed depending on whether or not the component elements (such as the skin) support modifications to these settings.

Setting Properties on a Component

This section outlines the general steps for setting properties on any page component.

See Also:

For information about properties associated with a particular component, see the section that covers that component.

Note:

• When you enter most types of property values and then click Apply, the properties 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 properties dialog closes after you add the value, and the page refreshes with the new properties.

• In addition to entering literal text (value), you can also enter an Expression Language (EL) expressions (#{value}). If you need EL assistance, an application developer can provide an EL expression; see Expression Language Expressions in Developing for Oracle WebCenter Portal.

• When you enter EL in the generic Display Options dialog, the entry is automatically validated. If the EL syntax is invalid, an error appears and the value is neither applied nor saved. Generic Display Options are those cataloged in Table 10-1.

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

To set properties of a component on a page:

1. Open the page in the page editor.
2. In the component toolbar, click the View Actions menu and select the properties you want to edit.

   Figure 10-10 Edit Action on a Component

   
   Description of "Figure 10-10 Edit Action on a Component"
3. In the properties dialog, edit the component properties.

   Tip:

   Click the Help icon in the properties dialog to navigate to property descriptions for the current component.

4. Click OK to close the properties dialog.

Setting Component Parameters

Component parameters vary from component to component. For example, on some components they provide the opportunity to specify the source and range of task flow content; on other components they present read-only, application-generated identifiers that are used in maintaining a task flow instance's association with its customizations.

When there are no producer components on the page, the Parameters dialog displays only parameter names and values. When there is at least one producer component on the page, and the current component is a consumer component, a parameter can bind to either a specified value or to an event. When bound to an event, additional settings are required to specify event details.

Figure 10-11 Parameters Dialog for a Consumer Component

For more information, see Wiring Events to Component Parameters

To set the parameters for a component on a page:

1. Open the page in the page editor.
2. In the component toolbar, click the View Actions menu and select Parameters to open the Parameters dialog.

   Figure 10-12 Parameters Dialog: Portal Browser Task Flow

   
   Description of "Figure 10-12 Parameters Dialog: Portal Browser Task Flow "
3. Enter parameter values, or click the icon next to a parameter field to select and open the Expression Language (EL) Editor. The editor provides a means of entering an expression when a value is discoverable, but otherwise unknown; for example, when you want a parameter value to be the name of the current user or the current application skin.

   If you need EL assistance, an application developer can provide an EL expression; see Expression Language Expressions in Developing for Oracle WebCenter Portal.

   For parameter descriptions, click the link for the task flow or component you are editing:

   • Activity Stream Task Flow Parameters

   • Analytics Task Flow Parameters

   • Announcements Task Flow Parameters

   • Connections Task Flow Parameters

   • Content Manager Task Flow Parameters

   • Content Presenter Task Flow Parameters

   • Discussions Task Flow Parameters

   • Events Task Flow Parameters

   • Image Component Parameters

   • List Viewer Task Flow Parameters

   • Mail Task Flow Parameters

   • Message Board and Feedback Task Flow Parameters

   • Navigation Breadcrumb Task Flow Parameters

   • Navigation Menu Task Flow Parameters

   • Navigation Tree Task Flow Parameters

   • Notifications Task Flow Parameters

   • Oracle DOCS Content Manager Task Flow Parameters

   • Polls Task Flow Parameters

   • Portal Browser Task Flow Parameters

   • Portal Members Task Flow Parameters

   • Profile Task Flow Parameters

   • Profile Gallery Task Flow Parameters

   • Profile Snapshot Task Flow Parameters

   • Publisher Task Flow Parameters

   • RSS Task Flow Parameters

   • Saved Search Task Flow Parameters

   • Styled Text Component Parameters

   • Subscription Preferences (Notifications) Task Flow Parameters

   • Tags Task Flow Parameters

   • Text Component Parameters

4. Save your changes.

Setting Component Access

By default, the pages you create in a portal are viewable by all portal members. In the Home portal, the personal pages you create are accessible only to you and the system administrator. You can modify the access for a portal or personal page.

There may be pages you want to expose to many users, but certain components on the page to only a select set of users—or even only one user. For example, imagine that you have created a portal for all sales people. The portal's home page includes two Events task flow instances: one for all sales people and one for sales managers only. You can secure the second Events instance so that only those users assigned the custom role sales_manager can see it.

By default, a component on a portal page is visible to all users who have access to the page. You can set the component's Access properties to show or hide the component, or specify more granular visibility by role or user, or by using an EL expression.

Any component that has associated Access properties can be secured in this way. Those components that do not have associated Access properties can be placed inside a component that does (such as a Box component), and in this way be secured.

See Also:

You can also set security on the custom components that you import through the Assets Manager. For more information, see Setting Security for an Asset.

To set the access (visibility) for a component on a page:

1. Open the page in the page editor.
2. In the component toolbar, click the View Actions menu and select Access to open the Access dialog.

   Figure 10-13 Component Access Dialog

   
   Description of "Figure 10-13 Component Access Dialog"
3. Select a Visibility option:

   • Show component (default) to specify that the component is always visible to all users.

   • Hide component to specify that the component is not shown when the page is viewed. However, the component is shown when editing the page in the portal editor, so that you can modify its Access settings.

   • Customize by role or user to select specific roles and users who can access the component. When this option is selected, the current user is given Visible access to the component by default.

     See step 4.

   • Customize using EL to enter Expression Language (EL) that must evaluate to true for the component to be visible.

     See step 5

4. If you select Customize by role or user, click Add Access, then:

   • Select Add Users or Add Groups to search for and select individual users or groups of users available in your identity store.

     Tip:

     For help on searching for a user or group, see Searching for a User or Group in the Identity Store.

   • Select Add Roles to search for and select defined roles.

   • Select Add Authenticated Role to change component access for all authenticated users (that is, to users who are logged in to WebCenter Portal).

     This selection adds the role authenticated-role under Role or User, with access to the component by default.

   • Select Add Anonymous to change component access for all public users (that is, users who are not logged in to WebCenter Portal).

     This selection adds the role anonymous-role under Role or User with access to the component by default.

     Note:

     To grant component access to the anonymous-role (that is, to enable users who are not logged in to access the portal) the portal must be public. The portal cannot be private or hidden.

   • To remove component visibility, select the user, group, or role in the Role or User list, then click Delete Access.

     Figure 10-14 Setting Component Access

     
     Description of "Figure 10-14 Setting Component Access "
5. If you select Customize using EL, enter Expression Language (EL) that must evaluate to true for the component to be visible.

   Note:

   If you need EL assistance, an application developer can provide an EL expression; see Expression Language Expressions in Developing for Oracle WebCenter Portal.

   For example:

   • To expose a component only to members of a particular scope who are assigned a particular role in that scope, enter:

     #{WCSecurityContext.userInScopedRole['role']}
     

     where role is a role name, such as sales_manager.

     The scope is implicitly resolved to be the current scope:

     • If you use this EL in the Home portal, it resolves to Home portal GUID and roles defined at the application level.

     • If you use this EL in a portal scope, it resolves to roles defined for the portal.

   • To expose a component only to members of a group, enter:

     #{WCSecurityContext.userInGroup['group_name']}
     

   • To expose a component only to a specific user, enter:

     #{WCSecurityContext.currentUser['user_name']}
     

6. Save your changes.

Setting Component Display Options Properties

Component display options control a range of display-related behaviors on a given component instance. Typically, display options settings affect the display elements surrounding component content (that is, its chrome). Chrome includes the header, the Actions menu, Expand and Collapse icons, and so on. For example, use the display options on a task flow component to hide or show a header and enable or disable menus and other options on the header.

Though it is not obvious in the page editor, the showDetailFrame component is usually wrapped around task flows. Consequently, the Display Options dialog for task flows, and any other component wrapped in a showDetailFrame, share the same Display Options properties.

The Display Options dialog for several components is divided into two subtabs: Basic and Advanced. This provides a means of separating an otherwise long list of display options into more manageable and relevant groups.

Note:

While Display Options are available for all components, the settings may not have an effect on some components.

The following table lists and describes the Display Options properties that generally apply to most components. Where there are variations, they are noted in the tables covering the specific components.

Table 10-1 Display Options Properties

Property	Description
Allow Minimize	Select whether to show the minimize action on the component header (that is, a Collapse icon on the component chrome). Select the check box to show the Collapse icon. Deselect the check box to omit the Collapse icon. The minimize action collapses the component like a window shade, leaving only its header on view. When a component is minimized, the icon toggles to an Expand icon, which you can use to restore the full component to view.
Allow Move	Select whether to enable users to move the component on the page. Choose from: enabled—Component can be moved using the Move options (Move Up, Move Down, Move Left, and Move Right) on the component Actions menu. The Move options that show depend on the orientation of the parent container (horizontal or vertical). Move options are context sensitive. For example, in a vertically-oriented parent container if there are no components above the current task flow the Move Up option does not appear on the Actions menu. drag and drop only—Component can be moved using drag and drop only. disabled—Component cannot be moved.
Allow Remove	Select whether to show the Remove icon on the component header (that is, the component chrome) when the page is in view mode. Choose from: Select the check box to show the Remove icon on the component header in view mode. Deselect the check box to omit the Remove icon in view mode. Note that after you select to remove a component in this way in page view mode, you can restore the component only by editing the page and adding another component instance. As a page author, you may not wish to allow end users to remove a component when viewing the page. Users authorized to edit the page can remove the component in the page editor.
Allow Resize	Select whether to show a window resizer on a component instance. The window resizer enables you to increase the component height. Select the check box to show the Resize option on the component. Deselect the check box to omit the Resize option. Note: Selecting this property fixes the height of a showDetailFrame component, so the content will have a scrollbar or white space to fill the area depending on whether the content is larger or smaller than the resized showDetailFrame component. Deselecting Allow Resize is recommended to allow the content flow, so when there is more content the showDetailFrame component is bigger.
Chrome Style	Select to specify a shade for the component background. Enter: light—Light is transparent; the prevailing background color shows through medium—Medium draws an light line below the header area. dark—A graduated shade moving from the bottom of the header area to the top of the component from transparent to dark. coreDefault—A graduated shade slightly lighter than dark
Display Header	Select this check box to show a header on the component instance.
Display Shadow	Select to render a shadow behind the component instance.
Font	Specify the font to use for text appearing in the component header. Enter one or more fonts. Separate multiple values with a comma (,), for example arial,helvetica,sans serif. Enclose font names that contain spaces in single quotation marks, for example 'Times New Roman'. The browser tries to use the first value, and uses other values in turn, depending on which font is available to the local system.
Font Color	Select a color for the text appearing in the component header. Select a color using one of the following techniques: Select a color by clicking it. Enter the color's RGB equivalent in the Font Color field. Enter RGB values in the format RRGGBB or #RRGGBB or r,g,b Create a custom color by clicking Custom Color in the picker and selecting a color and a saturation level using the selector and the slider provided.
Font Size	Specify the size of text appearing in the component header. Enter a value using one of the following types of values: length–Sets the font size to a fixed size. For example, enter: 14px, 1.5em, and so on xx-small, x-small, or small medium–The default large, x-large, or xx-large smaller–Sets the font size to a size smaller than the parent element. larger–Sets the font size to a size larger than the parent element. %–Sets the current font size to a percentage of the font size of the parent element. For example, enter: 75%
Font Style	Select an option for applying a font style to the text in a component header. Choose from: Bold Italic Underline Strikethrough
Short Desc	Provide tooltip text for the component instance. When users roll their mouse pointers over the component instance, the text you enter here pops up.
Show Actions	Select whether to enable users to move the component on the page. Choose from: On Hover—Show actions only when users hover their mouse pointers over the component header. Always (default)—Always show actions on the component header. Never—Never show actions on the component header.
Stretch Content	Select whether to stretch the component content. auto (default): The content stretches to fill the container. true: Stretch the content to fill the container, so that the container shows only one component at a time false: Do not stretch the content
Text	Enter text to appear in the component header. If you select to hide the header, the value you enter here is ignored.

To set the display options for a component on a page:

1. Open the page in the page editor.
2. In the component toolbar, click the View Actions menu and select Display Options to open the Display Options dialog.

   Figure 10-15 Component Display Options: Basic Properties

   
   Description of "Figure 10-15 Component Display Options: Basic Properties"
3. Enter display options values on the Basic and Advanced tabs, or click the icon next to a field to select and open the Expression Language (EL) Editor. The editor provides a means of entering custom values, such as text strings and Expression Language (EL) expressions.

   Note:

   When you enter EL in the generic Display Options dialog, the entry is automatically validated. If the EL syntax is invalid, an error appears and the value is neither applied nor saved. .

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

   If you need EL assistance, an application developer can provide an EL expression; see Expression Language Expressions in Developing for Oracle WebCenter Portal.

   For display option descriptions, refer to the table above or refer to component-specific display options:

   • gridCell Component Display Options

   • gridRow Components Display Options

   • HTML Markup Component Display Options

   • Hyperlink Component Display Options

   • Movable Box Component Display Options

   • panelGridLayout Display Options

   • panelGroupLayout Display Options

   • panelStretchLayout Display Options

   • panelTabbed Display Options

   • showDetailFrame Display Options

   • sidebarItem Display Options

   • spacer Display Options

   • WebCenter Portal Components Display Options

   • Web Page Component Display Options

4. Save your changes.

Setting Style and Content Style Properties

Style and Content Style properties can be used to fine-tune your portal's look and feel at the component level:

• Style properties apply to the ShowDetailFrame container of the component instance, overriding any styles specified for the component through the component's parent container, the page, and the application.

• Content Style properties apply to the content within the ShowDetailFrame container of the component instance, overriding any styles specified for Style properties, the page, and the application.

For example, in a Movable Box component, Style settings control the look and feel of the Movable Box; Content Style settings control the look and feel of the components contained within the Movable Box. This look and feel may, in turn, be overridden by the Style settings set on those individual components.

Note, however, that Content Style properties set for a container, such as a Movable Box, may not take effect if the component inside the container overrides the container Content Style properties by a means other than the component's own Content Style properties. For example, the background color set for a Movable Box that contains a task flow may not take effect if, at design time, instead of being set to inherit from the container, the task flow background color was set with a hard-coded value.

Additionally, the Style and Content Style settings may or may not be exposed depending on whether or not the component elements (such as the skin) support modifications to these settings. Thus, while you can set Style and Content Style properties for a component, these settings may not take effect due to other settings that apply to the component.

Table 10-2 Style and Content Style Properties

Property	Description
Background Color	Select a component background color. If you specify a background color for Content Style, then the background color specified for the Style property is not applied.
Background Image	Enter the URL to an image you want to render in the component background. Use standard CSS syntax. For example: url(http://www.abc.com/image.jpg)
Color	Select a default color for any text included in the component instance. For example, imagine that you have added a Text component to a Box component. When you set Box Style properties, the default text color you apply to the Box is also automatically applied to the Text component, unless you also define a Color value for the Text component. Select a color using one of the following techniques: Select a color by clicking it. Enter the color's RGB equivalent in the Color field. Enter RGB values in the format RRGGBB or #RRGGBB or r,g,b Create a custom color by clicking Custom Color in the picker and selecting a color and a saturation level using the selector and the slider provided.
Font	Specify the font to use for text appearing in the component header. Enter one or more fonts. Separate multiple values with a comma (,), for example arial,helvetica,sans serif. Enclose font names that contain spaces in single quotation marks, for example 'Times New Roman'. The browser tries to use the first value, and uses other values in turn, depending on which font is available to the local system.
Font Size	Enter the size of component text relative to either your browser's default font size or the font size of the parent element. Enter one value from the following types of values: length–Sets the font size to a fixed size. For example, enter: 14px. 1.5em, and so on xx-small, x-small, or small medium–The default large, x-large, or xx-large smaller–Sets the font size to a size smaller than the parent element. larger–Sets the font size to a size larger than the parent element. %–Sets the current font size to a percentage of the font size of the parent element. For example, enter: 75%
Font Style	Select the style for the component fonts. Choose from: Bold Italic Underline Strikethrough The font style you select here applies to any text inside the component.
Height	Specify the height of component content. Set a fixed height for component content. You can use any standard CSS unit of measure, such as pt, px, pc, li, and so on. Avoid expressing a Height value as a percentage. Because of differences between browsers and between layout containers, percentages do not work as you expect. For example, resizing an image using a % value will resize its parent container, not the image itself. 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 Height property works with the Stretch Content property, available in the Display Options dialog. Stretch Content enables a container to stretch its content to the specified height.
Margin	Specify the border of space to draw around the component. Enter one of the following types of values: An absolute value. Include your preferred unit of measurement. For example: 2px Use only those units of measurement supported in standard CSS, such as pt, px, pc, li, and so on. A percentage of the margin of a parent component (provide a percent sign with your value, such as 10%). auto: Set the value automatically according to browser defaults.
Other CSS	Specify additional CSS for the component. Add any other CSS encoding you care to that is not covered by the other Style or Content Style properties. You must use standard CSS syntax for this value to be valid. For example, a setting of padding:0 removes all padding on a Box component, useful when nesting boxes inside boxes.
Style Class	Specify the CSS style class to use for this component. For example, you can use this property to target specific skin settings on an individual Box component. The style class may be defined in your JSF (.jspx) or skinning CSS file. Note: Style classes are a set of styles bundled together and given a name. In contrast, values entered for Other CSS are individual styles. Style Class values are added to a component's styleClass attribute. Other CSS values are added to a component's inlineStyle attribute. This property appears only in the Style dialog.
Width	Specify the width of component content. Set a fixed width for component content. You can use any standard CSS unit of measure, such as pt, px, pc, li, %, and so on. Avoid expressing a Width value as a percentage. Because of differences between browsers and between layout containers, percentages do not work as you expect. For example, resizing an image using a % value will resize its parent container, not the image itself. 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.

To set the Style and Content Style properties for a component on a page:

1. Open the page in the page editor.
2. In the component toolbar, click the View Actions menu and select either Style or Content Style to open the associated dialog.

   Figure 10-16 Style Dialog

   
   Description of "Figure 10-16 Style Dialog"

   Figure 10-17 Content Style Dialog

   
   Description of "Figure 10-17 Content Style Dialog"
3. Enter values for Style and Content Style properties, or specify your own values through the Other CSS property.
   See "Other CSS Property: Usage and Examples").
4. Save your changes.

Other CSS Property: Usage and Examples

The Other CSS property allows you to apply CSS styles that are not covered by other properties. Use standard CSS syntax, separating multiple entries with a semicolon (;). Use the Style Class property to specify the CSS style class to use for the component.

See http://www.w3.org/TR/CSS2/propidx.html.

For example:

background: #00FF00 url(http://www.google.com/intl/en_ALL/images/logo.gif) no-repeat fixed top; font-size: xx-small

Note:

Some CSS styles are not supported by popular browsers. Moreover, some styles are specific to one browser and may not work correctly in another browser

One example application of the Other CSS property is to provide a variety of borders on task flows, portlets, and some web development components.

To create a border on a task flow, access its properties and add CSS encoding in the Other CSS field in the Style dialog.

Figure 10-18 Adding CSS Encoding to a Component

Description of "Figure 10-18 Adding CSS Encoding to a Component"

Figure 10-19 A Border Created Through the Other CSS Property

Description of "Figure 10-19 A Border Created Through the Other CSS Property"

This table provides examples of CSS you can use the set the Other CSS property.

Value	Description and Examples
font-size	Size of component text relative to either your browser's default font size or the font size of the parent element. Syntax: font-size:value where value is one of the following: length—fixed font size; for example: font-size: 14px. xx-small x-small small medium—default. large x-large xx-large smaller—smaller font than the parent element. larger—larger font than the parent element. x%—a percentage of the font size of the parent element; for example: font-size: 75%.
background-position	Starting position of a background image. Syntax: background-position:value1 value2
.	Typically, you enter two values. Except where noted, if you specify only one value, the second value is interpreted as center. value1 value2 express horizontal and vertical as positions in any of the following combinations: top left top center top right center left center center center right bottom left bottom center bottom right x% y%—Horizontal (x) and vertical (y) positions expressed as percentage. The top left corner is 0% 0%. The bottom right corner is 100% 100%. If you specify only one value, the other value is interpreted as 50%. You can mix % and positions. x y—Horizontal (x) and vertical (y) positions expressed as unit of measure. The top left corner is 0 0. Units can be pixels (0px 0px) or other CSS units. If you specify only one value, the other value is interpreted as 50%. You can mix % and positions. For example: background-position: top left
background-repeat	Repetition value for the background image. Syntax: background-repeat:value where value is one of the following: no-repeat—Do not repeat the image. repeat—Repeat the image to fill the container. repeat-x—Repeat the image horizontally but not vertically. repeat-y—Repeat the image vertically but not horizontally.
padding	White space (or clear space) around a component. Enter up to four values. Express values in a specific length or as a percentage of the closest element, using any standard CSS unit of measure, such as pt, px, pc, li, %, and so on. One value sets padding for all four sides. For example: padding: 10px Two values set padding for top/bottom and left/right. For example: padding: 10px 15px Three values set padding for top, left/right, and bottom. For example: padding: 10px 5% 10px Four values set padding in turn for top, right, bottom, left. For example: padding: 5px 10px 15px 20px
padding-bottom	White space (or clear space) below of the element. Express values in a specific length or as a percentage of the closest element. For example: padding-bottom: 10px
padding-left	White space (or clear space) at the left side of the element. Express values in a specific length or as a percentage of the closest element. For example: padding-left: 2%
padding-right	White space (or clear space) at the right side of the element. Express values in a specific length or as a percentage of the closest element. For example: padding-right: 1pc
padding-top	White space (or clear space) above the element. Express values in a specific length or as a percentage of the closest element. For example: padding-top: 16pt

Deleting a Component from a Page

To delete a component from a page:

1. Open the page in the page editor.
2. In the component toolbar, click the Actions menu and select Delete component name

   Figure 10-20 Remove Action on a Component

   
   Description of "Figure 10-20 Remove Action on a Component"
3. In the confirmation dialog, click Delete.

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

4. Click Save to save your changes.