Monday, March 25, 2013

JSF 2.1 Tip of the Day: RichFaces 4.3.x Drag and Drop

Multiple DnD Targets
The Primefaces version of my drag-n-drop (DnD) for JSF has been very popular. I didn't want my friends at Red Hat feeling left out. I did a couple of examples using drag-n-drop with the same arrow demo as the Primefaces example: JSF 2.1.x Tip of the Day: Primefaces 3.5 <p:ring/> Drag-N-Drop Example.

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

Details

The project was developed using NetBeans 7.3 and Apache Maven. The Mercurial project can be found on BitBucket here: richfaces-dnd-examples

Code

?
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">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:rich="http://richfaces.org/rich">
    <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>
Labels: , , , , , , , , ,

0 comments :

Post a Comment

Subscribe to: Post Comments ( Atom )

Popular Posts