Migrate custom css from Ext GWT 2.x to Ext GWT 3.x

[SelzChi]

Hi,

I'm trying to migrate our Ext GWT 2.x css-files to Ext GWT 3.x. For EXT GWT 2.x we customized the styles via a new theme css file. If possible we want to reuse this theme css file for customizing the styles in EXT GWT 3 as well.
Now, with the Appearance Pattern I can't detect a possibility for an easy switch. Do I have to support every UI-Element that I want to customize (for example FieldLabel) with a corresponding Appearance Implementation (MyFieldLabelAppearance implements FieldLabel.FieldLabelAppearance)? If not, can you please give me a hint?


Thanks in advance


Selcuk

[Colin Alworth]

If you create a custom appearance for a widget, and want this to always be used by default, put lines like this in your module file, somewhere after the GXT inherits statements:

  <replace-with class="my.package.client.theme.MyFieldLabelAppearance">    <when-type-is class="com.sencha.gxt.widget.core.client.form.FieldLabel.FieldLabelAppearance" />
  </replace-with>

This will cause the compiler to automatically always use your theme instead of the defaults provided. If you have a library of custom themes or widgets used internally, you might make a whole set of appearances, as are in com.sencha.gxt.theme.base (the basics for making the standard GXT themes) and com.sencha.gxt.theme.blue (specific details for making the images and colors blue). It isn't required to inherit Base or Blue, but may be handy for some initial dom structure that already works.

If you only want some instances to use, or want some to be different than others, then either your css could have some extra class name to switch between the two, or make one the default (with the replace-with rebind rule), and pass the other appearance into the others' constructor.

[PhiLho]

Colin, your answer seems to partially cover my (unanswered) question at Styling GXT 3 but I am still unsure how to apply it.

Is there a tutorial somewhere how to make a theme? Or have we to just study the existing one(s) and find inspiration there?
And do you know if there is a tutorial / example how to make special Appearance for a given component? Perhaps I missed such thing in the demo explorer or a plain old GWT tutorial if they can be applied to GXT components ("appearance" is a word a bit too generic for searches...).

[SelzChi]

If you create a custom appearance for a widget, and want this to always be used by default, put lines like this in your module file, somewhere after the GXT inherits statements:

  <replace-with class="my.package.client.theme.MyFieldLabelAppearance">    <when-type-is class="com.sencha.gxt.widget.core.client.form.FieldLabel.FieldLabelAppearance" />
  </replace-with>

This will cause the compiler to automatically always use your theme instead of the defaults provided. If you have a library of custom themes or widgets used internally, you might make a whole set of appearances, as are in com.sencha.gxt.theme.base (the basics for making the standard GXT themes) and com.sencha.gxt.theme.blue (specific details for making the images and colors blue). It isn't required to inherit Base or Blue, but may be handy for some initial dom structure that already works.

If you only want some instances to use, or want some to be different than others, then either your css could have some extra class name to switch between the two, or make one the default (with the replace-with rebind rule), and pass the other appearance into the others' constructor.

Hi Colin,
thanks for your response!
As I said before with Ext GWT 2 we currently have several themes. Each theme is implemented by a specific css file which is based on the styles defined in the gxt-all.css. So our application is styled completely different like the blue/grey theme provided as Ext GWT default.
But now a lot of modules/widgets in Ext GWT 3.x have their own css-files (I found somewhat about 100 css files).
Therefore my crucial question is: Can we preserve our custom-css-files that are based on gxt-all.css, or have we to
revise our whole css-files to the new Ext GWT css-structure? As our themes are completely different from the blue theme, this would mean that we have to override about 100 css-file ourselves - by appling a new appearance (as you demonstrated in the code snippet above).
Regards
Selcuk