gwt polymer elements下载gwt polymer elements源代码下载

gwt polymer elements

三方组件

vaadin-gwt-polymer-elements-1.9.3.1

下载

GWT聚合物元素

注意：该库不再得到vaadin的支持

Vaadin转移了该图书馆的所有权，因此Vaadin不再提供支持或积极发展。

我们做出了这一决定，因为一旦证明了可以轻松地集成到GWT中的聚合物元素，我们希望将团队的时间投入到为Vaadin Core Elements增加宝贵的用户福利，并将指挥棒传递给社区，以与其他框架进行集成。

此外，我们很高兴地宣布，存储库的所有权将于2017年4月20日将其转移给@Manolo，后者将继续维护它。

如果您愿意参加合作者，请在＃151中发表评论。转移后将授予合作者访问权限。我们鼓励以任何形式和形状做出贡献。

介绍

聚合物：是用于使用Web组件构建Web应用程序的JavaScript库。
聚合物元素：是建立聚合物的小部件的集合。该系列分为部分：铁，纸，金，霓虹灯，铂，瓦丁等。
GWT聚合物元素：是Java包装器，可在GWT项目中使用聚合物元素。目前，它包括用于铁，纸，应用程序，铂金和瓦丁收藏的包装纸，但将来可能会添加更多内容。

该库是使用Vaadin GWT-API-Generator生成的，该实用程序能够检查聚合物WebComponents并发射GWT Java代码。

由于聚合物区分集合，因此GWT聚合物元素类别具有相同的前缀（铁，纸，vaadin ），以便轻松地参考原始的Web组件，并轻松找到与之相关的文档。

演示

访问我们的节目案例以查看组件的外观，并使用每个组件查看示例代码。

Javadocs

当我们解析原始组件代码以生成Java API时，我们将复制所有现有的JS文档，以便在Javadoc中可用。请注意，有时描述会指JS，但我们认为维护信息最好。

使用GWT库

您至少需要GWT-2.8.0才能使用库。

将vaadin-gwt - 聚合物元素添加到您的类路径

.jar文件包括聚合物铁和纸质收集的所有Java代码和Web组件，因此您不必处理下载和部署所有JS包装的库和组件的过程。

使用maven

如果您的项目使用Maven，将以下依赖性添加到您的pom.xml

 < dependencies >
   < dependency >
     < groupId >com.vaadin.polymer</ groupId >
     < artifactId >vaadin-gwt-polymer-elements</ artifactId >
     < version >1.7.0.0</ version >
     < scope >provided</ scope >
   </ dependency >
 </ dependencies >

手动

否则，您可以下载vaadin-gwt-polymer-elements-1.7.0.0.jar存档，并将其放入GWT Project class Path。

更新您的模块配置

将此行添加到您的*.gwt.xml模块文件：

 < inherits name = " com.vaadin.polymer.Elements " />

添加Web组件polyfill（可选）。

因此，如今，只有Chrome对Web组件有完整的本机支持，因此，为了使您的项目与所有现代浏览器一起使用，您必须包括Web Components Pollefill。
如果将聚合物组件用作Widgets ，则库会在需要时懒惰。否则，如以下代码中所示，在.html主机页面中非常早。

 < head >
    < script src =" myapp/bower_components/webcomponentsjs/webcomponents.js " > </ script >
    < script src =" myapp/myapp.nocache.js " > </ script >
</ head >

在GWT中食用网络组件

vaadin gwt-polymer-elements捆绑类，使用Widgets或JSInterop Elements构建您的应用程序。前者是经典的方法，而后者将成为新的趋势。

但是目前， Elements是最困难的方法，因为GWT缺乏依赖JsInterop的完整Elemental-2.0 API。我们提供了一组很小的元素接口，仅限于实施所需的元素接口，在可用时，它们将被元素-2.0替换。

总而言之，对于经典和生产GWT项目，使用Widget会更容易，因为API不会进行重要的更改。否则，如果您想摆脱小部件层次结构，我们建议我们开始使用Element API与某些DOM操作库（如gwtquery或元素API中包含的方法混合使用。

使用Java中的经典小部件API 。

 PaperButton button = new PaperButton ();
button . setIcon ( "polymer" );
button . setLabel ( "Polymer" );
button . setRaised ( true );

button . addClickHandler ( new ClickHandler () {
  public void onClick ( ClickEvent event ) {
    // ...
  }
});

RootPanel . get (). add ( button );

注意：小部件构造仪接受任何HTML内容作为参数，该参数附加到Web组件渲染的DOM

在Java中使用元素API 。

 // Create a new instance of PaperButton
PaperButtonElement button = Polymer . createElement ( PaperButtonElement . TAG );
// Set some properties
button . setIcon ( "polymer" );
button . setLabel ( "Polymer" );
button . setRaised ( true );

// Add event listeners
button . addEventListener ( "click" , new EventListener () {
    public void onBrowserEvent ( Event event ) {
    // ...
    }
});

// Append to the html document
RootPanel . get (). getElement (). appendChild ( button );

使用uibinder中的Widgets或Elements

 < 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 ' >

 < ui : style >
   .container paper-button.colored {
     background: #4285f4;
     color: #fff;
   }
 </ ui : style >

 < g : HTMLPanel >
   <!-- As Widget -->
   < p : PaperButton toggles = " true " raised = " true " active = " true " addStyleNames = " {style.colored} " >active</ p : PaperButton >

   <!-- As Element -->
   < paper-button raised = " " noink = " " >Click me</ paper-button >
 </ g : HTMLPanel >

造型您的应用程序。

聚合物使用阴影DOM样式规则来提供元素本地DOM的范围示意样式。它支持一些额外的语法，而GWT GSS解析器无法低估。

Polymer负责其语法解析您在主机页面中可能拥有的任何<style>块，但是如果您想在Uibinder中指定一些样式规则，则必须在任何面板中添加样式块。

< 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 >
< style is = " custom-style " >
   paper-toolbar paper-icon-button {
      --paper-icon-button-ink-color: var(--paper-indigo-500);
   }
</ style >
< p : PaperToolbar >
   < p : PaperIconButton icon = " menu " />
   < span class = " title " >Toolbar</ span >
</ p : PaperToolbar >
</ g : HTMLPanel >

有关聚合物样式语法的更多信息，请访问其文档

笔记

Java消息来源

如果您想潜入.java源，我们不维护生成的文件，因此您需要下载vaadin-gwt-polymer-elements-xxx-sources.jar bundle。否则，您可能会在GWT-API-Generator项目中查看Java助手课程和模板。

导入Web组件

在使用任何组件之前，您必须导入适当的文件。但是gwt-polymer-elements附带一些实用程序，因此您将自动完成。

小部件：当您使用小部件时，导入会自动发生

    PaperButton button = new PapperButton();

元素：通过Polymer助手类创建新组件

    PaperButtonElement button = Polymer.createElement(PaperButtonElement.TAG);

动态导入： Polymer有几种动态执行导入的方法

    Polymer.importHref("paper-button/paper-button.html");

静态导入：如果您希望在混合的应用程序（DOM，JS或GWT）中，或者要确保从一开始就可以使用Web组件，则将标签添加到托管页面头是使Web Components可用的传统方法。

   <link rel='import' href='application_context/bower_components/paper-button/paper-button.html'></link>

异步问题

Web组件可以注册并初始化。因此， gwt-polymer-elements带有一些方法，这些方法有助于当组件实际准备就绪时运行回调。

  PaperButtonElement button = Polymer.createElement(PaperButtonElement.TAG);
  Polymer.ready(button, new Function() {
     public Object call(Object args) {
        // Set button properties here
     }
  })

  PolymerButton button = new PolymerButton();
  // You could set methods here
  button.setFoo(bar);

  button.ready(new Function() {
     public Object call(Object args) {
       // But you have to enclose in a callback calls to element methods
     }
  });


  Polymer.importHref(Arrays.asList("paper-tabs", "paper-tab-element"), new Function() {
     public Object call(Object args) {
        // Create your elements here and call their methods
     }
  })

使用最新的快照

将以下存储库添加到您的pom.xml ，并使用此URL中列出的最新版本更改版本

   <repository>
     <id>snapshots</id>
     <url>https://oss.sonatype.org/content/repositories/snapshots/</url>
     <snapshots><enabled>true</enabled></snapshots>
   </repository>

贡献者

建立项目

要自己编译vaadin-gwt-polymer-elements库。

用$ git checkout https://github.com/vaadin/gwt-polymer-elements.git克隆存储库。
更改为项目文件夹$ cd gwt-polymer-elements
运行$ npm install以将所有组件下载到src/main/resources文件夹，以创建src/main/java/文件夹中GWT所需的所有Java文件，并在本地Maven Repo中编译和安装组件库。

本地运行演示

要运行并调试演示，请转到Demo文件夹$ cd demo
运行$ mvn gwt:devmode以SuperDevMode运行演示，否则运行$ mvn clean package以在target目录下构建演示应用程序。
您可以直接从target/gwt-polymer-demo提供演示，也可以在Servlet容器中部署生成的target/gwt-polymer-demo.war 。

展开

附加信息