Details

    • Type: New Feature New Feature
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: 3.3
    • Component/s: ACE-Components
    • Labels:
      None
    • Environment:
      Sparkle
    • Assignee Priority:
      P1
    • Affects:
      Documentation (User Guide, Ref. Guide, etc.), Sample App./Tutorial

      Description

      Create a completely new ACE component to provide a rich, cross-browser selectMenu component.

      The high-level initial requirements for selection component are:

      - Must support common selection component functionality:
          - Select one item from a popup list of options
      - Must NOT use the native browser input elements to render the selection list itself. This is to avoid platform/browser specific quirks and differences in behavior with these elements.
      - Each selection list item may be either a simple String label/value pair, or a facet (with arbitrary complexity, nested components, etc.)/value pair.
      - Must be fully stylable using CSS, including each selection row item.
      - Individual selection row items maybe disabled or enabled. When disabled they adopt a disable style appearance and cannot be selected, although they still appear in the list.
      - Must support keyboard navigation: Arrow keys to move up/down the list, Enter to select the current item.
      - Must support mouse navigation: highlight list item as hovered over (same as moving up.dwn the list), click to select an item.
      - Styling must differentiate between a "highlighted/focussed" row and a selected row (similar to current ice:rowSelector behavior).
      - Ability to size the component either automatically (component will size itself large enough to render it's selection rows), or via CSS width/height. Size attribute may be used on the component if necessary.
      - The look and feel of this component must be consistent regardless of the browser it is rendered on.
      - Should support extreme lazyInit/proactive cleanup of JavaScript listeners and objects for enhanced scalability (in large dataTables, for example).

        Activity

        Hide
        Ken Fyten added a comment - - edited

        Might also need a simpleSelectOneMenu that uses the native browser widget like h:selectOneMenu, but works correctly with ICEfaces.

        Another JIRA exists to also enhance ace:list to align its features when used as a "selectOneManyList" with those described in this JIRA (ICE-8934).

        Show
        Ken Fyten added a comment - - edited Might also need a simpleSelectOneMenu that uses the native browser widget like h:selectOneMenu, but works correctly with ICEfaces. Another JIRA exists to also enhance ace:list to align its features when used as a "selectOneManyList" with those described in this JIRA ( ICE-8934 ).
        Hide
        Arturo Zambrano added a comment -

        The ace:selectMenu is complete as of revision 33506.

        One of the challenges in developing this component was having to use a text input element in order to use the ace:autoCompleteEntry code as the base for this component. Since, this is not a text entry component, it didn't make much sense to have a text input element. So, several approaches were tried to try to conceal the look of a text input field while still being able to use a text input element in order to be able to focus and blur the field and to be able to listen to several keypress events while the field has focus. Different techniques were tried to hide the text caret from the text input that made the component look like a text entry component. Most of them didn't work. There was one technique, consisting in hiding the text input element from the view, did work, but it was very elaborate. Eventually, it was found that it was possible to use a focusable span element and still be able to register all the keypress listeners on it that are necessary for this component to work.

        Another challenge was to make the component work on IE browsers. Because of some fundamental differences in the event mechanism in IE, as opposed to other browsers, like the event bubbling order and focus policies, it was necessary to add substantial amounts of code in different places to handle the actions on IE browsers in a more specific way for those browsers.

        Some of the most important features that this component supports are the following:

        • Behaviour and looks resembiling an HTML <select> element.
        • Usage of distinct selected and highlighted classes.
        • Mechanism to preselect and to maintain the value across requests, as well as to support programmatic value changes.
        • Support for using the Home, End, PageUp, and PageDown keys when navigating the different options.
        • Support for selecting an option that starts with the character just typed while the component had focus.
        • Automatic scroll to the most recent highlighted option, if it wasn't visible.
        • Themeroller support.
        • ace:ajax blur and valueChange events.
        • Support for disabled items.
        • ARIA support.
        • Label and indicator positioning.
        • Ability to set specific width and height to the list and value field
        • Full support for styling every part of the component.
        Show
        Arturo Zambrano added a comment - The ace:selectMenu is complete as of revision 33506. One of the challenges in developing this component was having to use a text input element in order to use the ace:autoCompleteEntry code as the base for this component. Since, this is not a text entry component, it didn't make much sense to have a text input element. So, several approaches were tried to try to conceal the look of a text input field while still being able to use a text input element in order to be able to focus and blur the field and to be able to listen to several keypress events while the field has focus. Different techniques were tried to hide the text caret from the text input that made the component look like a text entry component. Most of them didn't work. There was one technique, consisting in hiding the text input element from the view, did work, but it was very elaborate. Eventually, it was found that it was possible to use a focusable span element and still be able to register all the keypress listeners on it that are necessary for this component to work. Another challenge was to make the component work on IE browsers. Because of some fundamental differences in the event mechanism in IE, as opposed to other browsers, like the event bubbling order and focus policies, it was necessary to add substantial amounts of code in different places to handle the actions on IE browsers in a more specific way for those browsers. Some of the most important features that this component supports are the following: Behaviour and looks resembiling an HTML <select> element. Usage of distinct selected and highlighted classes. Mechanism to preselect and to maintain the value across requests, as well as to support programmatic value changes. Support for using the Home, End, PageUp, and PageDown keys when navigating the different options. Support for selecting an option that starts with the character just typed while the component had focus. Automatic scroll to the most recent highlighted option, if it wasn't visible. Themeroller support. ace:ajax blur and valueChange events. Support for disabled items. ARIA support. Label and indicator positioning. Ability to set specific width and height to the list and value field Full support for styling every part of the component.
        Hide
        Arturo Zambrano added a comment -

        Another challenge had to do with the validation mechanism. Since this component extended from UISelectOne, the validation mechanism in this parent class verifies that the submitted value is exactly one of the options specified in the SelectItem children of the component. Since ace:selectMenu also supports rendering via a facet, which doesn't use instances of SelectItem, whenever the input is submitted it fails validation because the validation mechanism cannot match the submitted value to any SelectItem options, because there aren't any of them. Thus, the component had to be changed to extend from UIInput instead and implement its own validation mechanism that works for both cases: SelectItem's and facet rendering. It wasn't possible to keep UISelectOne as the parent and use the parent validation and then do some custom validation in this component, since the parent was already adding an error message, which is impossible to remove after the fact.

        Committed changes at revision 33562.

        Show
        Arturo Zambrano added a comment - Another challenge had to do with the validation mechanism. Since this component extended from UISelectOne, the validation mechanism in this parent class verifies that the submitted value is exactly one of the options specified in the SelectItem children of the component. Since ace:selectMenu also supports rendering via a facet, which doesn't use instances of SelectItem, whenever the input is submitted it fails validation because the validation mechanism cannot match the submitted value to any SelectItem options, because there aren't any of them. Thus, the component had to be changed to extend from UIInput instead and implement its own validation mechanism that works for both cases: SelectItem's and facet rendering. It wasn't possible to keep UISelectOne as the parent and use the parent validation and then do some custom validation in this component, since the parent was already adding an error message, which is impossible to remove after the fact. Committed changes at revision 33562.
        Hide
        Arturo Zambrano added a comment -

        Another situation that was identified was that there was no distinction between the item label and the item value of the options. Since, most of the code for this component was based on existing code for ace:autoCompleteEntry, which is a text entry component, there was no distinction between value and label (i.e. WYSIWYG). However, ace:selectMenu is a selection component, and the internal value in the application might not be exactly as it is presented to the user. So, it was necessary to make this distinction in the code and establish these conventions:

        • When an option is selected, display the label in the field at the top, and put the value of the option in the hidden input for submitting to the server.
        • In the case of facet rendering, collect all the text nodes of the item and use that as a label to display in the field at the top. Allow the app developer to specify what text should be ignored from the entry by adding the 'ui-select-item-ignore' CSS class to the component or ancestor tag whose contents should be ignored when determining the label.

        Committed changes at revision 33584.

        Show
        Arturo Zambrano added a comment - Another situation that was identified was that there was no distinction between the item label and the item value of the options. Since, most of the code for this component was based on existing code for ace:autoCompleteEntry, which is a text entry component, there was no distinction between value and label (i.e. WYSIWYG). However, ace:selectMenu is a selection component, and the internal value in the application might not be exactly as it is presented to the user. So, it was necessary to make this distinction in the code and establish these conventions: When an option is selected, display the label in the field at the top, and put the value of the option in the hidden input for submitting to the server. In the case of facet rendering, collect all the text nodes of the item and use that as a label to display in the field at the top. Allow the app developer to specify what text should be ignored from the entry by adding the 'ui-select-item-ignore' CSS class to the component or ancestor tag whose contents should be ignored when determining the label. Committed changes at revision 33584.
        Hide
        Ken Fyten added a comment -

        One other issue I noted is that on Chrome at least, in showcase, the first time you select a Province and the submit returns with the City component it causes the Province drop down to appear again.

        Show
        Ken Fyten added a comment - One other issue I noted is that on Chrome at least, in showcase, the first time you select a Province and the submit returns with the City component it causes the Province drop down to appear again.
        Hide
        Arturo Zambrano added a comment -

        Added missing attributes at revision 33927. Added label, indicator, and required styling demos at revision. 33936.

        Show
        Arturo Zambrano added a comment - Added missing attributes at revision 33927. Added label, indicator, and required styling demos at revision. 33936.
        Hide
        Arturo Zambrano added a comment - - edited

        Closing issue.

        • Fixed issue with keyboard acceleration making browser crash in facet rendering mode.
        • Fixed issue with list reappearing after selecting a value.
        • Made the left border of the down arrow button not rounded.
        • Made component use ui-inputfield styling.
        Show
        Arturo Zambrano added a comment - - edited Closing issue. Fixed issue with keyboard acceleration making browser crash in facet rendering mode. Fixed issue with list reappearing after selecting a value. Made the left border of the down arrow button not rounded. Made component use ui-inputfield styling.

          People

          • Assignee:
            Arturo Zambrano
            Reporter:
            Ken Fyten
          • Votes:
            1 Vote for this issue
            Watchers:
            3 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: