ICEfaces
  1. ICEfaces
  2. ICE-7016

Enhance ace:pushButton to support embedded icon and labels, incl. label positioning

    Details

    • Type: Improvement Improvement
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: EE-2.0.0.GA, 2.0.2
    • Fix Version/s: 2.1-Beta2, 3.0
    • Component/s: ACE-Components
    • Labels:
      None
    • Environment:
      All
    • Assignee Priority:
      P1
    • Affects:
      Documentation (User Guide, Ref. Guide, etc.), Sample App./Tutorial

      Description

      Feature Request: Enhance the ace:pushButton to support embedding both a text label and an image/icon in the clickable button area.

      - This can be achieve by rendering the button as an HTML4 <button> tag.
      - The component must support controlling the relative positioning of the image and text within the button, and the spacing between the image and the text. Omitting either image or text should also be possible. The positioning and spacing is given in CSS, and the component must support the style and styleClass attributes.
      - The button must support an actionListener etc.
      - The component must support CSS for styling, and be WAI-ARIA enabled. It must also support the tabindex attribute.

      - In addition / alternatively, the pushButton should accept a buttonFacet which could be used to specify arbitrary JSF markup as the button content.
      1. pushButtonExamples.xhtml
        2 kB
        Arturo Zambrano
      1. horizButton.png
        2 kB
      2. vertButton.png
        1 kB

        Activity

        Arran Mccullough created issue -
        Arran Mccullough made changes -
        Field Original Value New Value
        Salesforce Case [5007000000GxIgE]
        Ken Fyten made changes -
        Assignee Priority P2
        Security Private [ 10001 ]
        Assignee Arturo Zambrano [ artzambrano ]
        Ken Fyten made changes -
        Assignee Priority P2
        Assignee Arturo Zambrano [ artzambrano ]
        Ken Fyten made changes -
        Summary Create new component that will render an html button tag Enhance ace:pushButton to support embedded icon and labels, incl. label positioning
        Issue Type New Feature [ 2 ] Improvement [ 4 ]
        Component/s Components [ 10012 ]
        Fix Version/s 2.1 [ 10241 ]
        Affects [Documentation (User Guide, Ref. Guide, etc.), Sample App./Tutorial]
        Assignee Priority P3
        Description Feature Request: Add a component that will render an html button tag. Currently the ICEfaces button components render as an html input tag. This would allow developers to nest other components in the tag to provide different layouts. Feature Request: Enhance the ace:pushButton to support embedding both a text label and an image/icon in the clickable button area.

        - This can be achieve by rendering the button as an HTML4 <button> tag.
        - The component must support controlling the relative positioning of the image and text within the button, and the spacing between the image and the text. Omitting either image or text should also be possible. The positioning and spacing is given in CSS, and the component must support the style and styleClass attributes.
        - The button must support an actionListener etc.
        - The component must support CSS for styling, and be WAI-ARIA enabled. It must also support the tabindex attribute.

        - In addition / alternatively, the pushButton should accept a buttonFacet which could be used to specify arbitrary JSF markup as the button content.
        Security Private [ 10001 ]
        Assignee yip.ng [ yip.ng ]
        Hide
        Ken Fyten added a comment -

        Attached example images.

        Show
        Ken Fyten added a comment - Attached example images.
        Ken Fyten made changes -
        Attachment vertButton.png [ 13574 ]
        Attachment horizButton.png [ 13575 ]
        Ken Fyten made changes -
        Assignee Priority P3 P1
        Assignee yip.ng [ yip.ng ] Arturo Zambrano [ artzambrano ]
        Hide
        Arturo Zambrano added a comment -

        Fixed at revision 25938.
        The ace:pushButton component now supports having children and rendering them inside the button. There's no need to use a facet. Developers have full control over the css of elements and components they put inside the button. If the label or value attributes are used, they will appear first, before the children.

        Show
        Arturo Zambrano added a comment - Fixed at revision 25938. The ace:pushButton component now supports having children and rendering them inside the button. There's no need to use a facet. Developers have full control over the css of elements and components they put inside the button. If the label or value attributes are used, they will appear first, before the children.
        Arturo Zambrano made changes -
        Status Open [ 1 ] Resolved [ 5 ]
        Resolution Fixed [ 1 ]
        Hide
        Ken Fyten added a comment -

        Please attach a sample page showing combinations of label around an image on each of the top, bottom, left, right sides.

        Show
        Ken Fyten added a comment - Please attach a sample page showing combinations of label around an image on each of the top, bottom, left, right sides.
        Ken Fyten made changes -
        Resolution Fixed [ 1 ]
        Status Resolved [ 5 ] Reopened [ 4 ]
        Hide
        Arturo Zambrano added a comment -

        attached page with examples

        Show
        Arturo Zambrano added a comment - attached page with examples
        Arturo Zambrano made changes -
        Attachment pushButtonExamples.xhtml [ 13682 ]
        Arturo Zambrano made changes -
        Status Reopened [ 4 ] Resolved [ 5 ]
        Resolution Fixed [ 1 ]
        Ken Fyten made changes -
        Fix Version/s 2.1-Beta2 [ 10294 ]
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #26468 Fri Nov 18 12:47:41 MST 2011 ken.fyten ICE-7371 Added pass-thru attribute support to pushButton, linkButton, and checkboxButton
        ICE-7377 ace:pushButton, moved style and class attributes to the button element
        ICE-7016 Added support to ace:pushButton to contain children
        ICE-7207: Add ThemeRoller support to ACE buttons (ace:pushButton, ace:linkButton, ace:checkboxButton)
        ICE-7176 Buttons now do not depend on yui3 or 2in3, but instead YUI 2.8.
        ICE-6970 Adopted Apache 2.0 license source-code headers for ACE source-code.
        Files Changed
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/pushbutton/PushButtonRenderer.java
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/pushbutton/PushButton.java
        Commit graph ADD /icefaces3/trunk/icefaces/ace/component/resources/icefaces.ace/pushbutton/background-active.png
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/resources/icefaces.ace/pushbutton/pushbutton.js
        Commit graph ADD /icefaces3/trunk/icefaces/ace/component/resources/icefaces.ace/pushbutton/background-disabled.gif
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/pushbutton/PushButtonMeta.java
        Commit graph DEL /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/pushbutton/skins
        Commit graph ADD /icefaces3/trunk/icefaces/ace/component/resources/icefaces.ace/pushbutton/background-focus.png
        Commit graph ADD /icefaces3/trunk/icefaces/ace/component/resources/icefaces.ace/pushbutton/background.png
        Commit graph ADD /icefaces3/trunk/icefaces/ace/component/resources/icefaces.ace/pushbutton/background-highlight.png
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/resources/icefaces.ace/pushbutton/pushbutton.css
        Ken Fyten made changes -
        Status Resolved [ 5 ] Closed [ 6 ]

          People

          • Assignee:
            Arturo Zambrano
            Reporter:
            Arran Mccullough
          • Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: