target zone rich:dropZone HtmlDropZone

Component identification parameters

Name | Value
--- | ---
component-type | org.richfaces.DropZone
component-class | org.richfaces.component.html.HtmlDropZone
component-family | org.richfaces.DropZone
renderer-type | org.richfaces.DropZoneRenderer
tag-class | org.richfaces.taglib.DropZoneTag

## Creating the Component with a Page Tag

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

Example:

    ...
        <rich:toolBar>
        <rich:draggable dragType="DropIcons">
            <!-- Draggable content that can be dropped to next drop zone-->
        </rich:draggable>
        ...
        <rich:dropZone acceptedTypes="[DropIcons]">
            <!--Some content to represent drop zone-->
        </rich:dropZone>
        ...
        </rich:toolBar>
    ...

## Creating the Component Dynamically Using Java

Example:

    ...
    org.richfaces.component.html.HtmlDropZone myDragZone = new org.richfaces.component.html.HtmlDropZone();
    ...

## Details of Usage

As it's shown in the example, a key attribute is "acceptedTypes", where some Drag-zones names of drop elements responsible for drop-zone processing are defined, i.e. in the example of component creation on a page, drop zone calls the corresponding drop event processing, only if a drop comes from the above mentioned drag zone of the corresponding type. All zones of another type are ignored.

Another important attribute for <rich:dropZone> is "typeMapping", where corresponding order of <rich:dndParam> wrapping is defined for a drop from each drag-zone type

Example:

    ...
        <rich:dropZone acceptedTypes="[iconsDragged, textDragged]"
                            typeMapping="{iconsDragged: DropIcon}">
            <rich:dndParam name="DropIcon">
                <h:graphicImage value="/images/drop-icon.png" />
            </rich:dndParam>
            ...
        </rich:dropZone>
    ...

Thus, here is a drag zone indicator of iconsDragged type that obtains DropIcon parameter the same one as richParam gets.

As any Ajax action, dropZone has all custom attributes of Ajax requests customization ("timeout", "limitToList", "reRender", etc). To read more about the attributes, follow Ajax4jsf Developer Guide link.

For dropZone layout could be defined with a "layout" attribute with inline (default) and block values.

As any action component <rich:dropZone> has server-side action Listener defined with "dropListener" attribute as well as a definition of attributes for all required events processing on the client:

- ondragenter
- ondragexit
- oncomplete

## Look-and-Feel Customization

As it has been mention above, the component defines a components wrapper for drag areas, i.e. it doesn't have its own representation. Therefore, for a wrapper <div> element customization it's possible to use a component attribute "styleClass" or redefine a rich-dropzone class in your own CSS files that is added to all dropZone components style on default.