ICEfaces
  1. ICEfaces
  2. ICE-5357

Keyboard support: add keyboard support to rowSelector component

    Details

    • Type: New Feature New Feature
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 1.8.2, 1.8.2-EE-Beta
    • Fix Version/s: 1.8.2-EE-GA_P01, 1.8.3
    • Component/s: ICE-Components
    • Labels:
      None
    • Environment:
      Keyboard support + rowSelector
    • Affects:
      Documentation (User Guide, Ref. Guide, etc.), Sample App./Tutorial

      Description

      Keyboard support: add keyboard support to rowSelector component.

      When a dataTable with a rowSelector has focus, the following keys will function:


      Default (multiple=false, enhancedMultiple=false):

      Down/Up arrows - Will move the selected row to the next/prev row in the table (changes row selection status).


      Multiple=true:

      - Down/Up arrows - Will move the row selector highlight bar to the next/prev row in the table, similar to hovering over the row with the mouse currently (does not change row selection status).
      - Spacebar - toggle the selected state of the currently highlighted dataTable row, DOES NOT deselect any previously selected rows.

      enhancedMultiple=true:

      - Down/Up arrows - Will move the row selector highlight bar to the next/prev row in the table, similar to hovering over the row with the mouse currently (does not change row selection status).
      - Spacebar - toggle the selected state of the currently highlighted row, deselects any previously selected rows.
      - Ctrl+Spacebar - toggle the selected state of the currently highlighted row, DOES NOT deselect any previously selected rows.
      - Shift+Spacebar - Selects a contiguous range of all rows from last selected row to the currently highlighted row, deselects any previously selected rows outside of this range.
      - Ctrl+Shift+Spacebar - Selects a contiguous range of all rows from last selected row to the currently highlighted row, DOES NOT deselect any previously selected rows.

      In all cases, setting "keyboardNavigationEnabled=false" will disable the keyboard navigation on the component.

        Issue Links

          Activity

          Hide
          Adnan Durrani added a comment -

          Up and down arrow key support added to navigate between rows and space bar support added to select the row. The Enter key also can be used to select a row.

          Modified: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\bridge\lib\extras\extras.js
          Modified: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\ext\RowSelector.java
          Modified: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\ext\renderkit\TableRenderer.java
          Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\bridge\lib\extras\extras.js
          Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\ext\renderkit\TableRenderer.java
          Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\ext\RowSelector.java
          Completed: At revision: 20508

          Show
          Adnan Durrani added a comment - Up and down arrow key support added to navigate between rows and space bar support added to select the row. The Enter key also can be used to select a row. Modified: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\bridge\lib\extras\extras.js Modified: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\ext\RowSelector.java Modified: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\ext\renderkit\TableRenderer.java Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\bridge\lib\extras\extras.js Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\ext\renderkit\TableRenderer.java Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\ext\RowSelector.java Completed: At revision: 20508
          Hide
          Adnan Durrani added a comment -

          EE branch.
          Modified: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\bridge\lib\extras\extras.js
          Modified: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component\src\com\icesoft\faces\component\ext\RowSelector.java
          Modified: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component\src\com\icesoft\faces\component\ext\renderkit\TableRenderer.java
          Sending content: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\bridge\lib\extras\extras.js
          Sending content: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component\src\com\icesoft\faces\component\ext\renderkit\TableRenderer.java
          Sending content: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component\src\com\icesoft\faces\component\ext\RowSelector.java
          Completed: At revision: 20509

          Show
          Adnan Durrani added a comment - EE branch. Modified: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\bridge\lib\extras\extras.js Modified: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component\src\com\icesoft\faces\component\ext\RowSelector.java Modified: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component\src\com\icesoft\faces\component\ext\renderkit\TableRenderer.java Sending content: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\bridge\lib\extras\extras.js Sending content: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component\src\com\icesoft\faces\component\ext\renderkit\TableRenderer.java Sending content: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component\src\com\icesoft\faces\component\ext\RowSelector.java Completed: At revision: 20509
          Hide
          Krashan Brahmanjara added a comment - - edited

          Thanks. It resolve also ICE-1694

          Some quick clicks on datatable rows generate this error on one of new lines of code.

          Stacktrace :java.lang.RuntimeException: wrapped Exception: java.lang.NullPointerException
          at com.icesoft.faces.webapp.http.servlet.MainServlet.service(MainServlet.java:176)
          at javax.servlet.http.HttpServlet.service(HttpServlet.java:717)
          at com.icesoft.faces.webapp.xmlhttp.BlockingServlet.service(BlockingServlet.java:56)
          at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:290)
          at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206)
          at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:233)
          at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:191)
          at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:433)
          at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:128)
          at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:102)
          at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:109)
          at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:293)
          at org.apache.coyote.http11.Http11Processor.process(Http11Processor.java:849)
          at org.apache.coyote.http11.Http11Protocol$Http11ConnectionHandler.process(Http11Protocol.java:583)
          at org.apache.tomcat.util.net.JIoEndpoint$Worker.run(JIoEndpoint.java:454)
          at java.lang.Thread.run(Thread.java:619)
          Caused by: java.lang.NullPointerException
          at javax.faces.component.UIComponentBase$AttributesMap.put(UIComponentBase.java:1656)
          at javax.faces.component.UIComponentBase$AttributesMap.put(UIComponentBase.java:1526)
          at com.icesoft.faces.component.ext.RowSelector.processDecodes(RowSelector.java:342)
          at com.icesoft.faces.component.ext.HtmlDataTable.processKids(HtmlDataTable.java:331)
          at com.icesoft.faces.component.ext.HtmlDataTable.iterate(HtmlDataTable.java:286)
          at com.icesoft.faces.component.panelseries.UISeries.processDecodes(UISeries.java:316)

          Show
          Krashan Brahmanjara added a comment - - edited Thanks. It resolve also ICE-1694 Some quick clicks on datatable rows generate this error on one of new lines of code. Stacktrace :java.lang.RuntimeException: wrapped Exception: java.lang.NullPointerException at com.icesoft.faces.webapp.http.servlet.MainServlet.service(MainServlet.java:176) at javax.servlet.http.HttpServlet.service(HttpServlet.java:717) at com.icesoft.faces.webapp.xmlhttp.BlockingServlet.service(BlockingServlet.java:56) at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:290) at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206) at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:233) at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:191) at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:433) at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:128) at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:102) at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:109) at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:293) at org.apache.coyote.http11.Http11Processor.process(Http11Processor.java:849) at org.apache.coyote.http11.Http11Protocol$Http11ConnectionHandler.process(Http11Protocol.java:583) at org.apache.tomcat.util.net.JIoEndpoint$Worker.run(JIoEndpoint.java:454) at java.lang.Thread.run(Thread.java:619) Caused by: java.lang.NullPointerException at javax.faces.component.UIComponentBase$AttributesMap.put(UIComponentBase.java:1656) at javax.faces.component.UIComponentBase$AttributesMap.put(UIComponentBase.java:1526) at com.icesoft.faces.component.ext.RowSelector.processDecodes(RowSelector.java:342) at com.icesoft.faces.component.ext.HtmlDataTable.processKids(HtmlDataTable.java:331) at com.icesoft.faces.component.ext.HtmlDataTable.iterate(HtmlDataTable.java:286) at com.icesoft.faces.component.panelseries.UISeries.processDecodes(UISeries.java:316)
          Hide
          Adnan Durrani added a comment - - edited

          Request Change: Pressing the up and down arrow automatically selects the next row without the need to press the space bar in single selection mode.

          Modified: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\bridge\lib\extras\extras.js
          Modified: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\ext\renderkit\TableRenderer.java
          Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\bridge\lib\extras\extras.js
          Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\ext\renderkit\TableRenderer.java
          Completed: At revision: 20647

          Show
          Adnan Durrani added a comment - - edited Request Change: Pressing the up and down arrow automatically selects the next row without the need to press the space bar in single selection mode. Modified: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\bridge\lib\extras\extras.js Modified: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\ext\renderkit\TableRenderer.java Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\bridge\lib\extras\extras.js Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\ext\renderkit\TableRenderer.java Completed: At revision: 20647
          Hide
          Adnan Durrani added a comment -

          Modified: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\bridge\lib\extras\extras.js
          Modified: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component\src\com\icesoft\faces\component\ext\renderkit\TableRenderer.java
          Sending content: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\bridge\lib\extras\extras.js
          Sending content: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component\src\com\icesoft\faces\component\ext\renderkit\TableRenderer.java
          Completed: At revision: 20648

          Show
          Adnan Durrani added a comment - Modified: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\bridge\lib\extras\extras.js Modified: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component\src\com\icesoft\faces\component\ext\renderkit\TableRenderer.java Sending content: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\bridge\lib\extras\extras.js Sending content: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component\src\com\icesoft\faces\component\ext\renderkit\TableRenderer.java Completed: At revision: 20648
          Hide
          Krashan Brahmanjara added a comment -

          Patch for above NPE

          RowSelector.java

          Row 341

          //install selected row on the dataTable, helps in sending focus request when row was selected.
          > if (selectedRows!=null)
          dataTable.getAttributes().put(SELECTED_ROW, selectedRows);

          BTW
          Key Up/Down doesn't works in scrollable table

          Show
          Krashan Brahmanjara added a comment - Patch for above NPE RowSelector.java Row 341 //install selected row on the dataTable, helps in sending focus request when row was selected. > if (selectedRows!=null) dataTable.getAttributes().put(SELECTED_ROW, selectedRows); BTW Key Up/Down doesn't works in scrollable table
          Hide
          Adnan Durrani added a comment -

          Thanks Krashan, I'll apply this patch and look into the scrollable table.

          Show
          Adnan Durrani added a comment - Thanks Krashan, I'll apply this patch and look into the scrollable table.
          Hide
          Adnan Durrani added a comment -

          Null check added.
          Modified: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\ext\RowSelector.java
          Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\ext\RowSelector.java
          Completed: At revision: 20676

          Modified: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component\src\com\icesoft\faces\component\ext\RowSelector.java
          Sending content: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component\src\com\icesoft\faces\component\ext\RowSelector.java
          Completed: At revision: 20677

          Show
          Adnan Durrani added a comment - Null check added. Modified: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\ext\RowSelector.java Sending content: D:\work\development\head\svn\ossrepo\icefaces\trunk\icefaces\component\src\com\icesoft\faces\component\ext\RowSelector.java Completed: At revision: 20676 Modified: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component\src\com\icesoft\faces\component\ext\RowSelector.java Sending content: D:\work\development\head\svn\ossrepo\icefaces-ee\branches\icefaces-ee-1.8.2\icefaces\component\src\com\icesoft\faces\component\ext\RowSelector.java Completed: At revision: 20677
          Hide
          Joanne Bai added a comment -

          Tested on 1.8.2-ee revision #20705 with Tomcat 6 using showcase jsp and facelets

          Test results:

          a) single mode:

          • tested successfully using FF3.5
          • In IE8, up/down arrow can only move one row above or below, then back to the row it was

          b) multiple mode: Tested with success on both FF3.5 and IE8

          c) enhanced multiple:

          • multiple rows can be selected without problem, but every time when the Enter key is hit to make a selection, a new page will be opened at the same time. It happens to both IE8 and FF3.5

          Testing steps:

          • in Row Selection demo, check one of the radio boxes to select single/multiple/enhanced mode
          • use Tab key to get to the data table rows, then try the up/down arrow keys
          • in single mode, one row will be selected right away while the up/down arrow key going through it
          • in multiple/enhanced mode, Enter key is needed to help with the selection

          Adnan, let me know if I need reopen the case and re-assign it back to you. Thanks.

          Show
          Joanne Bai added a comment - Tested on 1.8.2-ee revision #20705 with Tomcat 6 using showcase jsp and facelets Test results: a) single mode: tested successfully using FF3.5 In IE8, up/down arrow can only move one row above or below, then back to the row it was b) multiple mode: Tested with success on both FF3.5 and IE8 c) enhanced multiple: multiple rows can be selected without problem, but every time when the Enter key is hit to make a selection, a new page will be opened at the same time. It happens to both IE8 and FF3.5 Testing steps: in Row Selection demo, check one of the radio boxes to select single/multiple/enhanced mode use Tab key to get to the data table rows, then try the up/down arrow keys in single mode, one row will be selected right away while the up/down arrow key going through it in multiple/enhanced mode, Enter key is needed to help with the selection Adnan, let me know if I need reopen the case and re-assign it back to you. Thanks.
          Hide
          Adnan Durrani added a comment - - edited

          a) single mode:

          • In IE8, up/down arrow can only move one row above or below, then back to the row it was

          It fixed under the following JIRA:
          http://jira.icefaces.org/browse/ICE-5415

          c) enhanced multiple:

          • multiple rows can be selected without problem, but every time when the Enter key is hit to make a selection, a new page will be opened at the same time. It happens to both IE8 and FF3.5

          We did not added the enter key support to selecting a row, it comes with the browser. The valid test would be to test with shift + space. The shift and enter is browser chortcut to open a link in a new window.

          Show
          Adnan Durrani added a comment - - edited a) single mode: In IE8, up/down arrow can only move one row above or below, then back to the row it was It fixed under the following JIRA: http://jira.icefaces.org/browse/ICE-5415 c) enhanced multiple: multiple rows can be selected without problem, but every time when the Enter key is hit to make a selection, a new page will be opened at the same time. It happens to both IE8 and FF3.5 We did not added the enter key support to selecting a row, it comes with the browser. The valid test would be to test with shift + space. The shift and enter is browser chortcut to open a link in a new window.
          Hide
          Joanne Bai added a comment -

          Adnan, thanks so much for the clarification. Re-tested on ICEfaces-1.8.2-ee revision 20744 using FF8 and FF3.5

          a) single/multiple mode: works perfectly on both FF3.5 and IE8
          b) enhanced multiple: Shift + space does not always work (happens to IE8 and FF3.5)

          Show
          Joanne Bai added a comment - Adnan, thanks so much for the clarification. Re-tested on ICEfaces-1.8.2-ee revision 20744 using FF8 and FF3.5 a) single/multiple mode: works perfectly on both FF3.5 and IE8 b) enhanced multiple: Shift + space does not always work (happens to IE8 and FF3.5)
          Hide
          Krashan Brahmanjara added a comment -

          Thera are small backward incompability.
          If datable cell contain very long text then in IE6 anchor from rowselector wraps cell content (looks like new empty line before text)

          Workaround - around line761
          < anchor.appendChild(domContext.createTextNode("<img src='"+ CoreUtils.resolveResourceURL(facesContext,
          "/xmlhttp/css/xp/css-images/spacer.gif") + "' />"));
          fix
          > anchor.appendChild(domContext.createTextNode("<img style='width:0' src='"+ CoreUtils.resolveResourceURL(facesContext,
          "/xmlhttp/css/xp/css-images/spacer.gif") + "' />"));

          Show
          Krashan Brahmanjara added a comment - Thera are small backward incompability. If datable cell contain very long text then in IE6 anchor from rowselector wraps cell content (looks like new empty line before text) Workaround - around line761 < anchor.appendChild(domContext.createTextNode("<img src='"+ CoreUtils.resolveResourceURL(facesContext, "/xmlhttp/css/xp/css-images/spacer.gif") + "' />")); fix > anchor.appendChild(domContext.createTextNode("<img style='width:0' src='"+ CoreUtils.resolveResourceURL(facesContext, "/xmlhttp/css/xp/css-images/spacer.gif") + "' />"));
          Hide
          Krashan Brahmanjara added a comment - - edited

          In attachment image with width bug from IE6

          Show
          Krashan Brahmanjara added a comment - - edited In attachment image with width bug from IE6
          Hide
          Adnan Durrani added a comment - - edited

          Thanks Krashan, the fix has been added to relvant style class.

          Trunk = Completed: At revision: 20815
          EE = Completed: At revision: 20816

          Show
          Adnan Durrani added a comment - - edited Thanks Krashan, the fix has been added to relvant style class. Trunk = Completed: At revision: 20815 EE = Completed: At revision: 20816
          Hide
          Joanne Bai added a comment -

          Row selector regression failures found on CEfaces-1.8.2-ee revision: 20826

          • ICE-4288: rowSelector, 'clickListener' and 'clickAction' attributes are ignored when using facelets
          • ICE-1445: Check the Immediate box, row selection does not work at all
          Show
          Joanne Bai added a comment - Row selector regression failures found on CEfaces-1.8.2-ee revision: 20826 ICE-4288 : rowSelector, 'clickListener' and 'clickAction' attributes are ignored when using facelets ICE-1445 : Check the Immediate box, row selection does not work at all
          Hide
          Adnan Durrani added a comment -

          ICE-5460 fixes them.

          Show
          Adnan Durrani added a comment - ICE-5460 fixes them.
          Hide
          Joanne Bai added a comment -

          ICE-4288 and ICE-1445 have been verified successfully with the new fix (ICEfaces-ee-1.8.2 revision 20843)
          Tested on Tomcat 5 + FF3.5 and IE8.

          Thanks, Adnan. Close it!

          Show
          Joanne Bai added a comment - ICE-4288 and ICE-1445 have been verified successfully with the new fix (ICEfaces-ee-1.8.2 revision 20843) Tested on Tomcat 5 + FF3.5 and IE8. Thanks, Adnan. Close it!
          Hide
          Jano Hlodavec added a comment -

          regression of
          "ICE-4288: rowSelector, 'clickListener' and 'clickAction' attributes are ignored when using facelets"
          is still present in 1.8.3 version, ICE-5460 fixes them only in EE version, plz commit fix to 1.8.3 version to be row selector navigation usable again
          Thanks

          Show
          Jano Hlodavec added a comment - regression of " ICE-4288 : rowSelector, 'clickListener' and 'clickAction' attributes are ignored when using facelets" is still present in 1.8.3 version, ICE-5460 fixes them only in EE version, plz commit fix to 1.8.3 version to be row selector navigation usable again Thanks

            People

            • Assignee:
              Adnan Durrani
              Reporter:
              Adnan Durrani
            • Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: