From richfaces-svn-commits at lists.jboss.org Wed Aug 19 14:54:03 2009 Content-Type: multipart/mixed; boundary="===============0592148514264094017==" MIME-Version: 1.0 From: richfaces-svn-commits at lists.jboss.org To: richfaces-svn-commits at lists.jboss.org Subject: [richfaces-svn-commits] JBoss Rich Faces SVN: r15225 - branches/community/3.3.X/docs/userguide/en/src/main/docbook/included. Date: Wed, 19 Aug 2009 14:54:03 -0400 Message-ID: <200908191854.n7JIs3iP014754@svn01.web.mwc.hst.phx2.redhat.com> --===============0592148514264094017== Content-Type: text/plain; charset="utf-8" MIME-Version: 1.0 Content-Transfer-Encoding: quoted-printable Author: atsebro Date: 2009-08-19 14:54:02 -0400 (Wed, 19 Aug 2009) New Revision: 15225 Modified: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/ric= h_dropSupport.xml Log: RF-7690: rich_dropSupport component description review Modified: branches/community/3.3.X/docs/userguide/en/src/main/docbook/inclu= ded/rich_dropSupport.xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/ri= ch_dropSupport.xml 2009-08-19 16:40:58 UTC (rev 15224) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/ri= ch_dropSupport.xml 2009-08-19 18:54:02 UTC (rev 15225) @@ -1,73 +1,56 @@
- - < - rich:dropSupport - > - <emphasis role=3D"since"> - <superscript> available since <emphasis role=3D"version">3.0.0</e= mphasis> - </superscript> - </emphasis> - -
- Description - This component transforms a parent component into a target zon= e for - drag-and-drop operations. When a draggable element is moved and dropped = onto - the area of the parent component, Ajax request processing for this event= is - started. + < rich:dropSupport > <emphasis role=3D"since"> + <superscript> available since <emphasis role=3D"version"= >3.0.0</emphasis> + </superscript> + </emphasis> + +
+ Description + This component transforms a parent component into a targ= et zone for drag-and-drop operations. When a draggable element is moved and= dropped onto the area of the parent component, Ajax request processing for= this event is + started. = -
- - <emphasis role=3D"bold"> - <property><rich:dropSupport></property> - </emphasis> component +
+ + <emphasis role=3D"bold"> + <property><rich:dropSupport></property> + </emphasis> component = - - - - - -
-
-
- Key Features - - - - Encodes all necessary JavaScript to perform drop actions - - - = - - - Can be used within any component type that provides the required pr= operties for drop operations - - - = - - - Built-in Ajax processing - - - = - - - Supports drag-and-drop between different forms - - - -
-
- Details of Usage + + + + + + +
+
+ Key Features + + + Encodes all necessary JavaScript to perform= drop actions + = - The key attribute for - <rich:dropSupport> - is - "acceptedTypes" - . = - It defines, which types of dragable items (zones) could be accepte= d by the current drop zone. Check the example below: - - ... -<rich:panel styleClass=3D"dropTargetPanel"> + + Can be used within any component type that = provides the required properties for drop operations + + + + Built-in Ajax processing + + + + Supports drag-and-drop between different fo= rms + + +
+
+ Details of Usage + + The key attribute for + <rich:dropSupport> + is + "acceptedTypes" + . It defines, which types of dragable items (= zones) could be accepted by the current drop zone. Check the example below:= + <rich:panel styleClass=3D"drop= TargetPanel"> <f:facet name=3D"header"> <h:outputText value=3D"PHP Frameworks" /> </f:facet> @@ -75,37 +58,28 @@ <rich:dropSupport id=3D"php" acceptedTypes=3D"PHP" dropValue=3D"PH= P" dropListener=3D"#{eventBean.processDrop}" reRender=3D"phptable, src"> </rich:dropSupport> ... -</rich:panel> -... - - and here is what happens on the page: -
- Drop zone accepts dragable item with "PHP" type only</= title> - <mediaobject> - <imageobject> - <imagedata fileref=3D"images/dropSupport1.png"/> - </imageobject> - </mediaobject> - </figure> - = - <para>Using the <emphasis> - <property>"typeMapping"</property> - </emphasis> attribute. Previous example shows that a drop zone co= uld accept a dragable item or not. = - Special markers, which are placed at <emphasis role=3D"bold"> - <property><rich:dragIndicator></property> - </emphasis>, inform user about drop zone=E2=80=99s possible behav= iors: = - "checkmark" appears if drop is accepted and "No" symbol if it= is not. = - Moreover, some extra information (e.g. text message) could be= put into the Indicator to reinforce the signal about drop zone=E2=80=99s b= ehavior or pass some other additional sense. = - This reinforcement could be programmed and attributed to drop= zone via <emphasis> - <property>"typeMapping"</property> - </emphasis> attribute using JSON syntax. = - The type of dragged zone (dragType) should be passed as "key"= and name of <emphasis role=3D"bold"> - <property><rich:dndParam></property> - </emphasis> = - that gives needed message to Indicator as "value": - </para> - <programlisting role=3D"XML">... -<rich:panel styleClass=3D"dropTargetPanel"> +</rich:panel></programlisting> + <para>and here is what happens on the page:</para> + <figure> + <title>Drop zone accepts dragable item with "PHP" type o= nly + + + + + +
+ + Using the + "typeMapping" + attribute. Previous example shows that a dro= p zone could accept a dragable item or not. Special markers, which are plac= ed at + <rich:dragIndicator> + , inform user about drop zone=E2=80=99s possi= ble behaviors: "checkmark" appears if drop is accepted and "No" symbol if i= t is not. Moreover, some extra information (e.g. text message) could be put= into the Indicator to + reinforce the signal about drop zone=E2=80=99s behavior = or pass some other additional sense. This reinforcement could be programmed= and attributed to drop zone via + "typeMapping" + attribute using JSON syntax. The type of dra= gged zone (dragType) should be passed as "key" and name of + <rich:dndParam> + that gives needed message to Indicator as "v= alue": + <rich:panel styleClass=3D"drop= TargetPanel"> <f:facet name=3D"header"> <h:outputText value=3D"PHP Frameworks" /> </f:facet> @@ -116,49 +90,28 @@ <rich:dndParam name=3D"text_for_rejecting" value=3D"Drop is n= ot accepted!" /> </rich:dropSupport> ... -</rich:panel> -... - - What happens on the page: -
- - <emphasis> - <property>"typeMapping"</property> - </emphasis> helps to add some extra information to <emphasis r= ole=3D"bold"> - <property><rich:dragIndicator></property> - </emphasis> = - - - - - - -
- = - In examples above dropping a dragable item triggers the use a= parameter in the event processing; Ajax request is sent and dropListener d= efined for the component is called. - +</rich:panel> + What happens on the page: +
+ + <emphasis> + <property>"typeMapping"</property> + </emphasis> helps to add some extra information to= <emphasis role=3D"bold"> + <property><rich:dragIndicator></proper= ty> + </emphasis> + + + + + + +
= - - Here is an example of moving records between tables. The - example describes all the pieces for drag-and-drop. (To get - extra information on these components, read the sections for - these components.) - + + Here is an example of moving records between tables. The= example describes all the pieces for drag-and-drop. = + As draggable items, this table contains a list of such i= tems designated as being of type "text" : = - - As draggable items, this table contains a list of such items - designated as being of type - "text" - : - - - - - Example: - - - ... -<rich:dataTable value=3D"#{capitalsBean.capitals}" var=3D"caps"> + <rich:dataTable value=3D"#{cap= italsBean.capitals}" var=3D"caps"> <f:facet name=3D"caption">Capitals List</f:facet> <h:column> <a4j:outputPanel> @@ -168,235 +121,159 @@ <h:outputText value=3D"#{caps.name}"/> = </a4j:outputPanel> </h:column> -</rich:dataTable> -... - +</rich:dataTable> = - - As a drop zone, this panel will accept draggable items of - type - text - and then rerender an element with the ID of - box - : - + As a drop zone, this panel will accept draggable items = of type text and then rerender an element with the ID of box : = = - - Example: - + = = - ... -<rich:panel style=3D"width:100px;height:100px;"> + <rich:panel style=3D"width:100= px;height:100px;"> <f:facet name=3D"header">Drop Zone</f:facet> <rich:dropSupport acceptedTypes=3D"text" reRender=3D"box" = dropListener=3D"#{capitalsBean.addCapital2}"/> -</rich:panel> -... - +</rich:panel> = - - As a part of the page that can be updated in a partial page - update, this table has an ID of - box - : - + As a part of the page that can be updated in a partial = page update, this table has an ID of box : = = - - Example: - - ... -<rich:dataTable value=3D"#{capitalsBean.capitals2}" var=3D"cap2" id=3D"= box"> + + <rich:dataTable value=3D"#{cap= italsBean.capitals2}" var=3D"cap2" id=3D"box"> <f:facet name=3D"caption">Capitals chosen</f:facet> <h:column> <h:outputText value=3D"#{cap2.name}"/> </h:column> -</rich:dataTable> -... +</rich:dataTable> = - - And finally, as a listener, this listener will implement the - dropped element: - - - - - Example: - - ... -public void addCapital2(DropEvent event) { + And finally, as a listener, this listener will implemen= t the dropped element: + = + public void addCapital2(DropEven= t event) { FacesContext context =3D FacesContext.getCurrentInstance(); Capital cap =3D new Capital(); cap.setName(context.getExternalContext().getRequestParameterMap().= get("name").toString()); capitals2.add(cap); -} -... - +} = - - Here is the result after a few drops of items from the first - table: - + Here is the result after a few drops of items from the = first table: = -
- Results of drop actions +
+ Results of drop actions = - - - - - -
+ + + + + +
= - - In this example, items are dragged element-by-element from - the rendered list in the first table and dropped on a panel - in the middle. After each drop, a drop event is generated - and a common Ajax request is performed that renders results - in the third table. - + In this example, items are dragged element-by-element f= rom the rendered list in the first table and dropped on a panel in the midd= le. After each drop, a drop event is generated and a common Ajax request is= performed that + renders results in the third table. = - - As with every Ajax action component, - - <rich:dropSupport> - - has all the common attributes ( - - "timeout" - , - - - "limitToList" - , - - - "reRender" - , - - etc.) for Ajax request customization. - + As with every Ajax action component, + <rich:dropSupport> + has all the common attributes ( + "timeout" , + + "limitToList" , + + "reRender" , etc.= ) for Ajax request customization. = - - Finally, the component has the following extra attributes - for event processing on the client: - + Finally, the component has the following extra attribut= es for event processing on the client: = - - - - - "ondragenter" - - - + + + + + "ondragenter" + + + = - - - - "ondragexit" - - - + + + + "ondragexit" + + + = - - - - "ondrop" - - - + + + + "ondrop" + + + = - - - - "ondropend" - - - - + + + + "ondropend" + + + + = - - Developers can use their own custom JavaScript functions to - handle these events. - - - Information about the - - "process" - - attribute usage you can find in the = - "Decide what to process" guide secti= on - . - -
-
- Reference Data - - Table of = - <rich:dropSupport> = - attributes. - - - Component Identification Parameters + Developers can use their own custom JavaScript function= s to handle these events. + Information about the + "process" + attribute usage you can find in the "Decide what to process" guide section . + +
+ Reference Data + + Table of &l= t;rich:dropSupport> attributes. +
+ Component Identification Parameters = - - - - Name + + + + Name = - Value - - + Value + + = - - - component-type + + + component-type = - org.richfaces.DropSupport - + org.richfaces.DropSupport + = - - component-class + + component-class = - - org.richfaces.component.html.HtmlDropSupport - - + org.richfaces.component.html.H= tmlDropSupport + = - - component-family + + component-family = - org.richfaces.DropSupport - + org.richfaces.DropSupport + = - - renderer-type + + renderer-type = - org.richfaces.DropSupportRenderer - + org.richfaces.DropSupportRender= er + = - - tag-class + + tag-class = - org.richfaces.taglib.DropSupportTag - - - -
-
-
- Relevant Resources Links - - - On the component Live Demo page - - you can see the example of - - <rich:dropSupport> - - usage and sources for the given example. - -
-
\ No newline at end of file + org.richfaces.taglib.DropSuppor= tTag + + + + +
+
+ Relevant Resources Links + + On the component Live Demo page= you can see the example of + <rich:dropSupport> + usage and sources for the given example. +
+ --===============0592148514264094017==--