Overriding CellTree styles

[Christopher Piggott]

I'm looking for a better way to override CellTree styles. I found the
default styles:

http://code.google.com/p/google-web-toolkit/source/browse/trunk/user/src/com/google/gwt/user/cellview/client/CellTree.css?r=8772

and interface:

http://code.google.com/p/google-web-toolkit/source/browse/trunk/user/src/com/google/gwt/user/cellview/client/CellTree.java?r=8772#320

I don't really want to replace the entire style with my own copy
(slightly tweaked). If I have to, then I'd like to put it into a
ClientBundle, but I'm not sure how to make the CellTree use that. Is
the trick to manipulate the prefix?

[Jens]

CellTree has a constructor that takes a CellTree.Ressource instance. 

I haven't used CellTree yet but I would say you can create an interface that extends CellTree.Ressources (which is a ClientBundle) for overwriting images. To overwrite CSS create an interface that extends CellTree.Style (which extends CssRessource) and return this custom style in your custom CellTree.Ressource interface using "YourStyle cellTreeStyle();"

-- J.

[Christopher Piggott]

OK yeah ... that worked. I made this:

public interface TreeResources extends CellTree.Resources {
@Source("../CellTree.css")
public CellTree.Style cellTreeStyle();
}

that css file is basically a copy of the one I linked earlier, but
modified to my liking. The only thing that didn't work is:

@sprite
.cellTreeSelectedItem {
gwt-image: 'cellTreeSelectedBackground';
/* ... */
}

and I discovered that, without that in there, when you hover over you
get an ugly selection box.

Well, this approach lets me at least minimize the amount of stuff I
had to copy.

Thanks,

--Chris

[Raphael André Bauer]

Hey,

there is also magic @external.
Using that you can style eg. gwt-* classes without any problems in
your own ui binder / cssResources.
@external

@sprite
.cellTreeSelectedItem {
       gwt-image: 'cellTreeSelectedBackground';
       /* ... */
}

I know it works for eg. Splitpanels - but I am not sure it it works
for cellTreeSelectedItem - I would give it a try :)

Raphael

On Thu, Dec 15, 2011 at 6:48 PM, Christopher Piggott <cpig...@gmail.com> wrote:
> @sprite
> .cellTreeSelectedItem {
>        gwt-image: 'cellTreeSelectedBackground';
>        /* ... */
> }

--
inc: http://ars-machina.raphaelbauer.com
tech: http://ars-codia.raphaelbauer.com
web: http://raphaelbauer.com

[Christopher Piggott]

> there is also magic @external.
> Using that you can style eg. gwt-* classes without any problems in
> your own ui binder / cssResources.

Yeah. I did that with the SplitLayoutPanel like you said. I couldn't
figure out how to get it into a resource bundle, which is what I
wanted.

I just tried this on my CellTree problem:

public interface TreeResources extends CellTree.Resources {
@Source("../CellTree.css")
public CellTree.Style cellTreeStyle();

@Source("../myCellTreeSelectedBackground.png")
@ImageOptions(repeatStyle = RepeatStyle.Horizontal, flipRtl = true)
@Override
public ImageResource cellTreeSelectedBackground();
}

then in the css file:

@sprite
.cellTreeSelectedItem {
gwt-image: 'myCellTreeSelectedBackground';
background-color: #628cd5;
color: white;
height: auto;
overflow: auto;
}

I *think* that's all correct, but I get:

Creating assignment for cellTreeStyle()
Replacing CSS class names
The following obfuscated style classes were
missing from the source CSS file:
[ERROR] cellTreeSelectedItem: Fix by
adding .cellTreeSelectedItem{}
[ERROR] Generator
'com.google.gwt.resources.rebind.context.InlineClientBundleGenerator'
threw an exception while rebinding
'com.autofrog.app.client.TreeResources'
com.google.gwt.resources.css.ast.CssCompilerException: Missing a CSS
replacement

it does this whether it's marked @external or not. What's werid is
that I do indeed have a .cellTreeSelectedItem in there, it's just that
it's after a @sprite.

Do I have the pattern wrong?

[Jens]

Shouldn't it be

@sprite
.cellTreeSelectedItem {
gwt-image: 'cellTreeSelectedBackground'; //instead of 'myCellTreeSelectedBackground'

background-color:  #628cd5;
color: white;
height: auto;
overflow: auto;
}

because the method that returns the ImageResource has that name? 

-- J.

[Christopher Piggott]

Yes, I was transliterating it into the mailing list and I made that
mistake. That doesn't seem to be the issue, though - even fixing
that, it's still angry about not being able to find
cellTreeSelectedItem.

I wonder if I'm overriding the CellTree.Resources this way if I have
to override more of it than I am.

> --
> You received this message because you are subscribed to the Google Groups
> "Google Web Toolkit" group.
> To view this discussion on the web visit
> https://groups.google.com/d/msg/google-web-toolkit/-/AVkO7WZvsLMJ.
>
> To post to this group, send email to google-we...@googlegroups.com.
> To unsubscribe from this group, send email to
> google-web-tool...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/google-web-toolkit?hl=en.

[Christopher Piggott]

Oh good grief.

@sprite .cellTreeSelectedItem { ... } /* works */

@sprite
.cellTreeSelectedItem { ... } /* doesn't work */

The @sprite has to be on the same line?

Grr. Well, at least I'll never make that mistake again!

[Markandayarushi Pamu]

Hi Guys,

Same way I have overridden, CellTree resource.

But I am getting the wierd problem.

In my application I am using CellTree in 2 places, in 2 places I have overridden with 2 differnent style names.

But If I chnage in css file, changes are applying for the two celltree's..

Plz help me what could be the problem?

[Thomas Broyer]

On Monday, April 30, 2012 9:12:50 AM UTC+2, Markandayarushi Pamu wrote:

Hi Guys,

Same way I have overridden, CellTree resource.

But I am getting the wierd problem.

In my application I am using CellTree in 2 places, in 2 places I have overridden with 2 differnent style names.

But If I chnage in css file, changes are applying for the two celltree's..

Plz help me what could be the problem?

See http://code.google.com/p/google-web-toolkit/issues/detail?id=6144