Question

我有一个普通的Tree小部件，我想要设置样式。我知道Tree小部件必须遵循以下样式：

•.gwt-Tree {树本身} •.gwt-Tree .gwt-TreeItem {a tree item} •.gwt-Tree .gwt-TreeItem-selected {选定的树项目}

webb人们发送了这个CSS和HTML作为示例，它应该是什么样子

的CSS：

/* Menu styling */
    #menu li {
        margin-top: 8px;
        margin-bottom: 8px;
        /*margin: 8px 0 8px 0;*/
        padding: 0;
    }

    .menuitems,.indented {
        background: none repeat scroll 0 0 transparent;
        border-width: 0;
        float: left;
        font-size: 100%;
        list-style-image: none;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    .menuitems a { *
        display: block; *
        float: left; *
        clear: left;
    }

    .indented {
        border-left: 1px solid #005284;
        border-right: none;
        padding-left: 5px;
        margin-left: 20px;
    }

    .menuitems a {
        color: #000000;
        display: block;
    }

    .menuitems a:hover {
        text-decoration: underline;
    }

    .currentpage a {
        color: #C60;
        font-weight: bold;
    }

和html

<div id="menu">
        <ul class="menuitems">
            <li>
                <a href="abc">Option 1</a> 
            </li>
            <li>
                <a href="abc">Option 2</a> 
            </li>
            <li>
                <a href="abc">Option 3</a> 
                <ul class="indented">
                    <li class="currentpage">
                        <a href="blabla">subselection</a>
                    </li>
                    <li>
                        subselection 2
                    </li>
                </ul>
            </li>
            <li>
                <a href="abc">Option 4</a> 
            </li>
        </ul>   
    </div>

我正在努力让它看起来像他们想要的那样。我正在使用uibinder。

我应该在ui活页夹文件中使用.css文件还是ui：style？
我是否需要在每个树项上删除“removeStyleName”和setStyleName的默认样式？

THX

更新

了解如何向图片添加图片。建立一个界面：

public interface TreeResources extends Resources {
     ImageResource treeOpen();
     ImageResource treeClosed();
  }

使用GWT.create创建树。确保具有匹配名称的图像（treeOpen.gif，treeClosed.gif）位于同一文件夹中，或者您可以和注释指出它们。

问题是如何让它们在右侧而不是在左侧？

Answer 1

GWT不公开树项的css类，但您可以轻松地为您创建的每个TreeItem执行此操作：

TreeItem item = new TreeItem("click me!");
item.getElement().addClassName("gwt-TreeNode");                
tree.addItem(item);

稍后您可以像这样在树中添加行：

.gwt-Tree .gwt-TreeNode {
    border-left: 1px solid #005284;
}

Answer 2

虽然这些是正确的CSS类供选择，但我发现我试图设置的值没有正确更新。问题最终出现在应用程序的gwt.xml中。

此行在我的应用中：

<inherits name='com.google.gwt.user.theme.clean.Clean'

使用此行，创建了一个名为Clean.css的默认外观CSS。这是在我的CSS文件之后加载的。一旦我评论了这一行，我的所有设置都被应用了。

GWT树造型

2 个答案: