ICEfaces
  1. ICEfaces
  2. ICE-9483

New icecore:focusManager component

    Details

    • Type: New Feature New Feature
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: 4.0.BETA, EE-3.3.0.GA_P02, 4.0
    • Component/s: Framework
    • Labels:
      None
    • Environment:
      ICEfaces 3.x
    • Assignee Priority:
      P2
    • Affects:
      Documentation (User Guide, Ref. Guide, etc.), Sample App./Tutorial

      Description

      Add a new ice core:focusManager component that would provide the following automatic focus setting features when it is included inside a form component:

      - The first visible (enabled) input element in the form has focus set on it initially.
      - Alternatively, if there is an invalid component in the form (failed validation), the first visible (enabled) invalid component will receive focus instead.
      - The application also specify a component to have focus set on it via the "for" attribute.

        Activity

        Hide
        Mircea Toma added a comment -

        Implemented icecore:focusManager component. The component behaves as described in the requirements, above. The for attribute can be used to point to the component that will receive focus when the page is loaded. If not specified the focus will be set on the first component or in case one or more enclosed components are invalid the focus will be set on the first invalid component.
        By default icecore:focusManager will set the focus on the element corresponding to the root of the markup rendered by the component.
        For components that are more complex a new interface was introduced that used to specify which element rendered by the component should receive focus. See org.icefaces.component.Focusable javadoc.

        Show
        Mircea Toma added a comment - Implemented icecore:focusManager component. The component behaves as described in the requirements, above. The for attribute can be used to point to the component that will receive focus when the page is loaded. If not specified the focus will be set on the first component or in case one or more enclosed components are invalid the focus will be set on the first invalid component. By default icecore:focusManager will set the focus on the element corresponding to the root of the markup rendered by the component. For components that are more complex a new interface was introduced that used to specify which element rendered by the component should receive focus. See org.icefaces.component.Focusable javadoc.
        Hide
        Mircea Toma added a comment -

        Added test application in samples/core/test/focus-manager folder.

        Show
        Mircea Toma added a comment - Added test application in samples/core/test/focus-manager folder.
        Hide
        Mircea Toma added a comment - - edited

        Modified autoCompleteEntry, checkboxButton, maskedEntry, radioButton, textEntry and textAreaEntry to implement Focusable interface so that the focus manager will focus the correct rendered element. The select components that inherit from UIInput are not suitable to implement Focusable because they would expand their drop-down when focused. Also, richInputText has its textarea rendered into a frame so it is not really possible for the focus manger to focus it.

        Show
        Mircea Toma added a comment - - edited Modified autoCompleteEntry , checkboxButton , maskedEntry , radioButton , textEntry and textAreaEntry to implement Focusable interface so that the focus manager will focus the correct rendered element. The select components that inherit from UIInput are not suitable to implement Focusable because they would expand their drop-down when focused. Also, richInputText has its textarea rendered into a frame so it is not really possible for the focus manger to focus it.
        Hide
        Ken Fyten added a comment -

        The select components that inherit from UIInput are not suitable to implement Focusable because they would expand their drop-down when focused.

        Let's go ahead and implement this for the UIInput descendants as well for consistency.

        Also, the list of components supporting this should include all the ace:*Entry components, such as ace:sliderEntry.

        Show
        Ken Fyten added a comment - The select components that inherit from UIInput are not suitable to implement Focusable because they would expand their drop-down when focused. Let's go ahead and implement this for the UIInput descendants as well for consistency. Also, the list of components supporting this should include all the ace:*Entry components, such as ace:sliderEntry.
        Hide
        Mircea Toma added a comment -

        Modified focus manager to handle any Focusable component, regardless if it extends UIInput or not. Modified ace:comboBox, ace:dateTimeEntry (popup mode), ace:fileEntry, ace:selectMenu and ace:simpleSelectOne to have their focus managed.

        Show
        Mircea Toma added a comment - Modified focus manager to handle any Focusable component, regardless if it extends UIInput or not. Modified ace:comboBox, ace:dateTimeEntry (popup mode), ace:fileEntry, ace:selectMenu and ace:simpleSelectOne to have their focus managed.
        Hide
        Mircea Toma added a comment -

        ace:fileEntry does receive focus it's just Firefox who seem to not be able to focus input[file] elements. Chrome, for example, does work very well.

        Show
        Mircea Toma added a comment - ace:fileEntry does receive focus it's just Firefox who seem to not be able to focus input [file] elements. Chrome, for example, does work very well.
        Hide
        Cruz Miraback added a comment -

        Actually, it seems to be working in all browsers for me (FF24, Chrome30, IE10). My example previously had the fileEntry component wrapped in a panelGroup, and in this scenario it doesn't work in any browser.

        Show
        Cruz Miraback added a comment - Actually, it seems to be working in all browsers for me (FF24, Chrome30, IE10). My example previously had the fileEntry component wrapped in a panelGroup, and in this scenario it doesn't work in any browser.
        Hide
        Mircea Toma added a comment - - edited

        ace:fileEntry works fine for me too as long as the focus retention doesn't moves away the focus. For example in showcase the navigation links used for switching to the different use cases of a certain component will send the ice.focus parameter which will trigger the focus retention, the update that comes back will have focus code for the focus managed (by icecore:focusManager) component and also the focus retained navigation link. The navigation link code comes last in the update which causes the focus to remain on the navigaiton link.
        For showcase we could add an onclick handler on the navigation links to cancels the focus retention for them:

        ....
        ....
        <li style="padding-left: 15px;">
            <ui:param name="beanName" value="#{subMenuLink.exampleBeanName}.title"/>
            <h:commandLink id="subLink"
                           actionListener="#{navigationController.navigate}"
                           title="#{msgs[subMenuLink.title]}"
                           disabled="#{subMenuLink.disabled}"
                           class="#{(subMenuLink.exampleBeanName eq navigationModel.componentExample) ||
                                    (navigationModel.componentExample eq null and subMenuLink['default'])
                                    ? 'selected'
                                    : ''}" onclick="ice.setFocus();">
        
        
        Show
        Mircea Toma added a comment - - edited ace:fileEntry works fine for me too as long as the focus retention doesn't moves away the focus. For example in showcase the navigation links used for switching to the different use cases of a certain component will send the ice.focus parameter which will trigger the focus retention, the update that comes back will have focus code for the focus managed (by icecore:focusManager) component and also the focus retained navigation link. The navigation link code comes last in the update which causes the focus to remain on the navigaiton link. For showcase we could add an onclick handler on the navigation links to cancels the focus retention for them: .... .... <li style= "padding-left: 15px;" > <ui:param name= "beanName" value= "#{subMenuLink.exampleBeanName}.title" /> <h:commandLink id= "subLink" actionListener= "#{navigationController.navigate}" title= "#{msgs[subMenuLink.title]}" disabled= "#{subMenuLink.disabled}" class="#{(subMenuLink.exampleBeanName eq navigationModel.componentExample) || (navigationModel.componentExample eq null and subMenuLink[' default ']) ? 'selected' : ''} " onclick=" ice.setFocus();">
        Hide
        Mircea Toma added a comment -

        Use ice.applyFocus function instead of invoking Element.focus method directly. ice.applyFocus introduction was for overcoming the focus related quirks that some browsers have.

        Show
        Mircea Toma added a comment - Use ice.applyFocus function instead of invoking Element.focus method directly. ice.applyFocus introduction was for overcoming the focus related quirks that some browsers have.
        Hide
        Ken Fyten added a comment -

        Documentation note: The icecore:focusMgr features are not supported with the ACE components when used in the EE 3.3.0.GA_P02 release as the ACE components in EE 3.3 do not support the "focus sable" interface.

        Show
        Ken Fyten added a comment - Documentation note: The icecore:focusMgr features are not supported with the ACE components when used in the EE 3.3.0.GA_P02 release as the ACE components in EE 3.3 do not support the "focus sable" interface.

          People

          • Assignee:
            Mircea Toma
            Reporter:
            Ken Fyten
          • Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: