6.40.  < rich:dragIndicator >

6.40.1. Description

This is a component for defining what appears under the mouse cursor during drag-and-drop operations. The displayed drag indicator can show information about the dragged elements.

<rich:dragIndicator> component

Figure 6.70.  <rich:dragIndicator> component


6.40.2. Key Features

  • Customizable look and feel

  • Customizable marker according to the type of dragable elements

Table 6.152. rich : dragIndicator attributes

Attribute NameDescription
acceptClassCorresponds to the HTML class attribute and added to an indicator when a drop is accepted
bindingThe attribute takes a value-binding expression for a component property of a backing bean
idEvery component may have a unique id that is automatically created if omitted
rejectClassCorresponds to the HTML class attribute and added to an indicator when a drop is rejected
renderedIf "false", this component is not rendered
styleCSS style(s) is/are to be applied when this component is rendered
styleClassCorresponds to the HTML class attribute

Table 6.153. Component identification parameters

NameValue
component-typeorg.richfaces.Draggable
component-classorg.richfaces.component.html.HtmlDragIndicator
component-familyorg.richfaces.DragIndicator
renderer-typeorg.richfaces.DragIndicatorRenderer
tag-classorg.richfaces.taglib.DragIndicatorTag

6.40.3. Creating the Component with a Page Tag

Here is a simple example as it could be used on a page:

Example:


... 
    <dnd:dragIndicator  id="indicator">
        <f:facet name="single">
            <f:verbatim>
                <b>Single item</b> {DragInfo}
            </f:verbatim>
        </f:facet>
    </dnd:dragIndicator>
    ...
    <dnd:dragSupport dragType="text" dragIndicator="indicator">
...

6.40.4. Creating the Component Dynamically Using Java

Example:


import org.richfaces.component.html.HtmlDragIndicator;
...
HtmlDragIndicator myDragIndicator = new HtmlDragIndicator();
...

6.40.5. Details of Usage

In the simplest way the component could be defined empty - in that case a default indicator is shown like this:

The simplest <rich:dragIndicator>

Figure 6.71. The simplest <rich:dragIndicator>


For indicator customization you need to define one of the following facets:

  • single

Indicator shown when dragging a single element.

  • multiple

Indicator shown when dragging several components (for future components that will support multiple selection).

Thus for specify a look-and-feel you have to define one of these facets and include into it a content that should be shown in indicator.

6.40.5.1. Macro definitions

To place some data from drag or drop zones into component you can use macro definitions. They are being defining in the following way:

  • <rich:dndParam> component with a specific name and value is being included into a drag/drop support component (an image can be defined as placed inside <rich:dndParam> without defining a value).

  • in needed place a parameter value is included into the marking of indicator using syntax (name of parameter)

For instance, this:


... 
    <dnd:dropSupport...>
        <dnd:dndParam name="testDrop">
            <h:graphicImage value="/images/file-manager.png" />
        </dnd:dndParam>
    </dnd:dropSupport>
...

..Is placed into indicator as follows:


... 
    <f:facet name="single">
        {testDrop}
    </f:facet>
...

6.40.5.2. Predefined macro definitions

Indicator can accept two default macro definitions:

  • marker

  • label

Thus including one of these elements in the marking of indicator, in other words after setting up appropriate parameters in DnD components and defining only default indicator - without specifying facets - a developer gets these parameters values displayed in indicator in the order "marker - label".

6.40.5.3. Marker customization

The macro definition "marker" can be customized depending on what a draggable element is located over. For that you should define one of these three parameters (specify a parameter with one of three names):

  • accept

Parameter will be set instead of {marker} into indicator when a draggable element is positioned over drop zone that accept this type of elements

  • reject

Parameter is set instead of {marker} into indicator when a draggable element is positioned over drop zone that doesn't accept this type of elements

  • default

Parameter is set instead of {marker} into indicator when a draggable element is positioned over all the rest of page elements

Note:

If you use <rich:dragIndicator> inside a form do not forget to use id like "formId:indicatorID" defined in <rich:dragSupport> indicator attribute.

6.40.6. Look-and-Feel Customization

The <rich:dragIndicator> component has no skin parameters and special style classes , as it consists of one element generated with a your method on the server. To define some style properties such as an indent or a border, it's possible to use "style" and "styleClass" attributes on the component.

6.40.7. Relevant Resources Links

Here you can see the example of <rich:dragIndicator> usage and sources for the given example.