Laying Out Objects With HTML Composer

In this section:

You can change the size and position of objects in your layout in the following ways:


Top of page

x
Setting Relationships Between Objects

How to:

Reference:

You can set relationships between underlying objects and a controlling, or dominant, object. The controlling object is the last object or placeholder selected. You can use these relationships to set properties of the selected objects according to the controlling object. Any object on the HTML page layout can be the controlling object.

You can set the following types of relationships:



x
Procedure: How to Set Object Size
  1. Highlight multiple objects with your mouse by holding the Shift key to select items contiguously, or the Ctrl key to select items non-contiguously. The controlling object is the last object selected.

    The size buttons on the positioning toolbar are active.

  2. Click the button in the positioning toolbar that corresponds to what you want:
    • Make same width sets the width of the highlighted objects to the width of the controlling object.
    • Make same height sets the height of the highlighted objects to the current height of the controlling object.
    • Make same size sets the height and width of the highlighted objects to the height and width of the controlling object.

All selected objects change in size according to the size of the controlling object. If an image becomes distorted when you resize it, you can restore its original size. Right-click the image, and select Restore size. Images are not distorted when clicking and dragging their borders. This maintains their native aspect ratio.



x
Procedure: How to Set the Distance Between Objects
  1. Highlight multiple elements with your mouse holding the Shift key to select items contiguously, or the Ctrl key to select items non-contiguously. The controlling object is the last object selected.
  2. Click the button in the positioning toolbar that corresponds to the relationship you want. The position of the selected object will be set according to the controlling object, which is the last object selected. The options are:
    • Relate Top_Left maintains the distance between the top-left corner of the controlling object and the top-left corners of the highlighted objects.
    • Relate Top_Right maintains the distance between the top-right corner of the controlling object and the top-left corners of the highlighted objects.
    • Relate Bottom_Right maintains the distance between the bottom-right corner of the controlling object and the top-left corners of the highlighted objects.
    • Relate Bottom_Left maintains the distance between the bottom-left corner of the controlling object and the top-left corners of the highlighted objects.

    For details on the buttons in the positioning toolbar, see Positioning Toolbar.



x
Procedure: How to Break Relationships

Click Break a relationship from the Positioning toolbar.



x
Procedure: How to Group Objects on the HTML Page

You may group objects together on an HTML page by inserting a group box, panel, or form. You can copy and paste components (such as images, push buttons, and so on) between the HTML page and the grouping object while maintaining the association to the grouping object or the page.

  1. Insert a grouping object on the HTML page, and select Form or Panel from the Components submenu of the Insert menu or Group Box from the Controls sub-menu of the Insert menu.

    The cursor changes into a crosshair.

  2. Drag the crosshair to create the grouping object on the HTML page.
  3. Right-click the component(s) to be copied and select Copy.
  4. Right-click the grouping object and select Paste.

    The component is copied into the grouping object as a new object. For example, button1 copied from the HTML page appears as button2 in the grouping object. The original, button1 is still associated with the HTML page, whereas button2 is associated with the grouping object.

  5. To delete a grouping object, right-click the grouping object and select Delete.

    When deleting a grouping object, the associated components are also deleted.



x
Reference: Positioning Toolbar

The positioning toolbar contains the buttons listed in the following table.

For buttons that use relationships, the relationship is controlled by the controlling object, or dominant object, which is the last object or placeholder selected. These buttons are only highlighted when more than one object is selected.

Button

Description

Toggles the grid on and off. Use the grid to assist in lining up objects in the layout. This button is recessed when the grids are enabled.

Toggle visibility shows hidden objects.

The hidden visibility option is set in the Layout section of the Style Composer.

Specifies Tab Order.

Aligns the left edge of the highlighted object with the left edge of the controlling object.

Aligns the right edge of the highlighted object with the right edge of the controlling object.

Aligns the top edge of the highlighted object with the top edge of the controlling object.

Aligns the bottom edge of the highlighted object with the bottom edge of the controlling object.

Aligns objects at the horizontal center point of the canvas in Design view.

Aligns objects at their vertical center (or middle) point of the canvas in Design view.

Sets the width of the highlighted objects to the width of the controlling object.

Sets the height of the highlighted objects to the current height of the controlling object.

Sets the height and width of the highlighted objects to the height and width of the controlling object.

Maintains the distance between the top-left corner of the controlling object and top-left corners of the highlighted object.

Maintains the distance between the top-right corner of the controlling object and the top-left corners of the highlighted object.

Maintains the distance between the bottom-right corner of the controlling object and the top-left corners of the highlighted object.

Maintains the distance between the bottom-left corner of the controlling object and the top-left corners of the highlighted object.

Breaks the relationship set between highlighted objects. This button is only highlighted when selected objects have relationships set.

Toggles the display of arrows illustrating the relationships between objects. This button is only highlighted when selected objects have relationships set. This button will stay highlighted when relationships are displayed. It will not be highlighted when relationships are not displayed.



x
Reference: Utilities Toolbar

The Utilities toolbar contains the buttons listed in the following table.

Button

Description

Adds a control to a chain. Each time a selection is made, all chained controls will be dynamically updated. For details about chained controls, see Chaining Controls for Dependencies in HTML Composer.

Note: The Add to current chain button is available when controls are multiselected on the Design tab or Parameters tab. This button is disabled if you multiselect controls that are already in a chain.

Removes a control from a chain. For details about chained controls, see Chaining Controls for Dependencies in HTML Composer.

Note: The Remove from current chain button is available when controls are multiselected on the Design tab or Parameters tab. This button is disabled for the first control in a chain, but enabled for all others.

Synchronizes a report/graph object to an active report when using active dashboards. For more information, see Creating Active Technologies Dashboards With HTML Composer.

Shows the synchronized report groups when working with active dashboards. For more information, see Creating Active Technologies Dashboards With HTML Composer.

Unlocks the template. When designing an HTML page with a template certain actions are locked, to activate them the template must be unlocked. You are responsible for the placement and design of all elements on an unlocked page and unlocking cannot be undone. For more information on templates and unlocking, see Using Templates in HTML Composer.

The unlock button is not on the toolbar by default. For more information on accessing the unlock button, see How to Unlock a Template.


WebFOCUS