3 Replies Latest reply on Aug 21, 2012 11:10 PM by bleathem

    Reordering tabs with drag and drop

    anab
    anab Aug 21, 2012 10:28 AM

      Hello,

       

      I was wondering if anyone has had success using either rich:tabpanel or rich:togglepanel which give the end users the ability to reorder the tabs they see. If anyone did them with drag and drop support, that would be awesome. I'm just looking to see if other people have had any luck with this before I start trying to do it myself. Also I am using Richfaces 4.2.

       

      Thanks.

       

      Ana

      • 5499 Views
      • Tags:
        • 1. Re: Reordering tabs with drag and drop
          mcmurdosound
          mcmurdosound Aug 21, 2012 1:46 PM (in response to anab)

          not yet ... but I know my product managers. They tend to like such nice features and therefore I'll have to implement something like that in the future, I think. I've already created an own tabpanel and tab jsf component, just to have more control over the generated html output and a more compatible and modern styling (we are still using richfaces 3.3.4)

           

          I'd add something similar to the tablestate feature of the extendedDataTable to store the taborder in a JSON String.

           

          DnD with richfaces buildin DnD stuff or just jQuery draggable.

            • Actions
          • 2. Re: Reordering tabs with drag and drop
            anab
            anab Aug 21, 2012 3:51 PM (in response to mcmurdosound)

            Funny, that's how I ended up with researching this topic. I'd like to thank product managers everywhere...and make them do the actual work.

             

            That's what I was thinking too. I was looking at the extendedDataTable. I wish there was something like that built into the tabpanel already. Oh well I'll just have to store the tab order and that should be ok.

             

            Thanks for the response.

             

            Ana

              • Actions
            • 3. Re: Reordering tabs with drag and drop
              bleathem
              bleathem Aug 21, 2012 11:10 PM (in response to anab)

              This is a feature built-in (on the client side) to the jquery ui tabs javascrpt "widget":

              http://jqueryui.com/demos/tabs/#sortable

               

              For JSF component built using the jQuery ui tabs components, see:

              http://www.bleathem.ca/blog/2011/11/richfaces-4-cdk-jqeury-ui-tabs.html

               

              The bootstrap tabs component is currently backed on the client by the bootstrap js:

              http://bootstrap-richfaces.rhcloud.com/component/tabbable/index.jsf

               

              but we could/should consider using the more mature jquery ui tabs widget here.  It's just a matter of getting the skinning right, as we have most of the details of the JSF/JS event bridge worked out (RFSBOX-9).

              If anyone in the community wants to take up this challenge, we'd love to work with you on it!

                • Actions