Button Group Form Control

• label - Specifies the label to be displayed on the button. This label can be translated using the ${i18n()} editor variable.
• icon - The path to the icon to be displayed on the button.
• visible - Specifies whether or not the form control is visible. The possible values of this property are true (default value) and false.
• tooltip - Specifies a tooltip to be displayed when you hover over the form control.
• transparent - Makes the button transparent without any borders or background colors. The values of this property can be true or false.
• 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.
• enableInReadOnlyContext - To enable button form controls or groups of buttons form controls, this property needs to be set to true. This property can be used to specify areas as read-only (by setting the -oxy-editable property to false). This is useful when you want to use an action that does not modify the context.
• 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_buttonGroup(hoverPseudoclassName, 'showBorder')
  }
  p:showBorder {
    border: 1px solid red;
  }

• actionIDs - The IDs of the actions that will be presented in the group of buttons.
• actionID - The ID of the action, specified in the document type association, that is invoked when you click the button.
  Note: The element that contains the form control represents the context where the action is invoked.
• actions - Defines a sequential list of actions directly, rather than using the actionID parameter to reference actions from the document type association. This property is defined using the oxy_action_list function.

  oxy_buttonGroup(
      label, 'A group of actions', 
      icon, url('http://www.oxygenxml.com/img/icn_oxy20.png'),
      actions, 
        oxy_action_list(
            oxy_action(
                  name, 'Insert', 
                  description, 'Insert an element after the current one', 
                  operation, 'InsertFragmentOperation', 
                  arg-fragment, '<element></element>',
                  arg-insertLocation, '.',
                  arg-insertPosition, 'After'
            ),
            oxy_action(
                  name, 'Delete', 
                  description, 'Deletes the current element', 
                  operation, 'DeleteElementOperation' 
            )
        )
    )

  Tip: To execute multiple actions sequentially, you can use the oxy_compound_action function in the oxy_action_list function.

  p:before {
  content: 
    oxy_buttonGroup(
     label, 'A group of actions', 
      icon, url('http://www.oxygenxml.com/img/icn_oxy20.png'),
      actions, 
        oxy_action_list(
              oxy_compound_action(
                   name, oxy_getActionName('framework.id', 'Fallback'),
                   description, 'Inserts a paragraph and uses form controls to edit its @audience attribute',
                   icon, url('http://www.oxygenxml.com/img/icn_oxy20.png'),
                   oxy_action(
                     name, 'Insert', 
                     description, 'Insert an element after the current one', 
                     operation, 'ro.sync.ecss.extensions.commons.operations.InsertFragmentOperation', 
                     icon, url('insert.png'), 
                     arg-fragment, "<p audience=''></p>",
                     arg-insertLocation, '.',
                     arg-insertPosition, 'After'
                   ),
                   oxy_action(
                     name, 'Activate edit mode', 
                     description, 'Sets a pseudo class that will activate a CSS rule that will present a text field form control for the @audience attribute', 
                     operation, 'SetPseudoClassOperation',
                     arg-name, 'edit-mode-on',
                     arg-elementLocation , '.'
                   )
          ),
            oxy_action(
                  name, 'Delete', 
                  description, 'Deletes the current element', 
                  operation, 'DeleteElementOperation' 
            )
        )
    )
  }

• actionContext - Specifies the context that the action associated with the form control is executed. Its possible values are element (default value) and caret. If you select the element value, the context is the element that holds the form control. If you select the caret value, the action is invoked at the cursor location. If the cursor is not inside the element that holds the form control, the element value is selected automatically.
• actionStyle - Specifies what to display for an action in the form control. The values of this property can be text (default value), icon, or both.

buttongroup:before {     
  content:        
    oxy_label(text, "Button Group:", width, 150px, text-align, left)        
    oxy_buttonGroup(
       label, 'A group of actions',
       /* The action IDs are declared in the document type 
          associated with the XML document. */
       actionIDs, 
          "insert.popupWithMultipleSelection,insert.popupWithSingleSelection",
       actionStyle, "both"); 
}