Text Field Form Control

The oxy_textfield built-in form control is used for entering a single line of text in a graphical user interface box. A text field may include optional content completion capabilities, used to present and edit the value of an attribute or an element.

The oxy_textfield form control supports the following properties:

• edit - Lets you edit the value of an attribute, the text content of an element, or Processing Instructions (PI). This property can have the following values:
  • @attribute_name - The name of the attribute whose value is being edited. If the attribute is in a namespace, the value of the property must be a QName and the CSS must have a namespace declaration for the prefix.
  • #text - Specifies that the presented/edited value is the simple text value of an element.
    Note: You can set the value of the visibility property to -oxy-collapse-text to render the text only in the form control that the oxy_editor function specifies.
• columns - Controls the width of the form control. The unit size is the width of the w character.
• width - Specifies the width of the content area using relative (em, ex), absolute (in, cm, mm, pt, pc, px), and percentage (followed by the % character) length units. The width property takes precedence over the columns property (if the two are used together).
• fontInherit - This value specifies whether or not the form control inherits its font from its parent element. The values of this property can be true or false (default value). To make the form control inherit its font from its parent element, set the fontInherit property to true.
• visible - Specifies whether or not the form control is visible. The possible values of this property are true (default value) and false.
• values - Specifies the values that populate the list of proposals. If these values are not specified in the CSS, they are collected from the associated XML Schema.
• tooltips - Associates tooltips to each value in the values property. The value of this property is a list of tooltip messages separated by commas. If you want the tooltip to display a comma, use the ${comma} variable.
• tooltip - Specifies a tooltip to be displayed when you hover over the form control.
• color - Specifies the foreground color of the form control. If the value of the color property is inherit, the form control has the same color as the element that was used to insert it.
• hasMultipleValues - Specifies if the text field allows multiple values separated by spaces or just a single value.
  Note: If the value is false, the Content Completion Assistant considers the entire text as the prefix for its proposals. If the value is true (the default value), the space is the delimiter for the values and thus it is not included in the prefix (the prefix will be whatever comes after the space).

  For example, suppose the possible values for your text field are: value a, value b, and other values. If the hasMultipleValues property is set to true and the user enters "value " (notice the space character after 'value') in the text field, the Content Completion Assistant will suggest all three values because the prefix is whatever comes after the space, and in this case the user did not enter anything after the space. If the hasMultipleValues property was set to false, the Content Completion Assistant would only suggest value a and value b because the space is considered part of the prefix.

• hoverPseudoclassName - Allows you to change the way an element is rendered when you hover over a form control. The value is the name of a CSS pseudo-class. When you hover over the form control, the specified pseudo-class will be set on the element that contains the form control.

  p:before {
    content: oxy_textfield(hoverPseudoclassName, 'showBorder')
  }
  p:showBorder {
    border: 1px solid red;
  }

element {
    content: "Label: "
        oxy_textfield(
            edit, "@my_attr",
            values, "value1, value2",
            color, "red",
            columns, 40);
}

Tip: To insert a sample of the oxy_textfield form control in a CSS file (or LESS file), invoke the Content Completion Assistant by pressing Ctrl + Space and select the oxy_textfield code template.

To see more detailed examples and more information about how form controls work in Oxygen XML Editor, see the sample files in the following directory: [OXYGEN_INSTALL_DIR]/samples/form-controls.