CODEWITHSUNDEEP
javacssgwtpolymergwt-polymer
Channa Jayamuni
Channa Jayamuni

Reputation: 1905

GWT Polymer material design

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

enter image description here

I want to make it more smart as follows

enter image description here

Upvotes: 0

Views: 1323

Answers (2)

Johny
Johny

Reputation: 531

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

Upvotes: 0

Tobika
Tobika

Reputation: 1062

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

Upvotes: 1

Related Questions