ICEfaces
  1. ICEfaces
  2. ICE-7057

Implement Themeroller support for ace:tabSet

    Details

    • Type: Improvement Improvement
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: 2.1-Beta, 3.0
    • Component/s: ACE-Components
    • Labels:
      None
    • Environment:
      ICEfaces 2.1, Advanced Component Environment (ace:)
    • Affects:
      Documentation (User Guide, Ref. Guide, etc.), Sample App./Tutorial, Compatibility/Configuration

      Description

      Make the ace:tabSet component skinnable by Themeroller themes instead than by YUI skins. This task would entail changing the class names of the markup to those used by Themeroller, while preventing YUI from overriding these class names with its own.
      1. Screen shot 2011-08-24 at 5.33.40 PM.png
        34 kB
      2. screenshot-left_tabs.jpg
        228 kB
      3. screenshot-right_tabs.jpg
        228 kB
      4. tabset-bottom.png
        199 kB
      5. tabset-glowball_background.png
        178 kB
      6. tabset-left.png
        189 kB
      7. tabset-right.png
        190 kB
      8. tabset-rotated_gradient.png
        166 kB
      9. tabset-top.png
        181 kB

        Activity

        Arturo Zambrano created issue -
        Arturo Zambrano made changes -
        Field Original Value New Value
        Assignee Arturo Zambrano [ artzambrano ]
        Arturo Zambrano made changes -
        Salesforce Case []
        Fix Version/s 2.1 [ 10241 ]
        Arturo Zambrano made changes -
        Link This issue depends on ICE-7018 [ ICE-7018 ]
        Hide
        Arturo Zambrano added a comment -

        Completed a working prototype in supporting themeroller themes in tabSet.

        It was straight-forward to make the component use the Themeroller theme that
        was loaded on the page. However, there were a few issues:

        • CSS class names to represent the current state (e.g. active, highlighted, etc.)
          are hard-coded in the jQuery-ui Javascript code. So, it was necessary to override
          the CSS class names used by YUI. Fortunately, YUI uses fields like ACTIVE_CLASSNAME
          to hold the string value of the class name used for the active class (in YUI it's 'selected'
          by default, while in jQuery-ui it's ui-state-active).
        • While the colors, fonts, and background images of the theme can be applied
          successfully to the component, the component doesn't look good right away. At the
          end, the theme CSS is only concerned with colors, fonts and background images and
          not so much with positions, spacing, margins, etc. So, it was necessary to add some
          structural CSS styles for the component to look good. These structural CSS styles were
          taken from jQuery-ui CSS.
        • While the YUI Tabview and the jQuery Tabview widgets use a similar HTML structure
          to initialize the widget, we add and modify some of the markup in the component, which
          results in some styles not being applied correctly. So, it was necessary to make
          adjustments to the structural CSS styles to work with our markup. Further, it might be
          necessary to make some slight changes to the markup we render in order for the
          component to look completely right. For example, we are rendering a <div> element
          inside <li> elements to display the tab header; it was necessary to make some adjustments
          to the structual CSS to apply the theme to this <div> element, but the code only
          makes changes to the <li> element, so these changes are hidden by the styling of the <div> element.
        Show
        Arturo Zambrano added a comment - Completed a working prototype in supporting themeroller themes in tabSet. It was straight-forward to make the component use the Themeroller theme that was loaded on the page. However, there were a few issues: CSS class names to represent the current state (e.g. active, highlighted, etc.) are hard-coded in the jQuery-ui Javascript code. So, it was necessary to override the CSS class names used by YUI. Fortunately, YUI uses fields like ACTIVE_CLASSNAME to hold the string value of the class name used for the active class (in YUI it's 'selected' by default, while in jQuery-ui it's ui-state-active). While the colors, fonts, and background images of the theme can be applied successfully to the component, the component doesn't look good right away. At the end, the theme CSS is only concerned with colors, fonts and background images and not so much with positions, spacing, margins, etc. So, it was necessary to add some structural CSS styles for the component to look good. These structural CSS styles were taken from jQuery-ui CSS. While the YUI Tabview and the jQuery Tabview widgets use a similar HTML structure to initialize the widget, we add and modify some of the markup in the component, which results in some styles not being applied correctly. So, it was necessary to make adjustments to the structural CSS styles to work with our markup. Further, it might be necessary to make some slight changes to the markup we render in order for the component to look completely right. For example, we are rendering a <div> element inside <li> elements to display the tab header; it was necessary to make some adjustments to the structual CSS to apply the theme to this <div> element, but the code only makes changes to the <li> element, so these changes are hidden by the styling of the <div> element.
        Arturo Zambrano made changes -
        Attachment tabset-top.png [ 13364 ]
        Attachment tabset-bottom.png [ 13365 ]
        Attachment tabset-left.png [ 13366 ]
        Arturo Zambrano made changes -
        Attachment tabset-right.png [ 13367 ]
        Arturo Zambrano made changes -
        Attachment tabset-rotated_gradient.png [ 13390 ]
        Attachment tabset-glowball_background.png [ 13391 ]
        Arturo Zambrano made changes -
        Attachment screenshot-left_tabs.jpg [ 13397 ]
        Arturo Zambrano made changes -
        Attachment screenshot-right_tabs.jpg [ 13398 ]
        Ken Fyten made changes -
        Salesforce Case []
        Affects [Documentation (User Guide, Ref. Guide, etc.), Sample App./Tutorial, Compatibility/Configuration]
        Assignee Priority P1
        Hide
        Arturo Zambrano added a comment -

        added tabset themeroller compatibility fixes at revision 25231

        Show
        Arturo Zambrano added a comment - added tabset themeroller compatibility fixes at revision 25231
        Hide
        Arturo Zambrano added a comment -

        Added some necessary styling for the case when the tab has cacheOnClient="true", at revision 25288.

        Show
        Arturo Zambrano added a comment - Added some necessary styling for the case when the tab has cacheOnClient="true", at revision 25288.
        Hide
        Ken Fyten added a comment - - edited

        There is an issue remaining in that there seems to be an extra vertical bar rendered at the right side of the tab labels, one for each tab label that exists. See attached snap (Screen shot 2011-08-24 at 5.33.40 PM.png).

        Show
        Ken Fyten added a comment - - edited There is an issue remaining in that there seems to be an extra vertical bar rendered at the right side of the tab labels, one for each tab label that exists. See attached snap (Screen shot 2011-08-24 at 5.33.40 PM.png).
        Ken Fyten made changes -
        Arturo Zambrano made changes -
        Status Open [ 1 ] Resolved [ 5 ]
        Resolution Fixed [ 1 ]
        Ken Fyten made changes -
        Salesforce Case []
        Fix Version/s 2.1-Beta [ 10291 ]
        Fix Version/s 2.1 [ 10241 ]
        Assignee Priority P1
        Security Private [ 10001 ]
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #26469 Fri Nov 18 13:24:15 MST 2011 ken.fyten ICE-7138 ace:tabSet additional cacheStatically policies
        ICE-7044 ace:tabSet use DOM difference don't compare don't update element sub-tree (new cache attribute)
        ICE-6527 Dynamically adding/removing ace:tabPane Results in ace:tabset Retrieving Entire Tabset Content
        ICE-6738 Add client-side cache support for ace:tabPane within a 'clientSide=false'
        ICE-7057 Implement Themeroller support for ace:tabSet
        ICE-7176 ace:tabSet now does 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/tabset/TabPaneMeta.java
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/tabset/TabSetProxyMeta.java
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/resources/icefaces.ace/tabset/tabset.js
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/tabset/TabPane.java
        Commit graph DEL /icefaces3/trunk/icefaces/ace/component/resources/icefaces.ace/tab
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/resources/icefaces.ace/tabset/tabset.css
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/tabset/TabSetRenderer.java
        Commit graph ADD /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/tabset/TabPaneCache.java
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/tabset/TabSetMeta.java
        Commit graph DEL /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/tabset/skins
        Commit graph ADD /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/tabset
        Commit graph ADD /icefaces3/trunk/icefaces/ace/component/resources/icefaces.ace/tabset
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/tabset/Tabs.java
        Commit graph DEL /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/tab
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/tabset/TabSetProxy.java
        Commit graph ADD /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/tabset/TabPaneUtil.java
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/src/org/icefaces/ace/component/tabset/TabSet.java
        Ken Fyten made changes -
        Fix Version/s 3.0 [ 10241 ]
        Ken Fyten made changes -
        Status Resolved [ 5 ] Closed [ 6 ]

          People

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

            Dates

            • Created:
              Updated:
              Resolved: