1 2 Previous Next 15 Replies Latest reply on Aug 22, 2007 2:33 AM by Tomislav Tkal?evi?

    dragSupport and dropSupport

    Kevin Taylor Newbie

      I am trying to find a tutorial or example of which settings are needed to use the dragSupport or dropSupport. The livedemo does not provide any examples on how the bean should be setup or what proeprties like "dragType" should be set to. Could someone provide an example on this?

        • 1. Re: dragSupport and dropSupport
          Jim Dummy Newbie

          Hello!

          I'm in the same situation...
          I am able to run drag/drop, but can't figure out how to make indicator work.

          First you have to specify your drag area (what are you going to drag)

          <a4j:outputPanel style="border:1px solid gray; " layout="block">
          <rich:dragSupport dragIndicator="indicator" dragType="inputz">
          <a4j:actionparam name="input_name" value="#{in.name}"/>
          </rich:dragSupport>
          <h:outputText value="THE ITEM I WANNA DRAG"/>
          </a4j:outputPanel>

          Here your "outputText" is the item you are going to drag - nothing special it's just a representation...
          The most important thing is the "dragType" - it is just an id to tell the drop area that this is the item it can accept.

          <a4j:actionparam name="input_name" value="#{in.name}"/>

          is the actual parameter that is passed to your bean on a drop event listener.

          The drop area is:

          <a4j:outputPanel style="width: 100%; height: 500px; border: 1px solid cyan;" layout="block">
          <rich:dropSupport
          dropListener="#{WorkflowForm.onInputDrop}"
          acceptedTypes="inputz"
          ajaxSingle="true"
          reRender="inputs">
          </rich:dropSupport>
          </a4j:outputPanel>

          note that acceptedtypes mast be the same as the dragType in dragSupport

          so here you specify your listener:
          dropListener="#{WorkflowForm.onInputDrop}"

          this is the bean method that is to be called by drop operation:

          public void onInputDrop(DropEvent dropEvent)
          {
          FacesContext context = FacesContext.getCurrentInstance();
          String name = context.getExternalContext().getRequestParameterMap().get("input_name").toString();

          Here you can get the parameter "input_name" passed to you from drag type (<a4j:actionparam ...)

          That works for me except that I have no idea how to change an icon (I found at least three different ways to do it... neither works).

          Cheers.


          • 2. Re: dragSupport and dropSupport
            Ilya Shaikovsky Master

            ok.. I advice you explore not only live demo but developer guide also. Let us know if this will not help.

            • 3. Re: dragSupport and dropSupport
              Jim Dummy Newbie

              I did. And even downloaded the demo war to see the code... I just don't get what dragIndicator mean.

              In example you have ":indicator" in some code I fond it was "form:indicator"

              Should it be simple:

              <rich:dragIndicator id="indicator"/>
              ...
              <rich:dragSupport dragIndicator="indicator">

              ???

              Again some confusion about dragIndicator facets:

              I tried:

              <f:facet name="default">
              <h:graphicImage value="/img/image.gif"/>
              </f:facet>

              and

              <f:facet name="simple">
              <h:graphicImage value="/img/image.gif"/>
              </f:facet>

              As I understand - those one (or some of it) is for default icon, while reject/accept are for those operations when I'm over drop area???

              Thank you.

              P.S. May be you could provide a developers guide for those who used to be born in Russia too? ;-)

              • 4. Re: dragSupport and dropSupport
                Kevin Taylor Newbie

                <a4j:outputPanel style="border:1px solid gray; " layout="block">
                <rich:dragSupport dragIndicator="indicator" dragType="inputz">
                <a4j:actionparam name="input_name" value="#{in.name}"/>
                </rich:dragSupport>
                <h:outputText value="THE ITEM I WANNA DRAG"/>
                </a4j:outputPanel>

                I have a few questions about your example. First, what does "in.name" correspond to. Is this a column for a datatable? Also, I noticed a dragValue for the rich:dragSupport functionality. Is this a necessary property?

                • 5. Re: dragSupport and dropSupport
                  Augusto Dias Newbie

                  Try to use the code tag of bbcode when you wanna post code. :D

                  Here's an example:

                  <rich:modalPanel id="modalPanel">
                   <rich:dragIndicator id="indicator"/>
                   <h:form prependId="true" id="selectItems">
                   <h:panelGrid width="100%" columns="2">
                   <rich:panel>
                   <f:facet name="header">Table for Drag</f:facet>
                   </rich:dropSupport>
                   <h:dataTable id="tSel" value="#{controller.listOfItensForTable}" var="value" summary="Table of Values" rows="5">
                   <h:column>
                   <a4j:outputPanel>
                   <rich:dragSupport dragValue="#{value}" dragIndicator=":indicator" id="drag" dragType="type">
                   <rich:dndParam name="label" value="#{value.name }"/>
                   </rich:dragSupport>
                   <h:outputText value="#{value.name}" styleClass="cell"/>
                   </a4j:outputPanel>
                   </h:column>
                   </h:dataTable>
                   </rich:panel>
                   <rich:panel>
                   <f:facet name="header">Table for Drop</f:facet>
                   <rich:dropSupport id="drop" reRender="tSel,tSelected,datascrol1,datascrol2" acceptedTypes="type" dropListener="#{curriculoController.proccessDrop }">
                   <h:dataTable id="tSelected" value="#{controller.listOfItensSelected}" var="value" summary="Table of Selected Values" rows="5">
                   <h:column>
                   <h:outputText value="#{value.nome}" styleClass="cell"/>
                   </h:column>
                   </h:dataTable>
                   </rich:panel>
                   <rich:datascroller for="tSel" id="datascrol1" fastControls="first,last,next,previous">
                   <f:facet name="next"> &gt;</f:facet>
                   <f:facet name="previous">&lt;</f:facet>
                   </rich:datascroller>
                   <rich:datascroller for="tSelected" id="datascrol2" fastControls="first,last,next,previous">
                   <f:facet name="next"> &gt;</f:facet>
                   <f:facet name="previous">&lt;</f:facet>
                   </rich:datascroller>
                   </h:panelGrid>
                   <a4j:commandButton oncomplete="windowClose('modalPanel')" value="Confirm and Finalize">
                   <f:setPropertyActionListener target="#{anotherController.anotherList }" value="#{controller.listOfItensSelected }"/>
                   </a4j:commandButton>
                   </h:form>
                  </rich:modalPanel>

                  Bean
                  private List listOfItensForTable = new ArrayList ( );
                  
                  private List listOfItensSelected = new ArrayList( );
                  ...
                  public void proccessDrop ( DropEvent event )
                  {
                   if ( listOfItensForTable.lastIndexOf ( event.getDragValue ( ) ) != -1 )
                   listOfItensForTable.remove ( event.getDragValue ( ) );
                   if ( listOfItensSelected == null )
                   listOfItensSelected = new ArrayList ( );
                   listOfItensSelected.add ( event.getDragValue ( ) );
                  }

                  DragIndicator is a component thar render a box with a String and a img to symbolize a item that is being dragged.
                  PS: DragIndicator do not work in version 3.0.1 or later in Firefox. There's a XML error.
                  PS2: sorry if you can't understand my english... I'm brazilian! rsrs

                  • 6. Re: dragSupport and dropSupport
                    Jim Dummy Newbie

                    Good guess! :-)

                    It is.
                    ****************************************
                    <h:dataTable id="starts" value="#{WorkflowForm.startList}" var="in" >
                    <h:column>
                    <a4j:outputPanel style="border:1px solid gray; padding:2px;" layout="block">
                    <rich:dragSupport dragIndicator="indicator" dragType="inputz">
                    <a4j:actionparam name="input_name" value="#{in.name}"/>
                    </rich:dragSupport>
                    <h:outputText value="#{in.name}"/>
                    </a4j:outputPanel>
                    </h:column>
                    </h:dataTable>
                    ***************************************

                    dragValue is "Data to be sent to the drop zone after a drop event" - god knows what it means :-(

                    Well, suppose it's not the last time I feel stupid... :-)

                    Cheers

                    • 7. Re: dragSupport and dropSupport
                      Jim Dummy Newbie

                      Thank you for the example.

                      But why ":indicator"??? Does double points have some spiritual means?

                      P.S. Bueno, compañero somos casi compatriotas ;-) That means I'm not english either.
                      P.P.S God! if it was just plain CODE, but what BB means??? (just kidding)

                      • 8. Re: dragSupport and dropSupport
                        Kevin Taylor Newbie

                        thak you guys. You have been a lot of help. The doc seems to be a little confusing and cryptic. Let's say the drag and drop needed to be bi-directional. Would that be possible or is there a better way to remove things from the selected list?

                        • 9. Re: dragSupport and dropSupport
                          Augusto Dias Newbie

                          I don't know why use the ":"... I think that is because the indicator is out of a form, because in examples that a see with indicator inside a form the tag property was formId:indicatorId.

                          The data to be sent to the drop zone is a value that you wanna move to the dropzone. Ex: remove a object from a list and add in another list.

                          • 10. Re: dragSupport and dropSupport
                            Augusto Dias Newbie

                             

                            Let's say the drag and drop needed to be bi-directional. Would that be possible or is there a better way to remove things from the selected list?

                            It's just put drag in the dataTable of the dropzone and a dropsupport in the table that have the de drag.

                            • 11. Re: dragSupport and dropSupport
                              Tomislav Tkal?evi? Novice

                              I am experiencing one problem which I can't get through.
                              In my bean i have a beanProcces() method and during the deploy of my ear
                              this exception comes to the surface:


                              --- MBeans waiting for other MBeans ---
                              ObjectName: persistence.units:ear=kadrovska.ear,jar=kadrovska.jar,unitName=userDatabase
                              State: FAILED

                              Reason: java.lang.RuntimeException: java.lang.NoClassDefFoundError: org/richfaces/event/DropEvent
                              I Depend On:
                              jboss.jca:service=DataSourceBinding,name=TestDS
                              Depends On Me:

                              I'm working on jboss-4.2.0.GA,I have also
                              richfaces-impl-3.1.0-rc2.jar,
                              richfaces-ui-3.1.0-rc2.jar and
                              richfaces-api-3.1.0-rc2.jar bundled in my war of the application as mentioned in http://www.jboss.com/index.html?module=bb&op=viewtopic&t=112220&start=10
                              Using jsp without facelets.

                              • 12. Re: dragSupport and dropSupport
                                Tomislav Tkal?evi? Novice

                                 

                                "tkalactomo" wrote:
                                I am experiencing one problem which I can't get through.
                                In my bean i have a beanProcces() method and during the deploy of my ear
                                this exception comes to the surface:


                                --- MBeans waiting for other MBeans ---
                                ObjectName: persistence.units:ear=kadrovska.ear,jar=kadrovska.jar,unitName=userDatabase
                                State: FAILED
                                <b>
                                Reason: java.lang.RuntimeException: java.lang.NoClassDefFoundError: org/richfaces/event/DropEvent</b>
                                I Depend On:
                                jboss.jca:service=DataSourceBinding,name=TestDS
                                Depends On Me:

                                I'm working on jboss-4.2.0.GA,I have also
                                richfaces-impl-3.1.0-rc2.jar,
                                richfaces-ui-3.1.0-rc2.jar and
                                richfaces-api-3.1.0-rc2.jar bundled in my war of the application as mentioned in http://www.jboss.com/index.html?module=bb&op=viewtopic&t=112220&start=10
                                Using jsp without facelets.

                                And yes this is maybe crucial I have that method in entity bean.

                                • 13. Re: dragSupport and dropSupport
                                  Tomislav Tkal?evi? Novice

                                  Ok I'm talking to myself in this post;-).But I have managed to get it work.

                                  @Name("dragDrop")
                                  @Scope(ScopeType.CONVERSATION)
                                  public class DragDrop {
                                  
                                   public void drop(DropEvent event){
                                   System.err.println("inside");
                                   }
                                  
                                  }
                                  


                                  So,I still have one question is this normal behaviour tha in entity type beans
                                  NoclassDefFoundError occurs or not?
                                  Thanks in advance!

                                  • 14. Re: dragSupport and dropSupport
                                    Augusto Dias Newbie

                                    Wich version of RichFaces are you using?

                                    1 2 Previous Next