gwt polymer elements
vaadin-gwt-polymer-elements-1.9.3.1
يقوم Vaadin بنقل ملكية هذه المكتبة ، وبالتالي لم يعد Vaadin يوفر الدعم أو يقوم بتطوير نشط عليها.
لقد اتخذنا هذا القرار لأنه بمجرد أن أثبتنا أنه يمكن دمج عناصر البوليمرات بسهولة في GWT ، نريد أن نستثمر وقت فريقنا في إضافة مزايا المستخدم القيمة إلى العناصر الأساسية Vaadin ، ونقل العصا إلى المجتمع للقيام بالتكامل مع الأطر الأخرى.
بالإضافة إلى ذلك ، يسعدنا أن نعلن أنه سيتم نقل ملكية المستودع بحلول 20 أبريل 2017 إلى Manolo ، الذي سيستمر في الحفاظ عليه.
إذا كنت على استعداد للمشاركة كمتعاون ، فيرجى ترك تعليق في #151. سيتم منح المتعاونين الوصول بعد النقل. نحن نشجع المساهمة بأي شكل وشكل.
تم إنشاء المكتبة باستخدام المولد Vaadin GWT-API ، وهو أداة مساعدة قادرة على فحص البوليمرات على الويب ورمز GWT Java.
نظرًا لأن البوليمر يميز بين المجموعات ، فإن فئات عناصر GWT-Polymer تسبق بنفس البادئات ( الحديد ، الورق ، الفادين ) ، من أجل الرجوع بسهولة إلى مكون الويب الأصلي ، ولإيجاد الوثائق المتعلقة به بسهولة.
تفضل بزيارة حالة العرض الخاصة بنا لمعرفة كيف تبدو المكونات ، وللتفصيل إلى رمز المثال باستخدام كل مكون.
عندما نقوم بتحليل رمز المكونات الأصلية لإنشاء واجهة برمجة تطبيقات Java ، نقوم بنسخ جميع وثائق JS الحالية بحيث تكون متوفرة في Javadoc. لاحظ أنه في بعض الأحيان تشير الأوصاف إلى 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 Project Classpath.*.gwt.xml : < inherits name = " com.vaadin.polymer.Elements " />
يتمتع Chrome فقط بدعم كامل لمكونات الويب في الوقت الحاضر ، لذلك ، لجعل مشروعك يعمل مع جميع المتصفحات الحديثة ، يجب عليك تضمين Polyfill WebComponents.
إذا كنت تستخدم مكونات البوليمر كعناصر 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 أو Elements JSInterop. السابق هو النهج الكلاسيكي ، في حين أن الأخير سيصبح الميل الجديد.
ولكن في الوقت الحالي ، تعتبر Elements أصعب طريقة لأن GWT تفتقر إلى واجهة برمجة تطبيقات Elemental-2.0 الكاملة التي تعتمد على JsInterop . نحن نقدم مجموعة صغيرة جدًا من الواجهات الأولية التي تقتصر على تلك اللازمة لتنفيذنا ، وسيتم استبدالها بعنصر -2.0 عندما كان متاحًا.
باختصار ، بالنسبة لمشاريع GWT الكلاسيكية والإنتاجية ، سيكون من الأسهل استخدام Widget التطبيقات لن يكون لها تغييرات مهمة. خلاف ذلك ، إذا كنت ترغب في التخلص من التسلسل الهرمي عنصر واجهة المستخدم ، فإننا نوصي ببدء استخدام API Element الذي يخلطه مع بعض مكتبة معالجة DOM مثل gwtquery أو مجرد الطرق المدرجة في واجهة برمجة تطبيقات العنصر.
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 كوسيطة يتم إلحاقها بمكون الويب المقدم
// 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 في 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 >
يستخدم Polymer قواعد Shadow Dom Dyling لتوفير التصميم المنتشر لـ 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 ، فإننا لا نحتفظ بملفات تم إنشاؤها ، وبالتالي فأنت بحاجة إلى تنزيل حزمة Vaadin-GWT-Polemer-Enelements-XXX.JAR. وإلا فقد تأخذ نظرة فصول والقوالب Java Helper في مشروع GWT-API-Cenerator.
قبل استخدام أي مكون ، يجب عليك استيراد الملفات المناسبة. لكن gwt-polymer-elements تأتي مع بعض الأدوات المساعدة حتى يتم ذلك تلقائيًا.
PaperButton button = new PapperButton();
Polymer Helper 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 ، لإنشاء جميع ملفات Java اللازمة لـ GWT في src/main/java/ Folder وتجميع وتثبيت مكتبة المكونات في ريبو Maven المحلي. $ cd demo$ mvn gwt:devmode لتشغيل العرض التوضيحي في SuperDevMode ، وإلا قم بتشغيل $ mvn clean package لإنشاء تطبيق العرض التجريبي ضمن الدليل target .target/gwt-polymer-demo أو يمكنك نشر target/gwt-polymer-demo.war الذي تم إنشاؤه في حاوية servlet.
