Custom Theming with Sencha themebuilder: Sencha GXT Theme Builder HTML

In Sencha’s GXT 3.1 beta, it includes an html file that runs a script that can parse a theme file and generate the approximate look and appearance of several sencha widgets. This allows for fast iteration of .theme development (and enables you to not have to rebuild the theme.jar file with every change). It definitely is extremely valuable in terms of saving time, however, the tool is far from perfect. It’s located in ../gxt-3.1.0-beta-20140225/themebuilder/bin/widgetdatasample/sliceme/index.html. You’ll have to extract the files from the .jar first.

A few of the deficiencies:

• It didn’t work in chrome
• Not every widget gets rendered
• You can’t see widgets within widgets
• You’ll need to modify the reset.css if you want to see custom styling
• A lot of the widgets don’t have text, so you can’t see what text would look like in them
• It’s difficult to determine what the widgets map to since they are prefaced with the name of the job that the themebuilder uses to “slice” the look into images for cross-browser support for older browsers.

Here’s a few tips and tricks I’ve learned:

• It didn’t work in chrome
  • Solution: It did work in firefox for me.
• Not every widget gets rendered
  • Solution: Not much you can do here. Hopefully you can get to a point where your .theme is close enough so you can narrow down the widgets that you need to see to fix.
• You can’t see widgets within widgets
  • Solution: Same as the above.
• You can’t add custom styling because the .theme file doesn’t support it. If your app uses custom styles on top of the theme.jar, you won’t be able to see them.
  • Solution: There is a reset.css file in the same directory as the HTML file that is used to help style the rendered page. You can add .css classes here and using debug tools or firebug, insert your css class into the widget to see how it would look. You can do the same thing with external fonts.
  • See an example here:

    

• A lot of the widgets don’t have text, so you can’t see what text would look like in theme
  • Solution: Same as the above. Except modify the inline HTML and add some text inside the innermost div.

  • 

• It’s difficult to determine what the widgets map to since they are prefaced with the name of the job that the themebuilder uses to “slice” the look into images for cross-browser support for older browsers.
  • Solution: This is kind of guess and check, but here’s a list of some of the less obvious mappings from the .theme file to what they correspond to in terms of gwt widgets:
  • In your .theme file,

  
      /* Dialog boxes - background
       */
      window {
        backgroundColor = theme.bgColor
        borderColor = util.darkenColor(backgroundColor, 0.2)
        headerGradient = util.gradientString(theme.headerGradientDetails)
      }
  
     /*
      * These are the overlays that disable fields.  Since they're grey, change the font to white.
      */
      mask {
        backgroundColor = "#000000"
        opacity = 0.5
        box {
          backgroundColor = "#303030"
          borderColor = "#555555"
          borderRadius = 0
          borderStyle = "solid"
          borderWidth = 2
          loadingImagePosition = "0 center"
          padding = util.padding(5)
          radiusMinusBorderWidth = util.max(0, borderRadius - borderWidth)
          text = theme.riverbedBodyWhite
          textPadding = util.padding(0, 0, 0, 21)
        }
      }
  
      //Dropdowns menus 
      fieldset {
        ...
        border=util.border('solid', '#bbbbbb', 1)
        text=theme.text  //Color of the unselected values in a dropdown menu
      }
  
      field {
          text=theme.text  //Color of the selected value in a dropdown in a toolbar
      }
  
  tabs {
        ...
        lastStopColor="#000000"  //color of the bottom of the tab
        tabHeight=20 //height of a tab
        tabSpacing=1 //horizontal spacing between the tabs
  
      }