Theming without the apearance pattern

[Neilcoder]

Hi, I'm trying out Gxt at the moment for on going use, and I was wondering if there's any info or posts about rolling themes in 3.x? specifically without using the appearance pattern because we want to keep all the layout information in java files.

I found some useful information on this thread; http://www.sencha.com/forum/showthre...e-to-Base-only and I'm trying out sven's idea but its giving me a load of errors.

[DEBUG] [hellogxt] - Validating newly compiled units
[ERROR] [hellogxt] - Deferred binding result type 'com.sencha.gxt.cell.core.client.ButtonCell.ButtonCellAppearance' should not be abstract
[ERROR] [hellogxt] - Unable to load module entry point class com.hello.gxt.client.BorderLayoutExample (see associated exception for details)
[ERROR] [hellogxt] - Failed to load module 'hellogxt' from user agent 'Mozilla/5.0 (Windows NT 5.1) AppleWebKit/535.11 (KHTML, like Gecko) Chrome/17.0.963.79 Safari/535.11' at localhost:1591

Also i noticed in the beta4 jar, that there is is com.sencha.gxt.theme.gray, and it has an empty css file. I was wondering whether this is meant for rolling your own, or is it native styling? or is there a gray theme in development?

<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='hellogxt'>
  <!-- Inherit the core Web Toolkit stuff.                        -->
  <inherits name='com.google.gwt.user.User'/>

  <!-- Inherit the default GWT style sheet.  You can change       -->
  <!-- the theme of your GWT application by uncommenting          -->
  <!-- any one of the following lines.                            -->
  <!--   <inherits name='com.google.gwt.user.theme.clean.Clean'/>-->
  <!-- <inherits name='com.google.gwt.user.theme.standard.Standard'/> -->
  <!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> -->
   <!--  <inherits name='com.google.gwt.user.theme.dark.Dark'/>  --> 
  <!-- <inherits name='com.sencha.gxt.theme.blue.Blue'/>   -->
   <inherits name='com.sencha.gxt.theme.gray.Gray'/>  

<inherits name="com.google.gwt.resources.Resources" />

  <!-- Other module inherits, bypassing com.sencha.gxt.ui.GXT                                    
  <inherits name="com.sencha.gxt.ui.GXT" />
    -->
  

  <inherits name="com.sencha.gxt.data.Data" />
  <inherits name="com.sencha.gxt.dnd.core.DND" />
  <inherits name="com.sencha.gxt.state.State" />
  <inherits name="com.sencha.gxt.widget.core.Core" />

  <!-- Default theme is Blue 
  <inherits name="com.sencha.gxt.theme.blue.Blue" />-->

  <!-- Collect OS, collapse it by default -->
  <collapse-property name="user.agent.os" values="*" />
  <collapse-property name="gxt.user.agent" values="air, safari*, chrome" />
  <collapse-property name="gxt.user.agent" values="ie6, ie7" />
  <collapse-property name="gxt.user.agent" values="gecko*" />


  <!-- Specify the app entry point class.                         -->
  <entry-point class='com.hello.gxt.client.BorderLayoutExample'/>

  <!-- Specify the paths for translatable code                    -->
  <source path='client'/>
  <source path='shared'/>

</module>

[abshnasko]

I'd love to hear someone's thoughts on this...

[Colin Alworth]

Grey is a second theme that is still missing - it is important to us, but not as important as getting the release out and in the hands of users. Blue is usable, Base is a starting point for other similar themes, and we hope to see more compilable themes from users in the near future, either based on Base or starting even from scratch!

It is possible to build an appearance that relies on runtime styles, instead of ClientBundle-based styles. This can be done by in several ways, but the general idea is to hard code strings as your style names.

One option - copy the existing blue (or perhaps base, which is just blue minus images and color-specific styles) theme and replace all {style.someproperty} references in the xtemplates with hard coded strings. Then in your own css files provide all of those styles, and remove all usages of ClientBundle and CssResource.

Other options could entail subclassing the existing appearances and overriding either the ClientBundle to return hand-written impls that always return string constants, or override methods (and base XTemplates setups) that mention those styles. This would take more effort, but would better ensure that you don't see changes between GXT versions.

And if you don't actually need all styles to be runtime specific, consider adding a style name to a widget, and referencing just that from in your runtime stylesheets.

And lastly, looking at your module file, it is running into an error because you don't have _any_ theme wired up to provide html/css for the components in GXT. If you don't use a component, you don't need an appearance for it, but apparently you are using TextButton without any html/css wired up for it. It isn't our goal to make this difficult, but to make the general case of optimized stylesheets thanks to GWT's CssResource, of compile-defined styles, and of always-cached application content as simple as possible to reach. This makes the simple case of just overriding a single style more complicated, but overriding many maintainable, instead of just dumping them all in a single file.