Behaviors -- Polycasts #21YouTube↗  IA↗(long shot)
Science & Technology  25.5K views 273 likes 4 dislikes   15 Jul 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! ¿Qué tal? Soy Rob Dodson.
Herkese merhaba. Nasılsınız?
Hoy, en <i>Polycasts</i>, les mostraré
Ben Rob Dodson. Bugün Polycasts'te
un patrón muy potente para extender los prototipos de sus elementos
davranışları kullanarak element prototiplerinizi
usando comportamientos.
genişletecek etkili bir model öğreneceğiz.
Los comportamientos le abrirán una puerta a un nuevo mundo.
Davranışlar size yepyeni bir dünyanın kapısını açacak.
Además, quiero que se quede hasta el final.
Ayrıca, sonuna kadar izlemenizi tavsiye ederim,
Entregaré premios durante las preguntas y respuestas.
çünkü soru cevap kısmında hediyelerimiz olacak.
Tenemos sudaderas, camisetas, stickers,
Sweatshirtler, tişörtler, çıkartmalar
muchas cosas increíbles. No se lo puede perder.
ve daha nicesi sizi bekliyor. Sakın bizden ayrılmayın.
Bien, suficiente parloteo. Comencemos.
Bu kadar gevezelik yeter.
¿Qué son exactamente los comportamientos?
Haydi işe koyulalım. Davranış nedir?
Básicamente, un comportamiento es un módulo de código
Davranış, özetle, element prototipinize ekleyebileceğiniz
que se puede añadir al prototipo de su elemento
küçük bir kod birimidir.
para otorgarle al prototipo propiedades adicionales,
Element prototipinize ek özellikler verir.
oyentes e, incluso, métodos.
Dinleyici ve metot bile ekleyebilir.
Quizá le parezca que ya hacía algo similar gracias a la herencia.
Buna benzer bir şeyi kalıtım [<i>Inheritance</i>] aracılığıyla yaptığınızı hatırlıyorsunuzdur.
Pero la herencia presenta problemas que los comportamientos pueden resolver.
Ama davranış sayesinde kalıtımda doğabilecek bazı sorunların önüne geçeriz.
Por ejemplo, supongamos que tiene un menú
Diyelim bir menünüz var
y quiere resaltar al hijo que está actualmente seleccionado.
ve seçili alt öğeyi aydınlatmasını istiyorsunuz.
Y, como es una funcionalidad muy útil,
Bu çok faydalı bir işlev olduğu için,
quizá quiera extraerla y abstraerla en un elemento padre.
onu alıp ana elemente çıkartabilirsiniz.
Ahora tendrá múltiples elementos
Artık aynı ana element altındaki birden fazla elemente
que heredarán del mismo padre y tendrán la misma funcionalidad.
aynı işlevi kazandırabiliriz.
Genial.
Bu da harika bir şey.
Pero ¿qué pasa si quiere agregar comportamiento de selección múltiple
Peki çoklu seçim davranışını sadece bu iki elemente
a solo dos de estos elementos?
eklemek istiyorsak?
No quiere duplicar el código.
Kodu tekrarlamak istemeyiz.
Entonces, podría agregarlo aquí arriba, en el padre.
Bunu şu ana elemente koyabiliriz.
Pero eso implica que este elemento de aquí
Ama bu, şu alttaki elementin
heredará todo ese código aun cuando no lo use.
tüm kodu alacağı anlamına gelir.
Se ve forzado a aceptar todo ese código inútil.
Kullanmasa dahi. Tüm bu ıvır zıvırı almak zorunda kalacak.
Otro asunto es el de herencia múltiple.
Diğer bir sorun da çoklu kalıtım.
Digamos que quiero agregar un lindo efecto de animación de ondas
Diyelim ki tüm bu elementlere tatlı bir dalgalanma
a todos estos elementos.
animasyonu eklemek istiyorsunuz.
No tiene sentido agregarlo en el padre
Bunu ana elemente koymak çok mantıklı olmaz.
ya que este nodo padre tiene una función: ocuparse de la selección.
Çünkü ana elementlin tek işi seçimle ilgilenmek.
Se podría crear una cadena de herencia de este tipo,
Sonuçta elimizde böyle bir kalıtım zinciri olur.
pero es una forma poco prolija de resolver el problema.
Bu da bu sorunu halletmek için pek iyi bir çözüm değil.
Aquí vienen a brillar los comportamientos
Davranışların [<i>Behavior</i>] daha iyi olmasının nedeni
porque resuelven ambos problemas.
bu iki sorunu da çözebilmeleri.
Un elemento Polymer puede contener una serie de comportamientos;
Bir Polymer elementi bir dizi davranış saklayabilir.
es decir, podemos mezclar cuanta funcionalidad queramos.
Yani içine istediğimiz kadar işlev koyabiliriz.
Nuestro menú podría tener un comportamiento seleccionable
Böylece menümüzün, alt elementlerden birini aydınlatabilen
para admitir el resaltado de uno de sus hijos.
seçilebilir bir davranışı olur
Puede agregar un comportamiento de selección múltiple si lo necesita.
Gerekirse çoklu seçim davranışını da ekleyebiliriz.
Y, también, el comportamiento de animación de onda.
Son olarak da dalga animasyonu davranışını ekleyebilir.
Poder elegir qué comportamientos se agregan a su componente
Bileşenenize eklenecek davranışları seçebildiğimiz için
le da un gran control sobre el código que se agrega a su elemento.
elementinize koyacağınız kod üzerinde fevkalade hassas bir kontrolünüz olur.
Eso elimina código inútil y, además,
Bu da tüm ıvır zıvırdan kurtulur
hace que su elemento sea más claro.
ve elementinizi daha anlaşılır hâle getirir.
Ahora que entiende la importancia de los comportamientos,
Davranışların neden bu kadar önemli olduğunu anladıysak
el próximo paso es aprender a implementarlos en sus componentes.
şimdi de onları nasıl kendi bileşenlerine
Veamos.
nasıl ekleyeceğimize geçelim.
Los comportamientos son objetos globales.
Gelin bir bakalım. Davranışlar evrensel nesnelerdir.
Es importante darles un espacio de nombre.
Onlara ad alanı vermek gerekir.
Crearé directamente un espacio de nombre llamado <i>MyBehaviors</i>.
Şimdi de <i>MyBehaviors</i> diye bir ad alanı oluşturacağım.
Y el comportamiento que implementaré se llamará <i>PressedBehavior</i>.
Ekleyeceğim davranış ise <i>PressedBehavior</i> olacak.
Los comportamientos son iguales a los prototipos de elementos Polymer.
Bu davranış, bir Polymer elementi prototipi gibi görünecek.
O sea, pueden tener un objeto propiedades.
Yani bir özellikler nesnesi olabilecek.
Esas propiedades se mezclan con las de mi elemento.
Bu özellikler, element özelliklerimin arasına karışacak.
Crearé un objeto propiedades con la propiedad <i>pressed</i>.
Buraya <i>pressed</i> adlı bir özellik aracılığıyla,
Es un <i>boolean</i> con valor predeterminado de falso
bir özellikler nesnesi koyacağım. Bu, varsayılanı <i>false</i> olan bir Boole değeridir
y es de solo lectura. No quiero que lo puedan modificar.
ve salt-okunur olarak ayarlanmıştır. Kimsenin bu değeri koymasını istemiyorum.
Solo quiero que cambie en respuesta a eventos.
Sadece olaylara göre değişmesini istiyorum.
También puedo agregar objetos oyentes a este elemento,
Bu elemente dinleyici nesneler de ekleyebilirim.
igual que en un elemento Polymer.
Tıpkı bir Polymer elemente yapabileceğim gibi.
Voy a oír eventos de <i>mouseup</i> y <i>mousedown</i>.
Fareye basma ve kaldırma olayları için dinleyici koyacağım.
Los adjuntaré a estos dos manejadores:
Şimdi de şu iki işleyiciyi ekleyeceğim:
<i>addPressed</i> y <i>removePressed</i>.
<i>addPressed</i> ve <i>removePressed</i>.
Además, les pondré de prefijo un guion bajo.
Bu işleyicilerin önüne, küçük bir alt çizgi koyacağım.
Eso significa que estos son métodos protegidos.
Bu, onların korumalı metotlar olduğunu gösterir.
No son públicos.
Yani dışarıya açık değiller.
No quiero que nadie los llame.
Dış dünyanın onları çağırmasını istemiyorum.
Luego, agregaré la implementación de estos métodos.
Ardından, bu metotları
Entonces, agregaré dos funciones aquí para <i>addPressed </i>y <i>removePressed</i>,
yürüteceğim. <i>addPressed</i> ve <i>removePressed</i> için iki fonksiyon ekleyeceğim.
que tan solo agregarán la clase <i>pressed</i>
Bunlar, <i>pressed</i> sınıfını ekleyecek
o la quitarán de la lista de clases.
veya sınıf listesinden çıkaracak.
También puedo crear métodos abstractos.
Aynı zamanda soyut metotlar da oluşturabilirim.
Quizá no proveo la implementación yo,
Gerçekleştirmeyi burada vermeyebilirim,
sino que lo hace el propio elemento que usa el comportamiento.
onun yerine bu davranışı kullanan element kendi gerçekleştirmesini koyar.
Crearé dos métodos abstractos:<i> uno llamado onPressStart</i> y otro, <i>onPressEnd</i>.
Şimdi iki soyut metot oluşturacağım. Biri <i>onPressStart</i>, diğeri <i>onPressEnd</i>.
Y marcaré a ambos como abstractos.
İkisini de soyut olarak işaretliyorum.
De nuevo, aquí no hay código.
Buraya kod girmiyor.
Pero quien use el comportamiento puede implementar
Bu davranışı kullanan
su propia versión y estos se dispararán
kendi versiyonunu gerçekleştirir ve
cuando ocurra<i> addPress</i> o <i>removePress</i>.
<i>addPress</i> ve <i>removePress</i> durumunda bunlar çalışır.
Puedo también agregar callbacks de ciclo de vida al comportamiento.
Bu davranışa yaşam döngüsü geri çağrısı bile ekleyebilirim.
Aquí arriba puedo crear un <i>created callback </i>
Yukarı çıkıyorum ve bir geri çağrı ekliyorum.
que se ejecutará
Bu, elementin kendi yaşam döngüsü metotları çalıştıktan
después de que el ciclo de vida del elemento se haya ejecutado.
sonra çalışacak.
Ahora indicaré a la consola
Şimdi de konsola, bu davranışı kullanan bir nesnenin
que hay en el DOM un objeto que utiliza este comportamiento.
DOM'da olduğunu kaydediyorum.
Crearé un elemento botón para equilibrar el comportamiento que acabo de escribir.
Sonra da şimdi yazdığım davranışa karşılık gelen bir buton elementi oluşturuyorum.
Importaré la definición del comportamiento
Böylece bir Polymer elementinin tanımını içe aktardığım gibi
tal como importaría la definición de otro Polymer del cual depende.
davranışın tanımını da içe aktarabilirim.
Luego, en la serie de comportamientos puedo ingresar
Aşağıdaki davranışlar dizisinde,
el nombre del comportamiento en uso.
kullandığım davranışın ismini sürükleyebilirim.
Usaré aquí mi espacio de nombre<i> MyBehaviors</i>.
Ad alanım <i>MyBehaviors</i>'u kullanıyorum.
El nombre del comportamiento es <i>PressedBehavior</i>.
Davranışın adı ise <i>PressedBehavior</i>.
Y ahora puedo agregar algo de CSS para aprovechar esa clase.
Şimdi de <i>pressed</i> sınıfından faydalanmak için biraz CSS ekliyorum.
Aquí arriba añadiré una etiqueta de estilo.
Yukarıya bir stil etiketi yazacağım
Y voy a usar el selector <i>host</i>
ve bu host seçiciyi
para elegir a la clase <i>pressed</i>.
<i>pressed</i> sınıfını hedeflemek için kullanacağım.
Y, cuando está presente en este elemento botón,
Bu buton elementindeyken
quiero que ejecute una animación llamada <i>bounce</i>.
<i>bounce</i> adlı bir animasyon çalıştırmasını istiyorum.
La animación <i>bounce</i> es tan solo una animación de fotograma clave
<i>Bounce</i> animasyonu şurada oluşturduğum
que acabo de crear aquí.
bir anahtar çerçeve animasyonu.
En Chrome, abriré las herramientas del desarrollador
Chrome'a geçip <i> DevTools</i>'umu açıyorum.
así puede ver lo que está pasando.
Bakalım ne oluyor.
Encontraré el elemento en el documento. Aquí está.
Belgede elementi buluyorum.
Y, cuando haga clic sobre él, mostrará una animación
İşte burada. Tıkladığımda animasyonu göreceksiniz
y mostrará su clase.
ve o sınıf çıkacak.
Cuando lo suelto, la clase desaparece.
Bıraktığımda ise sınıf kaybolacak.
Hago clic, muestra la animación, aparece la clase y, luego, desaparece.
Tıkladığımda oynuyor. Sınıf ortaya çıkıyor ve kayboluyor.
Ahora probemos con otro elemento.
Şimdi başka bir elementle deneyelim.
Esta vez usaré un método abstracto.
Bu sefer şu soyut metotlardan birini kullanacağım.
Es el mismo proceso que antes.
Öncekinden bir farkı yok.
Importaré el comportamiento,
Bu davranışı içe aktaracağım.
lo agregaré al conjunto de comportamientos del elemento.
Elementin davranış dizisine ekleyeceğim.
Y, cuando eso esté listo,
Bunu hallettikten sonra da,
escribiré la implementación del método <i>onPressEnd</i>.
<i>onPressEnd</i> metodunun gerçekleştirmesini yazacağım.
Y haré que dé un mensaje de alerta que se me acaba de ocurrir.
Kendi bulduğum bir mesajla haber vermesini sağlayacağım.
Una vez listo todo eso, lo último que haré
Bu da bittikten sonra son işim,
será agregarle unos estilos.
stiller eklemek olacak.
Volveré a agregar el selector <i>host</i> aquí, y su objetivo será la clase <i>pressed</i>.
Bir kez daha basılı sınıfını hedefleyen
Esta vez, agregará una sombra al recuadro del elemento
host seçiciyi ekliyorum. Bu sefer elemente kutucuk gölgesi ekleyecek.
Vamos al documento, herramientas del desarrollador.
Belgeye geri dönüyorum ve
Tengo mi elemento de entrada aquí.
yine <i>DevTools</i>'u açıyorum. Burada giriş elementimi görüyorsunuz.
Cuando hago clic sobre él, le dará un sombreado al recuadro,
Üstüne tıkladığımda kutucuk gölgesi ekleniyor.
se agrega la clase <i>pressed</i>
Basılı sınıfı ekli.
y, cuando lo suelto, se dispara el alerta.
Bıraktığımda ise uyarı iletisi çıkacak.
Puedo ir a la consola
Buradan konsola geçiyorum.
y ver que el callback creado para el ciclo de vida
Davranışta oluşturulmuş yaşam döngüsü çağrısının
que implementé en el comportamiento se dispara dos veces
iki defa çalıştığını görüyorsunuz.
porque hay dos elementos que usan el mismo comportamiento.
Çünkü bu davranışı kullanan iki element var.
Este comportamiento que creamos
Şimdi oluşturduğumuz davranış,
es un gran punto de partida, pero un poco forzado
iyi bir başlangıç noktası olsa da
a efectos de la demostración.
demonun hatrına biraz uğraştırıcı.
Si quiere ver comportamientos potentes,
Eğer daha güçlü davranışlar görmek isterseniz
vea el catálogo de elementos.
element kataloguna bakın.
Hay comportamientos para validación personalizada de campos de entrada
Orada özel girdi alanı doğrulaması yapabilecek davranışlara
y comportamientos para accesibilidad.
veya erişebilirlik davranışlarına ulaşabilirsiniz.
Por ejemplo, <i>iron-a11y-keys-behavior</i> agrega un objeto keybindings
Örneğin <i>iron-a11y-keys-behavior</i> işleyicilere çeşitli tuş kombinasyonları
que permite mapear combinaciones de teclado a manejadores.
eşleyebileceğiniz bir davranıştır.
Y normaliza códigos de teclado a través de plataformas,
Ayrıca farklı platformlardaki tuş kodlarını düzgeler.
lo cual es muy útil.
Çok kullanışlı bir özellik.
Por último, está el conjunto Neon Animation,
Son olarak da animasyon eklenebilir elementleri
que se vale de comportamientos para definir elementos animables.
belirtmek için büyük ölçüde davranışları kullanan
Es más, ahora que entiende los comportamientos,
neon animasyonu var. Artık davranışları anladığınıza göre,
ya puede aprender sobre elementos de animación en el próximo video.
bir sonraki videomuzda animasyon elementlerinden
Espero que le haya resultado útil.
bahsetmeye başlayabiliriz. Umarım bunları yararlı bulmuşsunuzdur.
Los comportamientos cambian el modo de añadir funcionalidad a elementos
Davranışlar, elementlerinize eklediğiniz işlevler konusunda
y abren muchos caminos interesantes.
size yeni kapılar açabilir ve değişik seçenekler sunabilir.
Es todo por esta semana.
Bu haftalık bu kadar.
No olvide hacer clic en el botón de suscripción.
Alttaki Abone Ol butonuna basmayı unutmayın.
Si tiene preguntas, déjelas en los comentarios.
Eğer sorunuz varsa
Haré el intento de responderlas todas.
alttaki yorum kısmına yazın. Mümkün olduğunca okuyup yanıtlamaya çalışıyorum.
Como siempre, gracias por seguirnos. Hasta el próximo programa.
İzlediğiniz için teşekkür ederim.
Hola, ¿qué tal? Aquí Rob. Hora de preguntas y respuestas.
Bir dahaki videoda görüşmek üzere. Merhabalar. Ne var ne yok?
Cheo Walker pregunta: "¿Hay algo que reemplace
Ben Rob. Soru cevap zamanı. Cheo Walker, Polymer 1.0'daki çekirdek listenin yerine
a <i>core-list</i> en Polymer 1.0?"
kullanılabilecek bir şey var mı, diye sormuş.
Buena pregunta, Cheo. Gracias por enviarla.
Güzel soru, Cheo.
Estoy muy contento de anunciar
Gönderdiğin için teşekkür ederiz.
que hace muy poco lanzamos el nuevo elemento <i>iron-list</i>.
Kısa süre önce başlattığımız yeni iron-list elementini takdim etmekten mutluluk duyarım.
Si sigue este link, puede ver cómo funciona.
Bu bağlantı aracılığıyla havuza ulaşabilirsiniz.
Es igual que el bien amado <i>core-list</i>
Alıştığınız ve sevdiğiniz temel listeye
con toda la bondad del desplazamiento virtual infinito
Polymer 1.0'a taşıdığımız
pero migrado a Polymer 1.0.
sayısız müthiş sanal kaydırma özelliği ekledik.
Hay muchas cosas increíbles allí. Cheo, gracias por la pregunta.
Harika bir sürü şey bulacaksınız. Cheo, sorun için teşekkür ederiz.
Mis asistentes se comunicarán con Ud. y le entregarán su premio.
Cinlerimi sana yollayıp bir hediye çantası göndereceğim.
Si está mirando y tiene una pregunta, déjela aquí debajo, en los comentarios.
İzleyicilerimiz arasında sorusu olan varsa alttaki yorum kısmına yazabilir.
Intentaré por responderla.
Yanıtlamak için elimden geleni yapacağım.
Y quizá la incluyamos en el próximo programa de <i>Polycasts</i>.
Bu sayede Polycasts'in bir sonraki bölümüne konuk olabilirsiniz.
De nuevo, muchas gracias por seguirnos. Hasta el próximo programa.
Bir kez daha izlediğiniz için teşekkür ediyorum. Yakında görüşmek üzere.
Similar videos:

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

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

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

Polymer 0.8: First Look -- Polycasts #13
Google for Developers
25.7K views 253 likes 7 dislikes 06 Apr 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 201537% match

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

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


Content Switcheroo with Core-Pages -- Polycasts #09
Google for Developers
21.5K views 222 likes 2 dislikes 09 Feb 201536% match


Create reusable elements with ease -- Polycasts #14
Google for Developers
17.7K views 149 likes 1 dislikes 21 Apr 201536% match

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


Extending Native Elements -- Polycasts #15
Google for Developers
18.6K views 164 likes 3 dislikes 04 May 201534% match

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

Give your element an API -- Polycasts #16
Google for Developers
22.9K views 242 likes 1 dislikes 18 May 201532% match

What's new in Polymer 0.5.1 -- Polycasts #06
Google for Developers
19.7K views 232 likes 1 dislikes 01 Dec 201431% match

Core Header Panel -- Polycasts #04
Google for Developers
25.8K views 190 likes 1 dislikes 05 Nov 201430% match

Core Drawer Panel -- Polycasts #05
Google for Developers
23.1K views 185 likes 3 dislikes 17 Nov 201428% match

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

The Awesome Power of Auto-Binding Templates -- Polycasts #08
Google for Developers
29.8K views 276 likes 5 dislikes 28 Jan 201526% match


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

Android Performance Patterns: Performance Cost of Memory Leaks
Google for Developers
24.9K views 251 likes 4 dislikes 11 Mar 201523% match


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

Angular 2 Tutorial and Sublime Text Tips -- LazyWeb #7
Google for Developers
24.6K views 225 likes 18 dislikes 26 May 201522% match

Android Performance Patterns: Garbage Collection in Android
Google for Developers
28K views 321 likes 9 dislikes 11 Mar 201522% match


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

Google Cast: Introduction to the SDK
Google for Developers
47K views 141 likes 7 dislikes 10 Dec 201421% match

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

Push notifications for the web -- LazyWeb #3
Google for Developers
28.4K views 255 likes 10 dislikes 28 Apr 201521% match

DevBytes: Google Play Services 7.3
Google for Developers
34.2K views 332 likes 22 dislikes 28 Apr 201520% match


Google I/O 2014 - Unlock the next era of UI development with Polymer
Google for Developers
100.5K views 971 likes 26 dislikes 26 Jun 201420% match


Settings Privacy About Contact Donate