JSF 2.1.x Tip of the Day: Primefaces 3.5 <p:ring/> Drag-N-Drop Example

Camp Old Indian

I was trying to come up with an example to demonstrate <p:ring /> along with Drag-and-Drop (DnD). I had an idea of using a target to drop things on. I was sitting in my living room watching my youngest son creating a world on little big planet, and I remembered his first time shooting a bow. He had a perfect bullseye.

I decided that I would drag-n-drop arrows in honor of my son. I mentioned the idea to him, and he loved it. So here it is... a useful example that was fun to create. In this example, I will demonstrate the <p:ring />, and <p:fieldSet /> components primarily. I have added some effects to a <p:dialog /> if you select an arrow and dismiss it.

Requirements

• PrimeFaces 3.5
• Mojarra 2.1.20

I used NetBeans 7.3 to develop the Apache Maven based project. The Mercurial project can be found on BitBucket here: primefaces-ring-dnd.

Example

index.xhtml

---

IndexBean.java

---

Arrow.java

---

Conclusion

This is a very simple example of what you can do with a Primefaces, Mojarra, and Netbeans.

Arrow Ring and Target