Give your element an API -- Polycasts #16YouTube↗  IA↗(long shot)
Science & Technology  22.9K views 242 likes 1 dislikes   18 May 2015
Google for Developers 2.7M subscribers United States YouTube↗


Please select the problem
You must specify your email and describe the problem in detail
Describe your problem in detail if it's not obvious

Click to Play Video Click to Play Video
"بوليمر"
مرحبًا، كيف حالكم؟ .معكم روب دودسون
Hola. Soy Rob Dodson. Hoy en <i>Polycasts</i>
اليوم في "بوليكاستس" سأصطحبكم في رحلة لإنشاء واجهة برمجة .تطبيقات عامة لعناصركم
te guiaré por la ruta para crear una API pública para tus elementos.
وسنجيب أيضًا على أسئلة المشاهدين .فاحرصوا على متابعتنا
Responderemos a las preguntas del público, así que permanece atento.
.أولاً، لننتقل سريعًا للحديث عن الكود
Primero veamos algunos códigos.
الجزء الأول من إنشاء واجهة برمجة تطبيقات عامة للعنصر
Lo primero para crear una API pública para tu elemento
هو إعلان الخصائص العامة
es declarar propiedades públicas.
"وقد تغير ذلك كثيرًا من "بوليمر 0.5 .إلى الإصدار الأحدث
Esto cambió mucho desde el Polymer 0.5 hasta la versión más reciente.
"في الإصدارات السابقة من "بوليمر إذا أردتم توضيح الخصائص العامة للعنصر
En versiones anteriores, si declarabas propiedades públicas para tu elemento,
attributes فهناك سمة .يمكن إضافة الخصائص داخلها
había una propiedad de atributo en la que las metías.
هناك كائن منشور يمكن إضافة الخصائص داخله
Entonces se publicaba un objeto y podías ponerle propiedades.
.وكان الأمر أحيانًا محيرًا
Era un poco confuso.
فأين يجب إضافة هذه الأشياء؟
¿Dónde poner mi material?
"ولذا، في أحدث إصدار من "بوليمر تم تجميع كل هذه الأشياء في كائن خصائص واحد
En la última versión de Polymer, todo se unió en un solo objeto con propiedades y es un objeto muy potente.
.وهو كائن فعال للغاية دعوني أعرضه عليكم
Permíteme mostrártelo y veremos
لنتعرف على بعض الأشياء .الرائعة التي يقدمها
todo lo que puede hacer.
x-custom قبل كل شيء، لدي عنصر
Primero, tengo un elemento personalizado-<i>x</i> que creé aquí,
أنشأته هنا، ولدي كائن خصائص
una propiedad objeto,
،ولدي خاصيتين، الأولى والأخيرة
y tengo dos propiedades: <i>first</i> y <i>last</i>.
.وقمت بتعيين سلسلة للقيم الخاصة بهما
Les asigné cadenas a sus valores.
"مما يوضح لـ "بوليمر أنه عندما يقوم شخص بتمرير قيمة للأولى والأخيرة .يجب ألا تضم أرقامًا متتابعة في سلسلة
Esto le dice a Polymer que cuando alguien mete un valor para <i>first</i> y <i>last</i>, ese valor debería ser deserializado a una cadena.
.رائع جدًا يمكنك إلغاء التسلسل ،لأنواع مختلفة أخرى
Es excelente que puedas deserializar a otros tipos,
.مثل الرقم والكائن، إلخ
como números, objetos, etcétera.
وهناك شيء رائع آخر يمكن إجراؤه؛ .تمرير قيمة افتراضية للخاصية
Puedes meter un valor predeterminado para una propiedad.
،فلدي خاصية العمر هنا
Tengo una propiedad <i>age</i> aquí.
،وقد عيّنت نوعها على رقم .والقيمة الافتراضية هي 42
Establecí su tipo en número y un valor predeterminado de 42.
يمكنك أيضًا إنشاء مراقبات .للخصائص الخاصة بكم
Puedes crear observadores.
وبالتالي، هذه وظائف سيتم تشغيلها
Son funciones que se ejecutarán
.عندما تتغير الخاصية
en cuanto la propiedad cambie.
لقد قمت هنا بتعيين مراقب .لهذه الوظيفة المتغيرة للعمر
Aquí establecí el observador en la función <i>age changed</i>.
"وفي الإصدارات السابقة من "بوليمر
En versiones anteriores de Polymer,
لدينا هذا التعريف للمراقبات المتغيرة
teníamos esta noción de observadores,
وهي الوظائف التي طبقناها .بطريقة سرية لأجلكم
funciones que implementamos para ti un poco a escondidas.
إذا كان لديكم خاصية عامة .تحصلون على إحدى هذه الوظائف مجانًا
Con una propiedad pública, tenías funciones gratis.
.إنها نوع من السحر
Era un poco mágico.
والآن تم إزالة هذه الأشياء بشكل ما وإذا أردتم مراقبة التغير
Esto ya se retiró y si quieres observar un cambio,
.تحتاجون لإنشاء مراقب مثل هذا بوضوح .وهذا جيد
necesitas crear un observador como este, que es lindo.
فإذا قام شخص ما بالنظر إلى الكود الخاص بكم
Si alguien mirara tu código y no estuviera seguro
ولم يعرف بالضبط من أين تأتي تلك الوظيفة
de dónde viene la función,
.سيزيل ذلك أي ارتباك كان هناك
esto resolvería cualquier confusión.
وهناك شيء أود الإشارة إليه
Queda algo por señalar.
لأن ذلك يشبه الوظيفة الخاصة ،من حيث الفعالية "ولا أود أن يسميها البعض "أسلوبًا
Como es eficaz como una función privada, no quiero a nadie invocando a este método.
كل ما أريده هو أن يتم ،تشغيلها عند تغيير الخاصية
Solo lo ejecutaré si mi propiedad cambia.
.فأضفت بادئة لها باستخدام شرطة سفلية
Lo estoy prefijando con un guión bajo.
"ونقوم بذلك مع كافة عناصر "بوليمر
Lo haremos con todos los elementos Polymer
لمجرد تمييزها للأشخاص
para señalar a los compañeros
بأنها داخلية للعنصر وليست بهدف .أن يستدعيها العالم الخارجي
que esto es interno y que el exterior no tiene que invocar.
والشيء الآخر الذي يمكن إجراؤه هو جعل العنصر يقوم بإرسال أحداث التغيير في أي وقت
Tu elemento puede enviar
.يتم فيه تعديل الخاصية
cambios de eventos cuando su propiedad se actualice.
ولذا هذه الطريقة مشابهة .الأصلية Dom لطريقة عمل عناصر
Trabaja como los elementos DOM nativos.
فلديكم إدخال وتحديد
Tienes entrada, selección
وعندما تتغير، فإنها تطلق بالفعل .أحداثًا في كل مرة لإخطار الجميع
y cuando cambian, arrancan eventos todo el tiempo
لذا، تؤدي إضافة خاصية إخطار للعنصر
para avisar a la gente. Añadir una propiedad <i>notify</i> (aviso) a tu elemento
.إلى إرسال أحداث التغيير تلك لأجلك
enviará esos cambios de eventos por ti.
.وبالتالي سأنشئ حدثًا متغيرًا للعمر
Conseguiré un evento <i>age changed</i>.
والجيد أن هذا بالفعل
La buena noticia es que estas son las bases
هو أساس نظام الربط "في اتجاهين في "بوليمر
para los dos sistemas <i>binding</i> en Polymer.
فإذا أردتم جعل واحدة ،من هذه الخصائص قابلة للربط
Si quieres una de estas propiedades en un <i>bindable</i>,
ستحتاجون إلى التأكد من تعيين .فيها true الإشعار على
asegúrate de que tienes un aviso <i>true</i> establecido.
وكذلك، نأمل أن يسهل هذا الأمر .التعامل مع أطر العمل الأخرى
Esto facilita la interoperabilidad con otras infraestructuras.
فهناك أطر عمل من حولنا ،تمتلك أنظمة ربط بيانات خاصة بها
Hay otras infraestructuras con su sistema de datos <i>binding</i>.
ولم يكن واضحًا في السابق كيف تتعرف
Anteriormente no estaba claro cómo sabían
على النقطة التي تقوم فيها "حياة عناصر "بوليمر
en qué punto de la vida de los elementos Polymer
.بالتحقق بالفعل من وجود تغييرات
chequear los cambios.
وهكذا أصبح لها حدث
De esta forma se consigue un evento
،يمكنه الإصغاء، لذلك تتسم بالاتساق
que escucha lo consistente y así
وهكذا، نأمل أنه أصبح بإمكاننا التعامل .مع بعض أنظمة ربط البيانات الأخرى
se puede interoperar con otros sistemas de datos <i>binding</i>.
والآن، شيء آخر رائع يمكن إجراؤه .هو إنشاء خصائص كمبيوتر
Algo asombroso es que puedes crear propiedades del equipo.
لنفترض أنني أريد أخذ الأولى والأخيرة .ودمجهما معًا في قيمة واحدة
Digamos que quiero tomar <i>first</i> y <i>last</i> y unirlos en un valor.
يمكنني عمل ذلك هنا بواسطة تمرير مفتاح محسوب
Puedo hacer eso aquí metiendo una clave calculada
،ثم اسم لوظيفة الاسم بالكامل للحوسبة
y luego una función de nombre <i>compute Full Name</i>
وأمرر الخاصيتين اللتين أريد إرسالهما .على هيئة وسيطات
y meto dos propiedades que querría mandar como argumentos,
.ولذا، أمرر الأولى والأخيرة
así que paso <i>first</i> y <i>last</i>.
والآن من المهم تضمين ،هذه الوسيطات هنا
Es importante incluir estos argumentos aquí,
"فما تفعله هو إخبار "بوليمر
porque le dirán a Polymer
،أنه متى تغيرت الأولى أو الأخيرة وظيفة الاسم بالكامل للحوسبة
que cuando <i>first</i> o <i>last</i> cambien, esta función <i>compute Full Name</i> debería ejecutarse
يجب أن تعمل ثانية .لتحديث هذه القيمة
y actualizar este valor.
.فهي حيلة مفيدة للغاية
Un truco muy útil.
هناك شيء أخري يمكن عمله .وهو إنشاء خصائص للقراءة فقط
Puedes crear propiedades <i>readonly</i>.
،لنفترض أن لديكم عنصر له حالة داخلية ما ولا تريدون أن يعبث به ،أي شخص من العالم الخارجي
Tienes un elemento con un estado interno y no quieres que jueguen con él.
عيّنوا الخاصية على وضع القراءة فقط ،وهكذا يحصل أي شخص على القيمة فقط
Establece <i>readonly</i> y así la gente tendrá el valor, pero no lo asignará.
.ولا يمكنه أبدًا تعديلها وأخيرًا، هناك شيء رائع للغاية؛
Por último, puedes volver a reflejar
يمكن عكس القيم ثانية .على الخصائص إذا احتجتم ذلك
valores en atributos si lo necesitas.
ويعد هذا الأمر مفيدًا حقًا إذا حاول شخص
Esto es muy útil si alguien trata de darle un estilo a tu elemento
إضفاء نمط على العنصر الخاص بكم .CSS بواسطة محدد سمات
con un seleccionador de atributo CSS.
،لن تستخدموا هذا كثيرًا على الأرجح .ولكنه موجود عند حاجتكم
Puede que no lo uses mucho, pero está ahí si lo necesitas.
بالنسبة لكائن الخصائص الجديدة الذي يمنحكم ميزات تحكم كثيرة
Las nuevas propiedades objeto te dan muchísimo poder.
Code Editor لننتقل فورًا إلى .ونمارس ذلك عمليًا
Vayamos al editor de código y practiquemos esto.
،سأبدأ كما أفعل مع كافة العناصر .Bower JSON في ملف
Empezaré como hago con mis elementos, en un archivo <i>JSON Bower</i>.
لدي عنصر أنشأته يسمى علامة الاسم
Creé un elemento,<i> name-tag</i> (nombre-etiqueta),
وفي التبعيات، أدرجت Polymer 0.9.0-rc.1
y en mis dependencias apunté Polymer 0.9.0-rc.1.
وبالتالي يكون هذا ،rc.1 هو الإصدار المرشح لـ
Esta es la versión candidata para rc.1,
.وهو المتاح حاليًا وقت هذا التسجيل
lo único disponible cuando filmamos el vídeo.
،لكن إذا كنتم تشاهدون هذا وأفترض الآن أن العلامة 0.9.0 ظهرت بالفعل
Si estás viendo esto, asumo que la etiqueta 0.9.0 está fuera,
فيمكن أخذ هذه القيمة هنا
así que puedes tomar este valor,
Bower JSON وربما استبدالها فقط في
seguir adelante y reemplazarlo en tu <i>JSON Bower</i>
.باستخدام علامة إقحام 0.9.0
con un diminuto acento circunflejo por 0.9.0.
ويجب أن ينقلكم هذا ."إلى العلامة الأخيرة في "بوليمر
Esto debería darte la etiqueta más reciente de Polymer.
والآن من خلال الوحدة الطرفية
En mi terminal, ejecutaré Bower install
لسحب Bower بتشغيل تثبيت "ذلك الإصدار من "بوليمر
para cerrar esa versión de Polymer.
يمكن إنشاء Sublime وبالعودة إلى name-tag يحمل HTML ملف
En Sublime puedo crear un archivo HTML
وهذا هو المكان الذي سأضع .فيه تعريف عناصري
y ahí pondré mi definición de elementos.
أول شيء يجب عمله كالعادة
Lo primero que haré, como siempre,
استخدام المسار المتعارف ."عليه لاستيراد "بوليمر
es usar la ruta canónica para importar a Polymer.
Dom ثم إنشاء وحدة
Luego crearé un módulo DOM, que era una ID
،وتعريف يوافق اسم علامة العناصر ،وبالتالي يكون تعريف لعلامة الاسم
que encajara con la etiqueta de mis elementos, y aquí está.
وبالداخل أدرج نموذجًا
Dentro incluiré una plantilla y ahí pondré
وهذا هو المكان الذي سأضع فيه .المحلي للعنصر Dom جميع محتوى
el contenido DOM local para mi elemento.
الشيء التالي الذي أحتاج عمله "هو طلب منشئ "بوليمر
Lo siguiente que haré será llamar al constructor Polymer.
is وأحتاج أن أمنحه خاصية .وتمرير علامة الاسم
Le daré una propiedad is y le pasaré mi etiqueta <i>name</i>.
وكذلك، سأنشئ كائن خصائص له
También crearé una propiedad objeto para él.
،وسأنشئ الخصائص الأولى والأخيرة
Crearé propiedades <i>first</i> y <i>last</i>
.وأقوم بتعيننها كسلاسل
y les asignaré cadenas.
div ثم أنشئ ،هنا يسمى الاسم الكامل
Luego crearé un <i>div</i> aquí arriba llamado <i>full name</i>
وسأربط هذه القيم في علامات .div داخل span
y uniré esos valores a <i>spans</i> dentro de ese <i>div</i>.
"في الإصدارات السابقة من "بوليمر
En versiones anteriores de Polymer
يمكن بالفعل إنشاء تعبيرات الربط هذه حيث توجد لديكم قيم مختلفة وارتباطات عديدة
creabas expresiones <i>binding</i>, donde tenías múltiples valores y <i>bindings</i>,
.تم دمجها معًا في علامة واحدة
todos unidos en una etiqueta.
وحاليًا في "بوليمر"، لا يتم دعم ذلك .إلا أنه في خارطة الطريق
Esto ya no aparece en Polymer, aunque está en el mapa de ruta.
وبالتالي إذا أردتم وجود ،div الخاصية الأولى والأخيرة في
Si necesitas meter<i> first</i> y <i>last</i> en este <i>div</i>,
span يجب جمعهما داخل علامات
debes envolverlos dentro de <i>spans</i>, que es algo molesto.
.مما يعتبر غير تقليدي .وسنعود إلى هذه النقطة بعد قليل
Retomaremos este punto en un rato,
،لكن حتى الآن، ومع وجود هذا
pero hasta el momento, con esto de aquí,
.نحن مستعدون لمعاينة العنصر
podemos hacer la vista previa.
ولذلك سأنتقل إلى ملف الفهرس
Iré a mi archivo índice
.وأستورد التعريف من عنصر علامة الاسم
e importaré la definición para mi elemento etiqueta <i>name</i>.
،ثم انتقل لأسفل في النص لأسقط علامة اسم
Abajo en el <i>body</i> (cuerpo), soltaré una etiqueta <i>name</i>
ويمكنني تكوينها باستخدام .القيمة الأولى والأخيرة
y puedo configurarla con los valores <i>first</i> y <i>last</i>.
سأمررها فقط في علامة الاسم .مثل هذه القيم
Meteré mi nombre y esos valores.
الخطوة التالية، سأقوم بتشغيل المانحة للثقة polyserve وحدة
Lo siguiente será ejecutar el módulo Polyserve <i>trustee</i>
.لمعاينة العنصر الخاص بي
para tener la vista previa del elemento.
هو خادم عقدة محلية صغير Polyserve
Polyserve es un servidor <i>node</i> local chiquito.
،يمكن استخدامه لاختبار المكون .Bower وهو يعمل بكفاءة مع
Puedes usarlo para probar tu componente. Funciona bien con Bower.
،إذا لم يكن لديكم فكرة عما أتحدث
Si no sabes de lo que hablo,
.يمكنكم مشاهدة هذا الفيديو من هنا
puedes visitar este vídeo de aquí.
وهو حلقة كاملة توضح .وتشغيله polyserve كيفية إعداد
Tenemos un episodio que explica cómo poner en marcha Polyserve.
إذا كنتم تقومون بإنشاء ،عدد كبير من العناصر
Si estás creando muchos elementos,
.فهذه الأداة قيمة جدًا
esta herramienta no tiene precio.
.وتستحق وقت مشاهدة هذه الحلقة
Vale la pena chequear ese episodio.
"والآن في "كروم سأقوم بتحديث الصفحة
En Chrome, actualizaré la página
،كما ترون هنا ،سأوضّح هذا قليلًا لأجلكم
y puedes ver por aquí, aumenté esto un poco para ti,
.اسمي يظهر الآن
que mi nombre aparece.
،لدي الأولى والأخيرة .وقيم الربط معروضة هناك
Tengo <i>first</i> y<i> last</i>. Esos valores <i>binding</i> se muestran aquí.
،عملية مملة قليلاً .لكن على الأقل ترون أنه يعمل
Se ve un poco simple, ¿no? Por lo menos ves que funciona.
،وأعود مرة أخرى إلى تعريف العنصر
En la definición de mi elemento,
سأحاول تنظيف هذا قليلاً
trataré de limpiar un poco,
هناك span لأن وجود علامات ،حيلة غير تقليدية بعض الشيء
porque tener estos <i>spans</i> es un poco molesto.
.ولأجل ذلك سأستخدم خاصية محسوبة
Para ello, usaré una propiedad computada.
،وهكذا في كائن الخصائص .سأنشئ خاصية الاسم الكامل
En mi propiedad objeto crearé una propiedad <i>full name</i>.
سأقول أنه محسوب .ثم يحوسب الأولى والأخيرة
Diré que está computada y computará <i>first</i> y <i>last</i>.
وننتقل لأسفل هنا، حيث يمكنني .بالفعل تطبيق ذلك الأسلوب
Aquí abajo puedo implementar ese método.
،إذن، تأخذ الأولى والأخيرة كوسيطتين
Tomará <i>first</i> y <i>last</i> como argumentos.
.وتُرجع سلسلة هي قيم متمركزة
Devuelve una cadena, que son los valores concatenados.
يمكن ببساطة div ثم في علامة .إسقاط رابط للاسم الكامل
En mi <i>div</i> soltaré un <i>binding</i> para <i>full name</i>.
الآن، الخطوة التالية لإضفاء هيئة أفضل على هذه العلامة
Lo siguiente que haré
.هي إضافة بعض الأنماط هنا
para que la etiqueta sea más linda es añadir algunos estilos aquí.
فأضيف النمط على المضيف .للاسم الكامل div وأحدد نمط
Le doy estilo al <i>host</i> y al <i>div full name</i>.
وما سيفعله ذلك عند العودة إلى "كروم" وتحديث الصفحة
Cuando vuelva a Chrome y actualice la página, saldrá
.هو شيء يشبه شارة الاسم إلى حد ما
algo más parecido a una tarjeta de identificación.
ويمكن التأكد من أنه لا يزال بإمكاني رؤية الاسم الكامل هناك
Verás que aparece mi nombre completo
.باستخدام خاصية الكمبيوتر تلك
usando la propiedad del equipo.
.سأطلعكم على نصيحة للمحترفين الآن
Te daré una pista en un consejo ProTip.
إذا أردتم توضيح خصائص الكمبيوتر في السطر
Si declaras las propiedades de tu equipo en línea,
،يمكن عمل ذلك بالتأكيد وهذا مفيد للغاية
puedes hacerlo y es muy útil.
إذا أردتم أن يكون لديكم خاصية كمبيوتر .ربما في مكان واحد فقط
Si tienes una propiedad de equipo solo en un sitio,
ستحافظ على ترتيب كائن الخصائص وتنظيمه .سأوضح لكم كيفية عمل ذلك
tendrá tus propiedades objeto lindas y ordenadas. Veamos cómo.
،لتوضيح الخاصية المحسوبة في السطر
Para declarar una propiedad computada en la línea,
.يمكن بالفعل حذف سمة الاسم الكامل هنا
podemos eliminar esta propiedad <i>full name</i> que tenemos aquí.
وفي الأعلى، في الربط يمكن استدعاء الاسم الكامل للحساب
En nuestro <i>binding</i> podemos computar <i>full name</i>,
.وتمرير الخاصية الأولى والأخيرة
meter las propiedades <i>first</i> y <i>last</i>
.وبعد ذلك سيستدعي هذا ويُرجع القيمة
y luego esto llamará a este muchacho y le devolverá un valor.
،عند العودة إلى "كروم" وتحديث الصفحة
Volvemos a Chrome, actualizamos y veo lo mismo,
أرى الشيء نفسه، لكني ربطت .كائن الخصائص بعض الشيء
pero ordené mis propiedades objeto.
وهذا الأمر، مرة أخرى، مفيد إذا كانت لديكم خاصية
Esto es útil si tienes
.ربما تستخدمونها فقط في مكان واحد
una propiedad que solo uses en un sitio.
والآن شيء أخير أود عرضه عليكم؛
Lo último que te mostraré será cómo añadir
.كيفية إضافة أسلوب عام إلى المكون
un método público a tu componente.
فما سأفعله هو إضافة أسلوب اهتزاز
Lo que haré será añadir un método <i>shake</i>,
.لكي تتذبذب علامة الاسم قليلاً
para que la etiqueta <i>name</i> se mueva un poco.
CSS ولأجل ذلك، سأبدأ باستخدام القليل من
Pare hacer eso, empezaré con un poco de CSS
.ولاحظوا محدد المضيف الذي كتبته هنا
y fíjate en este seleccionador <i>host</i> que escribí aquí.
سأستهدف المضيف
Estoy enfocando al <i>host</i>.
ثم أضع هذه الأقواس، وأمرر اسم فئة
Tengo estos paréntesis, así que meteré un tipo <i>name</i>.
.وهكذا يسمح للعنصر بالإشارة إلى نفسه
Esto permite al elemento mencionarse a sí mismo.
فهو يقول أساسًا، إذا كانت تنطبق علي shake هناك فئة تسمى
Está diciendo que si tuviera un tipo llamado <i>shake</i> aplicado en él,
.فاستخدم كل هذه الأنماط
podrías usar todos estos estilos.
.أنا أنشئ فقط عنصرًا متحركًا هنا
Crearé una animación aquí.
وما سأفعله هو ،إسقاط بعض الأطر الرئيسية
Lo que haré será soltar unos marcos clave.
وتجعل هذه الأطر الرئيسية العنصر يتحرك
Estos marcos clave mueven el elemento a la derecha,
،قليلاً إلى اليمين ،وقليلاً إلى اليسار
a la izquierda y luego al centro.
.ثم يعود للمنتصف ولدي إصدارات المورد ذات البادئات لهذه الأطر الرئيسية
Tengo las versiones <i>vendor</i> prefijadas de estos marcos clave también,
،الرئيسي moz مثل إطار .الرئيسي، إلخ webkit إطار
como moz, webkit, etcétera.
.ويبدو أنه من الكود أكثر مما هو عليه
Parece que hay muchos códigos, pero no es así.
،سأنتقل الآن لأسفل إلى النموذج الأولي
Ahora iré a mi prototipo y puedo implementar
.ويمكنني تطبيق أسلوب الاهتزاز
un método <i>shake</i>.
كل ما سأقوله هو .لاهتزاز الفئة this.classlist.toggle
Lo que diré será <i>this.classlist.toggle</i>,
وبالتالي ستقوم بإضافتها ليهتز العنصر
este tipo <i>shake</i>. Lo añadirás, el elemento se agitará
وستقوم بالتبديل ليتم إزالته
y lo alternarás para que se quite.
.واستدعاءه ثانية، فيهتز العنصر، إلخ
Invocarás otra vez, el elemento se agitará, etcétera.
"ننتقل إلى "كروم ثم مباشرةً إلى أدوات التطوير
Volvemos a Chrome. Puedo ir a la herramientas <i>dev</i>
ونستخدم المفتش الصغير الموجود هنا
y utilizar este inspector chiquito
.لتحديد العنصر في المستند
para seleccionar mi elemento en el documento.
،وكما ترون، تم التمييز هناك
Verás que lo tengo ahí destacado.
Escape ويمكن الضغط على ،لفتح وحدة التحكم
Puedo darle a "escape" para abrir mi consola.
وسأعرض حيلة رائعة .ربما لم ترونها من قبل
Te mostraré un truco, por si no lo conocías.
في وحدة التحكم ،إذا كان لديكم عنصر محدد هناك
Estás en la consola con un elemento seleccionado, pulsas "$0"
.يمكن الضغط على $0 لتحديد العنصر .كما في استدعاء محدد الاستعلام
para seleccionar ese elemento, que es como llamar a <i>query selector</i>.
،والآن يمكن فقط تحديد $0 ،واستدعاء الأسلوب العام للاهتزاز
Puedo decir "$0, invocar al método público"
.وسترون أنه يهتز بالفعل
y lo verás agitarse.
،وأستدعيه مرة أخرى
Puedo invocarlo otra vez
وسترون أن تلك الفئة التي أضفناها تُزال .لأننا نستدعي تشغيلاً دون وجود فئة
y verás que ese tipo que añadimos se quitó porque eran alternancias sin clases.
.أستدعيه ثانية، تهتز
Invócalo otra vez. Se agita.
.وأستدعيه ثانية، فتُزال الفئة .وهكذا يتكرر الأمر
Invócalo otra vez. El tipo se quita. y así sucesivamente.
،مثال سريع وغريب
Un ejemplo claro y rápido,
ولكنكم عرفتم الآن كيفية إضافة خصائص عامة .وأساليب عامة إلى العنصر
pero ya sabes añadir propiedades públicas y métodos públicos a tu elemento.
الآن عرفتم، وأصبحتم على دراية بكيفية .إنشاء واجهة برمجة تطبيقات للعنصر
Ya lo tienes. Ya sabes cómo crear una API pública para tu elemento.
لكن لا تذهبوا الآن، وابقوا معي
No te vayas todavía y atento,
فقد حان وقت السؤال والإجابة
porque responderemos preguntas del público
وسأجيب على أسئلة المشاهدين .وسنوزع بعض المنتجات
y daremos parte del botín.
تأكدوا من الضغط .على هذا الزر الصغير للاشتراك
Cliquea el botón de suscripción.
.وكالعادة، شكرًا على المشاهدة .ألقاكم المرة القادمة
Como siempre, gracias por vernos y hasta la próxima.
.حسنًا، حان وقت السؤال والإجابة
Hora de las preguntas, muchachos.
سؤال اليوم من كاش كمنجز
La pregunta de hoy es de Kash Cummings, que dice:
ويسأل؛ لقد ذكرت أن استخدام من قبل /deep/ معين الدمج
"dijiste que usar el <i>deep</i> antes de insertar elementos de estilo
لإضفاء نمط على العناصر قد يكون خطيرًا .فقد يتسبب في أعراض جانبية غير مقصودة
puede ser peligroso, porque causa efectos secundarios.
هل هناك طريقة أكثر عمومية لإضفاء نمط على العناصر
¿Hay una forma de dar estilo a los elementos
التي لا تتطلب معرفة كل شيء عن عناصرها الداخلية؟
que no requiera conocimientos internos?"
.سؤال رائع يا كاش، شكرًا على إرساله
Muy buena pregunta. Gracias por mandarla.
في الواقع، يعد هذا من أفضل ميزات ."أحدث إصدار من "بوليمر
Esta es una de las mejores características de la última versión de Polymer.
،لدينا الآن نظام جديد تمامًا خاص بالأنماط
Tenemos un sistema de estilo nuevo.
وهو ما زال في طور التجريب .لكنه في الطريق
Todavía es experimental, pero salió.
يمكن اتباع الرابط الموجود .هنا لقراءة المزيد عنه
Sigue este enlace para leer más sobre eso.
CSS وهو قائم على متغيرات .والخصائص المخصصة
Se basa en variables CSS y en propiedades personalizadas.
.وفي اعتقادي هو رائع جدًا
Creo que es excelente.
"الحلقة التالية من "بوليكاستس .ستدور حوله، فتابعونا
El siguiente episodio de <i>Polycasts</i> irá sobre eso, así que atento.
مرة أخرى، شكرًا يا كاش .على إرسال سؤالك
Kash, gracias otra vez por tu pregunta.
ولكم جميعًا، برجاء إرسال مزيد من الأسئلة في "التعليقات" أدناه
A ti que estás ahí fuera, deja preguntas en los comentarios.
سنرسل لكم بعض المنتجات .في حالة اختيار سؤالكم
Tendrás regalos si sales.
.وكالعادة، شكرًا على المشاهدة .ألقاكم المرة القادمة
Como siempre, gracias por vernos y hasta la próxima.
Similar videos:

Routing 101 -- Polycasts #10
Google for Developers
29.6K views 367 likes 4 dislikes 23 Feb 201543% match

Theming Elements -- Polycasts #17
Google for Developers
28.1K views 233 likes 2 dislikes 02 Jun 201541% match

Moar routing with... more-routing -- Polycasts #11
Google for Developers
22.9K views 206 likes 4 dislikes 09 Mar 201539% match

Iron Icons -- Polycasts #20 (100 Days of Google Dev)
Google for Developers
22.3K views 137 likes 1 dislikes 09 Jul 201539% match


Go Offline -- Polycasts #19
Google for Developers
26.4K views 354 likes 8 dislikes 29 Jun 201538% match

Scrolling at 60 frames with core-list -- Polycasts #12
Google for Developers
24.6K views 247 likes 4 dislikes 23 Mar 201536% match

Core Iconset -- Polycasts #02
Google for Developers
24.6K views 171 likes 2 dislikes 06 Oct 201436% match


Polymer 0.8: First Look -- Polycasts #13
Google for Developers
25.7K views 253 likes 7 dislikes 06 Apr 201534% match

Polymer Starter Kit -- Polycasts #18
Google for Developers
45.6K views 428 likes 6 dislikes 15 Jun 201534% match

Core Toolbar -- Polycasts #03
Google for Developers
34K views 265 likes 7 dislikes 20 Oct 201433% match

Core Icons -- Polycasts #01
Google for Developers
58K views 380 likes 5 dislikes 22 Sep 201430% match

Slick web animations -- Polycasts #23
Google for Developers
37.9K views 404 likes 7 dislikes 12 Aug 201530% match


Geolocation - Geocasts
Google for Developers
25K views 569 likes 7 dislikes 12 Apr 201729% match

Google Developers Channel - Trailer
Google for Developers
181.5K views 116 likes 21 dislikes 03 Sep 201529% match

Styling your Maps - Geocasts
Google for Developers
123.4K views 642 likes 9 dislikes 21 Sep 201626% match

Polymer: Creating responsive UIs
Google for Developers
42.9K views 323 likes 14 dislikes 25 Jun 201425% match

AdWords API DevBytes Episode 1: Why Use the AdWords API?
Google for Developers
61K views 138 likes 10 dislikes 22 Sep 201524% match

What Deep Dream sees -- LazyWeb #12
Google for Developers
51.6K views 413 likes 27 dislikes 07 Jul 201524% match

Maps Live: Place Autocomplete in the Google Maps JavaScript API
Google for Developers
109.9K views 231 likes 23 dislikes 19 Jan 201424% match

Google I/O 2016 Highlights
Google for Developers
46.6K views 649 likes 15 dislikes 26 May 201624% match

VR & Cinema - Google I/O 2016
Google for Developers
76.6K views 683 likes 47 dislikes 19 May 201624% match

VR at Google - Google I/O 2016
Google for Developers
73K views 484 likes 16 dislikes 19 May 201624% match

Google Summer of Code: Organizations Apply
Google for Developers
28.4K views 206 likes 8 dislikes 19 Jan 201723% match

Google Play Services 8.3
Google for Developers
51K views 342 likes 37 dislikes 05 Nov 201523% match


Sequence Models and the RNN API (TensorFlow Dev Summit 2017)
Google for Developers
43K views 426 likes 18 dislikes 15 Feb 201723% match

What is App Engine?
Google for Developers
89K views 453 likes 33 dislikes 03 Feb 201423% match

MapsZen Not Lost (100 Days of Google Dev)
Google for Developers
89K views 88 likes 5 dislikes 29 Jun 201523% match

Another Google (Apps) secret?
Google for Developers
48.5K views 269 likes 8 dislikes 16 Dec 201423% match

Google Play Services 8.1
Google for Developers
36.2K views 367 likes 33 dislikes 24 Sep 201523% match



Settings Privacy About Contact Donate