GWT Polymer material design

Question

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

so which elements background color you want to change?? and shoudnt you load polyfill in your hostpage?? example: `` — Tobika, Dec 28 '15 at 08:42
to add styles to your elements normally you do something like ` .test { background-color: green; } ` if you want to change the style of polymer elements you should look up the snytax and way of accessing it on the polymer page — Tobika, Dec 28 '15 at 08:50
I want to set color for body background. and I have added `webcomponents.js`. But nothing happens. — Channa Jayamuni, Dec 29 '15 at 12:31

score 1 · Answer 1 · answered Dec 29 '15 at 13:44

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 body style to your css file:

body {
 background-color:green;
}

or do it in java:

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

or add a style element directly to your body element:

<!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>

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

it works, but i guess that there are other elements over your body that have another color. you should check out on which element you have to set the color with firebug or something like that — Tobika, Dec 30 '15 at 18:25

score 0 · Answer 2 · answered Jan 21 '16 at 12:14

0

What about the polymer tutorial in GWT site?

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

especially this: http://www.gwtproject.org/doc/latest/polymer-tutorial/widgets-buildui.html

answered Jan 21 '16 at 12:14

Johny

501
5
16

GWT Polymer material design

2 Answers2