Request for change of access control of CellTree.BasicStyle

[Thad]

A request/suggestion:  In a future release, can com.google.gwt.user.cellview.client.CellTree.BasicStyle be made public? It's a bit of a bother to have to extend and modify com.google.gwt.user.cellview.client.CellTree.Style and hack all of CellTree.css when all I want to do is modify one thing in CellTreeBasic.css.

[Thomas Broyer]

On Tuesday, August 28, 2012 6:54:32 PM UTC+2, Thad wrote:

A request/suggestion:  In a future release, can com.google.gwt.user.cellview.client.CellTree.BasicStyle be made public? It's a bit of a bother to have to extend and modify com.google.gwt.user.cellview.client.CellTree.Style and hack all of CellTree.css when all I want to do is modify one thing in CellTreeBasic.css.

AFAICT, you don't need BasicStyle. Using @Source("com/google/gwt/user/cellview/client/CellTreeBasic.css") should be enough to use (and/or override/customize) the basic style.

[Thad]

Maybe I'm not understanding how resources are used or applied, but that is not working for me. If I try the following interface, the resulting CellTree looks like CellTree.Style, not BasicStyle:

  interface TreeBasicResources extends CellTree.Resources {

    @Override

    @Source(value = { CellTree.Style.DEFAULT_CSS, 

        "com/google/gwt/user/cellview/client/CellTreeBasic.css" })

    CellTree.Style cellTreeStyle();

  }

  ...

  Cell Tree myTree = new CellTree(treeModel, null, 

          GWT.<TreeBasicResources> create(TreeBasicResources.class));

And if it did work, how then to add my change? Extend this interface with another? (All I want is cellTreeItem padding-top/-bottom to be 0px).

My current approach is to copy com/google/gwt/user/cellview/client/CellTree.css to MyTreeResources.css and modify the heck out of it. I can live with that, but I wondered if it couldn't be simpler.

(BTW, I'm impressed with the speed of the cellview objects. In this project I'm building a tree similar to one I built in a previous project with Tree and TreeItem. Cellviews are a lot of work--lots of parts to coordinate--but the cell items front objects not text, so I don't have to keep a separate list in sync. Also the cellview draws much faster.)

[Thomas Broyer]

On Wednesday, August 29, 2012 5:42:44 PM UTC+2, Thad wrote:

Maybe I'm not understanding how resources are used or applied, but that is not working for me. If I try the following interface, the resulting CellTree looks like CellTree.Style, not BasicStyle:

  interface TreeBasicResources extends CellTree.Resources {

    @Override

    @Source(value = { CellTree.Style.DEFAULT_CSS, 

        "com/google/gwt/user/cellview/client/CellTreeBasic.css" })

    CellTree.Style cellTreeStyle();

  }

  ...

  Cell Tree myTree = new CellTree(treeModel, null, 

          GWT.<TreeBasicResources> create(TreeBasicResources.class));

You have to create an interface that extends CellTree.Style and use that inerface as the return type of the overridden cellTreeStyle().

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

Also, BasicStyle does not use CellTree.Style.DEFAULT_CSS (that's the whole reason it exists in the first place!)

(that being said, BasicStyle not being public is probably an oversight)

And if it did work, how then to add my change? Extend this interface with another? (All I want is cellTreeItem padding-top/-bottom to be 0px).

Add a CSS file and list it in the @Source annotation.

In your CSS file, only include the cellTreeItem definition. And if you override rules, make sure you list your file after CellTreeBasic.css: CSS cascading rules apply when processing CssResources.

[Thad]

On Wednesday, August 29, 2012 12:29:07 PM UTC-4, Thomas Broyer wrote:

On Wednesday, August 29, 2012 5:42:44 PM UTC+2, Thad wrote:

Maybe I'm not understanding how resources are used or applied, but that is not working for me. If I try the following interface, the resulting CellTree looks like CellTree.Style, not BasicStyle:

  interface TreeBasicResources extends CellTree.Resources {

    @Override

    @Source(value = { CellTree.Style.DEFAULT_CSS, 

        "com/google/gwt/user/cellview/client/CellTreeBasic.css" })

    CellTree.Style cellTreeStyle();

  }

  ...

  Cell Tree myTree = new CellTree(treeModel, null, 

          GWT.<TreeBasicResources> create(TreeBasicResources.class));

You have to create an interface that extends CellTree.Style and use that inerface as the return type of the overridden cellTreeStyle().

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

In searching the list, I don't see this issue continued in the list after it was marked "AsDesigned". I may come back to this at some point. My current app has one CellTable, one CellTree, and one CellList. However I can see needing several CellTables, each with a very different style--one for database records, one for a to-do list, one with a file hex dump, etc.

 

Also, BasicStyle does not use CellTree.Style.DEFAULT_CSS (that's the whole reason it exists in the first place!)

(that being said, BasicStyle not being public is probably an oversight)

And if it did work, how then to add my change? Extend this interface with another? (All I want is cellTreeItem padding-top/-bottom to be 0px).

Add a CSS file and list it in the @Source annotation.

In your CSS file, only include the cellTreeItem definition. And if you override rules, make sure you list your file after CellTreeBasic.css: CSS cascading rules apply when processing CssResources.

Interesting. Two approaches that I would think would give me the same result look different. See the two screenshots from Firefox (v14 in Linux). The first, tree-override-DEFAULT.png, uses this code:

  interface TreeResources extends CellTree.Resources {

    @Override

    @Source({ CellTree.Style.DEFAULT_CSS, "CellTreePatch.css" })

    CellTree.Style cellTreeStyle();

  }

where CellTreePatch.css is ./com/google/gwt/user/cellview/client/CellTree.css copied and modified.

This is what I started with after realizing I couldn't override BasicStyle. (I'll add that I'm happy with visual result. Now I'm trying to understand what's going on as I expect to be using GWT for a long time.)

The second screen shot, tree-extend-CellTree.Style.png, packs the cells much closer, although CellTreePatch.css is the same:

  public interface ScreenCellTreeStyle extends CellTree.Style {}

  interface TreeResources extends CellTree.Resources {

    @Override

    @Source("CellTreePatch.css")

    ScreenCellTreeStyle cellTreeStyle();

  }

Why wouldn't they be the same?

Also, if CellTreePatch.css is reduced to only the cellTreeItem definition, the app crashes when trying to draw the tree (apparently because the other settings aren't present).

[Thomas Broyer]

On Wednesday, August 29, 2012 9:15:43 PM UTC+2, Thad wrote:

On Wednesday, August 29, 2012 12:29:07 PM UTC-4, Thomas Broyer wrote:

On Wednesday, August 29, 2012 5:42:44 PM UTC+2, Thad wrote:

Maybe I'm not understanding how resources are used or applied, but that is not working for me. If I try the following interface, the resulting CellTree looks like CellTree.Style, not BasicStyle:

  interface TreeBasicResources extends CellTree.Resources {

    @Override

    @Source(value = { CellTree.Style.DEFAULT_CSS, 

        "com/google/gwt/user/cellview/client/CellTreeBasic.css" })

    CellTree.Style cellTreeStyle();

  }

  ...

  Cell Tree myTree = new CellTree(treeModel, null, 

          GWT.<TreeBasicResources> create(TreeBasicResources.class));

You have to create an interface that extends CellTree.Style and use that inerface as the return type of the overridden cellTreeStyle().

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

In searching the list, I don't see this issue continued in the list after it was marked "AsDesigned". I may come back to this at some point. My current app has one CellTable, one CellTree, and one CellList. However I can see needing several CellTables, each with a very different style--one for database records, one for a to-do list, one with a file hex dump, etc.

See comment #3 (and comment #5 for some sample code, but BasicResources/BasicStyle is the same)

Also, BasicStyle does not use CellTree.Style.DEFAULT_CSS (that's the whole reason it exists in the first place!)

(that being said, BasicStyle not being public is probably an oversight)

And if it did work, how then to add my change? Extend this interface with another? (All I want is cellTreeItem padding-top/-bottom to be 0px).

Add a CSS file and list it in the @Source annotation.

In your CSS file, only include the cellTreeItem definition. And if you override rules, make sure you list your file after CellTreeBasic.css: CSS cascading rules apply when processing CssResources.

Interesting. Two approaches that I would think would give me the same result look different. See the two screenshots from Firefox (v14 in Linux). The first, tree-override-DEFAULT.png, uses this code:

  interface TreeResources extends CellTree.Resources {

    @Override

    @Source({ CellTree.Style.DEFAULT_CSS, "CellTreePatch.css" })

    CellTree.Style cellTreeStyle();

  }

where CellTreePatch.css is ./com/google/gwt/user/cellview/client/CellTree.css copied and modified.

Given the stylesheets will be merged, copying is probably not a good idea. Or use your CellTreePatch only.

 

This is what I started with after realizing I couldn't override BasicStyle. (I'll add that I'm happy with visual result. Now I'm trying to understand what's going on as I expect to be using GWT for a long time.)

@Source("com/google/gwt/user/cellview/client/CellTreeBasic.css", "CellTreePatch.css")

(where CellTreePatch only contains styles to be *added* to CellTreeBasic)

 

The second screen shot, tree-extend-CellTree.Style.png, packs the cells much closer, although CellTreePatch.css is the same:

  public interface ScreenCellTreeStyle extends CellTree.Style {}

  interface TreeResources extends CellTree.Resources {

    @Override

    @Source("CellTreePatch.css")

    ScreenCellTreeStyle cellTreeStyle();

  }

Why wouldn't they be the same?

It depends what you changed in the CSS compared to CellTree.Style.DEFAULT_CSS. Keep in mind the stylesheets are merged when you specify more than one as argument to the @Source annotation.

And use your browser's developer tools to debug the CSS (and possibly use <set-configuration-property name="CssResource.style" value="pretty" /> when debugging)

For instance, if you simply removed the lines with padding/margin, then the ones CellTree.Style.DEFAULT_CSS would still be there (in the tree-override-DEFAULT case). As the doc says, there might be something wrong (in your case) with merging the stylesheets; you can temporary disable merging to check whether it makes a difference: https://developers.google.com/web-toolkit/doc/latest/DevGuideClientBundle#Levers_and_Knobs

Also, you're not only changing the @Source value, but also the return type of the cellTreeStyle() method: keep using a specific interface as the return type (ScreenCellTreeStyle) and play only with the @Source, unless you really understand what you're doing (more info in comment #3 of issue 6144)

 

Also, if CellTreePatch.css is reduced to only the cellTreeItem definition, the app crashes when trying to draw the tree (apparently because the other settings aren't present).

In the tree-extend-CellTree.Style case, that's expected. It shouldn't be the case in the tree-override-DEFAULT case.

[Thad]

Thank you, Thomas. As always, you've been a great help--less code, my CellTree now looks even better, and Firebug shows a much cleaner looking CSS. I'm bookmarking Issue #6144 for future reference.