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

        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.
        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).

          People

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

            Dates

            • Created:
              Updated:
              Resolved: