Extending Native Elements -- Polycasts #15YouTube↗  IA↗(long shot)
Science & Technology  18.6K views 164 likes 3 dislikes   04 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
ROB DODSON: Hai semua.
ROB DODSON : Salut, ça va ? Ici Rob Dodson.
Halo.
Aujourd'hui dans Polycasts, je vous révèle
Saya Rob Dodson. Polycast kali ini, saya akan menunjukkan
une astuce très importante : comment hériter d'un élément HTML natif.
trik yang sangat penting, cara mewarisi dari
Non seulement ça vous épargnera bien des maux de tête en accessibilité,
elemen <i>HTML</i> asal. Trik ini tidak hanya akan menyelamatkan Anda dari kebingungan,
mais c'est en plus crucial si on veut
tapi juga penting jika Anda ingin
travailler avec des formulaires ou des tableaux.
bekerja dengan formulir atau tabel.
Voyons voir ça.
Ayo kita mulai.
L'héritage d'un élément natif
Mewarisi dari elemen asal
ne diffère pas tellement de la création d'une nouvelle balise.
tidak jauh beda dengan membuat tag baru.
On appelle toujours le constructeur Polymer,
Anda masih harus memanggil
la différence est qu'on lui transmet une propriété <i>extends</i>
konstruktor <i>Polymer</i>. Bedanya, Anda menerapkan properti perluasan,
valant le nom de balise dont on veut l'héritage.
dan Anda menerapkan nama tag yang Anda warisi.
Pour utiliser le nouvel élément en balise,
Untuk menggunakan elemen baru dalam markup,
c'est vraiment simple.
ini sangat jelas.
On utilise la balise d'origine, on lui donne l'attribut <i>is</i>,
Anda menggunakan nama tag asli, Anda memiliki atribut <i>is</i>,
et on lui transmet le nom de balise étendue qu'on s'est créé.
dan menerapkan nama tag perluasan yang sudah Anda buat,
Donc "button" devient "super-button".
Jadi tombol ini adalah tombol super.
Si on veut le faire en Javascript,
Jika Anda ingin melakukannya dalam <i>JavaScript</i>,
on appelle <i>document.createElement</i>, puis on lui fournit les balises
Anda panggil <i>document.createElement</i>, menetapkan nama tag asli,
d'origine et de balise étendue.
dan memperluas nama <i>name-tag</i>.
La création d'un élément de cette manière
Membuat elemen dengan cara ini
se nomme une "extension de type".
dikenal sebagai elemen ekstensi jenis.
Et comme je l'ai dit, ils ont des avantages bien sympathiques.
Seperti yang saya bilang sebelumnya, ada keuntungan yang menarik.
Mettons qu'on travaille avec un tableau,
Jadi anggap saja Anda bekerja menggunakn tabel,
et qu'on ait ici un élément <i>fancy-td</i>
dan Anda sudah membuat elemen <i>fancy-td</i>
de notre création là-dedans.
di dalam sini.
Ce qui va se passer, c'est que le parseur va lire
Yang akan terjadi, saat pengurai bekerja
la page progressivement, buter sur ce truc,
dalam halaman, pengurai akan menjumpai ini,
et va en fait l'ôter carrément du tableau.
dan akan menyeretnya ke luar tabel.
Pour certains éléments comme <i>table</i>, <i>ul</i> et <i>ol</i>,
Karena elemen tertentu, seperti <i>Table</i> dan <i>UL</i> dan <i>OL</i>,
s'il y a du contenu imprévu
jika ada konten di dalamnya,
pour le parseur,
dan pengurai tidak mengharapkannya.
soit il ne va pas le rendre,
pengurai takkan mengubahnya,
soit il va faire comme ici et l'ôter de l'ensemble
atau akan menyeretnya keluar.
et ce n'est probablement pas dans vos intentions,
Kemungkinan bukan itu yang Anda inginkan.
car le rendu sera plutôt bizarre.
Pengurai akan mengubah dengan cara yang aneh.
Mais on peut corriger ça.
Kita dapat memperbaikinya.
Au lieu de définir un nom de balise spécial,
Daripada membuat nama tag khusus,
on peut étendre l'élément natif <i>td</i>
kita dapat memperluas elemen <i>td</i> asli
pour créer <i>fancy-td</i> et ainsi, tout va bien.
dan membuat <i>fancy-td</i> dengan cara begitu, dan ini bagus.
Un autre cas d'usage pour l'extension de type, les formulaires.
Kasus penggunaan lain untuk elemen ekstensi tipe adalah formulir.
En temps normal, les formulaires essaient de rassembler les valeurs
Biasanya formulir berusaha mengemas semua nilai
de tous les éléments de saisie qu'ils contiennent.
dari semua elemen masukan yang ada di dalamnya.
Mais si vous insérez cette balise dans un formulaire, le navigateur
Namun jika seseorang melihat formulir ini,
se dira « j'ignore totalement ce que cette balise signifie,
kira-kira dia akan berkata, saya tidak paham dengan tag ini.
j'ignore si elle contient des valeurs,
Saya tidak tahu apa ada nilainya.
je vais plutôt l'ignorer lors de l'envoi
Saya akan mengabaikannya saat mengirimkan
de ma charge au serveur. »
muatan ke server.
Là encore, on peut corriger ça en étendant l'élément natif <i>input</i>.
Sekali lagi, kita dapat memperbaikinya dengan memperluas elemen masukan
Donc « input is="fancy-input" »,
asal. Jadi masukannya adalah <i>fancy-input</i>.
<i>ça</i>, ça va permettre d'envoyer toutes les valeurs au serveur.
Masukan ini akan mendapat semua nilai yang dikirim ke server.
Donc tout va bien.
Jadi semuanya bagus.
Autre avantage sympa, si on observe l'élément <i>input</i>
Manfaat keren lainnya adalah, jika Anda melihat elemen masukan asal
natif et qu'on appuie sur la touche Tabulation du clavier,
dan Anda menekan tombol<i> Tab</i> di keyboard,
normalement on voit un marqueur de sélection apparaître.
biasanya Anda akan melihat lingkaran fokus di sekitarnya.
Alors, cet état de sélection est crucial pour les utilisateurs
Keadaan fokus ini sangat penting bagi pengguna
d'aide à la saisie,
teknologi bantuan.
il y a beaucoup de gens qui ne peuvent pas utiliser la souris
Ada banyak orang yang tidak bisa menggunakan mouse
pour interagir avec l'écran.
untuk berinteraksi dengan layar.
Ces personnes comptent sur la navigation au clavier,
Mereka bergantung pada navigasi keyboard untuk berpindah tempat.
et pour elles, les états de sélection sont très très importants.
Bagi mereka, keadaan fokus ini sangat amat penting.
Si on étend cet élément <i>input</i> natif avec l'élément
Jika Anda memperluas elemen masukan asal dengan elemen ekstensi jenis
d'extension de type, vous aurez ce comportement de sélection au passage.
Anda akan mendapatkan perilaku fokus ini
Sinon, si vous venez de créer votre propre balise,
secara gratis. Jika tidak, jika Anda hanya membuat tag sendiri,
vous devrez alors définir votre propre <i>tabindex</i>,
Anda perlu menambahkan indeks tab sendiri,
vous devrez définir vos règles,
menambahkan aturan sendiri,
ajouter vos propres attributs ARIA,
menambahkan atribut <i>ARIA</i> sendiri.
Vous devrez faire beaucoup plus de
Ada banyak pekerjaan aksesibilitas
travail sur l'accessibilité qu'en étendant des éléments natifs,
yang harus dilakukan jika Anda tidak memperluas elemen asal,
car ici, on récupère l'accessibilité au passage.
karena Anda akan mendapatkannya dengan gratis.
Essayons un peu d'implémenter notre propre élément
Mari kita coba mengimplementasikan elemen ekstensi
d'extension de type, pour vraiment voir clairement
Anda sendiri, dan itu akan benar-benar menekankan
certains de ces avantages.
beberapa manfaat ini.
Alors pour débuter, je vais déjà
Untuk memulai, saya akan
créer un fichier "bower.json".
membuat file <i>JSON Bower</i>.
J'ai un élément de ma création, nommé "gh-button",
Saya membuat elemen bernama <i>gh-button</i>.
il va ressembler aux boutons
Terlihat seperti tombol yang
qu'on voit sur le site internet GitHub.
Anda lihat di situs web <i>GitHub</i>.
J'ai une dépendance sur Polymer, je dépends ici
Saya bergantung pada <i>Polymer</i>, dan bergantung pada
de la version 0.8.
rilis <i>0.8</i> di sini.
Dans mon terminal, je vais lancer "bower install"
Di terminal, saya akan menjalankan <i>Bower install</i>
pour télécharger cette dépendance.
untuk menarik dependensi itu.
Comme Polymer dépend implicitement de <i>webcomponentsjs</i>,
Karena <i>Polymer</i> secara implisit bergantung pada <i>Web Components JS</i>,
je l'aurai aussi au passage, ce qui est plutôt sympa.
saya juga akan mendapatkannya secara gratis, bagus sekali.
Enfin, dernière action,
Hal terakhir yang saya lakukan
lancer la commande "polyserve".
adalah menjalankan perintah <i>polyserve</i>.
Alors Polyserve, si on se souvient du dernier épisode,
Polyserve, jika Anda ingat episode terakhir kami,
est un petit serveur qui nous permet d'écrire nos éléments avec
adalah server kecil yang memungkinkan kita menulis elemen menggunakan
des URL aux chemins canoniques.
URL jalur kanonis.
Si vous ne comprenez pas du tout de quoi
Jika Anda benar-benar tidak paham dengan
je parle, vous pouvez cliquer sur ce lien, juste ici,
yang saya bicarakan, Anda dapat mengikuti tautan di sini untuk
pour voir l'épisode précédent
menonton episode sebelumnya.
qui explique tout ce qu'on va faire ici.
Video itu akan menjelaskan tentang apa yang kita lakukan di sini.
Dans mon fichier "gh-button.html",
Di file <i>htme gh-button.</i> saya,
Je vais commencer par importer "polymer.html",
saya akan memulai dengan mengimpor <i>HTML Polymer</i>.
et j'utilise le style avec un chemin canonique
Dan menggunakan gaya jalur kanonis
pour ce faire.
untuk melakukannya.
Ensuite j'ai un <i>dom-module</i> dont l'identifiant vaut "gh-button",
Lalu ada modul <i>dom</i> dengan ID <i>gh-button</i>.
à l'intérieur, j'insère des éléments<i> template</i> et <i>content</i>…
Di dalamnya akan saya masukkan template dan elemen konten.
Dernière opération, j'appelle le constructeur
Hal terakhirdi skrip saya, saya akan memanggil
Polymer, je lui définis<i> gh-button</i>,
konstruktor <i>Polymer</i>, menetapkan <i>gh-button</i>.
et je lui passe aussi « extends: "button" »,
Dan saya akan menetapkan tombol perluasan.
ainsi on a créé une extension de type
Jadi, kita sekarang membuat elemen ekstensi jenis
pour la balise native <i>button</i>.
dari tag tombol asli.
Dans mon fichier "demo.html", je vais déjà importer
Di file <i>HTML</i> demo, saya akan mulai dengan mengimpor
"webcomponents-lite.js".
<i>webcomponents-lite.js.</i>
Puis j'inclus une importation pour "gh-button.html".
Lalu, saya akan menyertakan impor untuk <i>gh-button.html.</i>
Enfin, dans le corps de page,
Terakhir, di batang tubuh, saya akan
j'utilise l'élément <i>button</i>,
menggunakan elemen tombol.
j'indique ensuite « is="gh-button" »,
Saya akan menyebutnya<i> gh-button</i>.
puis je vais caser dedans un petit « <i>Hello World</i> ».
Lalu saya akan menambahkan teks "Hello World" di dalamnya.
Si je passe dans le navigateur pour prévisualiser ceci,
Jika saya membuka browser untuk mempratinjau,
j'aurai ce petit bouton là-haut dans l'angle.
Akan ada elemen tombol kecil di
Et quand je clique dessus, j'ai le comportement attendu.
pojok sini. Anda lihat saat saya mengekliknya, perilakunya sesuai harapan.
Si je fais Tabulation, j'ai ma sélection dessus.
Jika saya menekan <i>Tab</i>, ada cincin fokus di sekitarnya.
Plus important, quand je passe sur mon lecteur d'écran,
Yang terpenting, saat membuka pembaca layar,
je peux en fait descendre dessus
saya dapat menavigasi seluruhnya.
et on voit que le lecteur d'écran
Anda akan lihat bahwa pembaca layar
lit le contenu du bouton…
akan membaca konten tombol.
et qu'il précise que c'est un bouton.
Dan akan memberi tahu bahwa ini adalah tombol.
Il annonce en fait ce rôle implicite, ici.
Serta akan memberi tahu peran implisit ini di sini.
Voilà qui est très, très utile.
Itu benar-benar bermanfaat.
Dernière chose à faire pour mettre ce bouton en relief,
Hal terakhir yang saya lakukan adalah menghias tombol ini
je vais insérer un élément <i>style</i>,
artinya saya akan memberikan elemen gaya.
et j'ai rajouté ici tout un tas de CSS,
Dan ada banyak <i>CSS</i> yang saya sertakan di sini.
je l'ai simplement emprunté au fichier CSS de GitHub,
Saya baru mengambilnya dari file <i>CSS GitHub</i>.
donc inutile de se soucier de tous ces sélecteurs,
Anda tidak perlu khawatir, tentang apakah selektor ini.
une chose à repérer est que j'utilise le sélecteur "host"
Satu hal yang perlu diingat adalah saya menggunakan pemilih <i>host</i>
pour styliser l'élément lui-même.
untuk mendandani elemen itu sendiri.
Je suis aussi allé plus loin et grâce au
Saya juga ke sini, dan menggunakan
CSS de GitHub, j'ai précisé les états "sélectionné", "survolé", et "actif",
<i>CSS GitHub</i>, menentukan<i> focus states</i>, <i>hover states</i>,
on voit comment appliquer en gros ces pseudo-états à des éléments,
<i>active states</i>. Anda dapat melihat cara menerapkan<i> pseudo-states</i> jenis ini
il est très important de le faire pour l'accessibilité.
ke elemen. Penting sekali bagi Anda guna melakukan ini untuk aksesibilitas.
Alors on retourne dans Chrome, j'actualise la page et
Sekarang, kembali ke Chrome, saat saya menyegarkan halaman,
on voit que j'ai un bouton bien plus classe.
Anda akan melihat bahwa tombol saya terlihat lebih bagus.
Je clique dessus. J'ai le même comportement qu'avant.
Klik tombol itu. Perilakunya sama seperti sebelumnya.
Je peux faire Tabulation pour placer la sélection dessus,
Saya bisa menekan <i>Tab</i> untuk memunculkan cincin fokus.
et plus important, je peux passer sur mon lecteur d'écran
Yang terpenting, saya dapat membuka pembaca layar
et naviguer jusqu'au bouton.
dan menavigasi ke tombol ini.
Je vois que le contenu sera lu à voix haute
Saya akan melihat konten teks,
et j'ai toujours cette indication implicite que c'est un bouton.
dan keadaan tombol implisit akan tetap keren.
Alors, la question qui se pose est, évidemment « quand utiliser
Sekarang, pertanyaannya adalah kapan saya harus
un élément d'extension de type
menggunakan Elemen Ekstensi Jenis?
et quand créer une balise personnalisée ? »
Dan kapan saya harus membuat Tag Khusus?
Ma règle personnelle est d'essayer de partir des éléments natifs
Prosedur saya, cobalah memperluas dari elemen asal,
dès que possible, surtout si l'accessibilité
kapan pun itu mungkin, terutama jika aksesibilitas
joue un rôle dans tout ça.
memainkan peran.
Donc si je crée une commande ou un bouton,
Jadi, jika saya membuat kontrol atau tombol,
tout ce qui réclame une sélection,
sesuatu yang mungkin perlu fokus,
j'essaierais de faire l'extension d'un élément natif
saya akan mencoba memperluas dari elemen asal,
si c'est possible.
jika mungkin.
C'est tout pour l'instant.
Itu saja hari ini.
Abonnez-vous et n'oubliez pas de rester
Pastikan berlangganan, terus ikuti
pour la question de la semaine.
untuk pertanyaan minggu ini.
Comme toujours, merci de votre attention,
Seperti biasa, terima kasih telah menonton.
et à la prochaine fois.
Sampai jumpa lagi.
Allez, l'Instant Q&R ! Edward… Wieczorek
Baiklah, waktunya T&J, Edward Wieczorek
et Justin Merz demandent : « Est-il prévu
dan Justin Merz bertanya, apakah ada rencana
de supporter les modules d'ES6 dans Polymer ? »
untuk mendukung <i>Modul ES6</i> di <i>Polymer</i>?
C'est une bonne question, les gars.
Pertanyaan yang bagus, Teman-teman.
Actuellement, le plan est de prendre en charge les modules d'ES6
Saat ini, rencana kami adalah mendukung <i>Modul ES6</i> saat
quand ils seront intégrés aux navigateurs.
modul itu tersedia di browser.
Actuellement, pour utiliser les modules d'ES6,
Sekarang, untuk menggunakan <i>Modul ES6</i>,
il faut passer par une étape d'intégration ou une bibliothèque.
Anda harus menggunakan sejenis langkah build atau pustaka
On veut éviter d'obliger tout le monde à passer par
seperti itu. Kami ingin menghindari memaksa orang menggunakan
une intégration juste pour Polymer
langkah build hanya untuk <i>Polymer</i>.
donc le plan du moment est, une fois
Jadi, rencananya saat ini adalah
que ces trucs seront dans les navigateurs, on va à 100%
setelah modul itu tersedia di browser, tentunya kami
les prendre en charge, oui.
ingin mendukungnya 100%.
Merci beaucoup pour cette question,
Terima kasih atas pertanyaannya.
je demanderai à mes sbires de vous contacter sur Google+,
Saya akan menyuruh para minion menghubungi Anda di G+.
et si vous aussi, vous voulez vos propres instants top swag,
Dan jika Anda ingin mendapatkan suvenir,
posez-nous une question en commentaire,
ajukan pertanyaan di komentar.
et peut-être qu'elle sera dans un prochain épisode.
Mungkin akan kami tayangkan di episode mendatang.
Là encore, merci de votre attention,
Terima kasih telah menonton,
et à la prochaine fois.
sampai jumpa lagi.
Similar videos:

Unit Testing with Web Component Tester -- Polycasts #36
Chrome for Developers
17K views 127 likes 5 dislikes 03 Dec 201561% match

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

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

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

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

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

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


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

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


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

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

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

Behaviors -- Polycasts #21
Google for Developers
25.5K views 273 likes 4 dislikes 15 Jul 201534% match

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

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


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

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

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

Supercharging page load (100 Days of Google Dev)
Google for Developers
99.2K views 2.5K likes 22 dislikes 10 Jun 201526% match

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

Silky smooth Web Animations
Google for Developers
36.7K views 450 likes 6 dislikes 18 Jun 201424% match

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

All about Beacons: Coffee with a Googler meets Peter Lewis
Google for Developers
76.6K views 299 likes 8 dislikes 15 Sep 201623% match

Accessing Google APIs: Common code walkthrough
Google for Developers
45.9K views 188 likes 14 dislikes 13 Nov 201423% match

An Introduction to CocoaPods (Route 85)
Google for Developers
74.8K views 1.3K likes 20 dislikes 29 May 201523% match

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

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

Listing your files in Google Drive
Google for Developers
40.2K views 125 likes 20 dislikes 13 Nov 201423% match

Getting started with Firebase and Android - Firecasts #1
Google for Developers
113.8K views 1.1K likes 19 dislikes 16 Feb 201622% match

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


Settings Privacy About Contact Donate