gwt polymer elements
vaadin-gwt-polymer-elements-1.9.3.1
Vaadin transfere a propriedade dessa biblioteca, portanto, Vaadin não fornece mais suporte ou faz desenvolvimento ativo.
Tomamos essa decisão porque uma vez demonstramos que os elementos do polímero podem ser facilmente integrados no GWT, queremos investir o tempo de nossa equipe na adição de benefícios valiosos do usuário aos elementos principais do Vaadin e passamos o bastão para a comunidade para fazer integrações com outras estruturas.
Além disso, estamos felizes em anunciar que a propriedade do repositório será transferida até 20 de abril de 2017 para @manolo, que continuará a mantê -lo.
Se você estiver disposto a participar como colaborador, deixe um comentário no #151. Os colaboradores terão acesso após a transferência. Incentivamos a contribuição de qualquer forma e forma.
A biblioteca foi gerada usando o Vaadin GWT-API-Generator, um utilitário capaz de inspecionar o Polymer WebComponents e emitir o código Java GWT.
Como o Polymer diferencia entre as coleções, as classes de elementos GWT-Polymer são prefixadas com os mesmos prefixos ( ferro, papel, vaadin ), a fim de se referir facilmente ao componente da Web original e para encontrar facilmente a documentação relacionada a ele.
Visite nosso caso para ver como os componentes são e para dar uma olhada no código de exemplo usando cada componente.
Quando analisamos o código dos componentes originais para gerar a API Java, copiamos toda a documentação do JS existente para que esteja disponível no Javadoc. Observe que às vezes as descrições se referem ao JS, mas consideramos que é melhor manter as informações.
Você precisa de pelo menos GWT-2.8.0 para usar a biblioteca.
O arquivo .jar inclui todo o código Java e componentes da Web das coleções de ferro e papel Polymer, portanto, pois você não precisa lidar com o processo de download e implantação de todas as bibliotecas e componentes do JS.
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 e colocá-lo no seu projeto de classe GWT.*.gwt.xml : < inherits name = " com.vaadin.polymer.Elements " />
Atualmente, o Chrome possui suporte nativo completo para componentes da Web, portanto, para fazer seu projeto funcionar com todos os navegadores modernos, você deve incluir o WebComponents Polyfill.
Se você usar os componentes do polímero como Widgets , a biblioteca o carregará preguiçosa quando necessário. Caso contrário, carregue -o muito cedo na sua página do host .html como é mostrado no código a seguir.
< head >
< script src =" myapp/bower_components/webcomponentsjs/webcomponents.js " > </ script >
< script src =" myapp/myapp.nocache.js " > </ script >
</ head > gwt-polymer-elements pacotes para criar seu aplicativo usando Elements Widgets ou JSinterop. O primeiro é a abordagem clássica, enquanto o último se tornará a nova tendência.
Mas, no momento, Elements são a maneira mais difícil, porque o GWT não tem uma API Elemental-2.0 completa que confia no JsInterop . Fornecemos um conjunto muito pequeno de interfaces elementares limitadas às necessárias para a nossa implementação, elas serão substituídas pelo Elemental-2.0 quando estava disponível.
Em resumo, para projetos GWT clássicos e de produção, seria mais fácil usar o Widget , pois a API não teria mudanças importantes. Caso contrário, se você deseja se livrar da hierarquia do widget, recomendamos começar a usar a API Element misturando -a com alguma biblioteca de manipulação DOM, como gwtquery ou apenas os métodos incluídos na API elementar.
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 );Nota: Os construtores de widgets aceitam qualquer conteúdo HTML como argumento que é anexado ao componente da web renderizado
// 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 );Widgets ou Elements em 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 ' >
< 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 >
O Polymer usa regras de estilo de sombra Dom para fornecer estilo com escopo do DOM local do elemento. Ele suporta uma sintaxe extra que não é infundada pelo analisador GSS GWT.
A Polymer cuida do seu bloco de sintaxe que analisa qualquer <style> que você possa ter na página do host, mas se você deseja especificar algumas regras de estilo no Uibinder, precisará adicionar seus blocos de estilo a qualquer painel.
< 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 >Para obter mais informações sobre a sintaxe do estilo de polímero, visite sua documentação
Se você deseja mergulhar em fontes .java , não mantemos arquivos gerados, portanto, é necessário fazer o download do pacote Vaadin-Gwt-Polymer-Elements-XXX-Sources.jar. Caso contrário, você poderá dar uma olhada em aulas e modelos de auxiliares java no projeto GWT-API-Generator.
Antes de usar qualquer componente, você deve importar os arquivos apropriados. Mas gwt-polymer-elements vem com alguns utilitários, para que você seja feito automaticamente.
PaperButton button = new PapperButton();
Polymer PaperButtonElement button = Polymer.createElement(PaperButtonElement.TAG);
Polymer tem alguns métodos para fazer a importação dinamicamente Polymer.importHref("paper-button/paper-button.html");
<link rel='import' href='application_context/bower_components/paper-button/paper-button.html'></link>
Os componentes da Web podem ser registrados e inicializados de forma assíncrona. Assim, gwt-polymer-elements vem com alguns métodos que ajudam a executar retornos de chamada quando o componente está realmente pronto.
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
}
})
Adicione o seguinte repo ao seu pom.xml e altere a versão usando o último listado neste URL
<repository>
<id>snapshots</id>
<url>https://oss.sonatype.org/content/repositories/snapshots/</url>
<snapshots><enabled>true</enabled></snapshots>
</repository>
Para compilar a biblioteca vaadin-gwt-polymer-elements por si mesmo.
$ git checkout https://github.com/vaadin/gwt-polymer-elements.git$ cd gwt-polymer-elements$ npm install para baixar todos os componentes na pasta src/main/resources , para criar todos os arquivos Java necessários para o GWT na pasta src/main/java/ para compilar e instalar a biblioteca de componentes em seu repo MAVEN local. $ cd demo$ mvn gwt:devmode para executar a demonstração no SuperDevMode, caso contrário, execute $ mvn clean package para criar o aplicativo Demo no diretório target .target/gwt-polymer-demo ou pode implantar o target/gwt-polymer-demo.war em um contêiner de servlet.
