Using Polymer in GWT

Polymer have captured a lot of attention lately, and will likely gain more adopters in the coming years. For those who do not know what Polymer is, the best way to learn about it is to try it out : https://www.polymer-project.org/1.0/, do not bother too much about theory. Polymer can be defined as a library built on the top of html that allows to build customized and reusable web components e.g. buttons, animations, layouts, forms..etc. It also provides a set of ready to use Material Design elements to build your apps. The good news for GWT developpers is that Polymer can also be used in GWT, and it can be a good replacement for Widgets that are planned to be removed for the next release. Vaadin has done great job wrapping up Polymer for GWT, and I encourage GWT developpers to give it a try. The current version is maybe not production ready, but it seems like it has a bright future. In this tutorial, we will give gwt-polymer-elements a try.

Requirements:
GWT maven plugin
– GWT 2.8 version
–  gwt-polymer-elements
– for a full list of dependencies: please refer to this pom.xml
– Eclipse

You can create project in maven, and import it in Eclipse or your favorite IDE. After setting up the project, we can start using the components either as widgets or as elements.

Let’s take for example an iron-autogrow-textarea, which is a text area that grows with the size of the text, it can be added as follows:

IronAutogrowTextarea textArea = new IronAutogrowTextarea();
RootPanel.get().add(textArea);

Result:

After adding text:

Another example is paper-card, which a piece of paper that can be used for organizing sections and paragraphs :


PaperCard paperCard = new PaperCard();
paperCard.setHeading("Hello Wordl");
DivElement content = DivElement.as(DOM.createDiv());
content.setClassName("card-content");
content.setInnerText("Some Content");

DivElement action = DivElement.as(DOM.createDiv());
action.setClassName("card-action");
action.setInnerText("Some Action");

paperCard.getPolymerElement().appendChild(content);
paperCard.getPolymerElement().appendChild(action);

RootPanel.get().add(paperCard);

a paper card can have three sections: a heading, a content, and an action.

Result:

Another useful component provided by Polymer is paper-slider which a material design slider:


PaperSlider slider = new PaperSlider();
RootPanel.get().add(slider);

Result:

The full example is available here: https://github.com/gwidgets/polymergwtdemo

you can find more elements at: https://elements.polymer-project.org/browse

Important:

– Polymer.importHref() method which is used to load components does not work in Super Dev Mode, so a turnaround when working in Super Dev Mode is to add the links manually in your .html page.

References:

A demo of a chat app using polymer-gwt elements: https://www.youtube.com/watch?v=8E9Q8Atwcjo

GWT have added a new section dedicated to Polymer in their documentation: http://www.gwtproject.org/doc/latest/polymer-tutorial/introduction.html

         

Archive

Subscribe

Atom