tags:

views:

96

answers:

2

I wondered if anyone knew whether it was possible to remove the '+' Sign that appears next to the root item in a GWT Tree? I didn't see a CSS rule to handle it. Can one replace the + sign with say, a GIF?

(Adapted code from GWT manual below, for illustrative purposes)

TreeItem root = new TreeItem("root"); // Wish to remove + sign from next to this item

  root.addItem("item0");
  root.addItem("item1");
  root.addItem("item2");
  root.setState(true, true);
  // Add a CheckBox to the tree
  TreeItem item = new TreeItem(new CheckBox("item3"));
  root.addItem(item);

  Tree t = new Tree();
  t.addItem(root);

  // Add it to the root panel.
  RootPanel.get().add(t);
A: 

You'll have to use CSS to override the plus icon image, which is set as the background image of the item with a left-margin to move the text off of it.

The root item doesn't have its own specific style so you'll have to add a style name (i.e., CSS class) on the tree item yourself and remove the background image yourself, in CSS.

Jason Hall
I tried this solution but couldn't get it to work, e.g. tried: TreeItem root = new TreeItem("My Root");root.addStyleName("clearBG");and/orroot.setStyleName("clearBG");where clearBG is defined as (spacer.png is a single pixel transparent png) :clearBG{ background-image:url('spacer.png'); }Am I doing anything wrong?
Try `.clearBg{ background-image: none; !important }`
Jason Hall
A: 

CSS styling does not apply to this at all. Rather, it requires using a different constructor for tree.. If you set spacer.png to a 1x1 transparent PNG it will remove the + signs. Here is the full code I used.

The correct way to do it is as follows:

public interface MyResources extends ClientBundle {
      public static final MyResources INSTANCE =  GWT.create(MyResources.class);

      @Source("spacer.png")
      public ImageResource leaf();


    }


public class TreeImagesExample implements Tree.Resources
{


    @Override
    public ImageResource treeClosed() {
        // TODO Auto-generated method stub
        return MyResources.INSTANCE.leaf();
    }

    @Override
    public ImageResource treeLeaf() {
        // TODO Auto-generated method stub
        return MyResources.INSTANCE.leaf();
    }

    @Override
    public ImageResource treeOpen() {
        // TODO Auto-generated method stub
        return MyResources.INSTANCE.leaf();
    }

} 

Main Function:
     TreeImagesExample tx= new TreeImagesExample();
                Tree t = new Tree(tx);
                t.addItem(root);

For this to work properly, we will also need a SelectionHandler, of course, so that we can register tree clicks on the tree items rather than the (now non-existent) + signs.