<?xml version='1.0' encoding='UTF-8'?>
<section>
<sectioninfo>
<keywordset>
<keyword>target zone</keyword>
<keyword>rich:dropZone</keyword>
<keyword>HtmlDropZone</keyword>
</keywordset>
</sectioninfo>
  <section>
    <table>
      <title>Component identification parameters </title>
      <tgroup cols="2">
        <thead>
          <row>
            <entry>Name</entry>
            <entry>Value</entry>
          </row>
        </thead>
        <tbody>
          <row>
            <entry>component-type</entry>
            <entry>org.richfaces.DropZone</entry>
          </row>
          <row>
            <entry>component-class</entry>
            <entry>org.richfaces.component.html.HtmlDropZone</entry>
          </row>
          <row>
            <entry>component-family</entry>
            <entry>org.richfaces.DropZone</entry>
          </row>
          <row>
            <entry>renderer-type</entry>
            <entry>org.richfaces.DropZoneRenderer</entry>
          </row>
          <row>
            <entry>tag-class</entry>
            <entry>org.richfaces.taglib.DropZoneTag</entry>
          </row>
        </tbody>
      </tgroup>
    </table>
  </section>
  <section>
    <title>Creating the Component with a Page Tag</title>
    <para>To create the simplest variant on a page use the following syntax:</para>

    <para>
      <emphasis role="bold">Example:</emphasis>
    </para>
    <programlisting role="XML"><![CDATA[...
    <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>
...
]]></programlisting>
  </section>
  <section>
    <title>Creating the Component Dynamically Using Java</title>

    <para>
      <emphasis role="bold">Example:</emphasis>
    </para>
    <programlisting role="JAVA"><![CDATA[...
org.richfaces.component.html.HtmlDropZone myDragZone = new org.richfaces.component.html.HtmlDropZone();
...
]]></programlisting>
  </section>
  <section>
    <title>Details of Usage</title>
    <para>As it&apos;s shown in the example, a key attribute is 
    <emphasis ><property>&quot;acceptedTypes&quot;</property></emphasis>, 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.</para>
	<para>Another important attribute for 
	<emphasis role="bold"><property>&lt;rich:dropZone&gt;</property></emphasis> is 
	<emphasis ><property>&quot;typeMapping&quot;</property></emphasis>, where 
	corresponding order of <emphasis role="bold"><property>&lt;rich:dndParam&gt;</property></emphasis>
	 wrapping is defined for a drop from each drag-zone type</para>
		<para><emphasis role="bold">Example:</emphasis></para>
    <programlisting role="XML"><![CDATA[...
    <rich:dropZone acceptedTypes="[iconsDragged, textDragged]" 
                        typeMapping="{iconsDragged: DropIcon}"> 
        <rich:dndParam name="DropIcon">
            <h:graphicImage value="/images/drop-icon.png" />
        </rich:dndParam>
        ...
    </rich:dropZone>
...
]]></programlisting>
    <para>Thus, here is a drag zone indicator of iconsDragged type that obtains DropIcon parameter 
    the same one as richParam gets. </para>
    <para>As any Ajax action, <property>dropZone</property> has all custom attributes of Ajax requests 
    customization (<emphasis ><property>&quot;timeout&quot;</property></emphasis>,
     <emphasis ><property>&quot;limitToList&quot;</property></emphasis>, 
     <emphasis ><property>&quot;reRender&quot;</property></emphasis>, etc). To read more
      about the attributes, follow 
     <ulink url="https://ajax4jsf.dev.java.net/nonav/documentation/ajax-documentation/">Ajax4jsf 
     Developer Guide</ulink> link.</para>
    <para>For <property>dropZone</property> layout could be defined with a 
    <emphasis ><property>&quot;layout&quot;</property></emphasis> attribute with inline 
    (default) and block values.</para>
        <para>As any action component 
        <emphasis role="bold"><property>&lt;rich:dropZone&gt;</property></emphasis> has server-side
         action Listener defined with  
         <emphasis ><property>&quot;dropListener&quot;</property></emphasis> attribute as
          well as a definition of attributes for all required events processing on the client:</para>
		<itemizedlist>
        <listitem><para>
        ondragenter
        </para></listitem>
        <listitem><para>
        ondragexit
        </para></listitem>
		<listitem><para>
		oncomplete
		</para></listitem>
      </itemizedlist>
  </section>
  <section>
    <title>Look-and-Feel Customization</title>
    <para>As it has been mention above, the component defines a components wrapper for drag areas,
     i.e. it doesn&apos;t have its own representation. Therefore, for a wrapper 
    <emphasis role="bold"><property>&lt;div&gt;</property></emphasis> element customization it&apos;s
     possible to use a component attribute <emphasis ><property>&quot;styleClass&quot;</property></emphasis> or 
     redefine a rich-dropzone class in your own CSS files that is added to all 
     <property>dropZone</property> components style on default.</para>
  </section>
</section>
