Drag and Drop Identifiers Matching
Jeff Liu, Engineer, Potix Corporation
July 6, 2007
Applicable to ZK 2.4.1 and later.
Introduction
There are a lot of hidden treasures in the ZK API. Few of us carefully read it and find it (Yeah, admit it. Almost of us don't "read" ZK API). Due to human's great nature, the ignorance, the treasures remain hidden. When people first see the amazing ZK drag and drop demo, they are often blinded by the plug-and-run implementation and neglect the useful “identifier matching.” In this small talk, I (Jeff Liu, not Captain Nemo) bring you to the discover the interesting and useful treasure “drag and drop identifier matching”
Prerequisite Software
The component is based on the ZK Ajax Framework, so you must download and install the ZK Ajax Framework.
Problem
Users want more than simple drag and drop. They want adding “conditions” to it. Something likes this: A only be able dropped on B, C and D only on B and E, and so on. In the old days (actually not that old”), poor developers have to implement all the nasty if-else statements for it. Image how painful is it.
Solution
ZK drag and drop “identifier matching.” In ZK, we provide drag and drop with the identifiers. Developers can assign “identifier” to the component instead of the simple “true” or “false”. And, if two identifiers are “matched,” the dragged component will be dropped into the target component. If not, the dragged component will bounce back. Yeah, it sounds like rocket science. Don’t worry, a concrete example will be provided. First, let’s take a look the identifier matching concept
Identifier matching
What is identifier?
Identifiers (single/multiple) are a denotation which can be assigned to the draggable and droppable attributes of a component.
Ex:
Single:
<label draggable = "A" /> <!-- Identifier A -->
<image droppable = "B" /> <!-- Identifier B -->
Multiple( collection of identifiers, separated by comma) Note: Multiple identifier is only supplied with droppable component :
<image droppable = " D,E,F " /> <!-- Identifiers D,E,F -->
What is identifier matching?
When the identifier of a draggable component is “matching” with the identifier of a droppable component, the dragged component is accepted by the droppable component and onDrop event is fired, if there is any. If not, dragged component is rejected and no event being fired. Ex:
<image id = "img_1" draggable = "A" />
<image id = "img_2" droppable = "A" onDrop = "foo()" />
<image id = "img_3" droppable = "B" onDrop = "bar()" />
By the code above, img_1 can only be dropped on img_2 and fire foo().
Sample - Recycling bins
1. The simple “true” and “false” ( True and false take all )
<hbox>
<groupbox mold="3d" >
<caption sclass="subTitle" label="Recycling bin and trash can"/>
<image id="trash_bin" onDrop="recycling(event.dragged)" droppable = "true" height = "100px"
src = "/img/Trash_Can.jpg" />
<label id="lbl_trash_bin" sclass="drop" value = "Trash" />
<image id="mailbox" onDrop="recycling(event.dragged)" droppable = "false" height = "100px"
src = "/img/Mailbox.jpg" />
<label id="lbl_mailbox" sclass="drop" value = "Mailbox" />
....
<groupbox mold ="3d" width ="800px">
<caption sclass="subTitle" label="Items going into rubbish bags" />
<hbox>
<vbox>
<label sclass="drag" draggable = "paper" value = "Shredded paper" />
...
</vbox>
<vbox>
<label sclass="drag" draggable = "true" value = "Aerosol cans" />
...
</vbox>
<vbox>
<label sclass="drag" draggable = "not-recyce" value = "waxed paper/cardboard" />
...
</vbox>
</hbox>
Identifier “true” in droppable component is denoted accepting all identifiers, “false” rejecting all identifiers. In this sample, no matter what is the dragged component's identifier, the "mailbox" reject them all due to its "false" identifier. In contrast, "trash_bin" accept all the dragged components due to its "true" identifier
2. The one to many matching( One to many)
<hbox>
<groupbox mold="3d" >
<caption sclass="subTitle" label="Recycling bin and trash can"/>
<image id="trash_bin" onDrop="recycling(event.dragged)" droppable = "plastic,glass,metal,food,not-recycle" height = "100px"
src = "/img/Trash_Can.jpg" />
<label id="lbl_trash_bin" sclass="drop" value = "Trash" />
<image id="paper_bin" onDrop="recycling(event.dragged)" droppable = "paper" height = "100px"
src = "/img/recycle.png" />
...
<vbox>
<label sclass="drag" draggable = "paper" value = "Shredded paper" />
<label sclass="drag" draggable = "paper" value = "Chipboard" />
<label sclass="drag" draggable = "paper" value = "Junk mail" />
<label sclass="drag" draggable = "plastic" value = "Plastic Bottle" />
<label sclass="drag" draggable = "plastic" value = "Plastic cups" />
<label sclass="drag" draggable = "plastic" value = "Plastic tubs" />
<label sclass="drag" draggable = "glass" value = "Glass Bottle" />
<label sclass="drag" draggable = "glass" value = "Glass Jars" />
</vbox>
<vbox>
<label sclass="drag" draggable = "metal" value = "Aerosol cans" />
<label sclass="drag" draggable = "metal" value = "Aluminum cans" />
<label sclass="drag" draggable = "food" value = "Left over food" />
<label sclass="drag" draggable = "not-recycle" value = "Neon fluorescent or dark-colored paper" />
...
Identifiers “plastic, glass, metal, food, not-recycle” in droppable component are denoted that the component accepts dragged components with plastic, glass, metal, food or not-recycle identifiers. The droppable component with “paper” identifier only accepts dragged components with “paper” identifier.
3. One to one matching ( One to One)
<hbox>
<groupbox mold="3d" >
<vbox>
<hbox>
<image id="trash_bin" onDrop="recycling(event.dragged)" droppable = "not-recycle" height = "100px" src = "/img/Trash_Can.jpg" />
<label id="lbl_trash_bin" sclass="drop" value = "Trash" />
<image onDrop="recycling(event.dragged)" id="paper_bin" droppable = "paper" height = "100px" src = "/img/recycle.png" />
<label id="lbl_paper_bin" sclass="drop" value = "Paper" />
<image onDrop="recycling(event.dragged)" id ="plastic_bin" droppable = "plastic" height = "100px" src = "/img/recycle.png" />
<label id="lbl_plastic_bin" sclass="drop" value = "Plastic" />
</hbox>
<hbox>
<image onDrop="recycling(event.dragged)" id="glass_bin" droppable = "glass" height = "100px" src = "/img/recycle.png" />
<label id="lbl_glass_bin" sclass="drop" value = "Glass" />
<image onDrop="recycling(event.dragged)" id="metal_bin" droppable = "metal" height = "100px" src = "/img/recycle.png" />
<label id="lbl_metal_bin" sclass="drop" value = "Metal" />
<image onDrop="recycling(event.dragged)" id="food_bin" droppable = "food" height = "100px" src = "/img/recycle.png" />
<label id="lbl_food_bin" sclass="drop" value = "Food" />
</hbox>
</vbox>
...
<label sclass="drag" draggable = "paper" value = "Shredded paper" />
<label sclass="drag" draggable = "paper" value = "Chipboard" />
<label sclass="drag" draggable = "paper" value = "Junk mail" />
<label sclass="drag" draggable = "plastic" value = "Plastic Bottle" />
<label sclass="drag" draggable = "plastic" value = "Plastic cups" />
<label sclass="drag" draggable = "plastic" value = "Plastic tubs" />
<label sclass="drag" draggable = "glass" value = "Glass Bottle" />
<label sclass="drag" draggable = "glass" value = "Glass Jars" />
</vbox>
<vbox>
<label sclass="drag" draggable = "metal" value = "Aerosol cans" />
<label sclass="drag" draggable = "metal" value = "Aluminum cans" />
<label sclass="drag" draggable = "food" value = "Left over food" />
<label sclass="drag" draggable = "not-recycle" value = "Neon fluorescent or dark-colored paper" />
<label sclass="drag" draggable = "not-recycle" value = "sheets of address labels or stickers" />
...
In this sample, dragged components are accepted by droppable components with corresponding identifiers, “Paper” to “Paper”, “plastic” to “plastic” and so on…
Download
Download the Recycling.war
Summary
The drag and drop identifiers can be applied to many useful application, please try it out and have fun.
| Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License. |