![]() |
Multiple DnD Targets |
I did have a little more fun with using Java to
clone
some of the arrows so that you could see how to use them multiple times.
Requirements
- Mojarra 2.1.20
- richfaces-core-api 4.3.1.Final
- richfaces-core-impl 4.3.1.Final
- richfaces-components-api 4.3.1.Final
- richfaces-components-ui 4.3.1.Final
Details
The project was developed using NetBeans 7.3 and Apache Maven. The Mercurial project can be found on BitBucket here: richfaces-dnd-examplesCode
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | <? xml version = '1.0' encoding = 'UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < h:head > < title >Multiple Target Panels</ title > </ h:head > < h:body > < h1 > Multiple Target Panels</ h1 > < p > This example has both vertical and horizontal arrow stacks. The Horizontal target removes the arrow from the source. The Vertical target clones the arrow and allows multiple arrows of the same name. </ p > < h:form id = "form1" > < rich:dragIndicator id = "dragIndicator1" /> < h:panelGrid columns = "2" > < rich:panel id = "target" > < f:facet name = "header" > < h:outputText value = "Target Panel" /> </ f:facet > < h:panelGrid id = "panelGrid1" columns = "2" > < h:outputText value = "Horizontal Arrow Column" rendered = "#{arrowBean.target.size() eq 0}" /> < rich:dataGrid id = "hArrowPanel" columns = "#{arrowBean.target.size() lt 10 ? arrowBean.target.size() : 10 }" elements = "10" value = "#{arrowBean.target}" var = "hArrow" > < a4j:outputPanel id = "outputPanel4" > < h:graphicImage id = "graphicImage4" alt = "#{hArrow.name}" value = "#{resource['images:arrow-md.png']}" /> < h:outputText id = "outputText4" value = "#{hArrow.name}" /> </ a4j:outputPanel > </ rich:dataGrid > < h:graphicImage id = "graphicImage2" alt = "bullseye" height = "100" width = "100" value = "#{resource['images:bullseye.jpg']}" > < rich:dropTarget id = "dropTarget1" acceptedTypes = "a" dropValue = "hArrow" dropListener = "#{arrowListener.processDrop}" render = "source,target" /> </ h:graphicImage > </ h:panelGrid > < h:panelGrid id = "panelGrid2" columns = "1" > < h:outputText value = "Vertical Arrow Column (Clone)" rendered = "#{arrowBean.serialTarget.size() eq 0}" /> < rich:dataGrid id = "vArrowPanel" columns = "1" value = "#{arrowBean.serialTarget}" var = "vArrow" elements = "10" rendered = "#{arrowBean.serialTarget.size() gt 0}" > < a4j:outputPanel id = "outputPanel3" > < h:graphicImage id = "graphicImage3" alt = "#{vArrow.name}" value = "#{resource['images:arrow-md.png']}" /> < h:outputText id = "outputText3" value = "#{vArrow.name}" /> </ a4j:outputPanel > </ rich:dataGrid > < h:graphicImage id = "graphicImage5" alt = "bullseye" height = "100" width = "100" value = "#{resource['images:bullseye.jpg']}" > < rich:dropTarget id = "dropTarget2" acceptedTypes = "a" dropValue = "s" dropListener = "#{arrowListener.processDrop}" render = "source,target" /> </ h:graphicImage > </ h:panelGrid > </ rich:panel > < rich:panel id = "source" > < f:facet name = "header" > < h:outputText value = "Arrows" /> </ f:facet > < rich:dataTable id = "sourceDataTable" value = "#{arrowBean.source}" var = "arrow" > < rich:column id = "column1" > < a4j:outputPanel id = "sourcePanel" > < rich:dragSource id = "dragSource1" type = "a" dragValue = "#{arrow}" /> < h:graphicImage id = "graphicImage1" alt = "#{arrow.name}" value = "#{resource['images:arrow-md.png']}" /> < h:outputText id = "outputText1" value = "#{arrow.name}" /> </ a4j:outputPanel > </ rich:column > </ rich:dataTable > </ rich:panel > </ h:panelGrid > < h:panelGroup > < h:button outcome = "index" value = "Home" /> < a4j:commandButton action = "#{arrowBean.reset()}" value = "Reset" render = "target source" /> </ h:panelGroup > </ h:form > </ h:body > </ html > |