GWT聚合物材料设计

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

它的输出如下

我想让它更聪明如下

来源

2015-12-27 Channa Jayamuni

所以要改变哪些元素的背景颜色？并shoudnt你加载polyfill在你的主页？例如：'' – Tobika

将样式添加到您的正常的元素，你这样做\t' \t。测试{ \t \t背景色：绿色; \t} \t Tobika

我想为身体背景设置颜色，并添加了'webcomponents.js'。但是没有任何反应 –

GWT是使用CSS来设置所有元素的颜色。你可以用css文件或手动完成，在java中设置所有样式。使用css与client bundle是首选的方法。可能你应该先阅读一下如何用CSS来设计你的小部件/元素。
styling with uibinder
styling with a css file

回答你的问题...... 改变身体的背景颜色，你可以添加一个body风格，你的CSS文件：

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

来源

2015-12-29 13:44:52 Tobika

我已经试过这个朋友但是没有为我工作 –

它可以工作，但是我猜你的身体上还有其他元素呃颜色。你应该检查哪些元素，你必须用萤火虫或类似的东西来设置颜色 – Tobika

什么在GWT网站聚合物教程？

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

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

来源

2016-01-21 12:14:22 Johny

GWT聚合​​物材料设计

回答

相关问题

GWT聚合物材料设计