HTML and CSS Reference
In-Depth Information
The drop source panel contains the following main components:
1.
"places"
data table, which lists the different places to be displayed.
2.
dragSource
, which allows the places inside the data table to be draggable; in the example,
we used mainly two attributes of
dragSource
;
dragValue
, which represents the data to
be sent to the drop zone after the drop event is completed, and
dragIndicator
, which
represents the component ID of the
dragIndicator
component that is used as a drag
pointer during the drag operation.
Adding to having a single drop source panel, we have three drop target panels that will receive the items from
the drop source panel; every drop target represents the corresponding country (Egypt, Germany, and Brazil) for the
drop source items. Listing 9-11 shows the first drop target panel (which will receive the drop source items that are
related to Egypt).
Listing 9-11.
First Drop Target Panel
<rich:panel styleClass="dropTargetPanel">
<f:facet name="header">
<h:outputText value="Egypt" />
</f:facet>
<rich:dropTarget acceptedTypes="Egypt" dropValue="Egypt"
dropListener="#{rightCountry.processDrop}"
render="places, egyptPlaces, germanyPlaces, brazilPlaces"/>
<h:dataTable id="egyptPlaces" columns="1"
value="#{rightCountry.egyptPlaces}"
var="place" footerClass="footerClass">
<h:column>
<h:outputText value="#{place.name}"></h:outputText>
</h:column>
</h:dataTable>
</rich:panel>
As shown in the previous code snippet, the drop target panel contains the following components:
1.
"egyptPlaces"
data table, which shows the places belonging to Egypt.
2.
dragTarget
, which defines the droppable zone; in the example, we used the four attributes
of
dragTarget
;
acceptedTypes
, which defines the element types that are acceptable by
the droppable zone (if it is matched with the
dragSource
type, then the droppable zone
will accept the
dragSource
item);
dropValue
, which represents the data to be processed
after a drop event completes;
dropListener
, which is binded with a
MethodExpression
representing an action listener method that will be notified after drop operation
completes; and finally
render
attribute, which defines the IDs of components that will
participate in the “render” portion of the Request Processing Lifecycle.
In
#{rightCountry.processDrop}
method expression (which will be executed after the drop completes), the
selected
place
object is removed from
places
list (which is binded with the drag source data table) and is put in
egyptPlaces
List in order to update
"egyptPlaces"
data table with the new
place
object as shown in Listing 9-12.
