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聚合物材料設計