Skip to content

Commit fb9e982

Browse files
tehapotehapo
committed
Merge pull request #75 from vaadin/JS_RC
Adding support for latest JsInterop syntax
2 parents bb7fc7e + dbd8cbd commit fb9e982

23 files changed

+517
-79
lines changed

‎README.md‎

Lines changed: 6 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@
55
## Introduction
66

77
- **Polymer**: is a JavaScript library for building web applications with Web Components.
8-
- **Polymer-Elements**: is a collection of widgets built in Polymer. The collection is divided in sections: _Iron, Paper, Gold, Neon, Platinum,_ etc.
9-
- **GWT-Polymer-Elements**: is a Java wrapper enabling Polymer Elements to be used in GWT projects. Right now it includes wrappers for [Paper](https://elements.polymer-project.org/browse?package=paper-elements) and [Iron](https://elements.polymer-project.org/browse?package=iron-elements) collections, but more might be added in the future.
8+
- **Polymer-Elements**: is a collection of widgets built in Polymer. The collection is divided in sections: _Iron, Paper, Gold, Neon, Platinum, Vaadin,_ etc.
9+
- **GWT-Polymer-Elements**: is a Java wrapper enabling Polymer Elements to be used in GWT projects. Right now it includes wrappers for [Paper](https://elements.polymer-project.org/browse?package=paper-elements), [Iron](https://elements.polymer-project.org/browse?package=iron-elements) and [Vaadin](https://vaadin.com/elements) collections, but more might be added in the future.
1010

1111
The library has been generated using the Vaadin [gwt-api-generator](https://github.com/vaadin/gwt-api-generator), an utility able to inspect polymer webcomponents and emit GWT Java code.
1212

13-
Because Polymer differentiates between collections, gwt-polymer-elements classes are prefixed with the same prefixes (_Iron, Paper_), in order to easily refer to the original web component, and to easily find the documentation related with it.
13+
Because Polymer differentiates between collections, gwt-polymer-elements classes are prefixed with the same prefixes (_Iron, Paper, Vaadin_), in order to easily refer to the original web component, and to easily find the documentation related with it.
1414

1515
## Demo
1616
Visit our [show case](http://vaadin.github.io/gwt-polymer-elements/demo/) to see how components look like, and to take a look to the example code using each component.
@@ -19,9 +19,9 @@
1919
When we parse the original components code to generate the Java API, we copy all the existing JS documentation so as it's available in the [javadoc](http://vaadin.github.io/gwt-polymer-elements/api/). Note that sometimes descriptions would refer to JS, but we consider that it's better to maintain the info.
2020

2121

22-
## Using the GWT Polymer/Paper library
22+
## Using the GWT library
2323

24-
_**NOTICE** : We make extensive use of `JsInterop` a new feature in `GWT` for easily interacting with JavaScript. It is experimental in `GWT-2.7` and `GWT-2.8-SNAPSHOT`. Thus, double check that you are using latest GWT, and you enable it via the **`-XjsInteropMode JS`** flag, otherwise you will get **`Uncaught java.lang.ClassCastException`** errors in the JavaScript console._
24+
_**NOTICE** : We make extensive use of `JsInterop` a new feature in `GWT` for easily interacting with JavaScript. It is experimental in `GWT-2.7` and stable in `GWT-2.8-SNAPSHOT`, but starting from gwt-polymer-elements-1.2.1.0.beta1, we don't support 2.7.0 anymore. Thus, double check that you are using latest GWT, and you enable it via the **`-XjsInteropMode JS_RC`** flag, otherwise you will get **`Uncaught java.lang.ClassCastException`** errors in the JavaScript console._
2525

2626
### Add vaadin-gwt-polymer-elements to your CLASSPATH
2727
The `.jar` file includes all the java code and web components of
@@ -36,7 +36,7 @@ Polymer Iron and Paper collections, so as you don't have to deal with the proces
3636
<dependency>
3737
<groupId>com.vaadin.polymer</groupId>
3838
<artifactId>vaadin-gwt-polymer-elements</artifactId>
39-
<version>1.2.1.0</version>
39+
<version>1.2.1.1</version>
4040
<scope>provided</scope>
4141
</dependency>
4242
</dependencies>
@@ -55,22 +55,6 @@ Polymer Iron and Paper collections, so as you don't have to deal with the proces
5555

5656
```
5757

58-
### Enable `JsInterop` mode
59-
60-
- Finally you must add the experimental JsInterop flag to the GWT compiler either modifying the `pom.xml` file if you use maven, or adding the option `-XjsInteropMode JS` to your IDE GWT SuperDevMode launcher.
61-
62-
```xml
63-
<plugin>
64-
<groupId>org.codehaus.mojo</groupId>
65-
<artifactId>gwt-maven-plugin</artifactId>
66-
<configuration>
67-
...
68-
<jsInteropMode>JS</jsInteropMode>
69-
</configuration>
70-
...
71-
</plugin>
72-
```
73-
7458
### Add the Web Components Polyfill
7559

7660
- Nowadays, only Chrome has full native support for Web Components, therefore, to make your project work in all browsers, you have to include Polymer Polyfill, very early in your `.html` host page. Since `vaadin-gwt-polymer-elements` already is bundled with the polyfill, so you only have to replace `myapp` fragments with your actual application name.

‎demo/pom.xml‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<groupId>com.vaadin.polymer</groupId>
88
<artifactId>gwt-polymer-elements-demo</artifactId>
99
<packaging>war</packaging>
10-
<version>1.2.1.0-alpha1-SNAPSHOT</version>
10+
<version>1.2.3.0-SNAPSHOT</version>
1111
<properties>
1212
<gwtVersion>2.8.0-SNAPSHOT</gwtVersion>
1313
<gwtPolymerVersion>${project.version}</gwtPolymerVersion>
@@ -34,18 +34,28 @@
3434
</repository>
3535
</repositories>
3636

37+
<dependencyManagement>
38+
<dependencies>
39+
<dependency>
40+
<groupId>com.google.gwt</groupId>
41+
<artifactId>gwt</artifactId>
42+
<version>${gwtVersion}</version>
43+
<type>pom</type>
44+
<scope>import</scope>
45+
</dependency>
46+
</dependencies>
47+
</dependencyManagement>
48+
3749
<dependencies>
3850
<dependency>
3951
<groupId>com.google.gwt</groupId>
4052
<artifactId>gwt-user</artifactId>
4153
<scope>provided</scope>
42-
<version>${gwtVersion}</version>
4354
</dependency>
4455
<dependency>
4556
<groupId>com.google.gwt</groupId>
4657
<artifactId>gwt-codeserver</artifactId>
4758
<scope>provided</scope>
48-
<version>${gwtVersion}</version>
4959
</dependency>
5060

5161
<!-- this is the dependency to the "jar"-subproject -->
@@ -60,6 +70,12 @@
6070
<artifactId>gwtquery</artifactId>
6171
<version>1.4.4-SNAPSHOT</version>
6272
<scope>provided</scope>
73+
<exclusions>
74+
<exclusion>
75+
<groupId>com.google.gwt</groupId>
76+
<artifactId>gwt-elemental</artifactId>
77+
</exclusion>
78+
</exclusions>
6379
</dependency>
6480
</dependencies>
6581

@@ -83,7 +99,6 @@
8399
<runTarget>demo.html</runTarget>
84100
<draftCompile>false</draftCompile>
85101
<optimizationLevel>9</optimizationLevel>
86-
<jsInteropMode>JS</jsInteropMode>
87102
<disableCastChecking>true</disableCastChecking>
88103
<disableClassMetadata>true</disableClassMetadata>
89104
<enableAssertions>false</enableAssertions>

‎demo/src/main/java/com/vaadin/polymer/demo/client/Demo.java‎

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
import com.google.gwt.user.client.ui.RootPanel;
77
import com.vaadin.polymer.demo.client.sampler.Sampler;
88
import com.vaadin.polymer.Polymer;
9-
import com.vaadin.polymer.elemental.Function;
109

1110
public class Demo implements EntryPoint {
1211

@@ -28,21 +27,28 @@ public void onModuleLoad() {
2827
"paper-styles",
2928
// Styles for paper examples
3029
"paper-styles/demo-pages.html",
31-
// Iconsets must be loaded before using any component depending on them
32-
// Iron comes with the collections:
33-
// communication, device, editor, hardware, image, iron, maps, notifications, social.
34-
"iron-icons/iron-icons.html",
30+
// Iconsets must be loaded before using any component depending on them.
31+
// We load all Iron and Vaadin collections.
32+
"iron-icons",
3533
"iron-icons/communication-icons.html",
36-
"iron-flex-layout/iron-flex-layout.html",
37-
// Animation must be loaded at the beginning
38-
"neon-animation/neon-animations.html"
34+
"iron-icons/av-icons.html",
35+
"iron-icons/device-icons.html",
36+
"iron-icons/editor-icons.html",
37+
"iron-icons/hardware-icons.html",
38+
"iron-icons/image-icons.html",
39+
"iron-icons/maps-icons.html",
40+
"iron-icons/notification-icons.html",
41+
"iron-icons/social-icons.html",
42+
"vaadin-icons",
43+
// Flex-layout and animations are used in all the app, loading it early.
44+
"iron-flex-layout",
45+
"neon-animation"
3946
));
40-
Polymer.whenReady(new Function() {
41-
public Object call(Object arg) {
42-
// The app is executed when all imports succeed.
43-
RootPanel.get().add(new Sampler());
44-
return null;
45-
}
47+
48+
Polymer.whenReady(o -> {
49+
// The app is executed when all imports succeed.
50+
RootPanel.get().add(new Sampler());
51+
return null;
4652
});
4753
}
4854
}

‎demo/src/main/java/com/vaadin/polymer/demo/client/sampler/Sampler.java‎

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@
2020
import com.google.gwt.query.client.plugins.ajax.Ajax;
2121
import com.google.gwt.resources.client.CssResource;
2222
import com.google.gwt.uibinder.client.UiBinder;
23-
import com.google.gwt.uibinder.client.UiFactory;
2423
import com.google.gwt.uibinder.client.UiField;
2524
import com.google.gwt.uibinder.client.UiHandler;
2625
import com.google.gwt.user.client.History;
@@ -35,8 +34,11 @@
3534
import com.vaadin.polymer.demo.client.sampler.gwt.UiBinderElement;
3635
import com.vaadin.polymer.demo.client.sampler.gwt.UiBinderWidget;
3736
import com.vaadin.polymer.demo.client.sampler.highlight.JsHighlight;
37+
import com.vaadin.polymer.demo.client.sampler.iron.IronAjaxSample;
3838
import com.vaadin.polymer.demo.client.sampler.iron.IronCollapseSample;
39+
import com.vaadin.polymer.demo.client.sampler.iron.IronIconsSample;
3940
import com.vaadin.polymer.demo.client.sampler.iron.IronImageSample;
41+
import com.vaadin.polymer.demo.client.sampler.iron.IronInputSample;
4042
import com.vaadin.polymer.demo.client.sampler.iron.IronListSample;
4143
import com.vaadin.polymer.demo.client.sampler.iron.IronSelectorSample;
4244
import com.vaadin.polymer.demo.client.sampler.paper.ButtonSample;
@@ -60,8 +62,9 @@
6062
import com.vaadin.polymer.demo.client.sampler.paper.ToastSample;
6163
import com.vaadin.polymer.demo.client.sampler.paper.ToggleButtonSample;
6264
import com.vaadin.polymer.demo.client.sampler.paper.ToolbarSample;
65+
import com.vaadin.polymer.demo.client.sampler.vaadin.VaadinComboBoxSample;
6366
import com.vaadin.polymer.demo.client.sampler.vaadin.VaadinGridSample;
64-
import com.vaadin.polymer.elemental.Function;
67+
import com.vaadin.polymer.demo.client.sampler.vaadin.VaadinIconsSample;
6568
import com.vaadin.polymer.iron.widget.IronAjax;
6669
import com.vaadin.polymer.iron.widget.IronCollapse;
6770
import com.vaadin.polymer.iron.widget.IronSelector;
@@ -136,11 +139,16 @@ private Widget createWidget(String name) {
136139
case "ToastSample": return new ToastSample();
137140
case "ToggleButtonSample": return new ToggleButtonSample();
138141
case "ToolbarSample": return new ToolbarSample();
142+
case "IronAjaxSample": return new IronAjaxSample();
143+
case "IronIconsSample": return new IronIconsSample();
144+
case "IronInputSample": return new IronInputSample();
139145
case "IronCollapseSample": return new IronCollapseSample();
140146
case "IronImageSample": return new IronImageSample();
141147
case "IronListSample": return new IronListSample();
142148
case "IronSelectorSample": return new IronSelectorSample();
143149
case "VaadinGridSample": return new VaadinGridSample();
150+
case "VaadinComboBoxSample": return new VaadinComboBoxSample();
151+
case "VaadinIconsSample": return new VaadinIconsSample();
144152
}
145153
return null;
146154
}
@@ -176,13 +184,18 @@ public Sampler() {
176184
addSample("Toolbar", "paper", "ToolbarSample");
177185

178186
addCategory("iron", "Iron Elements");
187+
addSample("Ajax", "iron", "IronAjaxSample");
188+
addSample("Icons", "iron", "IronIconsSample");
189+
addSample("Input", "iron", "IronInputSample");
179190
addSample("Collapse", "iron", "IronCollapseSample");
180191
addSample("Image", "iron", "IronImageSample");
181192
addSample("List", "iron", "IronListSample");
182193
addSample("Selector", "iron", "IronSelectorSample");
183194

184195
addCategory("vaadin", "Vaadin Elements");
185196
addSample("Grid", "vaadin", "VaadinGridSample");
197+
addSample("Combo box", "vaadin", "VaadinComboBoxSample");
198+
addSample("Vaadin Icons", "vaadin", "VaadinIconsSample");
186199

187200
addCategory("gwt", "GWT Integration");
188201
addSample("Widget Java API", "gwt", "JavaApiWidget", false);
@@ -198,17 +211,16 @@ public void onValueChange(ValueChangeEvent<String> event) {
198211

199212
ironAjax.addResponseHandler(event -> {
200213
contacts = ironAjax.getLastResponse().cast();
214+
selectItem(Window.Location.getHash().replace("#", ""));
201215
Polymer.endLoading(this.getElement(), collapseMap.lastEntry()
202-
.getValue().getElement(), o -> {
203-
selectItem(Window.Location.getHash().replace("#", ""));
204-
return null;
205-
});
216+
.getValue().getElement());
206217
});
207218

208219
}
209220

210221
private void showSource(String category, String file) {
211-
Ajax.get(API_PATH + category + "/" + file)
222+
String branch = Window.Location.getParameter("ref");
223+
Ajax.get(API_PATH + category + "/" + file + "?" + (branch != null ? "ref=" + branch : ""))
212224
.done(new com.google.gwt.query.client.Function() {
213225
native String atob(String b64) /*-{
214226
try {
@@ -349,7 +361,10 @@ public void onClick(ClickEvent event) {
349361
History.newItem(category + "/" + path, false);
350362
currentLabel.setInnerText(name);
351363
xmlButton.setVisible(uixml);
352-
setOpened(collapse, true);
364+
collapse.ready(o -> {
365+
setOpened(collapse, true);
366+
return null;
367+
});
353368
closeMenu();
354369
}
355370
}
@@ -359,8 +374,4 @@ private void closeMenu() {
359374
drawerPanel.closeDrawer();
360375
}
361376
}
362-
363-
public static native void async(Function f, int timeout) /*-{
364-
$wnd.Polymer.Base.async(f, timeout);
365-
}-*/;
366377
}

‎demo/src/main/java/com/vaadin/polymer/demo/client/sampler/Sampler.ui.xml‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -106,10 +106,12 @@
106106
paper-header-panel[mode="waterfall-tall"] #mainContainer {
107107
overflow: auto;
108108
}
109-
109+
.hidden {
110+
opacity: 0;
111+
}
110112
</ui:style>
111113

112-
<g:HTMLPanel>
114+
<g:HTMLPanel addStyleNames="{style.hidden}">
113115
<style is='custom-style'>
114116
.iconpolymer {
115117
--paper-fab-background: var(--paper-purple-500);
@@ -135,7 +137,7 @@
135137
<p:PaperToolbar addStyleNames="{style.toolbar} ">
136138
<p:PaperFab ui:field="logo3" icon="polymer" attributes="mini url:http://polymer-project.org" addStyleNames="iconpolymer"></p:PaperFab>
137139
<p:PaperFab ui:field="logo2" src="img/gwt.png" attributes="mini url:http://gwtproject.org" addStyleNames="icongwt"></p:PaperFab>
138-
<p:PaperFab ui:field="logo1" src="img/vaadin.png" attributes="mini url:http://vaadin.com" addStyleNames="iconvaadin"></p:PaperFab>
140+
<p:PaperFab ui:field="logo1" icon="vaadin-icons:vaadin-v" attributes="mini url:http://vaadin.com/gwt" addStyleNames="iconvaadin"></p:PaperFab>
139141
</p:PaperToolbar>
140142
<g:FlowPanel ui:field="listPanel" addStyleNames="{style.list}"/>
141143
</p:PaperHeaderPanel>

‎demo/src/main/java/com/vaadin/polymer/demo/client/sampler/gwt/UiBinderElement.java‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
import com.google.gwt.uibinder.client.UiField;
99
import com.google.gwt.user.client.ui.Widget;
1010
import com.vaadin.polymer.Polymer;
11+
import com.vaadin.polymer.elemental.EventListener;
1112
import com.vaadin.polymer.iron.event.IronSelectEvent;
1213
import com.vaadin.polymer.paper.PaperTabElement;
1314
import com.vaadin.polymer.paper.PaperTabsElement;
@@ -28,9 +29,9 @@ public UiBinderElement() {
2829
// import web components hrefs by hand, and continue the flow
2930
// asynchronously
3031
Polymer.importHref(Arrays.asList(PaperTabsElement.SRC, PaperTabElement.SRC), o -> {
31-
paperTabs.addEventListener(IronSelectEvent.NAME, new IronSelectEvent.Listener() {
32+
paperTabs.addEventListener(IronSelectEvent.NAME, new EventListener<IronSelectEvent>() {
3233
public void handleEvent(IronSelectEvent event) {
33-
PaperTabElement tab = (PaperTabElement) event.getDetail().getItem();
34+
PaperTabElement tab = (PaperTabElement)event.getDetail().getItem();
3435
toast.setText("Tab \"" + tab.getTextContent() + "\" has been selected");
3536
toast.show();
3637
}

‎demo/src/main/java/com/vaadin/polymer/demo/client/sampler/gwt/UiBinderWidget.java‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ public UiBinderWidget() {
4040

4141
@UiHandler("tabs")
4242
void tabSelected(IronSelectEvent event) {
43-
PaperTabElement tab = (PaperTabElement) event.getNativeEvent().getDetail().getItem();
43+
PaperTabElement tab = (PaperTabElement) event.getItem();
4444
toast.setText("widget event handler:" + tab.getTextContent());
4545
toast.show();
4646
}

‎demo/src/main/java/com/vaadin/polymer/demo/client/sampler/iron/IronAjaxSample.java‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
package com.vaadin.polymer.demo.client.sampler.iron;
2+
3+
import com.google.gwt.core.client.GWT;
4+
import com.google.gwt.uibinder.client.UiBinder;
5+
import com.google.gwt.uibinder.client.UiField;
6+
import com.google.gwt.uibinder.client.UiHandler;
7+
import com.google.gwt.user.client.ui.Composite;
8+
import com.google.gwt.user.client.ui.HTMLPanel;
9+
import com.vaadin.polymer.Polymer;
10+
import com.vaadin.polymer.elemental.Template;
11+
import com.vaadin.polymer.iron.widget.IronAjax;
12+
import com.vaadin.polymer.iron.widget.event.ResponseEvent;
13+
14+
public class IronAjaxSample extends Composite {
15+
interface SampleUiBinder extends UiBinder<HTMLPanel, IronAjaxSample> {
16+
}
17+
18+
private static SampleUiBinder ourUiBinder = GWT.create(SampleUiBinder.class);
19+
20+
@UiField IronAjax ajax;
21+
@UiField Template repeat;
22+
23+
public IronAjaxSample() {
24+
initWidget(ourUiBinder.createAndBindUi(this));
25+
}
26+
27+
@UiHandler("ajax")
28+
void onResponse(ResponseEvent e) {
29+
repeat.setItems(Polymer.property(ajax.getLastResponse(), "items"));
30+
}
31+
}

0 commit comments

Comments
 (0)