Author: ilya_shaikovsky Date: 2010-12-27 04:31:58 -0500 (Mon, 27 Dec 2010) New Revision: 20802 Modified: trunk/examples/richfaces-showcase/src/main/webapp/richfaces/dragDrop/dragDrop.xhtml trunk/examples/richfaces-showcase/src/main/webapp/richfaces/dragDrop/samples/dragDrop-sample.xhtml Log: https://issues.jboss.org/browse/RF-10074 Modified: trunk/examples/richfaces-showcase/src/main/webapp/richfaces/dragDrop/dragDrop.xhtml =================================================================== --- trunk/examples/richfaces-showcase/src/main/webapp/richfaces/dragDrop/dragDrop.xhtml 2010-12-26 23:24:08 UTC (rev 20801) +++ trunk/examples/richfaces-showcase/src/main/webapp/richfaces/dragDrop/dragDrop.xhtml 2010-12-27 09:31:58 UTC (rev 20802) @@ -5,6 +5,39 @@ xmlns:ui="http://java.sun.com/jsf/facelets"> <ui:composition> + <p>The Richfaces Drag-n-Drop component suite includes three + components: <b>dragSource</b>, <b>dropTarget </b>and <b>dragIndicator</b>.</p> + + <p><b>rich:dragSource </b>is used to point to the JSF component + that becomes draggable. If you want to add a draggable feature to the + existing component, attach dragSupport as a child component to it.</p> + + <p><b>rich:dropSupport </b>is similar to the dragSupport, but it's + used to define the drog zone. dropSupport has a built-in Ajax support. + I.e. it allows to send an Ajax request and re-render the specified area + on a page when the Ajax response is returned back. With the <b>dropListener + </b>attribute you can point to a method of the backing bean that accepts <b> + DropEvent </b>as a parameter. This event contains information provided by <b> + dropValue </b>and <b>dragValue </b>attributes of dropSupport and + dragSupport.</p> + + <p><b>rich:dragIndicator</b> is a special visual representation of + a dragged object. By default it creates a copy of dragged elements. But + the markup could be redefined(<u>not implemented in first release</u>).</p> + + <p>Note: The parent component for dragSupport and dropSupport + should be designed to render its children and has two attribute + "onmouseover" and "onmouseout". You can use &lt;a4j:outputPanel&gt; as + a container if the component is not satisfy this requirements. Use + &lt;a4j:outputPanel&gt; layout="block" to wrap the component with a + block type layout.</p> + + <p>The following example demonstrates the drag-n-drop functionality + on practice. The left list contains the examples of Ajax frameworks. Do + you know them? The demo helps you to sort them out. Drag one and drag + over the headers of three panels. If the draggable framework is + suitable for a certain framework family, it will be accepted and moved + from source panel to the target list.</p> <ui:include src="#{demoNavigator.sampleIncludeURI}" /> <ui:include src="/templates/includes/source-view.xhtml"> <ui:param name="src" value="#{demoNavigator.sampleIncludeURI}" /> @@ -12,5 +45,11 @@ <ui:param name="openLabel" value="View Source" /> <ui:param name="hideLabel" value="Hide Source" /> </ui:include> + <p>That demo shows most important feature of the RichFaces drag and + drop mechanism. You could mark several different components as + 'draggable' and define different drag <b>type</b>'s for them via + attribute. Then you could add corresponding drop zones and use <b>acceptType</b>'s + attributes to define which drop zone will process corresponding dragged + elements.</p> </ui:composition> </html> \ No newline at end of file Modified: trunk/examples/richfaces-showcase/src/main/webapp/richfaces/dragDrop/samples/dragDrop-sample.xhtml =================================================================== --- trunk/examples/richfaces-showcase/src/main/webapp/richfaces/dragDrop/samples/dragDrop-sample.xhtml 2010-12-26 23:24:08 UTC (rev 20801) +++ trunk/examples/richfaces-showcase/src/main/webapp/richfaces/dragDrop/samples/dragDrop-sample.xhtml 2010-12-27 09:31:58 UTC (rev 20802) @@ -7,24 +7,17 @@ xmlns:rich="http://richfaces.org/rich"> <h:outputStylesheet> - .panelc { - width:25%; - vertical-align:top; - } - - .dropTargetPanel { - width: 90%; - } - + .panelc { width:25%; } + .valign { vertical-align:top; } + .dropTargetPanel { width: 90%; } .footerClass { text-align: center; padding-top: 5px; } </h:outputStylesheet> - <h:form id="form"> - <h:panelGrid columnClasses="panelc" columns="4" width="100%"> + <h:panelGrid columnClasses="panelc valign, valign, valign, valign" columns="4" width="100%"> <rich:panel style="width:133px"> <f:facet name="header"> @@ -37,14 +30,14 @@ <a4j:outputPanel style="width:100px;border:1px solid gray;padding:2px" layout="block"> - <rich:dragBehavior event="mouseover" - type="#{fm.family}" dragValue="#{fm}" /> + <rich:dragSource type="#{fm.family}" + dragValue="#{fm}" /> <h:outputText value="#{fm.name}"></h:outputText> </a4j:outputPanel> </h:column> <f:facet name="footer"> - <a4j:commandButton action="#{dragDropBean.reset}" value="Start Over" - render="src,phptable,cftable,dnettable" /> + <a4j:commandButton action="#{dragDropBean.reset}" + value="Start Over" render="src,phptable,cftable,dnettable" /> </f:facet> </h:dataTable> </rich:panel> @@ -53,8 +46,9 @@ <f:facet name="header"> <h:outputText value="PHP Frameworks" /> </f:facet> - <rich:dropBehavior event="mouseover" acceptedTypes="php" dropValue="PHP" - listener="#{dragDropEventBean.processDrop}" render="phptable, src" /> + <rich:dropTarget acceptedTypes="php" dropValue="PHP" + dropListener="#{dragDropEventBean.processDrop}" + render="phptable, src" /> <h:dataTable id="phptable" columns="1" value="#{dragDropBean.targetPHP}" var="fm"> @@ -70,8 +64,9 @@ <f:facet name="header"> <h:outputText value=".NET Frameworks" /> </f:facet> - <rich:dropBehavior event="mouseover" acceptedTypes="dotNet" dropValue="DNET" - listener="#{dragDropEventBean.processDrop}" render="dnettable, src" /> + <rich:dropTarget acceptedTypes="dotNet" dropValue="DNET" + dropListener="#{dragDropEventBean.processDrop}" + render="dnettable, src" /> <h:dataTable id="dnettable" columns="1" value="#{dragDropBean.targetDotNet}" var="fm"> @@ -87,11 +82,12 @@ <f:facet name="header"> <h:outputText value="ColdFusion Frameworks" /> </f:facet> - <rich:dropBehavior event="mouseover" acceptedTypes="cf" dropValue="CF" - listener="#{dragDropEventBean.processDrop}" render="cftable, src" /> + <rich:dropTarget acceptedTypes="cf" dropValue="CF" + dropListener="#{dragDropEventBean.processDrop}" + render="cftable, src" /> - <h:dataTable id="cftable" columns="1" value="#{dragDropBean.targetCF}" - var="fm"> + <h:dataTable id="cftable" columns="1" + value="#{dragDropBean.targetCF}" var="fm"> <h:column> <h:outputText value="#{fm.name}"></h:outputText> </h:column>