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" />
<rich:dropTarget acceptedTypes="Egypt" dropValue="Egypt"
render="places, egyptPlaces, germanyPlaces, brazilPlaces"/>
<h:dataTable id="egyptPlaces" columns="1"
var="place" footerClass="footerClass">
<h:outputText value="#{}"></h:outputText>
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.
Search WWH ::

Custom Search