Το Yahoo! Blog User Interface (YUIBlog)

Στο YUI Γκαλερί 3: Μαζική Widget Επεξεργαστής

Το plugin QuickEdit για YUI 3 DataTable καθιστά εύκολο να επεξεργαστείτε μια ολόκληρη σελίδα των βιβλίων ως ατομική επιχείρηση. Ωστόσο, μερικές φορές χρειάζεται να κάνουμε ακόμη περισσότερα. Για παράδειγμα, ίσως χρειαστεί να επεξεργαστείτε ταυτόχρονα περισσότερες εγγραφές από ό, τι μπορεί να χωρέσει άνετα σε μία μόνο σελίδα. Ή ίσως χρειαστεί να υποστηρίξει την προσθήκη, αντιγραφή, και αφαιρώντας τα αρχεία ως μέρος της ατομικής επιχείρησης. Ή μπορεί να θέλετε να οπτικά πεδία ομάδα με την τοποθέτηση τους σε ένα κελί πίνακα. Η Μαζική Εκδότης widget υποστηρίζει όλες αυτές τις δυνατότητες.

( Κάντε κλικ στο screenshot για να παίξει με αυτό το παράδειγμα .)

Επισκόπηση

Η υπηρεσία Bulk widget Εκδότης αποτελείται από τρία στοιχεία:

Data source

Αυτή τυλίγει ένα DataSource δεν YUI και διαχειρίζεται τις αλλαγές: προσθήκες, αφαιρέσεις, και άλλαξε τις αξίες.

Base widget

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

HTML table implementation

Αυτό επεκτείνει το widget βάση για να καταστήσει κάθε εγγραφή σε TBODY σε έναν πίνακα HTML. Η διαμόρφωση στήλη καθορίζει ποιο πεδίο εμφανίζεται σε κάθε στήλη του πίνακα. Ένα έθιμο διαμορφωτή των κυττάρων μπορεί να χρησιμοποιηθεί για να καταστήσει πολλά πεδία σε ένα κελί πίνακα.

Διαμόρφωση

Στο παράδειγμα που δημιούργησε το παραπάνω screenshot, η ρύθμιση έχει διατηρηθεί όσο το δυνατόν απλούστερες:

fields καθορίζει τις τιμές σε επεξεργάσιμη κάθε εγγραφή. Ο προεπιλεγμένος τύπος είναι εισόδου. Οι άλλοι έγκυροι τύποι είναι επιλεγμένα και textarea. (Επιλέξτε απαιτεί μια λίστα τιμών.) Βασικές επικύρωσης παρέχεται από Έντυπο Διευθυντής module. Αυτό καλύπτει τα απαιτούμενα πεδία, περιορισμοί στο μήκος, και αριθμητικές σειρές . Πιο πολύπλοκα επικύρωση μπορεί να πραγματοποιηθεί με τον καθορισμό regex ή τη δική σας λειτουργία ( fn ). Εδώ είναι ένα απόσπασμα από το ζωντανό παράδειγμα:

 var πεδία =
 {
	 Τίτλος:
	 {
		 Τύπος: "textarea"
	 },
	 έτος:
	 {
		 επικύρωση:
		 {
			 CSS: «yiv ακέραιος: [1500,2100]»
		 }
	 },
	 Χρώμα:
	 {
		 Τύπος: «select»,
		 τιμές:
		 [
			 {Αξία: «κόκκινο», το κείμενο: «Κόκκινο»},
			 {Αξία: «πράσινων», το κείμενο: «Πράσινο»},
			 {Αξία: «μπλε», το κείμενο: «Μπλε»}
		 ]
	 }
 }?

Y.BulkEditDataSource απαιτεί ένα παράδειγμα της Y.DataSource και τις ακόλουθες παραμέτρους:

uniqueIdKey

Το όνομα ενός κλειδιού που προσδιορίζει μοναδικά κάθε εγγραφή.

generateRequest

Μια λειτουργία για την παραγωγή παραμέτρους αίτηση για Y.DataSource . (Αυτό είναι άδειο το παράδειγμα, επειδή Y.DataSource.Local επιστρέφει πάντα όλα τα δεδομένα.)

extractTotalRecords

Μια λειτουργία για να εξαγάγετε το συνολικό αριθμό των εγγραφών από το Y.DataSource απάντηση.

Δεδομένου ότι το παράδειγμα χρησιμοποιεί Y.DataSource.Local , totalRecordsReturnExpr απαιτείται επίσης. Αυτή η έκφραση OGNL καθορίζει πού στην απάντηση για να αποθηκεύσετε το συνολικό αριθμό των εγγραφών. (Σημειώστε ότι extractTotalRecords διαβάζει την τιμή αυτή.)

 var ds = νέα Y.BulkEditDataSource (
 {
	 DS: raw_ds,
	 uniqueIdKey: «id»,
	 generateRequest: λειτουργία () {},
	 , «meta.totalRecords.»: totalRecordsReturnExpr
	 extractTotalRecords: λειτουργία (απάντηση)
	 {
		 επιστροφή response.meta.totalRecords?
	 }
 })?

Y.HTMLTableBulkEditor απαιτεί την προέλευση των δεδομένων, τη διαμόρφωση πεδίου, και τη διαμόρφωση στήλη. Στη διαμόρφωση του στήλη, το κλειδί είναι το όνομα του πεδίου, εκτός αν καθορίσετε μια προσαρμοσμένη μορφοποιητή. Η ετικέτα χρησιμοποιείται ως τίτλος της στήλης. Εδώ είναι ένα απόσπασμα από το ζωντανό παράδειγμα:

 var = στήλες
 [
	 {
		 κλειδί: «κουτάκι»,
		 ετικέτα: «<input type="checkbox" id="select-all" />»,
		 μορφοποιητή: λειτουργία (ιε)
		 {
			 var σήμανσης = "<input type="checkbox" class="record-select" id="{id}" />"?
			 o.cell.set («innerHTML», Y.Lang.sub (σήμανση,
			 {
				 id: this.getRecordId (o.record)
			 }))?
		 }
	 },
	 {Κλειδί: «τίτλο», ετικέτα: «Τίτλος»},
	 {Κλειδί: «έτος», ετικέτα: «Έτος»},
	 {Κλειδί: «χρώμα», ετικέτα: «Χρώμα»}
 ]?

(Σημειώστε ότι το ζωντανό παράδειγμα ορίζει μια μικρή επέκταση Y.HTMLTableBulkEditor να χειριστεί το κουτάκι στήλη.)

Μπορείτε επίσης να περάσετε ένα παράδειγμα της Y.Paginator να Y.BulkEditDataSource . Αυτό αποδεικνύεται σε μια ξεχωριστή, πιο περίπλοκη ζωντανό παράδειγμα .

Τοπική εναντίον απομακρυσμένες πηγές δεδομένων

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

Η υπηρεσία Bulk widget Εκδότης επιβάλλει πρόσθετες συμβιβασμούς, όμως.

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

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

Πραγματικό κόσμο υπόθεση χρήσης

Το αρχικό κίνητρο για την Μαζική widget Εκδότης ήταν να επιτραπεί μετά την επεξεργασία ενός φύλλου μεταφόρτωση. Παρουσιάζοντας μια μετα-επεξεργασία βήμα καταργεί την ανάγκη για τις τιμές φύλλου να είναι τέλεια. Λάθη μπορούν να προταθούν και σταθερό στο Μαζική widget Εκδότης αντί να απορρίψει το σύνολο της αποστολής. Επιπλέον, η επεξεργασία στον server μπορεί να κάνει καλύτερη εικασία ανάθεση πρόσθετων τιμές που απαιτούνται για κάθε εγγραφή, και ο χρήστης μπορεί να ελέγξει και να διορθώσουν αυτά τα επιπλέον αξιών πριν από την αποθήκευση. Αυτό απλοποιεί την αρχική δημιουργία του υπολογιστικού φύλλου.

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

Περίπου ο συντάκτης: John Lindal ( @ jafl5272 στο Twitter) είναι ένας από τους επικεφαλής μηχανικούς κατασκευής το θεμέλιο για τη Yahoo! APT είναι χτισμένο. Προηγουμένως, εργάστηκε για το δίκτυο εκδοτών του Yahoo!.

Βρείτε συζητήσεις: Bloglines | Technorati

Μοιραστείτε και κατ 'επέκταση: Del.icio.us Σελιδοδείκτης με | Digg it! | Reddit!