Class: cWebHorizontalLine

Properties | Events | Methods | Index of Classes

The Web Framework horizontal line control

Hierarchy

cObject > cWebBaseObject > cWebObject > cWebBaseUIObject > cWebBaseDEOServer > cWebBaseControl > cWebHorizontalLine

Show full hierarchy and direct subclasses

• cObject
• cWebBaseObject
  • cWebObject
  • cWebBaseUIObject
    • cWebBaseDEOServer
    • cWebBaseControl
      • cWebHorizontalLine

Library: Web Application Class Library

Package: cWebHorizontalLine.pkg

Description

Use the cWebHorizontalLine class to draw a horizontal line in your web view or dialog. A horizontal line can be used to divide controls into vertical groups. For example, a dialog that has a row of buttons at the bottom can separate the buttons from the other controls with a horizontal line.

A horizontal line can be achieved in other ways, for example, you could create a special CSS class that adds a horizontal line above or below a control, or a cWebHtmlBox object containing some HTML that draws a horizontal line could be used. However, the cWebHorizontalLine class is the simplest way to achieve this, it is integrated into your selected theme (psTheme) and it is designed to work correctly within the web framework layout system.

Sample

Object oCustomerNotes is a cWebModalDialog
    Set piWidth to 600
    Set psCaption to "Edit Notes"
    Set piColumnCount to 9

    Object oName is a cWebForm
        Set piColumnSpan to 6
        Set psLabel to "Name:"
    End_Object

    Object oComments is a cWebEdit
        Set piColumnSpan to 0 
        Set piHeight to 200
        Set psLabel to " Notes:"
    End_Object

    Object oLine1 is a cWebHorizontalLine
    End_Object

    Object oOK is a cWebButton
        Set piColumnSpan to 2
        Set psCaption to "OK"

        Procedure OnClick
            Send DoOK
        End_Procedure
    End_Object
End_Object

The above sample demonstrates the use of a cWebHorizontalLine object in a dialog (cWebModalDialog). A horizontal line is drawn across the dialog separating the edit control from the button.

Object Name

The Web Framework uniquely identifies each web object via a combination of the object hierarchy (object nesting), and object name. This means that web object names must be unique within their parent (i.e. each sibling web object must have a unique name).

Object Placement

Horizontal line controls must be placed within a web container (e.g. cWebPanel, cWebView or cWebModalDialog).

Horizontal line controls may not be nested inside other web controls. You may not mix web panels and web controls as sibling objects.

Size and Location

Web controls are positioned by HTML flow layout (left to right, top to bottom). The relative position of the control in this flow is determined by the location of the object declaration in your code.

In addition to the flow layout, each web container is divided into a fixed number of equal-width layout columns (piColumnCount). Child controls are aligned to these layout columns to determine their horizontal position and width.

Set piColumnIndex to position a grid control in a particular column of the parent container.

Set piColumnSpan to determine the width of the grid control i.e., the number of layout columns occupied by the control. The actual width is determined by the number of columns and the width of the parent container.

For more information, see Positioning and Layout of Controls.

Label Support

Set pbShowLabel to true to reserve space to the left of the horizontal line for a descriptive label. Set psLabel to the text string you want to display as the label.

Set peLabelAlign to position the label text to the left, right or center of the space allocated to the control's label (alignLeft, alignRight, alignCenter).

Set peLabelPosition to change the position of the space allocated to the control's label. By default, the label is positioned to the left of the control (lpLeft). The label can also be positioned above or to the right of the control (lpTop, lpRight).

Set piLabelOffset to change the amount of space that is consumed by the control's label. By default, the label consumes approximately 120px.

The label's text color is determined by the web application's CSS theme (psTheme). Set psLabelColor to directly override the label's CSS themed color.

Set pbShowLabel to false to hide the label and remove space used the control's label. By default, pbShowLabel is true.

Drag and Drop Support

This control can be used as a valid drop target by registering it as such in a cWebDragDropHelper object.

The supported actions for this control are: - C_WebDropOnControl

This allows the control to accept data dragged from elsewhere in the control (if configured that way) and can also be used to accept files when registered within a cWebDragDropFileHelper.

Color

The color of a horizontal line is determined by the web application's CSS theme (psTheme). You can define additional or replacement CSS styles in your web application's application.css file. Set psCSSClass to the CSS class name you would like to be applied to a horizontal line control.

Set psBackgroundColor to directly override the control's CSS themed color.

See Also

cWebSpacer | cWebHtmlBox | Styling Web Applications