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.

Screen Shot 2014-02-28 at 10.56.52 AM

An example rendering using the html form included with the themebuilder.
An example rendering using the html form included with the themebuilder.

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:

      An example of modifying inline styles to get the look and feel right with compiled widgets.
      An example of modifying inline styles to get the look and feel right with compiled widgets.
  • 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.
    • An example of modifying the inline text of the widget using firebug.
      An example of modifying the inline text of the widget using firebug.
  • 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
      
          }
      
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s