Class: cWebEdit

cObject
---cWebObject
------cWebBaseUIObject
---------cWebBaseDEOServer
------------cWebBaseControl
---------------cWebBaseDEO
------------------cWebBaseForm
---------------------cWebEdit

Use the cWebEdit class to display or edit a multiple lines of text in your web application. An edit control is ideal for editing long text fields in a web view or dialog (cWebView or cWebModalDialog). For example a view that records notes or comments for a customer would use a cWebEdit control for text input.



When a text line reaches the full width of the control it will automatically wrap to the next line. When the control value contains more text that can be shown in the occupied height, a vertical scroll bar is activated to allow scrolling up and down the text.

An edit control can be used with or without a data binding. When used with a data binding the edit control provides automatic support to display and allow editing of data from a database table.column. When used without a data binding you will use the class interface to read or write the control value.

Tip: Use pbStopOnSubmit to enable inserting a newline in the edit control instead of firing the OnSubmit event.

Sample

Object oCustomer is a cWebView
    Object Customer_DD is a Customer_DataDictionary
    End_Object
    
    Set Main_DD to Customer_DD
    Set Server to Customer_DD
    
    Set psCaption to "Customer Maintenance"
    Set piWidth to 500
    Set piColumnCount to 5
    
    Object oCustomer_Comments is a cWebEdit
        Entry_Item Customer.Comments

        Set psLabel to "Comments:"
        Set pbFillHeight to True
        Set piColumnSpan to 0
    End_Object
End_Object

The above sample demonstrates a cWebView with a data dictionary object (DDO) and a cWebForm object with a data binding to the Customer table, Comments column.

Object oNotes is a cWebEdit
    Set psLabel to "Notes:"
    Set piColumnSpan to 5
    Set pbFillHeight to True
    Set pbServerOnBlur to True

    Procedure OnBlur
        String sValue
        Forward Send OnBlur
        WebGet psValue to sValue
        Send ShowInfoBox sValue "The value is.."
    End_Procedure
End_Object

The above sample demonstrates the use of a cWebEdit object with no data binding. When the control loses focus the OnBlur event is sent to the server which triggers an info box on the client that shows the control value. Note that pbServerOnBlur is set to true to ensure that the OnBlur event is sent to the server for this object.

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

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

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

Data Binding

cWebForm objects support a data binding to display values from a database Table.Column. When the control has a data binding then it will display the column value of the current record in the binding table. Changes entered into the control will update the table.column value in the correct way according to data dictionary data binding rules.

Use the Entry_Item command to set a data binding.

Sample

Entry_Item Customer.Name

Entry_Item expressions, e.g. (ShowComments(Self)) are not supported in web object data bindings. Use the OnSetCalculatedValue to define a data binding expression.

The data binding table.column must map to a data dictionary object in the server data dictionary object structure. Refer to the Data Dictionary Guide for more information.

A data binding provides data-aware behaviors that include:
Finding, clearing, saving, and deleting records
Change verification (save, delete, and data-loss verifications)
A data binding also automatically provides the control's data type, input mask, tooltip, control focus rules, control blur rules, display formats (capslock, noput, displayonly, etc.) and much more. These settings may also be controlled manually by setting properties.

Accessing the Control Value

The edit control can be used without a data binding by accessing the control's value.

The psValue property allows you to get or set the current 'value' of the edit control.

An event is triggered whenever the control value changes. This event can be handled on the server by writing DataFlex code. It can also be handled on the client (browser) by writing JavaScript code. Writing a server-side DataFlex handler is the simplest way to handle change events.

Set pbServerOnChange to true to instruct the client to send the OnChange event to the server object whenever the control value is changed. Write an OnChange event handler in your edit object to perform some action when the control value changes.

To write a client-side change event handler using JavaScript, set the psClientOnChange property to the name of the JavaScript function that will execute when the control value changes.

If the control has a data dictionary server but does not have a data binding then a special event (OnSetCalculatedValue) is triggered for the edit whenever a find or clear operation is performed on the data dictionary object. Write an OnSetCalculatedValue event handler in your edit object to generate a 'calculated' value for the control for each record in the server data dictionary object's table.

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 columns (piColumnCount). Child controls are aligned to these columns to determine their horizontal position and width.

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

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

Edit controls have a pre-determined height plus a maximum and minimum width that is determined by the web application's CSS theme (psTheme).

Label Support

By default, a portion of the control's width is reserved to display a descriptive label. By default, the label is displayed to the left of the control and consumes approximately 120px of the total width.

Set psLabel to the text string you want to display as a 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.

You can embed the CR LF characters in your ToolTip string to break the string into multiple lines.

Line Breaks

Define CR_LF for (Character(13)+Character(10))
Set psToolTip to ("This is a ToolTip string that is split" + CR_LF + ;
                  "across two lines.")

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 an edit control 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 an edit control.

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

Styling Web Applications