GWT 聚合物材料设计答案

【问题标题】：GWT Polymer material designGWT 聚合物材料设计
【发布时间】：2016-04-01 16:36:40
【问题描述】：

我正在使用 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>

输出如下

我想让它更智能如下

【问题讨论】：

那么你想改变哪些元素的背景颜色？？你应该在你的主机页面中加载 polyfill 吗？例如：<script src="/bower_components/webcomponentsjs/webcomponents.js"></script>
要为你的元素添加样式，通常你会做类似<ui:style> .test { background-color: green; } </ui:style><g:FlowPanel styleName="{style.test}">的操作，如果你想改变聚合物元素的风格，你应该在聚合物页面上查找语法和访问方式
我想为正文背景设置颜色。我添加了webcomponents.js。但是什么也没发生。

标签： java css gwt polymer gwt-polymer

【解决方案1】：

gwt 正在使用 css 设置所有元素的颜色。您可以使用 css 文件或手动设置，在 java 中设置所有样式。使用带有client bundle 的css 是首选方式。也许您应该首先阅读如何使用 css 设置小部件/元素的样式。
styling with uibinder
styling with a css file

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

body {
 background-color:green;
}

或者在java中做：

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

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

<!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");

【讨论】：

它有效，但我猜你身上还有其他元素有另一种颜色。你应该检查你必须用萤火虫或类似的东西设置颜色的元素

【解决方案2】：

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

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

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

【讨论】：