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

        Ken Fyten created issue -
        Ken Fyten made changes -
        Field Original Value New Value
        Salesforce Case []
        Fix Version/s 2.0 [ 10032 ]
        Assignee Priority P3
        Assignee Yip Ng [ yip.ng ]
        Ken Fyten made changes -
        Summary Create a new YUI-based Selection custom component Create a new Selection component
        Salesforce Case []
        Fix Version/s 2.0.0 [ 10230 ]
        Fix Version/s 2.0-Alpha3 [ 10032 ]
        Affects [Documentation (User Guide, Ref. Guide, etc.), Sample App./Tutorial]
        Assignee Priority P3
        Security Private [ 10001 ]
        Assignee Yip Ng [ yip.ng ]
        Ken Fyten made changes -
        Component/s ACE-Components [ 10050 ]
        Component/s Components [ 10012 ]
        Ken Fyten made changes -
        Fix Version/s 2.1 [ 10241 ]
        Fix Version/s 2.0.0 [ 10230 ]
        Ken Fyten made changes -
        Fix Version/s 3.1 [ 10312 ]
        Fix Version/s 3.0 [ 10241 ]
        Ken Fyten made changes -
        Summary Create a new Selection component New ace:selection component(s)
        Salesforce Case []
        Fix Version/s 3.2 [ 10338 ]
        Fix Version/s 3.1 [ 10312 ]
        Migration made changes -
        Fix Version/s 3.3 [ 10370 ]
        Fix Version/s 3.2 [ 10338 ]
        Ken Fyten made changes -
        Assignee Arturo Zambrano [ artzambrano ]
        Assignee Priority P1 [ 10010 ]
        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 ).
        Ken Fyten made changes -
        Summary New ace:selection component(s) New ace:selectMenu component
        Ken Fyten made changes -
        Description As part of the new ICEfaces 2.0 Component Suite development project ("Sparkle") we would like to create a completely new custom component that leverages the lower-level YUI utility functions to provide a rich, cross-browser component. The purpose of this exercise is to both create a useful new component for the ICEfaces 2.0 Component Suite (Sparkle), and to further evaluate YUI's suitability for creating all-new custom components (vs. leveraging existing YUI components).

        The high-level initial requirements for Selection component are:

        - Must support common selection component functionality:
            - Select one or more items from a displayed list of options (configurable)
            - 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.
        - Must leverage YUI utility functions where-ever possible.

        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 or more items from a displayed list of options (configurable)
            - 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).
        Ken Fyten made changes -
        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 or more items from a displayed list of options (configurable)
            - 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).
        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).
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #33377 Mon Feb 11 11:38:43 MST 2013 art.zambrano ICE-4724 new ace:selectMenu component, initial check-in
        Files Changed
        Commit graph ADD /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/selectmenu
        Commit graph ADD /icefaces3/trunk/icefaces/ace/component/resources/icefaces.ace/selectmenu/selectmenu.js
        Commit graph ADD /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/selectmenu/SelectMenuMeta.java
        Commit graph ADD /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/selectmenu/SelectMenu.java
        Commit graph ADD /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/selectmenu/SelectMenuRenderer.java
        Commit graph ADD /icefaces3/trunk/icefaces/ace/component/resources/icefaces.ace/selectmenu
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #33387 Mon Feb 11 18:10:07 MST 2013 art.zambrano ICE-4724 changed highlight class to ui-state-hover; added usage of distinct selected class and highlighted classes; added code to keep track of the currently-selected entry and to apply to the selected class to it whenever the list opens again; added onElementClick listener to open the list whenever the field is clicked; added logic to select items by pressing the arrow keys while the list is closed; allowed list to take as much width as necessary; fixed issue with moving down arrow icon when value was too long; added CSS class names to list container and to field container; removed some unnecessary code
        Files Changed
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/resources/icefaces.ace/selectmenu/selectmenu.js
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/selectmenu/SelectMenuRenderer.java
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #33406 Wed Feb 13 15:17:14 MST 2013 art.zambrano ICE-4724 added valueChange and blur ajax events; changed ajax behavior to only submit when there's an ajax tag; modified client side code so that blur event doesn't submit when clicking on an item on the list; made list disappear when you click on the value field or down arrow button again; highlighted down arrow button when list is displaying; removed borders from top, bottom and right of the down arrow button to avoid having double borders; added support for disabled items; added itemValue and itemDisabled attributes to use when rendering via a facet
        Files Changed
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/resources/icefaces.ace/selectmenu/selectmenu.js
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/selectmenu/SelectMenuMeta.java
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/selectmenu/SelectMenuRenderer.java
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #33415 Wed Feb 13 17:49:59 MST 2013 art.zambrano ICE-4724 added initial ace:selectMenu showcase demo
        Files Changed
        Commit graph ADD /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/selectmenu/selectMenuOverview.xhtml
        Commit graph ADD /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/java/org/icefaces/samples/showcase/example/ace/selectmenu
        Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/java/org/icefaces/samples/showcase/view/navigation/AceMenu.java
        Commit graph ADD /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/selectmenu
        Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/resources/org/icefaces/samples/showcase/view/resources/messages.properties
        Commit graph ADD /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/java/org/icefaces/samples/showcase/example/ace/selectmenu/SelectMenuBean.java
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #33418 Thu Feb 14 09:38:57 MST 2013 art.zambrano ICE-4724 added mechanism to preselect and to maintain the value across requests, as well as to support programmatic value changes
        Files Changed
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/resources/icefaces.ace/selectmenu/selectmenu.js
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/selectmenu/SelectMenuRenderer.java
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #33420 Thu Feb 14 09:41:59 MST 2013 art.zambrano ICE-4724 minor improvement in demo to make more sense
        Files Changed
        Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/java/org/icefaces/samples/showcase/example/ace/selectmenu/SelectMenuBean.java
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #33502 Mon Feb 18 18:29:59 MST 2013 art.zambrano ICE-4724 allowed possibility to pre-select the value; reset selected index when when value is changed programmatically; preserved old selected index value when reinitializing; allowed selecting a value by typing the first character; added usage of pg up, pg down, home and end to select an entry from the list; added function to scroll to marked entry; replaced spaces for non-breaking spaces in value field to prevent span from taking more space; removed rows attribute; set width for the list to the width of the value field; added correct width and height attribute handling; applied correctly style and styleClass attributes
        Files Changed
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/resources/icefaces.ace/selectmenu/selectmenu.js
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/selectmenu/SelectMenuMeta.java
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/selectmenu/SelectMenuRenderer.java
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #33506 Tue Feb 19 09:36:15 MST 2013 art.zambrano ICE-4724 added aria support; added label and indicator stuff; fixed some IE issues
        Files Changed
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/resources/icefaces.ace/selectmenu/selectmenu.js
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/selectmenu/SelectMenuMeta.java
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/selectmenu/SelectMenuRenderer.java
        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.
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #33546 Thu Feb 21 09:43:46 MST 2013 art.zambrano ICE-4724 some code optimizations
        Files Changed
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/resources/icefaces.ace/selectmenu/selectmenu.js
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/selectmenu/SelectMenuRenderer.java
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #33547 Thu Feb 21 09:47:21 MST 2013 art.zambrano ICE-4724 added facet rendering demo; added documentation resources classes
        Files Changed
        Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/selectmenu/selectMenuOverview.xhtml
        Commit graph ADD /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/java/org/icefaces/samples/showcase/example/ace/selectmenu/Color.java
        Commit graph ADD /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/java/org/icefaces/samples/showcase/ace/documentationResources/SelectMenuResources.java
        Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/resources/org/icefaces/samples/showcase/view/resources/messages.properties
        Commit graph ADD /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/java/org/icefaces/samples/showcase/example/ace/selectmenu/SelectMenuFacetBean.java
        Commit graph ADD /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/java/org/icefaces/samples/showcase/ace/documentationResources/SimpleSelectOneMenuResources.java
        Commit graph ADD /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/selectmenu/selectMenuFacet.xhtml
        Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/java/org/icefaces/samples/showcase/example/ace/selectmenu/SelectMenuBean.java
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #33562 Fri Feb 22 13:17:19 MST 2013 art.zambrano ICE-4724 changed parent class from UISelectOne to UIInput in order to avoid the UISelectOne validation logic; implemented the components own validation logic that works for both SelectItem and Facet Rendering cases; changed default 'execute' values of ajax events to '@this'
        Files Changed
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/selectmenu/SelectMenuMeta.java
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/selectmenu/SelectMenu.java
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/selectmenu/SelectMenuRenderer.java
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #33584 Fri Feb 22 16:21:49 MST 2013 art.zambrano ICE-4724 added server-side and client-side logic to distinguish between label and value; added a way to filter the label value in facet rendering mode; additional refactoring
        Files Changed
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/resources/icefaces.ace/selectmenu/selectmenu.js
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/selectmenu/SelectMenuRenderer.java
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #33585 Fri Feb 22 16:24:47 MST 2013 art.zambrano ICE-4724 adapted demos to recent component changes
        Files Changed
        Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/selectmenu/selectMenuFacet.xhtml
        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.
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #33715 Thu Feb 28 17:02:51 MST 2013 art.zambrano ICE-2191, ICE-4724 added labels to ace:comboBox and ace:selectMenu overview demos
        Files Changed
        Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/selectmenu/selectMenuOverview.xhtml
        Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/combobox/comboBoxOverview.xhtml
        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.
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #33927 Wed Mar 13 17:45:03 MDT 2013 art.zambrano ICE-4724 added "pass-thru" attributes
        Files Changed
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/selectmenu/SelectMenuMeta.java
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/selectmenu/SelectMenuRenderer.java
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #33936 Thu Mar 14 09:40:21 MDT 2013 art.zambrano ICE-4724, ICE-9004, ICE-2191 added label position, indicator, and required style demos for ace:selectMenu, ace:simpleSelectOneMenu, and ace:comboBox
        Files Changed
        Commit graph ADD /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/java/org/icefaces/samples/showcase/example/ace/combobox/ComboBoxLabelBean.java
        Commit graph ADD /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/java/org/icefaces/samples/showcase/example/ace/simpleselectonemenu/SimpleSelectOneMenuIndicatorBean.java
        Commit graph ADD /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/java/org/icefaces/samples/showcase/example/ace/simpleselectonemenu/SimpleSelectOneMenuLabelBean.java
        Commit graph ADD /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/selectmenu/selectMenuLabel.xhtml
        Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/java/org/icefaces/samples/showcase/example/ace/combobox/ComboBoxBean.java
        Commit graph ADD /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/combobox/comboBoxLabel.xhtml
        Commit graph ADD /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/java/org/icefaces/samples/showcase/example/ace/combobox/ComboBoxReqStyleBean.java
        Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/resources/org/icefaces/samples/showcase/view/resources/messages.properties
        Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/java/org/icefaces/samples/showcase/example/ace/selectmenu/SelectMenuBean.java
        Commit graph ADD /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/combobox/comboBoxIndicator.xhtml
        Commit graph ADD /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/java/org/icefaces/samples/showcase/example/ace/selectmenu/SelectMenuReqStyleBean.java
        Commit graph ADD /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/java/org/icefaces/samples/showcase/example/ace/simpleselectonemenu/SimpleSelectOneMenuReqStyleBean.java
        Commit graph ADD /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/simpleselectonemenu/simpleSelectOneMenuIndicator.xhtml
        Commit graph ADD /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/combobox/comboBoxReqStyle.xhtml
        Commit graph ADD /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/java/org/icefaces/samples/showcase/example/ace/selectmenu/SelectMenuLabelBean.java
        Commit graph ADD /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/java/org/icefaces/samples/showcase/example/ace/combobox/ComboBoxIndicatorBean.java
        Commit graph ADD /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/java/org/icefaces/samples/showcase/example/ace/selectmenu/SelectMenuIndicatorBean.java
        Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/java/org/icefaces/samples/showcase/example/ace/simpleselectonemenu/SimpleSelectOneMenuBean.java
        Commit graph ADD /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/simpleselectonemenu/simpleSelectOneMenuReqStyle.xhtml
        Commit graph ADD /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/selectmenu/selectMenuReqStyle.xhtml
        Commit graph ADD /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/simpleselectonemenu/simpleSelectOneMenuLabel.xhtml
        Commit graph ADD /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/selectmenu/selectMenuIndicator.xhtml
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #33937 Thu Mar 14 09:51:51 MDT 2013 art.zambrano ICE-4724, ICE-9004, ICE-2191 changed default label text in label demos
        Files Changed
        Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/java/org/icefaces/samples/showcase/example/ace/combobox/ComboBoxLabelBean.java
        Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/java/org/icefaces/samples/showcase/example/ace/simpleselectonemenu/SimpleSelectOneMenuLabelBean.java
        Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/java/org/icefaces/samples/showcase/example/ace/selectmenu/SelectMenuLabelBean.java
        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.
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #33961 Fri Mar 15 18:31:46 MDT 2013 art.zambrano ICE-4724 fixed issue with keyboard acceleration making browser crash; fixed issue with list reappearing after selecting a value; made the left border of the down arrow button not rounded
        Files Changed
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/resources/icefaces.ace/selectmenu/selectmenu.js
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/selectmenu/SelectMenuRenderer.java
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #33966 Mon Mar 18 13:30:03 MDT 2013 art.zambrano ICE-4724, ICE-9004, ICE-2191 fix to make these components use the ui-inputfield styling, used by all other input fields; made some other necessary styling adjustments
        Files Changed
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/combobox/ComboBoxRenderer.java
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/resources/icefaces.ace/selectmenu/selectmenu.js
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/resources/icefaces.ace/combobox/combobox.js
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/selectmenu/SelectMenuRenderer.java
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/simpleselectonemenu/SimpleSelectOneMenuRenderer.java
        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.
        Arturo Zambrano made changes -
        Status Open [ 1 ] Resolved [ 5 ]
        Resolution Fixed [ 1 ]
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #34071 Tue Mar 26 10:02:28 MDT 2013 art.zambrano ICE-4724, ICE-9004, ICE-2191 fixed selectmenu looking very short when no value had been selected; vertically centered down arrow icon in selectmenu and combobox; added showcase custom CSS rules to make combobox and selectmenu look shorter; changed selectmenu CSS class names; changed CSS class name of simpleselectonemenu
        Files Changed
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/combobox/ComboBoxRenderer.java
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/resources/icefaces.ace/selectmenu/selectmenu.js
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/resources/icefaces.ace/combobox/combobox.js
        Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/css/showcase_styles.css
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/selectmenu/SelectMenuRenderer.java
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/simpleselectonemenu/SimpleSelectOneMenuRenderer.java
        Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/selectmenu/selectMenuFacet.xhtml
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #34108 Wed Mar 27 15:47:13 MDT 2013 art.zambrano ICE-4724, ICE-9004, ICE-2191 adjusted paddings for these components, different from the ui-inputfield default
        Files Changed
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/resources/icefaces.ace/forms/forms.css
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #34111 Wed Mar 27 16:05:04 MDT 2013 art.zambrano ICE-4724, ICE-9004, ICE-2191 aligned labels and fields in required styling demos
        Files Changed
        Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/combobox/comboBoxReqStyle.xhtml
        Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/simpleselectonemenu/simpleSelectOneMenuReqStyle.xhtml
        Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/selectmenu/selectMenuReqStyle.xhtml
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #34119 Wed Mar 27 18:00:28 MDT 2013 art.zambrano ICE-4724, ICE-9004, ICE-2191 added blur ajax event to req.style demos; added button for clearing values to label position and req.style demos; added empty value at the top of the list of ace:simpleSelectOneMenu demos
        Files Changed
        Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/simpleselectonemenu/simpleSelectOneMenuIndicator.xhtml
        Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/selectmenu/selectMenuLabel.xhtml
        Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/combobox/comboBoxReqStyle.xhtml
        Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/java/org/icefaces/samples/showcase/example/ace/combobox/ComboBoxBean.java
        Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/simpleselectonemenu/simpleSelectOneMenuOverview.xhtml
        Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/combobox/comboBoxLabel.xhtml
        Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/java/org/icefaces/samples/showcase/example/ace/simpleselectonemenu/SimpleSelectOneMenuBean.java
        Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/java/org/icefaces/samples/showcase/example/ace/selectmenu/SelectMenuBean.java
        Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/simpleselectonemenu/simpleSelectOneMenuReqStyle.xhtml
        Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/selectmenu/selectMenuReqStyle.xhtml
        Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/simpleselectonemenu/simpleSelectOneMenuLabel.xhtml
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #34197 Tue Apr 02 18:57:49 MDT 2013 art.zambrano ICE-4724, ICE-9004, ICE-2191 fixed some issues in ReqStyle demos related to not being able to clear the values when pressing the 'clear values' button; not the demos avoid going through validation when pressing said button and the request is sent after the blur request in the components; also improved the demos to unrender the city fields when clearing the values
        Files Changed
        Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/combobox/comboBoxReqStyle.xhtml
        Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/java/org/icefaces/samples/showcase/example/ace/combobox/ComboBoxBean.java
        Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/java/org/icefaces/samples/showcase/example/ace/simpleselectonemenu/SimpleSelectOneMenuBean.java
        Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/java/org/icefaces/samples/showcase/example/ace/selectmenu/SelectMenuBean.java
        Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/simpleselectonemenu/simpleSelectOneMenuReqStyle.xhtml
        Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/selectmenu/selectMenuReqStyle.xhtml
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #34265 Fri Apr 05 18:03:48 MDT 2013 art.zambrano ICE-4724, ICE-2191 adjusted 'clear values' button delay to adjust for changes made in ICE-9137
        Files Changed
        Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/combobox/comboBoxReqStyle.xhtml
        Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/selectmenu/selectMenuReqStyle.xhtml
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #34288 Mon Apr 08 18:35:26 MDT 2013 art.zambrano ICE-4724, ICE-2191 integrated JS resources into ace-components.js; used constants from ACEResourceNames to reference resources
        Files Changed
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/resources/icefaces.ace/selectmenu/selectmenu.js
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/resources/icefaces.ace/combobox/combobox.js
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/selectmenu/SelectMenuMeta.java
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/build.xml
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/combobox/ComboBoxMeta.java
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #34394 Fri Apr 12 15:17:56 MDT 2013 art.zambrano ICE-4724, ICE-9004 changed h:message for ace:message to display validation messages with styling
        Files Changed
        Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/simpleselectonemenu/simpleSelectOneMenuReqStyle.xhtml
        Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/selectmenu/selectMenuReqStyle.xhtml
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #34395 Fri Apr 12 15:43:51 MDT 2013 ken.fyten ICE-4724, ICE-9004 changed h:message for ace:message to display validation messages with styling.
        Files Changed
        Commit graph MODIFY /icepush/tags/icepush-core-3.3.0/icepush/build.properties
        Commit graph MODIFY /icefaces3/tags/icefaces-3.3.0/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/selectmenu/selectMenuReqStyle.xhtml
        Commit graph MODIFY /icefaces3/tags/icefaces-3.3.0/icefaces/build.properties
        Commit graph MODIFY /icefaces3/tags/icefaces-3.3.0/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/simpleselectonemenu/simpleSelectOneMenuReqStyle.xhtml
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #34401 Mon Apr 15 10:25:13 MDT 2013 art.zambrano ICE-4724, ICE-9004, ICE-2191 changed h:message for ace:message to display validation messages with styling
        Files Changed
        Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/combobox/comboBoxFacet.xhtml
        Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/simpleselectonemenu/simpleSelectOneMenuIndicator.xhtml
        Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/selectmenu/selectMenuIndicator.xhtml
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #34402 Mon Apr 15 10:42:28 MDT 2013 ken.fyten ICE-4724, ICE-9004, ICE-2191 changed h:message for ace:message to display validation messages with styling.
        Files Changed
        Commit graph MODIFY /icefaces3/tags/icefaces-3.3.0/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/simpleselectonemenu/simpleSelectOneMenuIndicator.xhtml
        Commit graph MODIFY /icefaces3/tags/icefaces-3.3.0/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/selectmenu/selectMenuIndicator.xhtml
        Commit graph MODIFY /icefaces3/tags/icefaces-3.3.0/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/combobox/comboBoxFacet.xhtml
        Ken Fyten made changes -
        Status Resolved [ 5 ] Closed [ 6 ]

          People

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

            Dates

            • Created:
              Updated:
              Resolved: