gwt polymer elements
vaadin-gwt-polymer-elements-1.9.3.1
Vaadin 은이 라이브러리의 소유권을 전송하므로 Vaadin은 더 이상 지원을 제공하거나 적극적으로 개발하지 않습니다.
우리는 한 번 폴리머 요소가 GWT에 쉽게 통합 될 수 있음을 보여 주었고, 우리 팀의 시간을 Vaadin 핵심 요소에 추가하는 데 팀의 시간을 투자하고, 배턴을 커뮤니티에 전달하여 다른 프레임 워크와의 통합을 수행하고자합니다.
또한 2017 년 4 월 20 일까지 저장소의 소유권이 @Manolo로 이전 될 것이라고 발표하게되어 기쁩니다.
공동 작업자로 기꺼이 참여하려는 경우 #151에 의견을 남겨주세요. 공동 작업자는 전송 후 액세스 권한이 부여됩니다. 우리는 어떤 형태와 형태로든 기여를 권장합니다.
이 라이브러리는 폴리머 웹 컴포넌트를 검사하고 GWT Java 코드를 방출 할 수있는 유틸리티 인 Vaadin GWT-API-Generator를 사용하여 생성되었습니다.
중합체는 컬렉션을 구별하기 때문에 GWT- 폴리머-요소 클래스는 원래 웹 구성 요소를 쉽게 참조하고 관련 문서를 쉽게 찾기 위해 동일한 접두사 ( 철, 종이, Vaadin )로 접두사를 만듭니다.
쇼 사례를 방문하여 구성 요소의 모습을 확인하고 각 구성 요소를 사용하여 예제 코드를 살펴보십시오.
Java API를 생성하기 위해 원래 구성 요소 코드를 구문 분석하면 Javadoc에서 사용할 수있는 모든 기존 JS 문서를 복사합니다. 때때로 설명은 JS를 가리킬 수 있지만 정보를 유지하는 것이 더 낫다고 생각합니다.
라이브러리를 사용하려면 최소한 GWT-2.8.0이 필요합니다.
.jar 파일에는 모든 Java 코드 및 폴리머 철 및 용지 컬렉션의 웹 구성 요소가 포함되어 있으므로 모든 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 아카이브를 다운로드하여 GWT 프로젝트 클래스 경로에 넣을 수 있습니다.*.gwt.xml 모듈 파일 에이 줄을 추가하십시오. < inherits name = " com.vaadin.polymer.Elements " />
Chrome만이 오늘날 웹 구성 요소를 완전히 기본적으로 지원하므로 프로젝트를 모든 최신 브라우저와 함께 작동 시키려면 WebComponents Polyfill을 포함해야합니다.
중합체 구성 요소를 Widgets 으로 사용하는 경우 라이브러리는 필요할 때 게으른로드됩니다. 그렇지 않으면 다음 코드에 표시된대로 .html 호스트 페이지의 초기로로드하십시오.
< head >
< script src =" myapp/bower_components/webcomponentsjs/webcomponents.js " > </ script >
< script src =" myapp/myapp.nocache.js " > </ script >
</ head > Vaadin gwt-polymer-elements 클래스를 번들로하여 Widgets 또는 JSINterop Elements 사용하여 응용 프로그램을 구축합니다. 전자는 고전적인 접근 방식이며 후자는 새로운 경향이 될 것입니다.
그러나 GWT는 JsInterop 에 의존하는 완전한 Elemental-2.0 API가 부족하기 때문에 Elements 가장 어려운 방법입니다. 우리는 구현에 필요한 것보다 제한된 매우 작은 원소 인터페이스 세트를 제공합니다.
요약하면, 클래식 및 프로덕션 GWT 프로젝트의 경우 API에 중요한 변경 사항이 없기 때문에 Widget 사용하는 것이 더 쉬울 것입니다. 그렇지 않으면 위젯 계층 구조를 제거하려면 gwtquery 와 같은 일부 DOM 조작 라이브러리와 믹싱하는 Element API 또는 Elemental 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 컨텐츠를 웹 구성 요소 렌더링 된 DOM에 추가 된 인수로 허용합니다.
// 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 또는 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 파서는 이해할 수없는 일부 추가 구문을 지원합니다.
폴리머는 호스트 페이지에 가질 수있는 모든 <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 소스로 다이빙하려면 생성 된 파일을 유지하지 않으므로 Vaadin-GWT-Polymer-Elements-XXX-Sources.jar 번들을 다운로드해야합니다. 그렇지 않으면 GWT-API-Generator 프로젝트에서 Java 헬퍼 클래스와 템플릿을 보게 될 수 있습니다.
구성 요소를 사용하기 전에 적절한 파일을 가져와야합니다. 그러나 gwt-polymer-elements 에는 일부 유틸리티와 함께 제공되므로 자동으로 수행됩니다.
PaperButton button = new PapperButton();
Polymer 헬퍼 클래스를 통해 새로운 구성 요소 생성 PaperButtonElement button = Polymer.createElement(PaperButtonElement.TAG);
Polymer 에는 수입을 동적으로 수행하는 몇 가지 방법이 있습니다. Polymer.importHref("paper-button/paper-button.html");
<link rel='import' href='application_context/bower_components/paper-button/paper-button.html'></link>
웹 구성 요소는 비동기 적으로 등록 및 초기화 될 수 있습니다. 따라서 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에서 구성 요소 라이브러리를 컴파일하고 설치합니다. $ cd demo 로 이동하십시오.$ mvn gwt:devmode 실행하십시오. 그렇지 않으면 $ mvn clean package 실행하여 target 디렉토리 아래에 데모 응용 프로그램을 구축하십시오.target/gwt-polymer-demo 에서 직접 데모를 제공하거나 생성 된 target/gwt-polymer-demo.war 서블릿 컨테이너에 배포 할 수 있습니다.
