GWT 树样式

Question

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

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

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 删除默认样式？

谢谢

更新：

了解了如何将图像添加到叶子。创建一个接口：

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 文件之后加载的。一旦我注释掉这一行，我的所有设置都会被应用。