Author: ilya_shaikovsky Date: 2011-01-26 03:51:35 -0500 (Wed, 26 Jan 2011) New Revision: 21227 Added: trunk/examples/richfaces-showcase/src/main/webapp/richfaces/dragDrop/dragIndicator.xhtml trunk/examples/richfaces-showcase/src/main/webapp/richfaces/dragDrop/samples/dragIndicator-sample.xhtml 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: Modified: trunk/examples/richfaces-showcase/src/main/webapp/richfaces/dragDrop/dragDrop.xhtml =================================================================== --- trunk/examples/richfaces-showcase/src/main/webapp/richfaces/dragDrop/dragDrop.xhtml 2011-01-26 00:52:53 UTC (rev 21226) +++ trunk/examples/richfaces-showcase/src/main/webapp/richfaces/dragDrop/dragDrop.xhtml 2011-01-26 08:51:35 UTC (rev 21227) @@ -8,6 +8,21 @@ <p>The Richfaces Drag-n-Drop component suite includes three components: <b>dragSource</b>, <b>dropTarget </b>and <b>dragIndicator</b>.</p> + <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:include src="#{demoNavigator.sampleIncludeURI}" /> + <ui:include src="/templates/includes/source-view.xhtml"> + <ui:param name="src" value="#{demoNavigator.sampleIncludeURI}" /> + <ui:param name="sourceType" value="xhtml" /> + <ui:param name="openLabel" value="View Source" /> + <ui:param name="hideLabel" value="Hide Source" /> + </ui:include> + <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> @@ -22,9 +37,12 @@ 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> - + a dragged object. By default if the component not defined we create a + copy of dragged elements. But the markup could be redefined by defining + the markup of the indicator using nested components.</p> + <fieldset><legend>Note:</legend> That sample shows simple + usage without indicator defined. We just using predefined CSS classes + to customize look for different states.</fieldset> <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 @@ -38,18 +56,5 @@ 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}" /> - <ui:param name="sourceType" value="xhtml" /> - <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 Added: trunk/examples/richfaces-showcase/src/main/webapp/richfaces/dragDrop/dragIndicator.xhtml =================================================================== --- trunk/examples/richfaces-showcase/src/main/webapp/richfaces/dragDrop/dragIndicator.xhtml (rev 0) +++ trunk/examples/richfaces-showcase/src/main/webapp/richfaces/dragDrop/dragIndicator.xhtml 2011-01-26 08:51:35 UTC (rev 21227) @@ -0,0 +1,20 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:h="http://java.sun.com/jsf/html" + xmlns:f="http://java.sun.com/jsf/core" + xmlns:ui="http://java.sun.com/jsf/facelets"> + +<ui:composition> + <p>This sample uses the same code but also there is custom + indicator defined. That custom indicator uses styling attributes for look customization. + However it's still possible to use the same predefined classes as for + previous sample.'</p> + <ui:include src="#{demoNavigator.sampleIncludeURI}" /> + <ui:include src="/templates/includes/source-view.xhtml"> + <ui:param name="src" value="#{demoNavigator.sampleIncludeURI}" /> + <ui:param name="sourceType" value="xhtml" /> + <ui:param name="openLabel" value="View Source" /> + <ui:param name="hideLabel" value="Hide Source" /> + </ui:include> +</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 2011-01-26 00:52:53 UTC (rev 21226) +++ trunk/examples/richfaces-showcase/src/main/webapp/richfaces/dragDrop/samples/dragDrop-sample.xhtml 2011-01-26 08:51:35 UTC (rev 21227) @@ -14,9 +14,18 @@ text-align: center; padding-top: 5px; } + .rf-ind-drag{ + font-size:11px; + cursor:pointer; + width:100px; + border:1px solid gray; + padding:2px + } + .rf-ind-acpt{border:2px solid green} + .rf-ind-rejt{border:2px solid red} </h:outputStylesheet> <h:form id="form"> - + <h:panelGrid columnClasses="panelc valign, valign, valign, valign" columns="4" width="100%"> <rich:panel style="width:133px"> @@ -25,11 +34,8 @@ </f:facet> <h:dataTable id="src" columns="1" value="#{dragDropBean.source}" var="fm" footerClass="footerClass"> - <h:column> - <a4j:outputPanel - style="width:100px;border:1px solid gray;padding:2px" - layout="block"> + <a4j:outputPanel layout="block" styleClass="rf-ind-drag"> <rich:dragSource type="#{fm.family}" dragValue="#{fm}" /> <h:outputText value="#{fm.name}"></h:outputText> Added: trunk/examples/richfaces-showcase/src/main/webapp/richfaces/dragDrop/samples/dragIndicator-sample.xhtml =================================================================== --- trunk/examples/richfaces-showcase/src/main/webapp/richfaces/dragDrop/samples/dragIndicator-sample.xhtml (rev 0) +++ trunk/examples/richfaces-showcase/src/main/webapp/richfaces/dragDrop/samples/dragIndicator-sample.xhtml 2011-01-26 08:51:35 UTC (rev 21227) @@ -0,0 +1,112 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<ui:composition xmlns="http://www.w3.org/1999/xhtml" + xmlns:h="http://java.sun.com/jsf/html" + xmlns:f="http://java.sun.com/jsf/core" + xmlns:ui="http://java.sun.com/jsf/facelets" + xmlns:a4j="http://richfaces.org/a4j" + xmlns:rich="http://richfaces.org/rich"> + + <h:outputStylesheet> + .panelc { width:25%; } + .valign { vertical-align:top; } + .dropTargetPanel { width: 90%; } + .footerClass { + text-align: center; + padding-top: 5px; + } + + .default{ + font-size:11px; + cursor:pointer; + width:100px; + border:1px solid gray; + padding:2px + } + .accept{border:2px solid green} + .reject{border:2px solid red} + </h:outputStylesheet> + <rich:dragIndicator id="ind" acceptClass="accept" rejectClass="reject" draggingClass="default"> + Drag the item to proper area.. + </rich:dragIndicator> + <h:form id="form"> + + <h:panelGrid columnClasses="panelc valign, valign, valign, valign" columns="4" width="100%"> + + <rich:panel style="width:133px"> + <f:facet name="header"> + <h:outputText value="Source List" /> + </f:facet> + <h:dataTable id="src" columns="1" value="#{dragDropBean.source}" + var="fm" footerClass="footerClass"> + <h:column> + <a4j:outputPanel layout="block" styleClass="default"> + <rich:dragSource type="#{fm.family}" dragIndicator="ind" + 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" /> + </f:facet> + </h:dataTable> + </rich:panel> + + <rich:panel styleClass="dropTargetPanel"> + <f:facet name="header"> + <h:outputText value="PHP Frameworks" /> + </f:facet> + <rich:dropTarget acceptedTypes="php" dropValue="PHP" + dropListener="#{dragDropEventBean.processDrop}" + render="phptable, src" /> + + <h:dataTable id="phptable" columns="1" + value="#{dragDropBean.targetPHP}" var="fm"> + <h:column> + <h:outputText value="#{fm.name}"></h:outputText> + </h:column> + </h:dataTable> + + + </rich:panel> + + <rich:panel styleClass="dropTargetPanel"> + <f:facet name="header"> + <h:outputText value=".NET Frameworks" /> + </f:facet> + <rich:dropTarget acceptedTypes="dotNet" dropValue="DNET" + dropListener="#{dragDropEventBean.processDrop}" + render="dnettable, src" /> + + <h:dataTable id="dnettable" columns="1" + value="#{dragDropBean.targetDotNet}" var="fm"> + <h:column> + <h:outputText value="#{fm.name}"></h:outputText> + </h:column> + </h:dataTable> + + + </rich:panel> + + <rich:panel styleClass="dropTargetPanel"> + <f:facet name="header"> + <h:outputText value="ColdFusion Frameworks" /> + </f:facet> + <rich:dropTarget acceptedTypes="cf" dropValue="CF" + dropListener="#{dragDropEventBean.processDrop}" + render="cftable, src" /> + + <h:dataTable id="cftable" columns="1" + value="#{dragDropBean.targetCF}" var="fm"> + <h:column> + <h:outputText value="#{fm.name}"></h:outputText> + </h:column> + </h:dataTable> + </rich:panel> + </h:panelGrid> + + </h:form> + <a4j:outputPanel ajaxRendered="true"> + <h:messages></h:messages> + </a4j:outputPanel> +</ui:composition> \ No newline at end of file