I am creating a design using gwt and vaadin gwt-polymer plugin and combine them with RESTful web service. But I am confused how to set background colors. I am new to gwt and i couldn't find any tutorial to solve my problem.
My uibinder code as follows.
<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>
My HTML host page code as follows
<!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>
It's output as follows
I want to make it more smart as follows
gwt is using css to set colors of all elements. you can do that with a css file or manually, setting all styles in java. using css with a client bundle is the preferred way. probably you should first read how to style your widgets/elements with css.
styling with uibinder
styling with a css file
to answer your question... to change the background color of the body you can add a
bodystyle to your css file:or do it in java:
or add a style element directly to your body element:
probably you want to change the background of other elements also, you can achieve that the same way as described above.
yourwidget.get().getBody().getStyle().setBackgroundColor("green");css:
.yourstyle{ background-color: green; }java:
yourwidget.addStyleName("yourstyle");