{"id":15379182,"url":"https://github.com/manolo/gwt-polymer-elements","last_synced_at":"2025-08-20T12:32:18.608Z","repository":{"id":28960677,"uuid":"32486843","full_name":"manolo/gwt-polymer-elements","owner":"manolo","description":"Polymer Web Components for GWT. A collection of Material Design widgets for desktop and mobile.","archived":false,"fork":false,"pushed_at":"2018-10-23T02:59:41.000Z","size":53532,"stargazers_count":157,"open_issues_count":22,"forks_count":49,"subscribers_count":38,"default_branch":"master","last_synced_at":"2024-12-10T02:10:21.623Z","etag":null,"topics":["components","elemental2","gwt","java","jsinterop","material-design","mobile","polymer","pwa","web-components","widgets"],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/manolo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-03-18T22:05:15.000Z","updated_at":"2024-10-15T02:59:18.000Z","dependencies_parsed_at":"2022-08-17T17:40:57.612Z","dependency_job_id":null,"html_url":"https://github.com/manolo/gwt-polymer-elements","commit_stats":null,"previous_names":["vaadin/gwt-polymer-elements"],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manolo%2Fgwt-polymer-elements","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manolo%2Fgwt-polymer-elements/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manolo%2Fgwt-polymer-elements/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manolo%2Fgwt-polymer-elements/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/manolo","download_url":"https://codeload.github.com/manolo/gwt-polymer-elements/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230423564,"owners_count":18223435,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["components","elemental2","gwt","java","jsinterop","material-design","mobile","polymer","pwa","web-components","widgets"],"created_at":"2024-10-01T14:18:30.027Z","updated_at":"2024-12-19T11:13:13.261Z","avatar_url":"https://github.com/manolo.png","language":"Java","readme":"# gwt-polymer-elements\n\n[![Join the chat at https://gitter.im/vaadin/gwt-polymer-elements](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/vaadin/gwt-polymer-elements?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\n\n## NOTICE: This library is no longer supported by Vaadin\n\nVaadin transfers the ownership of this library, thus Vaadin no longer provides support or does active development on it. \n\nWe took this decision because once demonstrated that polymer elements could be easily be integrated in GWT, we want to invest our team’s time in adding valuable user benefits to Vaadin Core Elements, and pass the baton to the community to do integrations with other frameworks.\n\n**In addition, we are happy to announce that ownership of the repository will be transferred by 20 Apr 2017 to [@manolo](https://github.com/manolo), who will continue to maintain it.**\n\n**If you are willing to participate as a collaborator, please leave a comment in [#151](https://github.com/vaadin/gwt-polymer-elements/issues/151). The collaborators will be granted access after transferring. We encourage contribution in any form and shape.**\n\n## Introduction\n\n- **Polymer**: is a JavaScript library for building web applications with Web Components.\n- **Polymer-Elements**: is a collection of widgets built in Polymer. The collection is divided in sections: _Iron, Paper, Gold, Neon, Platinum, Vaadin,_ etc.\n-  **GWT-Polymer-Elements**: is a Java wrapper enabling Polymer Elements to be used in GWT projects. Right now it includes wrappers for [Iron](https://elements.polymer-project.org/browse?package=iron-elements),\n[Paper](https://elements.polymer-project.org/browse?package=paper-elements),\n[App](https://elements.polymer-project.org/browse?package=app-elements),\n[Platinum](https://elements.polymer-project.org/browse?package=platinum-elements) and\n[Vaadin](https://vaadin.com/elements) collections, but more might be added in the future.\n\n 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.\n\n 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.\n\n## Demo\n Visit our [show case](http://manolo.github.io/gwt-polymer-elements/demo/) to see how components look like, and to take a look to the example code using each component.\n\n## Javadocs\n 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.\n\n\n## Using the GWT library\n\nYou need at least GWT-2.8.0 to use the library.\n\n### Add vaadin-gwt-polymer-elements to your CLASSPATH\nThe `.jar` file includes all the java code and web components of\nPolymer Iron and Paper collections, so as you don't have to deal with the process of downloading and deploying all js wrapped libraries and components.\n\n##### Using maven\n\n - If your project uses maven add the following dependency to your `pom.xml`\n\n  ```xml\n   \u003cdependencies\u003e\n     \u003cdependency\u003e\n       \u003cgroupId\u003ecom.vaadin.polymer\u003c/groupId\u003e\n       \u003cartifactId\u003evaadin-gwt-polymer-elements\u003c/artifactId\u003e\n       \u003cversion\u003e1.7.0.0\u003c/version\u003e\n       \u003cscope\u003eprovided\u003c/scope\u003e\n     \u003c/dependency\u003e\n   \u003c/dependencies\u003e\n  ```\n\n##### Manually\n- otherwise you can [download](http://repo1.maven.org/maven2/com/vaadin/polymer/vaadin-gwt-polymer-elements/)\n  the `vaadin-gwt-polymer-elements-1.7.0.0.jar` archive and put it in your gwt project classpath.\n\n### Update your module configuration\n\n- Add this line to your `*.gwt.xml` module file:\n\n ```xml\n  \u003cinherits name=\"com.vaadin.polymer.Elements\"/\u003e\n\n ```\n\n### Add the Web Components Polyfill (Optional). \n\n- Only Chrome has full native support for Web Components nowadays, therefore, to make your project work with all modern browsers, you have to include the WebComponents Polyfill.\n\n  If you use the polymer components as `Widgets`, the library will lazy load it when needed.\nOtherwise load it very early in your `.html` host page as it is shown in the following code.\n\n```html\n\u003chead\u003e\n    \u003cscript src=\"myapp/bower_components/webcomponentsjs/webcomponents.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"myapp/myapp.nocache.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n```\n\n## Consuming Web Components in GWT\n\nVaadin `gwt-polymer-elements` bundles classes to build your application using either `Widgets` or JsInterop `Elements`. The former is the classic approach, while the latter will become the new tendency.\n\nBut Right now, `Elements` is the most difficult way because GWT lacks of a complete `Elemental-2.0` API relying on `JsInterop`.\nWe provide a very small set of elemental interfaces limited to those needed for our implementation, they will be replaced by Elemental-2.0 when it was available.\n\nIn summary, for classic and production GWT projects it would be easier to use the `Widget` since the API would not have important changes. Otherwise, if you want to get rid of the widget hierarchy we recommend to start using the `Element` API mixing it with some DOM manipulation library like `gwtquery` or just the methods included in the elemental API.\n\n\n - Using the classic **Widget API** in Java.\n\n  ```java\n  PaperButton button = new PaperButton();\n  button.setIcon(\"polymer\");\n  button.setLabel(\"Polymer\");\n  button.setRaised(true);\n\n  button.addClickHandler(new ClickHandler() {\n    public void onClick(ClickEvent event) {\n      // ...\n    }\n  });\n\n  RootPanel.get().add(button);\n  ```\n\n  _Note: Widget constructors accept any HTML content as argument which is appended to the web component rendered DOM_\n\n - Using the **Element API** in Java.\n\n  ```java\n  // Create a new instance of PaperButton\n  PaperButtonElement button = Polymer.createElement(PaperButtonElement.TAG);\n  // Set some properties\n  button.setIcon(\"polymer\");\n  button.setLabel(\"Polymer\");\n  button.setRaised(true);\n\n  // Add event listeners\n  button.addEventListener(\"click\", new EventListener() {\n      public void onBrowserEvent(Event event) {\n      // ...\n      }\n  });\n\n  // Append to the html document\n  RootPanel.get().getElement().appendChild(button);\n  ```\n\n - Using `Widgets` or `Elements` in **UiBinder**\n\n  ```xml\n   \u003cui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'\n    xmlns:g='urn:import:com.google.gwt.user.client.ui'\n    xmlns:p='urn:import:com.vaadin.polymer.paper.widget'\u003e\n\n   \u003cui:style\u003e\n     .container paper-button.colored {\n       background: #4285f4;\n       color: #fff;\n     }\n   \u003c/ui:style\u003e\n\n   \u003cg:HTMLPanel\u003e\n     \u003c!-- As Widget --\u003e\n     \u003cp:PaperButton toggles=\"true\" raised=\"true\" active=\"true\" addStyleNames=\"{style.colored}\"\u003eactive\u003c/p:PaperButton\u003e\n\n     \u003c!-- As Element --\u003e\n     \u003cpaper-button raised=\"\" noink=\"\"\u003eClick me\u003c/paper-button\u003e\n   \u003c/g:HTMLPanel\u003e\n\n  ```\n\n## **Styling** your application.\n\n  Polymer uses Shadow DOM styling rules for providing scoped styling of the element’s local DOM. It supports  some extra syntax which is not understable by the GWT GSS parser.\n\n  Polymer takes care of its syntax parsing any `\u003cstyle\u003e` block you might have in your host page, but if you want to specify some styling rules in UiBinder, you have to add your style blocks to any panel.\n\n  ```xml\n\u003cui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'\n    xmlns:g='urn:import:com.google.gwt.user.client.ui'\n    xmlns:p='urn:import:com.vaadin.polymer.paper.widget'\u003e\n\n\u003cg:HTMLPanel\u003e\n  \u003cstyle is=\"custom-style\"\u003e\n     paper-toolbar paper-icon-button {\n        --paper-icon-button-ink-color: var(--paper-indigo-500);\n     }\n  \u003c/style\u003e\n  \u003cp:PaperToolbar\u003e\n     \u003cp:PaperIconButton icon=\"menu\"/\u003e\n     \u003cspan class=\"title\"\u003eToolbar\u003c/span\u003e\n  \u003c/p:PaperToolbar\u003e\n\u003c/g:HTMLPanel\u003e\n  ```\n\n  For more information about polymer styling syntax visit their [documentation](https://www.polymer-project.org/1.0/docs/devguide/styling.html)\n\n## Notes\n\n### Java Sources\n  If you want to dive into `.java` sources, we don't maintain generated files, thus you need to download the [vaadin-gwt-polymer-elements-x.x.x-sources.jar](http://repo1.maven.org/maven2/com/vaadin/polymer/vaadin-gwt-polymer-elements/) bundle.\n  Otherwise you might take a look java helper classes and templates look in the [gwt-api-generator](https://github.com/manolo/gwt-api-generator) project.\n\n### Importing Web Components\n  Before using any component, you have to import the appropriate files. But `gwt-polymer-elements` comes with some utilities so as you it would be done automatically.\n\n - **Widgets** :\n  When you use a widget, the import happens automatically\n ```\n     PaperButton button = new PapperButton();\n ```\n - **Elements** :\n  Create new components through the `Polymer` helper class\n ```\n     PaperButtonElement button = Polymer.createElement(PaperButtonElement.TAG);\n ```\n - **Dynamic imports** :\n  `Polymer` has a couple of methods to do the import dynamically\n ```\n     Polymer.importHref(\"paper-button/paper-button.html\");\n ```\n - **Static imports** :\n  Adding tags to the hosted page head is the traditional way to make webcomponents available if you want them in a mixed application (DOM, JS, or GWT) or if you want to be sure that web components are available from the beginning.\n ```\n    \u003clink rel='import' href='application_context/bower_components/paper-button/paper-button.html'\u003e\u003c/link\u003e\n ```\n\n### Asynchronous issues\n   Web Components could be registered and initialised asynchronously. Thus `gwt-polymer-elements` comes with some methods which helps to run callbacks when the component is actually ready.\n   \n\n ```\n   PaperButtonElement button = Polymer.createElement(PaperButtonElement.TAG);\n   Polymer.ready(button, new Function() {\n      public Object call(Object args) {\n         // Set button properties here\n      }\n   })\n\n   PolymerButton button = new PolymerButton();\n   // You could set methods here\n   button.setFoo(bar);\n\n   button.ready(new Function() {\n      public Object call(Object args) {\n        // But you have to enclose in a callback calls to element methods\n      }\n   });\n\n\n   Polymer.importHref(Arrays.asList(\"paper-tabs\", \"paper-tab-element\"), new Function() {\n      public Object call(Object args) {\n         // Create your elements here and call their methods\n      }\n   })\n\n ```\n \n### Using latest snapshot\n\nAdd the following repo to your `pom.xml`, and change the version using the latest listed at in [this url](https://oss.sonatype.org/content/repositories/snapshots/com/vaadin/polymer/vaadin-gwt-polymer-elements/)\n\n       \u003crepository\u003e\n         \u003cid\u003esnapshots\u003c/id\u003e\n         \u003curl\u003ehttps://oss.sonatype.org/content/repositories/snapshots/\u003c/url\u003e\n         \u003csnapshots\u003e\u003cenabled\u003etrue\u003c/enabled\u003e\u003c/snapshots\u003e\n       \u003c/repository\u003e\n\n\n## Contributors\n\n## Building the project\n\nTo compile the `vaadin-gwt-polymer-elements` library by yourself.\n\n 1. Clone the repository with `$ git checkout https://github.com/vaadin/gwt-polymer-elements.git`\n 1. Change to the project folder `$ cd gwt-polymer-elements`\n 1. Run `$ npm install` to download all components to the `src/main/resources` folder, to create all java files needed for GWT in the `src/main/java/` folder and to compile and install the components library in you local maven repo.\n\n## Running the demo locally\n\n 1. To run and debug the demo, go to the demo folder `$ cd demo`\n 1. Run `$ mvn gwt:devmode` to run the demo in SuperDevMode, otherwise run `$ mvn clean package` to\n build the demo application under `target` directory.\n 1. You can serve the demo directly from the `target/gwt-polymer-demo` or you can deploy the generated `target/gwt-polymer-demo.war` in a servlet container.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanolo%2Fgwt-polymer-elements","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmanolo%2Fgwt-polymer-elements","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanolo%2Fgwt-polymer-elements/lists"}