Το Google Polymer - Πώς θα αλλάξει τον τρόπο που κατασκευάζονται οι εφαρμογές ιστού

και στοιχεία που δημιουργούν κρυφά τα στοιχεία ελέγχου της συσκευής αναπαραγωγής UI.

Σήμερα, με τα Web Components, μπορούμε να ονομάσουμε και τα δικά μας στοιχεία. Μπορούμε να οικοδομήσουμε ένα στοιχείο όπως, να ενσωματώσετε μια ροή Twitter ή (ίσως) για να ενσωματώσετε ένα γράφημα.

Επιπλέον, αυτά τα προσαρμοσμένα στοιχεία μπορεί επίσης να έχουν μερικά αποδεκτά προσαρμοσμένα χαρακτηριστικά. Όσον αφορά το , ορίζετε ένα χαρακτηριστικό που ονομάζεται όνομα χρήστη το οποίο θα χρησιμοποιηθεί για να καθορίσετε το όνομα χρήστη Twitter.

Προσαρμοσμένα στοιχεία στο πολυμερές

Το πολυμερές έρχεται με μια δέσμη στοιχείων που αντιπροσωπεύουν (σχεδόν) κάθε ανάγκη web εφαρμογής. Η Google χωρίζει αυτά τα στοιχεία σε ομάδες: Στοιχεία σιδήρου, Στοιχεία χαρτιού, Στοιχεία Google Web, Στοιχεία χρυσού, Στοιχεία νέον, Στοιχεία πλατίνας και Μόρια.

1. Στοιχεία σιδήρου

Τα στοιχεία σιδήρου είναι μια συλλογή βασικών στοιχείων. Αυτά τα βασικά στοιχεία είναι αυτά που συνήθως χρησιμοποιούμε οικοδομήσουμε μια ιστοσελίδα όπως εισροή, μορφή και εικόνα. Η διαφορά είναι ότι ο Polymer προσθέτει επιπλέον εξουσίες σε αυτά τα στοιχεία.

Όλα τα στοιχεία αυτής της ομάδας είναι σίδερο- για παράδειγμα , που χρησιμοποιείται για την εμφάνιση μιας εικόνας. ο στοιχείο έχει εξοπλιστεί με κάποια επιπλέον χαρακτηριστικά που δεν μπορούμε να εφαρμόσουμε στην τακτική στοιχείο. Μπορούμε, για παράδειγμα, να προσθέσουμε προφόρτιση, ξεθωριάζει, και δείκτη κράτησης θέσης γνωρίσματα:

Το παραπάνω παράδειγμα θα εμφανίσει πρώτα το σύμβολο κράτησης θέσης της εικόνας και στη συνέχεια θα εξασθενίσει στην πραγματική εικόνα στο src καθώς είναι πλήρως φορτωμένο, πραγματοποιώντας ένα ομαλό εφέ φόρτωσης εικόνας.

2. Στοιχεία χαρτιού

ο Στοιχεία χαρτιού είναι μια ομάδα στοιχείων σχεδίασης υλικού. Το Σχεδιασμός Υλικών είναι η γλώσσα σχεδιασμού της Google για να κάνει τη διεπαφή χρήστη και την εμπειρία σε όλες τις πλατφόρμες Google, τόσο οι εφαρμογές Web όσο και το Android πιο οπτικά συνεπείς. Ορισμένα στοιχεία που είναι μοναδικά στο Σχεδιασμό Υλικού είναι το Χαρτί και το Πλωτό Κουμπί Δράσης (FAB).

Χαρτί

Χαρτί είναι η μεταφορά της Google για το μέσο που βασίζεται στο περιεχόμενο. Για να προσθέσετε χαρτί με Polymer, χρησιμοποιούμε το στοιχείο. Αυτό το στοιχείο παίρνει 2 χαρακτηριστικά:

• ανύψωση για να ανυψώσετε το χαρτί, προσθέτοντας έτσι μια σκιά για να ενισχύσετε την ανύψωση
• κινούμενα θα εφαρμόσει κινούμενη εικόνα ως αλλαγή ύψους χαρτιού.

Κουμπί μεταβλητής ενέργειας (FAB)

Το κουμπί μεταβλητής ενέργειας (FAB) είναι ένα κυκλικό κουμπί με ένα εικονίδιο, που επιπλέει στην οθόνη, συνήθως με ένα ξεχωριστό χρώμα. Η Google προτείνει ότι αυτό το κουμπί φέρει μια λειτουργία με συχνή πρόσβαση. Ακολουθεί ένα παράδειγμα:

Το ακόλουθο απόσπασμα κώδικα προσθέτει ένα υλικό χαρτιού με μια εικόνα και ένα FAB.

Θα έχουμε το ακόλουθο αποτέλεσμα:

Έχουμε μια φωτογραφία με ένα “καρδιά” κουμπί που επιπλέει πάνω του. Κάντε κλικ σε αυτό για να μοιάσετε με τη φωτογραφία και το κουμπί εκπέμπει ένα φαινόμενο κυματισμού για να αναγνωρίσετε το κλικ.

• Προβολή της επίδειξης χαρτιού

3. Google Web Components

Τα Google Web Components είναι ειδικά στοιχεία που αντιμετωπίζουν τα API και τις υπηρεσίες της Google, όπως οι Χάρτες Google, το Youtube, καθώς και το Google Feed, για να αναφέρουμε μερικά. Στοιχεία σε αυτήν την ομάδα να αλληλεπιδράσετε με τις υπηρεσίες της Google σε λίγες μόνο γραμμές.

Τα παρακάτω είναι ένα παράδειγμα για την εμφάνιση ενός Χάρτη Google χρησιμοποιώντας το στοιχείο.

  Αυτό είναι το Googleplex  

Όπως μπορείτε παραπάνω, το Το στοιχείο παίρνει το γεωγραφικό πλάτος και γεωγραφικό μήκος για να καθορίσετε τη θέση στον χάρτη. Μπορούμε επίσης να φωλιάζουμε για να εμφανιστεί ένας δείκτης χαρτών της συγκεκριμένης θέσης μαζί με ένα κείμενο που θα εμφανιστεί όταν κάνετε κλικ στον δείκτη.

• Προβολή της επίδειξης χαρτών

Θέλετε να εμφανίσετε ένα βίντεο στο Youtube; μπορείτε να χρησιμοποιήσετε το στοιχείο.

Ομοίως προσαρμόζουμε την έξοδο μέσω των χαρακτηριστικών.

• Δείτε την επίδειξη του YouTube

4. Χρυσά Στοιχεία

Τα Χρυσά Στοιχεία είναι τα στοιχεία σχεδιασμένα ειδικά για εφαρμογές ηλεκτρονικού εμπορίου. Εδώ θα βρείτε στοιχεία για την εμφάνιση της πιστωτικής κάρτας, του ηλεκτρονικού ταχυδρομείου, του τηλεφώνου και της εισόδου ZIP, τα οποία όλα έχουν εξοπλιστεί επιβεβαίωση μορφοποίησης για να διασφαλιστεί η σωστή εισαγωγή δεδομένων και ασφάλεια. Ακολουθεί ένα παράδειγμα για να προσθέσετε είσοδο πιστωτικής κάρτας Visa.

5. Άλλα στοιχεία

Τα υπόλοιπα στοιχεία περιλαμβάνουν στοιχεία Neon για κινούμενα σχέδια και ειδικά εφέ, στοιχεία Platinum για ειδοποιήσεις εκτός σύνδεσης και ώθησης και, τέλος, μόρια, περιτυλίξεις για βιβλιοθήκες τρίτων.

Σημείωση του συντάκτη: Τη στιγμή της γραφής, τα στοιχεία Neon, στοιχεία Platinum και μόρια δεν είναι ακόμη διαθέσιμα.

Ενσωμάτωση πολυμερούς

Θέλετε να χρησιμοποιήσετε το Polymer στην ανάπτυξη ιστού; Δείτε πώς μπορείτε να το εγκαταστήσετε και να το ενσωματώσετε στις ιστοσελίδες σας. Καθώς τα περισσότερα στοιχεία του πολυμερούς βασίζονται μεταξύ τους, ο καλύτερος τρόπος για να εγκαταστήσετε το Polymer είναι μέσω του Bower.

Το Bower είναι ένας διαχειριστής εξαρτήσεων έργου που διευκολύνει την εγκατάσταση σεναρίων ή στυλ που απαιτούνται για την εκτέλεση του έργου. Ανατρέξτε στην παλαιότερη ανάρτηση μας σχετικά με τον τρόπο εγκατάστασης, ενημέρωσης και κατάργησης των βιβλιοθηκών ιστού με τον Bower.

Για να ενσωματώσετε το Polymer, ξεκινήστε το Terminal και στη συνέχεια πλοηγηθείτε στον κατάλογο του έργου σας, υποθέτοντας ότι έχετε δημιουργήσει ένα. Στη συνέχεια τρέξτε bower init εντολή να ξεκινήσει το αρχείο bower.json στο έργο σας που θα χρησιμοποιηθεί για την καταγραφή των εξαρτήσεων του έργου. Ανοίξτε το bower.json και προσθέστε τις ακόλουθες γραμμές.

 "εξαρτήματα": "πολυμερές": "Πολυμερές / πολυμερές # ^ 1.0.0", "google-web-components": "GoogleWebComponents / google-web-components- ^ 1.0.0" Πολυμερή στοιχεία / στοιχεία σιδήρου # ^ 1.0.0 "," στοιχεία χαρτιού ":" Πολυμερή / στοιχεία χάρτου # ^ 1.0.0 "," χρυσά στοιχεία ":" Πολυμερή / χρυσά στοιχεία # 1.0.0 " 

Αυτή η ρύθμιση προϋποθέτει ότι θα χρησιμοποιήσουμε όλα τα στοιχεία από κάθε ομάδα. Μπορείτε να καταργήσετε αυτό που δεν χρειάζεστε από τη λίστα εξάρτησης. Καθώς οι εξαρτήσεις ρυθμίζονται, εκτελέστε το bower install εντολή για την εγκατάσταση των εξαρτήσεων στη λίστα.

Αυτή η διαδικασία μπορεί να διαρκέσει λίγο, καθώς περιλαμβάνει την αρπαγή ενός τεράστιου όγκου αρχείων από τα αποθετήρια. Αφού γίνει, θα πρέπει να τα βρείτε αποθηκευμένα στο bower_components ντοσιέ.

Ανοίξτε το αρχείο HTML στο οποίο θέλετε να χρησιμοποιήσετε τα στοιχεία Polymer. Μέσα στην κεφαλή του εγγράφου, συνδέστε το WebComponents.js Ποιο είναι το polyfill για προγράμματα περιήγησης που δεν υποστηρίζουν ακόμη WebComponents, και εισαγάγετε τα αρχεία συστατικών χρησιμοποιώντας την εισαγωγή HTML.

Ακολουθεί ένα παράδειγμα:

Αυτή η ρύθμιση θα μας επιτρέψει να χρησιμοποιήσουμε το , , στοιχεία.

Βιτρίνες

Ακολουθούν μερικές από τις εφαρμογές ιστού που χρησιμοποιούν ήδη το Google Polymer.

Google

Το Google χρησιμοποίησε το Google Polymer στην ιστοσελίδα του Google IO 2015. Το Google Fi, η ασύρματη υπηρεσία Google για τους εταίρους και τους πωλητές σε εταιρική σχέση. και το Google Music.

Προσαρμοσμένα στοιχεία

Το CustomElements είναι ένας κόμβος στον οποίο μπορείτε να βρείτε προσαρμοσμένα στοιχεία που έχουν κατασκευαστεί με στοιχεία Web. Χρησιμοποιεί το στοιχείο Χαρτί για να περιέχει και να δημιουργεί τη λίστα. Παρέχει επίσης μια βολική διαδρομή για την εγκατάσταση αυτών των στοιχείων μέσω του Bower και του NPM.

Chrome Dev Editor

Μια εφαρμογή Chrome για επεξεργασία κώδικα που λειτουργεί εκπληκτικά καλά. Αυτή η εφαρμογή χρησιμοποιεί το κουμπί FAB, το μενού Χαρτί και τα στοιχεία διαλόγου χαρτιού στο περιβάλλον εργασίας χρήστη.

Σχεδιαστής πολυμερών

Ένα εργαλείο για την ανάπτυξη εφαρμογής web με στοιχεία Polymer χρησιμοποιώντας μια διεπαφή μεταφοράς και απόθεσης.

Ημερήσια πρόβλεψη αποθεμάτων

Μια έκθεση χρηματιστηρίου και μια πρόβλεψη χτισμένη εξ ολοκλήρου με τα στοιχεία Polymer.

Polymer Mail

Μια εφαρμογή πελάτη ηλεκτρονικού ταχυδρομείου για το Gmail. Φαίνεται ωραίο και ρευστό, αν και δυστυχώς, δεν λειτουργεί πλήρως.

Τελικές σκέψεις

Το πολυμερές έχει ένα τεράστιο εύρος και μπορεί να σας πάρει λίγο χρόνο για να συνηθίσετε με όλα τα προσαρμοσμένα στοιχεία καθώς και το API του. Παρ 'όλα αυτά, τα Web Components και το Polymer θα επηρεάσουν σίγουρα τον τρόπο με τον οποίο δημιουργούμε εφαρμογές ιστού. Μείνετε μπροστά από το πλήθος διαβάζοντας περισσότερα για τα Web Components - οι αναφορές βρίσκονται παρακάτω.

• Προβολή επίδειξης
• Λήψη πηγής

Χρήσιμες αναφορές

• Η κατάσταση των στοιχείων του διαδικτύου
• Μια λεπτομερής εισαγωγή στα προσαρμοσμένα στοιχεία
• Επίσημο ιστολόγιο του Google Polymer