I am exploring vaadin polymer to use for my new assignement. Following are the details:-
JDK 1.8
GWT 2.7.0
AppEngine 1.9.30
vaadin-gwt-polymer-elements-1.2.1.0.jar
Source Code:
<?xml version="1.0" encoding="UTF-8"?>
package com.abc.planbuild3.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
/**
- Entry point classes define
onModuleLoad().
/
public class Planbuild3 implements EntryPoint {
/*- The message displayed to the user when the server cannot be reached or
- returns an error.
*/
public void onModuleLoad() {
RootPanel.get().add(new DevicePlanning());
}
}
package com.abc.planbuild3.client;
import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Widget;
public class DevicePlanning extends Composite {
private static DevicePlanningUiBinder uiBinder = GWT
.create(DevicePlanningUiBinder.class);
interface DevicePlanningUiBinder extends UiBinder<Widget, DevicePlanning> {
}
public DevicePlanning() {
initWidget(uiBinder.createAndBindUi(this));
}
}
<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’>
<g:HTMLPanel addStyleNames="header-panel-sample">
<style is="custom-style">
.header-panel-sample {
padding: 40px;
}
.header-panel-sample paper-header-panel {
float: left;
width: 240px;
height: 240px;
margin: 12px;
@apply(--shadow-elevation-2dp);
}
.header-panel-sample .paper-header {
height: 60px;
font-size: 16px;
line-height: 60px;
padding: 0 10px;
color: white;
transition: height 0.2s;
}
.header-panel-sample .paper-header.tall {
height: 120px;
}
.header-panel-sample .paper-header.medium-tall {
height: 100px;
line-height: 50px;
}
.header-panel-sample .content {
height: 2000px;
}
.header-panel-sample .cover {
margin: 60px;
}
.header-panel-sample .blue .paper-header {
background-color: var(--paper-light-blue-500);
}
.header-panel-sample .red .paper-header {
background-color: var(--paper-red-500);
}
.header-panel-sample .orange .paper-header {
background-color: var(--paper-amber-500);
}
.header-panel-sample .green .paper-header {
background-color: var(--paper-green-500);
}
.header-panel-sample .cyan .paper-header {
background-color: var(--paper-cyan-500);
}
.header-panel-sample .lime .paper-header {
background-color: var(--paper-lime-500);
}
.header-panel-sample .pink .paper-header {
background-color: var(--paper-pink-a200);
}
/* TODO: replace these with background: linear-gradient(white,
var(...))
when custom properties allow it */
.header-panel-sample .blue .content {
background: linear-gradient(white, #b3e5fc);
}
.header-panel-sample .red .content {
background: linear-gradient(white, #ffcdd2);
}
.header-panel-sample .orange .content {
background: linear-gradient(white, #ffecb3);
}
.header-panel-sample .green .content {
background: linear-gradient(white, #c8e6c9);
}
.header-panel-sample .cyan .content {
background: linear-gradient(white, #b2ebf2);
}
.header-panel-sample .lime .content {
background: linear-gradient(white, #f0f4c3);
}
.header-panel-sample .pink .content {
background: linear-gradient(white, #f8bbd0);
}
</style>
<div class="layout wrap inline center-center">
<p:PaperHeaderPanel addStyleNames="blue">
<div class="paper-header">standard</div>
<div class="content"></div>
</p:PaperHeaderPanel>
<p:PaperHeaderPanel mode="seamed" addStyleNames="red">
<div class="paper-header">seamed</div>
<div class="content"></div>
</p:PaperHeaderPanel>
<p:PaperHeaderPanel mode="scroll" addStyleNames="orange">
<div class="paper-header">scroll</div>
<div class="content"></div>
</p:PaperHeaderPanel>
<p:PaperHeaderPanel mode="waterfall" addStyleNames="green">
<div class="paper-header">waterfall</div>
<div class="content"></div>
</p:PaperHeaderPanel>
<p:PaperHeaderPanel mode="waterfall-tall" addStyleNames="pink">
<div class="paper-header">waterfall-tall</div>
<div class="content"></div>
</p:PaperHeaderPanel>
<paper-header-panel mode="waterfall-tall" tall-class="medium-tall" class="cyan">
<div class="paper-header">waterfall-tall<br/>tall-class: medium-tall</div>
<div class="content"></div>
</paper-header-panel>
<p:PaperHeaderPanel mode="cover" addStyleNames="lime">
<div class="paper-header tall">cover</div>
<div class="content cover"></div>
</p:PaperHeaderPanel>
</div>
</g:HTMLPanel>
</ui:UiBinder>
Error
:
Compilation completed in 0.00 seconds
Added 0 units to cache since last cleanup.
Tracing compile failure path for type ‘com.vaadin.polymer.neon.OpaqueAnimationElement’
Errors in ‘com/vaadin/polymer/neon/OpaqueAnimationElement.java’
Line 87: JsType methods cannot overload another method.
Checked 1 dependencies for errors.
Tracing compile failure path for type ‘com.vaadin.polymer.neon.HeroAnimationElement’
Errors in ‘com/vaadin/polymer/neon/HeroAnimationElement.java’
Line 126: JsType methods cannot overload another method.
Checked 1 dependencies for errors.