0

我正在使用 gwt 和 vaadin gwt-polymer 插件创建一个设计，并将它们与 RESTful Web 服务结合起来。但我很困惑如何设置背景颜色。我是 gwt 的新手，我找不到任何教程来解决我的问题。

我的 uibinder 代码如下。

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui' 
xmlns:p='urn:import:com.vaadin.polymer.paper.widget'
xmlns:i='urn:import:com.vaadin.polymer.iron.widget'>

<ui:style>

</ui:style>

<g:HTMLPanel>
    <!-- top data inputs -->
    <g:VerticalPanel width="100%" height="100%">
        <g:DockLayoutPanel width="100%" height="150px"
            unit="PX">
            <g:east size="200">
                <g:VerticalPanel>
                    <p:PaperMaterial>
                        <p:PaperInput label="Number" type="number"></p:PaperInput>
                        <p:PaperInput label="Date" type="date"></p:PaperInput>
                    </p:PaperMaterial>
                </g:VerticalPanel>
            </g:east>
        </g:DockLayoutPanel>
    </g:VerticalPanel>

    <!-- content panel -->
    <p:PaperMaterial>
        <g:HTMLPanel>
            Content goes here
        </g:HTMLPanel>
    </p:PaperMaterial>

    <!-- action buttons -->
    <g:VerticalPanel>
        <p:PaperMaterial>
            <p:PaperButton>New</p:PaperButton>
            <p:PaperButton>Edit</p:PaperButton>
            <p:PaperButton>Delete</p:PaperButton>
        </p:PaperMaterial>
    </g:VerticalPanel>
</g:HTMLPanel>

我的 HTML 主机页面代码如下

<!doctype html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<title>Web Application Starter Project</title>
<script type="text/javascript" language="javascript"
    src="opening_balance/opening_balance.nocache.js"></script>
</head>

<body>
</body>
</html>

它的输出如下

在此处输入图像描述

我想让它更聪明如下

在此处输入图像描述

4

2 回答 2

1

gwt 使用 css 设置所有元素的颜色。您可以使用 css 文件或手动设置，在 java 中设置所有样式。将 css 与客户端捆绑一起使用是首选方式。也许您应该首先阅读如何使用 css 设置小部件/元素的样式。
使用 uibinder 进行
样式设置 使用 css 文件进行样式设置

回答您的问题...要更改正文的背景颜色，您可以body向您的 css 文件添加样式：

body {
 background-color:green;
}

或者在java中做：

Document.get().getBody().getStyle().setBackgroundColor("green");

或将样式元素直接添加到您的 body 元素：

<!doctype html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<title>Web Application Starter Project</title>
<script type="text/javascript" language="javascript"
    src="opening_balance/opening_balance.nocache.js"></script>
</head>

<body style="background-color: green"></body>
</html>

可能您还想更改其他元素的背景，您可以通过与上述相同的方式来实现。

yourwidget.get().getBody().getStyle().setBackgroundColor("green");

CSS：
.yourstyle{ background-color: green; }
Java：
yourwidget.addStyleName("yourstyle");

于 2015-12-29T13:44:52.457 回答
0

GWT 网站上的聚合物教程怎么样？

http://www.gwtproject.org/doc/latest/polymer-tutorial/introduction.html

特别是这个： http: //www.gwtproject.org/doc/latest/polymer-tutorial/widgets-buildui.html

于 2016-01-21T12:14:22.190 回答