12 Replies Latest reply on Apr 28, 2011 5:22 PM by Alex Ormond

    extendedDataTable selection on client

    Alex Ormond Newbie

      I would like to implement a CRUD web page.  This page would have an extendedDataTable with Add, View, Edit, Delete, and Done buttons at the bottom.  If no row in the table is selected then only the Add and Done buttons would be active.  When a row is selected then all buttons would be active.  To do this I will write a JavaScript function, activateButtons(), which will activate the appropriate buttons.  This function could be called by the onselectionchange attribute of the extendedDataTable, and the function will need to know if a row is selected or not.  How will it know?  Is there some Javascript function associated with the extendedDataTable which it can access?  Is a parameter passed to the function called by onselectionchange which contains the selected row, if any?

       

      Thanks for any help/thougths.

       

      Alex Ormond

        • 1. extendedDataTable selection on client
          Ilya Shaikovsky Master

          maybe better to use like there http://livedemo.exadel.com/richfaces-demo/richfaces/keepAlive.jsf?c=keepAlive&tab=usage ?

           

          The problem with JavaScript solution will be the same as at first sample. if your button will have disabled=false initially and you will later activate it using just JavaScript it will be still disabled in JSF tree and will not call any actions when clicked. So I think lightweight ajax call with AjaxSingle and limitToList set to true which will change disabled attribute value in runtime will be better in order to keep tree and view in sync.

          • 2. extendedDataTable selection on client
            P18Mar ch ;) Newbie

            hello Ilya Shaikovsky I have send u message please reply me.

            • 3. extendedDataTable selection on client
              Ilya Shaikovsky Master

              replied. and please use forum thread for further discussion. we should work public in order to share efforts and experience

              • 4. extendedDataTable selection on client
                P18Mar ch ;) Newbie

                Hello ilya please help me i have read u'r message please give me full information how and where in which class I have to build those override method in listshuttle problem--

                reply me as soon as possible and please send message  ...

                • 5. extendedDataTable selection on client
                  Ilya Shaikovsky Master

                  See the richfaces-demo object methods.. actually in case of simple bean it's enough just to generate them using eclipse code generation methods

                  • 7. extendedDataTable selection on client
                    Alex Ormond Newbie

                    Ilya, thank you for your suggestion.  I understand what you suggested and why, and I'll start implementing it soon.  In the meantime I have gotten a verion of my CRUD "system" working.  I have written a description of what I did, in which you'll find some good things and some bad.  The description is rather long (50 lines or so).  Should I post it here or not?  The system works, but it was a pain to write.  I hope the next version is easier, or, if not, you can take suggestions from it to write a simpler to use set of components.

                     

                    Cheers,

                    Alex Ormond

                    • 8. extendedDataTable selection on client
                      Ilya Shaikovsky Master
                      I have written a description of what I did, in which you'll find some good things and some bad. The description is rather long (50 lines or so).  Should I post it here or not?

                      any feedback are really highly valuable for us! So please feel free to post there about your successes and problems. We reviewing all such comments continously in order to make progress in the directions you guys need at most.

                      • 10. extendedDataTable selection on client
                        Alex Ormond Newbie

                        1) A summary of how my CRUD system works from a user’ point of view (Use Case) is:

                            a) Logging in successfully adds a “Somethings” menu item.

                            b) Clicking on the Somethings menu item brings up a page with a list of Somethings.  This page has Add, View, Edit, Delete, and Done buttons.  If no row is selected, then only the Add and Done buttons are active.  If a row is selected then the View, Edit, Delete, and Done buttons are active, meaning you can view, edit, or delete the selected item.

                            c) Clicking the Add button brings up a page on which you can fill out a form for a Something and save it.

                            d) Clicking the View button brings up the same page with the selected item displayed.  You can only view the item, you can’t edit it.

                            e) Clicking the Edit button brings up the same page, but now you can edit and save the selected item.

                            f) Clicking the Delete button pops up a confirmation window.  If you choose “yes” then the item is deleted and the list updated.

                            g) Double-clicking a row will have the same result as selecting a row then clicking the Edit button.

                         

                        2) A summary of the way my CRUD system is built follows::

                            a) There are two web pages involved;  somethingList.xhtml and something.xhtml.  These pages are based on a Facelet template: template.xhtml.

                            b) Each of these two pages has a backing bean (handler): somethingListHandler.java and something.java.  The somethingListHandler is in the session scope.  The somethingHandler is in the request scope.

                            c) The somethingList.xhtml page also has a “page specific” JavaScript file:  somethingList.js.  The Facelet template on which the page is based loads the appropriate JavaScript file.

                            d) The somethingList.xhml page contains an extendedDataTable with the following attributes:

                                selectionMode = “single”

                                selection=”$(somethingListHandler.selection}”

                                onrowclick=”toggleRow(this, ‘listSelectedRow’, ‘listOddRow’);”

                                onrowdblclick=”editSomething();”

                            It also includes an ajax call:

                                <a4j:ajax execute="@form" event="selectionchange"

                                    listener="#{somethingListHandler.selectionListener}" />

                            The buttons on the page are only activated if the user is logged in, which it knows by referencing a method on the backing bean, securitySession.inRole(‘user’)

                            It also include a hidden input tag named “selectedRow” in which the selected row is recorded.

                            e) When a row is selected the buttons to View, Edit or Delete the selected row are activated.  This happens as follows::

                            The js function registered to be called when a row is clicked, toggleRow() is passed the row clicked on.  It is also passed the css classes for selected and non-selected rows.  The toggleRow() function toggles the selected state of the row clicked on.  It records the index of the selected row, if any, in the hidden input field, selectedRow.  It then activates the appropriate buttons depending on whether the row has been toggled on or off.

                            f) Each time the selection in somethingList.xhtml page changes the registered a4j:ajax method, somethingListHandler.selectionListener. is called to save the selection in the somethingListHandler in the session on the server.

                            g) Each of the Add, View, Edit, or Delete buttons, when clicked, calls a method on the page handler (backing bean).  The Add, View and Edit methods record the corresponding CRUD function in the handler, then allow navigation to the something.xhtml page.  The Delete button pops up a confirmation dialog box, which then calls a method on somethingListhandler to delete the Something.

                            h) The something.xhtml page is backed by its handler, somethingHandler.java, which is in the request scope.  Its constructor reads the current CRUD function from the somethingListHandler in the session scope.  If the CRUD function is “add” then it creates a new Something object in itself.  If the CRUD function is “view” or “edit” then it gets the Something from the selection saved in the selectionListHandler.  When the page is displayed it thus has the proper Something in it.

                            i) So, to sum it up,

                                My javascript functions handle determining whether a row is selected and based on this activate the proper buttons.  To do this the functions store the selected row index on the client.

                            Each time the user changes the selection an ajax function is called which stores the selection on the server.

                        • 11. extendedDataTable selection on client
                          Alex Ormond Newbie

                          As Ilya suggested, this is not the correct way to do it since what's on the client and what's on the server are partially out of sync, and because the JavaScript was a pain to write.  I'm working on another version now.

                           

                          Alex

                          • 12. extendedDataTable selection on client
                            Alex Ormond Newbie

                            I have reimplemented the above using Ilya's suggestion.  Much of the new implementation is the same as that above.  The key difference is that I used the selectionListener registered with the extendedDataTable to activate the Add, View, Edit, and Delete buttons depending on whether or not something was selected, and I got rid of most of the javascript.  This worked well and was a whole lot easier than using Javascript to accomplish the same thing.

                             

                            If you want a full description of the new system let me know.  The Use Case described above hasn't changed.

                             

                            The only thing I don't like about this is that when a user clicks on a row in the extendedDataTable the row is selected.  If he clicks it again it should be unselected, but it's not.  I could address this in code but shouldn't this be a feature to the extendedDataTable?