18 Editing a Page

One of the most powerful offerings in a Spaces application is the ability to add and edit page content at application runtime. This capability is delivered through Composer, a fully-integrated page editor for revising space pages.

Using Composer, you can change a page layout; add task flows, portlets, documents, and other components to a page; provide values for the properties associated with pages and the objects they contain; and wire pages, task flows, and portlets to each other.

This chapter provides an overview of Composer and describes how to perform basic editorial tasks in the following sections:

See Also:

The following chapters describe additional tasks in Composer:

Audience

This chapter is intended for users with the space-level permission Basic Services: Edit Page Access, Structure, and Content. The users with this permission are typically tasked with creating and editing pages, revising page properties, adding page content, and deleting pages from a space.

18.1 Entering and Exiting Composer

When you enter page edit mode, you are opening the page in the page editor, Composer.

To enter and exit Composer, perform either of the following actions:

  • Navigate to the page you want to edit, then press Ctrl+Shift+E (Figure 18-1).

    To navigate to a personal page in the Home space:

    http://host:port/webcenter/spaces/profile/userName/page/escapedPageDisplayName

    Tip:

    The variable userName is your user name or the name of the user who owns the page in the Home space. The variable escapedPageDisplayName indicates the use of an escaped version of the page display name. For example, when you create a page with the name My Page, the URL to this page ends with My+Page.

    To navigate to a page in a space:

    http://host:port/webcenter/spaces/spaceName/page/escapedPageDisplayName

  • On the Personalize Pages page or the space Pages page, select the page, then click the Actions menu for the page, and select Edit Page to open it in Composer (Figure 18-1).

    See Also:

    Figure 18-1 Example of a Page in Edit Mode

    Example of a page in edit mode
    Description of "Figure 18-1 Example of a Page in Edit Mode"

  1. Edit the page as desired.

  2. Click Save to save your changes.

  3. Click Close to exit page edit mode.

A Few Notes About Concurrent Users

Because users access the Spaces application from the Web, multiple users may attempt to edit the same page at the same time. In such cases, a concurrency warning appears in Composer that alerts each user to the others (Figure 18-2).

Figure 18-2 A Concurrency Warning in Composer

Concurrency warning in Oracle Composer
Description of "Figure 18-2 A Concurrency Warning in Composer"

The final state of the page is determined by the last user to save. That is, the last changes saved overwrite the changes made by other concurrent users.

Tip:

Time duration is added to the concurrency message only when the first or a subsequent concurrent user has made (but not yet saved) a page customization.

The Spaces application does not support single-user concurrency. That is, one user cannot create multiple, simultaneous application sessions.

Because concurrent page editing by multiple users is supported, there may be occasions when one user deletes a page that another user is editing. In such cases, the user performing the edits sees an error message with each action. For example, a message saying the user does not have permission to edit the page may appear. When the user tries to save changes, a Page Not Found error appears with a link redirecting the user to the Home page. The error message may differ, depending on whether the user is editing a page in a space or the Home space.

If you view a page while another user is editing it, you may not immediately see the results of those edits in your session. To reliably see any changes, view the page after the other user has saved.

If you revise a component in page view mode while another user deletes the same component in page edit mode, an error page opens. Simply navigate back to the original page. The deleted component does not appear, and you can continue working on other components.

18.2 Introducing Design View and Source View

Composer provides two views for working with page content: Design view and Source view. To open either of these views, enter Composer, and select Source or Design from the View menu (Figure 18-3).

Figure 18-3 View Menu in Composer

View menu in Oracle Composer
Description of "Figure 18-3 View Menu in Composer"

Design view provides a WYSIWYG rendering of the page and its content, where controls are directly selectable on each component (Figure 18-4).

Figure 18-4 Design View of Page Edit Mode

Design view of page edit mode
Description of "Figure 18-4 Design View of Page Edit Mode"

Source view provides a combined WYSIWYG and hierarchical rendering of page components, where controls are available on the header of the hierarchical list (Figure 18-5)

Figure 18-5 Source View of Page Edit Mode

Source view of page edit mode
Description of "Figure 18-5 Source View of Page Edit Mode"

Tip:

In Source view, controls on individual components are inactive, but you can click an individual component to select it.

The Source position option on the View menu is available for specifying whether the page source is presented on the top, bottom, left, or right of the WYSIWYG portion of the page. The Source position option is active when the page is open in Source view (Figure 18-6).

Figure 18-6 Source Position Options on View Menu in Page Edit Mode

Source position options on View menu
Description of "Figure 18-6 Source Position Options on View Menu in Page Edit Mode"

Source view additionally provides access to page components that are otherwise not exposed on the page (for examples, see Chapter 20, "Working with Layout Components on a Page"). Source view enables the selection and configuration of such components. Select a component on the hierarchical list to also select it on the page. Component selection is indicated by an outline. Access the selected component's properties by clicking the Show the properties of component name icon on the Source view header (Figure 18-7).

Figure 18-7 Show the Properties of Everyone Icon

Show the properties icon
Description of "Figure 18-7 Show the Properties of Everyone Icon"

You can also select components in Source view by clicking them directly on the page. In Source view, your mouse cursor changes to a magnifying glass when you move it over a selectable component (Figure 18-8).

Figure 18-8 Mouse Cursor as Magnifying Glass

Mouse cursor as magnifying glass
Description of "Figure 18-8 Mouse Cursor as Magnifying Glass"

18.3 Providing Page Background Color, Image, and CSS Encoding

Page properties provide a means of controlling the width of page columns, specifying a page background color and image, and applying additional CSS encoding to the page. Additionally, page properties provide access to page security settings and to page parameters, which you can use in wiring pages to page components.

See Also:

For information about page security settings, see Chapter 26, "Securing Pages and Components." For information about page wiring, see Chapter 22, "Wiring Pages, Task Flows, Portlets, and UI Components."

To edit a page's properties:

  1. Open the page in edit mode (see Section 18.1, "Entering and Exiting Composer").

  2. Click the Page Properties button (Figure 18-9).

    Figure 18-9 Page Properties Button in Page Edit Mode

    Page Properties button in page edit mode
    Description of "Figure 18-9 Page Properties Button in Page Edit Mode"

    The Page Properties dialog opens (Figure 18-10).

  3. If necessary, click the Display Options tab to bring it forward, open the color picker next to Background Color, and select a background color for the page in one of the following ways (Figure 18-10):

    Figure 18-10 Page Background Color Picker

    Page background color picker
    Description of "Figure 18-10 Page Background Color Picker"

    • Select a color by clicking it.

    • Enter the color's RGB equivalent in the Background Color field.

      Tip:

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

      Figure 18-11 Custom Color Picker

      Custom color picker
      Description of "Figure 18-11 Custom Color Picker"

      Click OK to enter the color value in the Background Color field.

  4. In the Background Image field, enter a full URL or a URL that is relative to the application root.

    For example, enter:

    http://www.abc.com/image.jpg

  5. In the Other CSS field, add any other CSS encoding you care to that is not covered by the other page properties.

    For example, enter:

     background-position:center;

    You must use standard CSS syntax for this value to be valid (for more information about Other CSS, see Section 18.6.6.3, "Entering Other CSS").

  6. Click OK to save your changes and apply them to the page.

18.4 Changing the Page Layout

This section describes how to revise the page layout by adjusting underlying page columns and adding tabs and content areas. It includes the following subsections:

18.4.1 What You Should Know About Page Layouts

Page layout is defined by the number, placement, and orientation of content regions on a page and the widths of page columns. The initial layout for a page is based on the page style selected when the page is created. While you can modify the layout of an individual page, it is not possible to globally change the page layout of all pages that are built on the same page style.

See Also:

Table 15-2, "Default Page Styles" illustrates WebCenter default page styles.

If a page uses parameters to derive its layout, then the page parameters can be used to change the layout. You can add content regions to a page to change the page layout, and add tabs to create layered content regions.

18.4.2 Providing a Page Header and Footer

Many of the seeded page styles have associated page properties that you can use to add a header and footer to a page. These styles include:

  • Blank

  • Home Page

  • Left Narrow

  • Right Narrow

  • Three Column

Adding a page header adds a content area to the top of the page. Adding a page footer adds a content area to the bottom of the page. Both of these content areas are immune to user customizations, preventing them from being dragged to a new position or otherwise altered in page view mode. Figure 18-12 and Figure 18-13 illustrate a page in edit mode Design view before and after a header and footer are added.

Figure 18-12 A Page Based on the Style Three Column Before a Header or Footer Is Added

Description of Figure 18-12 follows
Description of "Figure 18-12 A Page Based on the Style Three Column Before a Header or Footer Is Added"

Figure 18-13 A Page Based on the Style Three Column After a Header and Footer Are Added

Description of Figure 18-13 follows
Description of "Figure 18-13 A Page Based on the Style Three Column After a Header and Footer Are Added"

This section steps you through the process of adding a header and footer to a page that is based on one of these styles.

To add a page header or footer:

  1. Open the page in edit mode (see Section 18.1, "Entering and Exiting Composer").

  2. Click Page Properties (Figure 18-14) to open the Page Properties dialog.

    Figure 18-14 Page Properties Button in Page Edit Mode

    Page Properties button in page edit mode
    Description of "Figure 18-14 Page Properties Button in Page Edit Mode"

  3. Click the Parameters tab to bring it forward.

  4. To add a page header, change the value of showHeader to true; to add a page footer, change the value of showFooter to true (Figure 18-15).

    Figure 18-15 Default Page Parameters for the Three Column Page Style

    Default page parameters
    Description of "Figure 18-15 Default Page Parameters for the Three Column Page Style"

  5. Click OK.

  6. Add content as desired to the page header and footer layout Boxes (Figure 18-16).

    Figure 18-16 Unpopulated Page with a Header and Footer

    Page with header and footer
    Description of "Figure 18-16 Unpopulated Page with a Header and Footer"

    See Also:

    For information about adding content to a page, see Section 18.5, "Adding a Component to a Page." For information about adding components to a page, such as images, text, HTML, and the like, see Chapter 20, "Working with Layout Components on a Page"

  7. Click Save and then Close to exit Composer.

18.4.3 Adjusting the Widths of Page Columns

Many seeded page styles come with parameters that control the percentage of width allotted to each underlying page column (Figure 18-17).

Figure 18-17 Default Page Parameters for the Three Column Page Style

Default page parameters
Description of "Figure 18-17 Default Page Parameters for the Three Column Page Style"

Like the default widths that are assigned with a given page style, the width values that you enter are fixed values. That is, they do not expand should you add content that exceeds the stated width.

The seeded page styles that provide column width parameters include:

  • Blank

  • Blog

  • Home Page

  • Left Narrow

  • Right Narrow

  • Three Column

The seeded page styles that do not provide column width parameters include:

  • Web Page

  • Wiki

See Also:

For illustrations and descriptions of seeded page styles, see Table 15-2, "Default Page Styles".

You can adjust the default values of these parameters to control the width of page layout columns.

To adjust the width of page columns:

  1. Open the page in edit mode (see Section 18.1, "Entering and Exiting Composer").

  2. Click Page Properties to open the Component Properties dialog (Figure 18-18).

    Figure 18-18 Page Properties Button in Page Edit Mode

    Page Properties button in page edit mode
    Description of "Figure 18-18 Page Properties Button in Page Edit Mode"

  3. Adjust the leftWidth, centerWidth, and rightWidth parameter values to the desired percentages (Figure 18-19).

    Figure 18-19 Default Page Parameters for the Three Column Page Style

    Default page parameters
    Description of "Figure 18-19 Default Page Parameters for the Three Column Page Style"

  4. Click OK.

  5. Click Save and then Close to exit Composer.

18.4.4 Adding New Content Regions

You can add content regions to a page by splitting existing Box components on the page. This section describes how. It includes the following subsections:

See Also:

For information about Boxes and other components, see Chapter 19, "Working with Web Development Components on a Page."

18.4.4.1 Enabling Box Splitting

You can create additional content regions by splitting a Box into multiple Boxes. Before you can split a Box, the Box must be configured to allow it.

See Also:

You can also create additional content regions by adding more Boxes to a page. For more information, see Section 19.2, "Adding a Web Development Component to a Page."

To enable the splitting of a Box on a page:

  1. Open the page in edit mode (see Section 18.1, "Entering and Exiting Composer").

  2. Click the Edit icon on a Box to open the Component Properties dialog.

  3. Click the Display Options tab, and elect Show Split Action (Figure 18-20).

    Figure 18-20 Box Component Display Options

    Box layout component Display Options
    Description of "Figure 18-20 Box Component Display Options"

  4. Click OK.

    Add Box icons appear on the Box's toolbar (Figure 18-21).

    Figure 18-21 Add Box Icons

    Add Box icons
    Description of "Figure 18-21 Add Box Icons"

18.4.4.2 Splitting a Layout Box

To split a Box component on a page:

See Also:

Before you can split a Box, it must be configured to allow it. For more information, see Section 18.4.4.1, "Enabling Box Splitting."

  1. Open the page in edit mode (see Section 18.1, "Entering and Exiting Composer").

  2. Go to the Box you want to split, and click the Add Box icon that splits the Box in the manner you prefer (Figure 18-22).

    Figure 18-22 Add Box Below Icon

    Add Box Below icon
    Description of "Figure 18-22 Add Box Below Icon"

    Select from:

    • Add Box Above

    • Add Box Below

    • Add Box Left

    • Add Box Right

  3. Click Save and then Close.

See Also:

For information about setting properties on a Box component, see Section 19.4, "Working with the Box Component"

18.4.5 Creating Layered Content Regions Using Tabs

When page real estate is tight, you can add layered content regions using tabs. Tabs are content regions that each have a tab and sit on top of other tabbed content regions (Figure 18-23).

Figure 18-23 Tabbed Content Regions

Tabbed content regions
Description of "Figure 18-23 Tabbed Content Regions"

Much of the actions you can perform on a tab, such as renaming, reordering, and so on, are available through tab properties. This section describes how to add tabbed content regions and how to perform various actions on tabs through tab properties.

This section includes the following subsections:

See Also:

For information about working with tab properties, see Section 20.4, "Setting panelTabbed Properties," and Section 20.6, "Setting sidebarItem Properties."

18.4.5.1 Enabling the Addition of Tabbed Content Regions

The creation of tabbed content regions takes place initially on a Box component. Before you can create tabs on a Box, the Box must be configured to allow the creation of tabs.

To enable a Box to support the creation of tabs:

  1. Open the page in edit mode (see Section 18.1, "Entering and Exiting Composer").

  2. Click the Edit icon on a Box to open the Component Properties dialog.

  3. Click the Display Options tab, then select Show Tab Action. (Figure 18-24).

    Figure 18-24 Box Component Display Options

    Box layout component Display Options
    Description of "Figure 18-24 Box Component Display Options"

  4. Click OK.

    The Add a Tab Set or a Tab icon appears on the Box's toolbar (Figure 18-25).

    Figure 18-25 Add a Tab Set or a Tab Icon

    Add a Tab Set or a Tab icon
    Description of "Figure 18-25 Add a Tab Set or a Tab Icon"

18.4.5.2 Adding Tabbed Content Regions

Each tab you add to a page provides its own region to which you can add content. In page edit mode, you will note the Add Content button on the tab.

Note:

The icon for adding tabs appears on Box components only when the Box is configured to allow the creation of tabs. For more information, see Section 18.4.5.1, "Enabling the Addition of Tabbed Content Regions."

To add tabbed content regions on a page:

  1. Open the page in edit mode (see Section 18.1, "Entering and Exiting Composer").

  2. In the region (Box component) where you want to add tabs, click the Add a Tab Set or a Tab icon (Figure 18-26).

    Figure 18-26 Add a Tab Set or a Tab Icon

    Add a Tab Set or a Tab icon
    Description of "Figure 18-26 Add a Tab Set or a Tab Icon"

    A tab appears, containing the content present in the layout region on which the tab was created (Figure 18-27).

    Figure 18-27 A Newly-Added Tab

    A newly-added tab
    Description of "Figure 18-27 A Newly-Added Tab"

  3. Continue adding tabs as desired.

    Click Save and then Close to exit Composer.

See Also:

For information about renaming a tab, see Section 18.4.5.4, "Reordering and Renaming Tabs."

18.4.5.3 Creating a Tab Set

When you intend to create tabs, you are likely to want to create a set of tabs rather than just one. A quick way to accomplish this is available through tab properties.

To create a tab set on a page:

  1. Open the page in edit mode (see Section 18.1, "Entering and Exiting Composer").

  2. Click the Edit icon on the tab you want to include in your tab set (Figure 18-28).

    Figure 18-28 Edit Icon on a Tab

    Edit icon on a tab
    Description of "Figure 18-28 Edit Icon on a Tab"

  3. In the resulting Component Properties dialog, on the Tabs tab, click Add Tab to add a tab to the list headed Reorder the tabs (Figure 18-29).

    Figure 18-29 Add Tab Button in Component Properties Dialog

    Add Tab button in Component Properties dialog
    Description of "Figure 18-29 Add Tab Button in Component Properties Dialog"

  4. Continue in this manner until you have the desired number of tabs.

    See Also:

    For information about renaming a tab, see Section 18.4.5.4, "Reordering and Renaming Tabs."

  5. Click OK to save your changes and exit the dialog.

  6. Click Save and then Close to exit Composer.

18.4.5.4 Reordering and Renaming Tabs

Once you create a tab, you can use tab properties to change its default name, New Tab. You can also use page properties to change the tab order.

To rename and reorder tabs on a page:

  1. Open the page in edit mode (see Section 18.1, "Entering and Exiting Composer").

  2. Click the Edit icon on the tab you want to rename or reorder.

  3. In the resulting Component Properties dialog, bring the Tabs tab forward, select the tab you want to rename or reorder in the Reorder the tabs list, and do one of the following.

    • To rename the tab, enter the new name in the Text field.

    • To reorder the tab, click a Move icon to the right of the Reorder the tabs list.

  4. Click OK to save your changes and exit the dialog.

  5. Click Save and then Close to exit Composer.

18.4.5.5 Adding an Icon to a Tab

You may want to add a meaningful icon to a tab to make its purpose obvious to knowledgeable users. Added icons are rendered to the left of the tab display name (Figure 18-30).

Figure 18-30 Icon on a Tab

Icon on a tab
Description of "Figure 18-30 Icon on a Tab"

To add an icon to a tab on a page:

  1. Open the page in edit mode (see Section 18.1, "Entering and Exiting Composer").

  2. Click the Edit icon on the tab to which to add an icon.

  3. In the resulting Component Properties dialog, bring the Tabs tab forward, select the tab in the Reorder the tabs list, and provide the URI of an image in the Icon Location field.

    This property supports these various types of URIs:

    • An absolute path to the image, such as:

      http://oracleimg.com/admin/images/ocom/hp/oralogo_small.gif

    • A path located relative to the source page, such as

      bullet.jpg

    • A path relative to the application's context root, such as

      /images/error.png

    • A path relative to the application server, such as

      //adf-richclient-demo-context-root/images/error.png

  4. Click OK to save your changes and exit the dialog.

  5. Click Save and then Close to exit Composer.

18.4.5.6 Stretching Tab Content

Using tab properties, you can stretch a single component to fill the tab's available display area. When you do this, the tab can display only the single component. You cannot add a second component to the tab region.

To stretch tab content on a page:

  1. Open the page in edit mode (see Section 18.1, "Entering and Exiting Composer").

  2. Click the Edit icon on the tab containing the component you want to stretch.

  3. In the resulting Component Properties dialog, on the Tabs tab, click the Stretch Contents check box.

  4. Click OK to save your changes and exit the dialog.

  5. Click Save and then Close to exit Composer.

18.4.5.7 Hiding and Showing Tabs

You can take a tab out of action by hiding it. Hiding a tab might be preferable to deleting because it leaves you the option of returning it to view. Hidden tabs are listed in tab properties, so you always have access to them.

Tip:

If you hide all tabs in a tab set, you can access their properties in Source view of page edit mode (see Section 18.2, "Introducing Design View and Source View"). In Source view, select the tabs parent element, panelTabbed, and edit its properties.

To hide or show a tab on a page:

  1. Open the page in edit mode (see Section 18.1, "Entering and Exiting Composer").

  2. Click the Edit icon on a tab in the tab set of interest.

  3. In the resulting Component Properties dialog, bring the Tabs tab forward, select the relevant tab under Reorder the tabs, and do one of the following:

    • Select the Hide this tab check box to hide the tab.

    • Deselect the check box to show a hidden tab.

  4. Click OK to save your changes and exit the dialog.

  5. Click Save and then Close to exit Composer.

18.4.5.8 Deleting Tabs

You have a few options for deleting a tab or a tab set. You can do so through Source or Design view in page edit mode, through tab properties, or on the tab itself. When you delete a tab, the contents of the tab are also deleted.

Note:

Whether you can delete tabs and how many tabs you can delete may be controlled by the panelTabbed property Tab Removal (see Section 20.4, "Setting panelTabbed Properties").

You can delete an entire tab set by deleting panelTabbed. For example, select panelTabbed in Source view and delete it.

When you remove tabs individually through Box properties (in Design view), you can remove all but the current tab. When you remove tabs individually through Box properties, the current, active tab cannot be deleted.

To delete a tab or a tab set on a page:

  1. Open the page in edit mode (see Section 18.1, "Entering and Exiting Composer").

  2. Delete the relevant tab or tab set by doing one of the following:

  3. Click Save and then Close to exit Composer.

18.5 Adding a Component to a Page

The method for adding a component to a page is the same for every component in the Resource Catalog You can add a component to a page in either of the page edit mode views:

Notes:

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

  • In a 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.

  • If the component you want is not present in the Resource Catalog, you may need to add it. For more information, see Section 16.3.1.2, "Adding Resources."

18.5.1 Adding a Component to a Page in Design View

To add a Resource Catalog component in page edit mode Design view:

  1. Open the page in edit mode (see Section 18.1, "Entering and Exiting Composer").

  2. Click the Add Content button on the target region (Figure 18-33) to open the Resource Catalog.

    Figure 18-33 Add Content Button on a Box Component

    Add Content button on a Box layout component
    Description of "Figure 18-33 Add Content Button on a Box Component"

  3. Navigate to the component you want to add, and click the Add link next to it (Figure 18-34).

    Figure 18-34 Add Link in a Resource Catalog

    Add link in a resource catalog
    Description of "Figure 18-34 Add Link in a Resource Catalog"

  4. Continue to add content, or click Close to exit the Catalog.

  5. 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.

  6. Click Save and then Close to exit page edit mode.

18.5.2 Adding a Component to a Page in Source View

To add a Resource Catalog component in page edit mode Source view:

  1. Open the page in edit mode (see Section 18.1, "Entering and Exiting Composer").

  2. From the View menu, select Source.

  3. From the list of page components, select the component in which to place content.

    Tip:

    You can also select a component by clicking it in the WYSIWYG section of the page. A selected component is outlined in blue.

  4. Click the Add Content button to open the Resource Catalog (Figure 18-35)

    Figure 18-35 Selected Box and Add Content Button in Source View

    Selected Box and Add Content button
    Description of "Figure 18-35 Selected Box and Add Content Button in Source View"

  5. Navigate to the component you want to add and click the Add link next to it (Figure 18-36).

    Figure 18-36 Add Link in a Resource Catalog

    Add link in a resource catalog
    Description of "Figure 18-36 Add Link in a Resource Catalog"

  6. Continue to add content, or click Close to exit the Catalog.

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

  8. Click Save and then Close to exit page edit mode.

18.6 Modifying Page Components

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:

18.6.1 What You Should Know 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.

See Also:

For information about wiring pages and components, see Chapter 22, "Wiring Pages, Task Flows, Portlets, and UI Components."

The Component Properties dialog for a component is divided into multiple tabs:

18.6.2 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. For example, see Section 19.4.2, "Setting Box Component Properties" for information about properties associated with the Box component.

Notes:

  • 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 the page refreshes with the new properties.

  • 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 (EL) Expressions."

  • Wherever you enter EL on the generic Display Options tab in the Component Properties 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 18-1.

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

You can access the Component Properties dialog for a component from either Design or Source view of page edit mode:

18.6.2.1 Setting Component Properties in Design View

To set properties of a component on a page in Design view:

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

    Tip:

    One way to enter page edit mode (Composer) is to press Ctrl+Shift+E.

  2. Click the Edit icon (Figure 18-37) on the component of interest to open the Component Properties dialog.

    Figure 18-37 Edit Icon on a component

    Edit icon on a layout component
    Description of "Figure 18-37 Edit Icon on a component"

  3. Edit component properties, then click OK.

18.6.2.2 Setting Component Properties in Source View

To set component properties in Source view:

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

    Tip:

    One way to enter page edit mode (Composer) is to press Ctrl+Shift+E.

  2. From the View menu, select Source (Figure 18-38).

    Figure 18-38 Source Option on View Menu

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

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

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

    Figure 18-39 Edit Button and Selected Box Component

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

  5. Edit component properties, then click OK.

18.6.3 Working with Component Parameters

Component parameters appear on the Parameters tab of the Component Properties dialog (Figure 18-40).

Figure 18-40 Component Parameters

Component parameters
Description of "Figure 18-40 Component Parameters"

See Also:

For information about accessing the Component Properties dialog, see Section 18.6.2, "Setting Properties on a Component."

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.

Enter parameter values, or click the icon next to a parameter field to select and open the Expression Editor. (Figure 18-41).

Figure 18-41 Expression Builder Icon and Expression Editor

Expression Builder icon and Expression Editor
Description of "Figure 18-41 Expression Builder Icon and Expression 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.

See Also:

For more information about using the editor and for a table of useful EL expressions, see Appendix B, "Expression Language (EL) Expressions."

18.6.4 Working with Component Display Options

The Display Options tab in the Component Properties dialog provides access to properties that control a range of display-related behaviors on a given component instance (Figure 18-42).

Figure 18-42 Component Display Options: Basic Properties

Component display options
Description of "Figure 18-42 Component Display Options: Basic Properties"

See Also:

For information about accessing the Component Properties dialog, see Section 18.6.2, "Setting Properties on a Component."

For example, use the display options on an Image component to specify the image source URL and its optional link target. Use the display options on the Announcement Manager task flow to hide or show a header and enable or disable menus and other options on the header.

The showDetailFrame (Movable Box) component has a Display Options tab that 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. Though it is not obvious in Design view of page edit mode, the showDetailFrame component is usually wrapped around the task flows provided by the various services. Consequently, the Display Options properties for task flows, and any other component wrapped in a showDetailFrame, have Basic and Advanced subtabs on their Display Options tab (see Figure 18-42).

Another consequence of being wrapped in a showDetailFrame is commonality of properties on the Display Options tab. Task flows and any other components that are wrapped in a showDetailFrame share the same Display Options properties.

For many of the properties on the Display Options tab, an Expression Editor is available for entering custom values, such as text strings and Expression Language (EL) expressions. You can tell which properties take expressions by the menu icon that displays to the right of a given property (Figure 18-43).

Figure 18-43 Edit Icon for Expression Editor

Edit icon for Expression Editor
Description of "Figure 18-43 Edit Icon for Expression Editor"

Note:

Wherever you enter EL on the generic Display Options tab in the Component Properties 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 18-1. For more information about ELs in the Spaces application, see Appendix B, "Expression Language (EL) Expressions."

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

Typically, the Display Options tab presents settings that affect the display elements surrounding component content (that is, its chrome). Chrome includes the header, the Actions menu, Expand and Collapse icons, and the like.

Table 18-1 lists and describes the Display Options properties that generally apply to most components. Where there are variations, they are noted in the chapters covering the specific components.

Table 18-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.

Collapsed Task Flow

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:

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

Remove icon

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.

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.

Window resizer

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.

Header on a Task Flow

Display Shadow

Select to render a shadow behind the component instance.

Task Flow with a drop shadow

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 On Hover

Select to show actions when users hover their mouse pointers over the component header.

  • Select the check box to show actions only when users hover their mouse pointers over the component header.

  • Deselect the check box to always show actions on the component header.

Display Header must be selected for this option to apply.

Show Component

Option for hiding or showing the component instance on the page

  • Select to show the component.

  • Deselect to hide the component.

Once you hide a component in this way, you can show it again using controls available in Composer Source view. In Source view, right-click the hidden component, and select Show Component from the resulting context menu.

Stretch Content

Select to stretch the content to fill the container, so that the container shows only one component at a time.

Text

Enter text to appear in the component header. If you select to hide the header, the value you enter here is ignored.

18.6.5 Working with Child Components

The Child Components tab in the Component Properties dialog (Figure 18-44) provides controls for hiding, showing, and rearranging the components that are contained within the current (parent) component.

Figure 18-44 Child Components Tab in Component Properties Dialog

Child Components tab in Component Properties dialog
Description of "Figure 18-44 Child Components Tab in Component Properties Dialog"

See Also:

For information about accessing the Component Properties dialog, see Section 18.6.2, "Setting Properties on a Component."

The changes you make through the Child Components tab are customizations that affect every user's view of the component instance.

This section provides information about how to use the controls on the Child Components tab. It includes the following subsections:

18.6.5.1 Hiding and Showing Child Components

Hiding is useful for keeping a component instance out of general view while still maintaining its presence on the page. When you hide a child component through the Component Properties dialog, it is hidden in everyone's view of the page. When you are ready to show the component instance, it is a simple matter to reselect the component to show through the Child Components tab.

To hide or show child components:

  1. On the Child Components tab, either:

    • Deselect the check box to the left of any components you want to hide.

    • Select the check box to the left of any components you want to show.

  2. Click OK to exit the dialog.

  3. Click Save and then Close to exit Composer.

18.6.5.2 Rearranging Child Components

The Child Components tab provides a convenient and efficient way to rearrange the content within a particular container, such as a Box component. When you rearrange child components through the Component Properties dialog, they are rearranged on everyone's view of the page.

Tip:

You can also rearrange page components in a way that affects everyone's view by dragging and dropping components while in Composer.

Note:

When you use Box controls to split a Box, the rearrange capability is disabled in the Component Properties dialog on the Child Components tab. You can still rearrange content in such boxes by dragging and dropping on the page itself.

To rearrange a child component:

  1. On the Child Components tab, click the up or down arrows next to the component you want to move, depending on where you want to move it.

    Tip:

    The direction that a child component is moved depends on the orientation of its parent container. For example, if the container is oriented vertically, child components move up (up arrow) or down (down arrow); if the container is oriented horizontally, child components move right (up arrow) or left (down arrow).

  2. Click OK to exit the dialog.

  3. Click Save and then Close to exit Composer.

18.6.6 Working with Style and Content Style Properties

Style and Content Style properties, available in the Component Properties dialog, provide an opportunity to fine-tune your application look-and-feel at the component level. Enter values for Style and Content Style properties, or specify your own values through the Other CSS property that appears on both tabs. The settings that you specify 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.

See Also:

For information about accessing the Component Properties dialog, see Section 18.6.2, "Setting Properties on a Component."

This section introduces Style and Content Style properties and provides tables that list and describe them. Additionally, it provides information about how to use the Other CSS property. It includes the following subsections:

18.6.6.1 Understanding Style and Content Style Properties

Use component Style and Content Style properties to specify color, style, and margin settings on the selected component instance.

Style settings on a component override the style settings on hierarchically superior components, such as the component's parent container, the page, and the application. Content Style settings override Style settings. For example, in a Movable Box components, Style settings control the look and feel of the Movable Box; when Content Style settings are set, those 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.

See Also:

For information about specific components, such as Movable Boxes, see Chapter 20, "Working with Layout Components on a Page."

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.

18.6.6.2 Style and Content Style Properties

Table 18-2 lists and describes common component Style and Content Style properties.

Table 18-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.

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 (for more information, see Section 15.1, "What You Should Know About Page Styles").

The Height property works with the Stretch Content property, available on the Display Options tab. 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 more information about Other CSS, see Section 18.6.6.3, "Entering Other CSS").

For example, a setting of padding:0 removes all padding on a Box component, useful when nesting boxes inside boxes.

Compare this with the description of Style Class.

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 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 on the Style tab.

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.

18.6.6.3 Entering Other CSS

The Other CSS field that appears on Style and Content Style tabs offers an opportunity to apply CSS styles that are not otherwise provided on the tabs. Use standard CSS syntax (for information about standard CSS syntax, see http://www.w3.org/TR/CSS2/propidx.html). Separate multiple entries with a semicolon (;), for example:

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

Note, however, that 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.

Note:

The Style tab provides a Style Class property for specifying the CSS style class to use for the component. For more information, see Table 18-2.

Table 18-3 provides a few examples of CSS you can use in the Other CSS field.

Table 18-3 Example Values for Other CSS

Value Description and Examples

background-repeat

Specify whether and how the background image should repeat. Enter a value in the format background-repeat: value

For example:

background-repeat: repeat

  • no-repeat–Forgo repeating 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.

background-position

Set the starting position of a background image. Enter values in the format background-position: value value

For example:

background-position: top left

Except as noted, if you specify only one value, the second value defaults to center.

The first set of value pairs express horizontal and vertical as positions:

  • top left, top center, or top right

  • center left, center center, or center right

  • bottom left, bottom center, or bottom right

The second set of value pairs express horizontal and vertical positions as either percentages or units of measure:

  • x% y%–The horizontal (x) and vertical (y) positions expressed as a percentage. The top left corner is 0% 0%. The bottom right corner is 100% 100%. If you specify only one value, the second value defaults to 50%.

  • xpos ypos–The horizontal (x) and vertical (y) positions expressed as a unit of measurement. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you specify only one value, the second value defaults to 50%.

You can mix % and positions.

font-size

Enter size of component text relative to either your browser's default font size or the font size of the parent element. Enter a value in the format font-size: value

For example:

font-size: xx-small

  • length–Sets the font size to a fixed size, for example font-size: 14px

  • 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, font-size: 75%

padding

A collective property for setting the white space (or clear space) around a component in one expression. Enter up to four values. Express values in a specific length or as a percentage of the closest element, using the syntax padding: value value value value

For example:

padding: 5px 10px 5px 10px

Where:

  • 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

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

padding-bottom

Sets the white space (or clear space) at the bottom of the element. Express values in a specific length or as a percentage of the closest element. For example:

padding-bottom: 10px

padding-left

Sets the 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

Sets the white space (or clear space) at the right of the element. Express values in a specific length or as a percentage of the closest element. For example:

padding-right: 1pc

padding-top

Sets the white space (or clear space) at the top of the element. Express values in a specific length or as a percentage of the closest element. For example:

padding-top: 16pt

18.6.6.4 Using the Other CSS Property to Change Component Borders

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

For example, Figure 18-45 depicts a Recent Activity task flow without borders.

Figure 18-45 Task Flow Without Borders

Task flow without borders
Description of "Figure 18-45 Task Flow Without Borders"

To create borders around the task flow, access its properties (for more information, see Section 18.6.2, "Setting Properties on a Component") and add CSS encoding. For example, enter the following code in the Other CSS field on the Style tab in the Component Properties dialog:

Example 18-1 Other CSS for Creating Borders

border-bottom-width:4px;
border-bottom-color:red;
border-bottom-style:dashed;
border-top-width:4px;
border-top-color:red;
border-top-style:dashed;
border-left-width:4px;
border-left-color:red;
border-left-style:dashed;
border-right-width:4px;
border-right-color:red;
border-right-style:dashed;

Figure 18-46 illustrates the result.

Figure 18-46 A Border Created Through the Other CSS Property

Border created through Other CSS
Description of "Figure 18-46 A Border Created Through the Other CSS Property"

18.6.7 Working with Component Contextual Events

Events are defined occurrences within the current context. Event handlers are the engines that drive the results of that occurrence.

For example, imagine two components: one is the producer of some kind of content (a payload) and the other consumes the content. When you wire these components to each other, you can use events to specify that when an event is triggered on the producer, the producer broadcasts a contextual event with a payLoad parameter, which the consumer component consumes through an event handler.

The Events tab in the Component Properties dialog provides a means of wiring a contextual event to an action handler to enable the passing of values from a producer component to a consumer component when the event is triggered on the producer (Figure 18-47).

Figure 18-47 Events Tab in the Component Properties Dialog

Events tab in the Component Properties dialog
Description of "Figure 18-47 Events Tab in the Component Properties Dialog"

See Also:

For information about accessing the Component Properties dialog, see Section 18.6.2, "Setting Properties on a Component."

Note:

Contextual events differ from the business events that can be raised by ADF Business Components. Additionally, contextual events differ from events raised by UI components. Contextual events can be used in association with UI events. In this case, an action listener that is invoked due to a UI event can, in turn, invoke a method action binding that then raises the event.

See Also:

For information about business events, see Oracle Fusion Middleware Web User Interface Developer's Guide for Oracle Application Development Framework.

Not all components support contextual events because not all components were created to include them; therefore, the Events tab does not appear for all components. For events to be available at runtime, event capability must be included in a component when the component is developed.

Table 18-4 lists and describes the properties presented on an Events tab.

Table 18-4 Properties on the Events Tab

Property Description

Events

A list of all contextual events associated with components on the current page

An event describes the type of action that triggers another action, such as the passing of a value. The events listed in the Events pane were built-in to the component when the component was created. All components do not include events; therefore, all components are not intrinsically capable of being wired to other components.

Actions

A list of action handlers associated with the selected consumer component

The actions listed in the Actions pane vary according to which consumer component is selected. Actions enable you to associate an event with an event handler, which specifies what should happen when the triggering event occurs. The actions listed in the Actions pane were built-in to the component when the component was created.

Enable Action

A check box for enabling or disabling the selected event and action

When you select this check box, a list of selected action handler parameters appears.

List of selected action handler parameters

Fields for entering values to use to deliver the payload from the producer component to the consumer component whenever the event occurs

Enter parameter values, or click the Edit icon next to a parameter field to open the Expression Editor. For more information, see Section B.1, "Introducing the Expression Builder"

Parameter fields appear only when the Enable Action check box is selected.

For information about wiring components, see Chapter 22, "Wiring Pages, Task Flows, Portlets, and UI Components."

18.7 Deleting a Component from a Page

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

18.7.1 Deleting a Component in Design View

To delete a component in Design view:

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

    Tip:

    One way to enter page edit mode is to press Ctrl+Shift+E.

  2. If necessary, click the View menu, and select Design.

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

    Figure 18-48 Remove Icon on a Links Component

    Remove icon on a layout component
    Description of "Figure 18-48 Remove Icon on a Links Component"

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

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

18.7.2 Deleting a Component in Source View

To delete a component in Source view:

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

    Tip:

    One way to enter page edit mode is to press Ctrl+Shift+E.

  2. From the View menu, select Source (Figure 18-49).

    Figure 18-49 Source Option on View Menu

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

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

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

    Figure 18-50 Delete Button in Source View

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

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

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