Yahoo! User Interface Blog (YUIBlog)

Η "MakeNode" Επέκταση Widget

Στο προηγούμενο άρθρο μου, μια συνταγή για μια Yui 3 Εφαρμογή , έδειξα έναν τρόπο να χρησιμοποιεί Y.substitute ως ένα πολύ βασικό επεξεργαστή πρότυπο. Η ιδέα πήρε τη ζωή από εκεί, με προτάσεις από τους λαούς στο # Yui IRC κανάλι, και έκανα μια επέκταση Widget που είναι διαθέσιμη στην περιοχή μου, που ονομάζεται MakeNode . MakeNode δεν είναι ένα γενικό πρότυπο επεξεργαστή και δεν νοείται ως ένα. Από την άλλη πλευρά, είναι στενά συνδεδεμένη με την Yui Widget τάξη ίδρυμα, συμπεριλαμβανομένων των ClassName και εκδήλωση αρωγοί και διεθνοποίηση. Σε αυτό το άρθρο, θα λάβει τα Spinner παράδειγμα και τροποποιήστε το να ακολουθήσει τις οδηγίες από το προηγούμενο άρθρο μου και να χρησιμοποιήσει MakeNode. Το τροποποιημένο συστατικό Spinner ( JS , CSS , sprites ), καθώς και ένα παράδειγμα είναι διαθέσιμα από την ιστοσελίδα μου. Σύνδεσμοι σε περαιτέρω πόροι μπορούν να βρεθούν στο τέλος αυτού του άρθρου.

Η επέκταση συστατικό σας

Μόλις MakeNode είναι γεμάτο, θα πρέπει να συμπεριλάβετε την ενότητα σε σας YUI().use() δήλωση με το όνομα 'makenode' . Στη συνέχεια, για την επέκταση widget σας, μπορείτε να την περιλάβει στο τρίτο επιχείρημα για να Y.Base.create() , όπως αυτό:

  Γ. Spinner = Y.Base.create (
      "Spinner",
      Γ. Widget,
      [Γ. MakeNode],
      {
         / / Μέλη παράδειγμα ...
      },
      {
          / / Στατική μέλη
      }
 )? 

Μπορείτε να προσθέσετε MakeNode μαζί οποιοδήποτε αριθμό των κατάλληλων επεκτάσεων για Widget, όπως WidgetParent, WidgetChild, WidgetStdMode, κλπ. MakeNode προσθέτει δύο προστατεύονται μεθόδους, _makeNode και _locateNodes, και θα διαβάσει από διάφορες στατικές ιδιότητες, αν βρεθεί.

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

Ορισμός του προτύπου

Το πρώτο πράγμα που συνήθως κάνουμε είναι να καθορίσει το πρότυπο για το στοιχείο σας. Για την Spinner, πρότυπο μας θα είναι:

  _TEMPLATE: [
     «<input Type="text" title="{s input}" class="{c input}">»,
     «<button Type="button" title="{s up}" class="{c up}"> </ κουμπί> ',
     «<button Type="button" title="{s down}" class="{c down}"> </ κουμπί> '
 ]. Ενταχθούν ('\ n'), 

Το προεπιλεγμένο πρότυπο είναι συνήθως ονομάζεται _TEMPLATE και δήλωσε κατά μήκος της άλλες στατικές ιδιότητες της κατηγορίας αυτής, όπως ATTRS . MakeNode θα χρησιμοποιήσει αυτό το πρότυπο, εάν δεν είναι άλλο προβλέπεται ρητά. Το πρότυπο είναι φτιαγμένο από απλό HTML καθώς και μια σειρά από σύμβολα κράτησης θέσης μέσα σε αγκύλες, το καθένα με ένα μόνο χαρακτήρα (ο κωδικός επεξεργασίας) και ακολουθείται από ένα ή περισσότερα ορίσματα. Τα σύμβολα κράτησης θέσης και αυτό που παράγουν είναι:

• {@ attributeName} διαμόρφωση αποδίδουν αξία,

• {p propertyName} παράδειγμα αξίας του ακινήτου

• {m methodName arg1 arg2 ….} τιμή επιστροφής της συγκεκριμένης μεθόδου. Ο κωδικός επεξεργασία ακολουθείται από το όνομα της μεθόδου και οποιοδήποτε αριθμό των επιχειρημάτων που χωρίζονται με κενά. Χορδές πρέπει να περικλείεται σε διπλά εισαγωγικά. Αριθμοί, Booleans και null θα πρέπει να μετατραπεί από σειρά για τη σωστή τους τύπους των δεδομένων

• {c classNameKey} ClassName CSS που παράγεται από την _CLASS_NAMES στατική ιδιοκτησίας

• {s key} εγχόρδων από το strings χαρακτηριστικό, χρησιμοποιώντας key ως υπο-ιδιότητα.

• {? other placeholder } Παράγει το string checked όταν το αποτέλεσμα της επεξεργασίας το υπόλοιπο της κράτησης θέσης είναι αλήθεια.

• {} οποιαδήποτε άλλη τιμή θα πρέπει να αντιμετωπίζονται ακριβώς όπως Y.substitute κάνει.

Για παράδειγμα, {@ value} θα μεταφραστεί σε this.get('value') , ενώ {p value} μεταφράζεται σε this['value'] .

Το {m} κράτησης θέσης είναι λίγο πιο περίπλοκη. Το πρώτο επιχείρημα μετά το m κωδικός επεξεργασίας είναι το όνομα της μεθόδου και το υπόλοιπο από τα επιχειρήματα, όλα χωρισμένες με κενά, που θα περάσει στην συγκεκριμένη μέθοδο. Τα επιχειρήματα αυτά μπορεί να είναι αριθμοί, null , true , false ή χορδές περικλείονται σε διπλά εισαγωγικά. MakeNode θα τα αναλύσει και τη μετατροπή τους σε σωστούς τύπους τους, έτσι {m myMethod 123.45 true “this is a string”} θα έχει ως αποτέλεσμα καλώντας this.myMethod(123.45, true, “this is a string”) , έτσι ώστε τα δύο πρώτα επιχειρήματα μετατρέπονται σε σωστούς τύπους δεδομένων τους και το string μπορεί να περιέχει κενά. Για να συμπεριλάβετε ένα διπλό εισαγωγικό, χρησιμοποιήστε \\" , το διπλό backslash που θα απαιτηθεί δεδομένου ότι JavaScript θα ερμηνεύσει έναν ενιαίο και των απορρίψεων, πριν να φτάσει στο MakeNode. Επιτρέπονται μόνο διπλά εισαγωγικά, MakeNode δεν χρησιμοποιεί eval() , ώστε το πρόγραμμα ανάλυσης είναι περιορισμένη αλλά ασφαλείς. Οτιδήποτε, αλλά οι αριθμοί, null , Booleans και διπλό εισαγωγικά θα αγνοηθούν.

The {?} κράτησης θέσης είναι πρακτικό στη χρήση με πλαίσια ελέγχου και κουμπιά επιλογής. Θα παράγει το string “checked” , ανάλογα με την αξία αλήθεια του κώδικα οδηγία επεξεργασίας που ακολουθεί. Έτσι, <input type=”checkbox” {? m getLength}/> <input type=”checkbox” {? m getLength}/> θα παράγει σημαντική κουτάκι εάν το getLength μέθοδος επιστρέφει τίποτα αλλά μηδέν. {?} θα αποδεχθεί οποιοδήποτε από τα άλλα σύμβολα κράτησης θέσης, αν και έχει νόημα μόνο με τα τρία πρώτα.

Για το {c} σύμβολο κράτησης θέσης, πρέπει να έχουν ένα _CLASS_NAMES περιουσία ορίζεται.

Περαιτέρω κράτησης θέσης μπορούν να προστεθούν σε MakeNode με την προσθήκη τους στο _templateHandlers hash.

Το ακίνητο _CLASS_NAMES

Μαζί με την ATTRS και _TEMPLATE στατικά χαρακτηριστικά, μπορούμε να καθορίσει μια _CLASS_NAMES ιδιοκτησία η οποία επισημαίνει μια σειρά από strings. Κάθε μια από εκείνες τις σειρές θα χρησιμοποιείται για την παραγωγή ClassName. Έτσι _CLASS_NAMES: ['input'] θα παράγει το ClassName “yui3-spinner-input” . Αυτές οι classNames αποθηκεύονται σε μια ιδιοκτησία παράδειγμα this._classNames . Η {c input} κράτησης θέσης στο πρότυπο παραπάνω θα αντικατασταθούν από “yui3-spinner-input” .

Μπορείτε να χρησιμοποιήσετε την _CLASS_NAMES ιδιότητα να παράγει κάποιο αριθμό classNames, είτε να τις χρησιμοποιήσετε στο πρότυπο ή όχι. Μπορείτε να φτάσετε ακόμα εκείνες τις πρόσθετες classNames μέσα από this._classNames . The ClassName δημιουργείται χρησιμοποιώντας το yui3 πρόθεμα ακολουθούμενο από την τιμή της NAME στατική ιδιοκτησία γύρισε πεζά και, στη συνέχεια το string που αναφέρονται στο _CLASS_NAMES (αυτό το τελευταίο δεν θα μετατραπεί πεζά), όλα τα χωρίζονται με παύλες. Η _classNames hash θα περιλαμβάνει επίσης τα classNames για την boundingBox και την contentBox , η πρώτη στο πλαίσιο του "." κλειδί και το δεύτερο κάτω από το “content” κλειδί. Widget αναθέτει στην boundingBox την classNames που προέρχεται από τις αξίες της NAME ιδιοκτησία του καθενός από τα τμήματα της αλυσίδας κληρονομιά, ξεκινώντας με yui3-widget . MakeNode καταστήματα σε this._classNames μόνο το top-πλέον ClassName για την boundingBox .

Αν ένα στοιχείο είναι πολλά επίπεδα μακριά από Widget, όπως SuperSpecialSpinner κληρονομεί από SuperSpinner που κληρονομεί από Spinner που κληρονομεί από Widget, και εάν όλα ή μερικά από αυτά έχουν _CLASS_NAMES ιδιότητες που ορίζονται, MakeNode θα παράγει classNames για όλα αυτά και να τα αποθηκεύσετε σε this._classNames . Δεν χρειάζεται να περιληφθούν σε κάθε επίπεδο τα ονόματα που έχουν ήδη δηλωθεί σε προηγούμενα επίπεδα. Στην πραγματικότητα, είναι καλύτερα να μην από την classNames που παράγονται σε κάθε επίπεδο θα χρησιμοποιήσει την τιμή της NAME ακινήτου αυτού του επιπέδου. Έτσι, σε SuperSpecialSpinner , {c input} θα έχουν ως αποτέλεσμα “yui3-spinner-input” και όχι “yui3-superspecialspinner-input” και γι 'αυτό θα κρατήσει CSS αρχείο σας εξακολουθεί να ισχύει.

Το {s} κράτησης θέσης

Widget έχει strings χαρακτηριστικό ρύθμισης ορισμένα, αν και δεν έχει προετοιμαστεί με οποιαδήποτε τιμή. Αυτό το χαρακτηριστικό έχει σκοπό να κρατήσει χορδές που είναι ορατά σε (ή, μέσω της ανάγνωσης οθόνης, διαβάστε την) του χρήστη. Είναι σημαντικό ότι ποτέ δεν περιλαμβάνουν ορατό χορδές άμεσα στο πρότυπο. Αυτό δεν είναι μια απαίτηση της MakeNode - ποτέ δεν ήταν μια καλή ιδέα. Όλες οι χορδές που να είναι ορατό από ή διαβάσει για το χρήστη πρέπει πάντα να τοποθετείται στο strings χαρακτηριστικό. The strings χαρακτηριστικό γνώρισμα περιλαμβάνει ένα hash όπου κάθε ατομικό κείμενο βρίσκεται από το κλειδί του. Η συνιστώσα Spinner έχει τις ακόλουθες χορδές, το οποίο μπορείτε να δείτε που χρησιμοποιούνται στο πρότυπο παραπάνω.

  έγχορδα: {
     αξία: {
         input: ". Πατήστε το βέλος πάνω / κάτω πλήκτρα για ήσσονος σημασίας προσαυξήσεις, σελίδα πάνω / κάτω για μεγάλες προσαυξήσεις»,
         up: «Προσαύξηση",
         κάτω: "μείωση"
     }
 }, 

Το καλύτερο μέρος για να γίνει αυτό είναι το στοιχείο σας μπορεί να εντοπιστεί και σε άλλες γλώσσες πολύ εύκολα από τους προγραμματιστές που χρησιμοποιούν το προϊόν σας. Όταν δημιουργείτε μια εμφάνιση του Spinner, μπορείτε να κάνετε:

  var mySpinner = νέα Spinner ({χορδές: Y.Intl.get («κλώστης')}); 

Ρύθμιση της διαμόρφωσης χαρακτηριστικό strings με αυτό τον τρόπο αντικαθιστά την προεπιλεγμένη strings τιμές με εκείνες από το αρχείο πόρων γλώσσα χρησιμοποιώντας τη γλώσσα που είχαν οριστεί παλαιότερα. Το {s} κράτησης θέσης προσβάσεις των χορδών που αποθηκεύονται στο strings χαρακτηριστικό, είτε τα προεπιλεγμένα ή το μεταφρασμένο αυτά, αν έχει οριστεί. Το {s xxxx} κράτησης θέσης είναι, στην πραγματικότητα, τίποτα περισσότερο από μια συντόμευση στο {@ strings.xxxx} κράτησης θέσης. Ωστόσο, η πρώτη μπορεί να έχει πρόσβαση μόνο χορδές σε κορυφαίο επίπεδο, ενώ, για παράδειγμα, {@ strings.xxxx.yyyy.zzzz} θα σας επιτρέψει να αποκτήσετε πρόσβαση σε μια σειρά πιο βαθιά προς τα κάτω.

Χρησιμοποιώντας _makeNode σε renderUI

Χρησιμοποιούμε το πρότυπο για τη δημιουργία της σήμανσης για το στοιχείο μας. Για να γίνει αυτό, μπορούμε να ονομάσουμε MakeNode του _makeNode μέθοδο, όπως αυτό:

  renderUI: λειτουργία () {
     . this.get («contentBox») προσάρτησης (this._makeNode ())?
 }, 

Αυτό θα συμπληρώσουν το contentBox του widget μας με τη σήμανση από την επεξεργασία του προτύπου. The _makeNode μέθοδος επιστρέφει μια εμφάνιση του Y.Node το οποίο μπορεί να προσαρτηθεί ή να εισαχθεί σε οποιοδήποτε σημείο ή απλά κρατούνται για μελλοντική χρήση. Δεν έχει επιστρέψει μια συμβολοσειρά, παράγει μια Node παράδειγμα.

Η _makeNode μέθοδος λαμβάνει δύο προαιρετικά ορίσματα: μια αναφορά σε ένα πρότυπο και ένα αντικείμενο για να συμπληρώσετε κράτησης θέσης, όπως Y.substitute κάνει. Στο απλό παράδειγμα Spinner μας υπάρχει ένα ενιαίο πρότυπο για όλη την widget widgets, αλλά και άλλες μπορεί να απαιτεί κομμάτια φτιαγμένα από διάφορα πρότυπα. Στην περίπτωση αυτή, θα καλούσατε συνήθως _makeNode χωρίς επιχειρήματα για το κύριο μέρος και να ζητήσει για μία ακόμη φορά με διαφορετικά πρότυπα για να συμπληρώσετε τα επιπλέον εξαρτήματα. Το παράδειγμα αυτό περιέχει renderUI μέθοδο:

  renderUI: λειτουργία () {
     var FIELDSET = this._makeNode ()?
     this.each (λειτουργία (στοιχείο) {
         fieldset.appendChild (this._makeNode (MultipleTemplates.RADIO_TEMPLATE, στοιχείο))?
     }, Αυτή)?
     . this.get («contentBox») προσάρτησης (FIELDSET)?
 } 

Η πρώτη πρόσκληση για να _makeNode επιστρέφει μια Node παράδειγμα αποθηκεύεται στη μεταβλητή fieldset . Η συνιστώσα του δείγματος είναι επίσης επεκτείνεται με Y.ArrayList έτσι το RADIO_TEMPLATE θα γεμίσει με τιμές που λαμβάνονται από τα στοιχεία που είναι αποθηκευμένα στη λίστα πίνακα και το αποτέλεσμα των κόμβων που επισυνάπτεται στην fieldset πριν από την τελική προσαρτάται στο contentBox . Η ειδική κράτησης θέσης, όπως {@} ή {p} θα εξακολουθούν να αναφέρονται σε χαρακτηριστικά ή ιδιότητες στο κύριο αντικείμενο. Τα ένθετα στοιχεία που θα υποβληθούν σε επεξεργασία εξίσου Y.substitute θα.

Η μέθοδος _locateNodes

MakeNode παρέχει περαιτέρω _locateNodes μέθοδο η οποία θα προσπαθήσει να εντοπίσει όλα τα στοιχεία με τα classNames δηλωθεί στην _CLASS_NAMES . Για να εντοπίσετε συγκεκριμένα στοιχεία μπορείτε να περάσετε οποιοδήποτε αριθμό των κλειδιών ClassName, αλλιώς, _locateNodes προσπαθεί όλα αυτά. Για κάθε στοιχείο που βρίσκεται κάθε ClassName, _locateNodes θα παράγει μια ιδιωτική ιδιοκτησία παράδειγμα, χρησιμοποιεί το πρόθεμα κάτω παύλας που ακολουθείται από το όνομα του κλειδιού και το “Node” κατάληξη. Έτσι, στο παράδειγμά μας Spinner, _locateNodes θα δημιουργήσει τις ιδιότητες _inputNode , _upNode και _downNode . Εάν πολλά στοιχεία έχουν την ίδια ClassName, _locateNodes θα επιστρέψει μια αναφορά στην πρώτη από αυτές. Αν ένα στοιχείο δεν βρεθεί, δεν μεταβλητή θα δημιουργηθεί.

Στο συστατικό Spinner χρησιμοποιούμε _locateNodes μετά τη δημιουργία της σήμανσης:

  renderUI: λειτουργία () {
     . this.get (CBX) προσάρτησης (this._makeNode ())?
     this._locateNodes ()?
 }, 

Η _EVENTS στατική ιδιοκτησία

Μια περαιτέρω ιδιοκτησία μπορεί να οριστεί κατά το πρότυπο της _TEMPLATE και _CLASS_NAMES και αυτό είναι _EVENTS . _EVENTS θα περιέχει ένα hash που αποτελείται από τα κλειδιά όνομα της κλάσης, το καθένα περιέχει ένα hash του κατηγορίες γεγονότων και των μεθόδων για να τις χειριστεί. Είναι καλύτερα εξηγηθεί με ένα παράδειγμα:

  _EVENTS: {
     '.': {
         κλειδί: {
             fn: «_onDirectionKey»,
             args: ((Y.UA.opera) "κάτω":!; "Press:") + "38, 40, 33, 34"
         },
         mouseDown: «_onMouseDown»
     },
     '..': {
         MouseUp: «_onDocMouseUp»
     },
     Είσοδος: {
         αλλαγή: «_onInputChange»
     }
 }, 

_EVENTS είναι ένα αντικείμενο (α hash) με οποιοδήποτε αριθμό των ακινήτων. Τα ονόματα των ιδιοτήτων, δηλαδή, τα κλειδιά του κατακερματισμού, να προσδιορίσει τα στοιχεία των οποίων οι εκδηλώσεις θα ακούσουμε. Είναι τα ίδια αναγνωριστικά στοιχεία που χρησιμοποιούνται στην _CLASS_NAMES . Υπάρχουν δύο επιπλέον ειδικά πλήκτρα "." και ".." . Ενώ τα κλειδιά ClassName αναφέρονται σε στοιχεία που είναι ένθετα στο εσωτερικό της contentBox , το "." κλειδί αναφέρεται στην boundingBox ίδια, ενώ ".." αναφέρεται στο έγγραφο που περιέχει αυτό το μαραφέτι. Σκεφτείτε τους όπως κάνει μια chdir εντολή, όταν βρίσκονται στο boundingBox επίπεδο. The _EVENTS ακίνητο σε επεξεργασία μετά την renderUI , bindUI και syncUI οι μέθοδοι έχουν τα λεγόμενα του widget αναμένεται να είναι ήδη τοποθετημένη μέσα στο σώμα του εγγράφου, διαφορετικά ο ".." θα αποτύχει.

Κάθε μία από τις εγγραφές στο _EVENTS αποτελεί ένα ακόμη αντικείμενο που χρησιμοποιεί το είδος της εκδήλωσης, ως βασικό του και το όνομα μιας μεθόδου παράδειγμα για να το χειριστεί. _EVENTS , είναι μια στατική μεταβλητή, δεν έχει πρόσβαση to this , ώστε να μην μπορεί να λάβει πραγματική αναφορές στις συναρτήσεις, μόνο το όνομα της μεθόδου ακροατή εκδήλωση. Ορισμένοι τύποι περίπτωση χρειάζονται επιπλέον επιχειρήματα, όπως είναι το key γεγονός. Στην περίπτωση αυτή, αντί να παρέχουν το όνομα του προγράμματος χειρισμού συμβάντων που μπορεί να παρέχει ένα αντικείμενο με ιδιότητες fn και args να κρατήσει το όνομα της συνάρτησης και τα επιπλέον επιχειρήματα, όταν απαιτείται.

MakeNode θα χρησιμοποιήσει Node.delegate για να ακούσετε τα γεγονότα των ένθετων στοιχείων, ενώ θα χρησιμοποιήσει Y.on για να ακούσετε τα γεγονότα από την boundingBox και το σώμα του εγγράφου. (Σημείωση: ακούγοντας το key γεγονότος τη συγκεκριμένη ένθετα στοιχείο που λειτουργεί μόνο με 3.4.0pr1 έκδοση και πάνω, από αντιπροσωπεία του key .. εκδήλωση δεν ήταν διαθέσιμο πριν από όλα τα άλλα χαρακτηριστικά εργασία με τις προηγούμενες εκδόσεις, καθώς)

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

Η _ATTRS_2_UI στατική ιδιοκτησία

Εκδηλώσεις πάει δύο τρόπους, από το UI με το στοιχείο και από το στοιχείο στο UI. Το πρώτο ασχολείται η _EVENTS ιδιοκτησίας. Έπειτα, υπάρχουν και τα γεγονότα που λειτουργούν με τις αλλαγές αποδίδουν αξία, που πρέπει να αντανακλάται στο περιβάλλον εργασίας χρήστη. Όπως ανέφερα στο προηγούμενο άρθρο, όταν υπάρχουν δευτερογενείς επιπτώσεις από την αλλαγή ενός χαρακτηριστικού διαμόρφωση, θα πρέπει να γίνεται από τους ακροατές περίπτωση αλλαγής, όχι από την προαιρετική setter μέθοδο του χαρακτηριστικού, το οποίο πρέπει να ασχολείται μόνο με την ομαλοποίηση της αξίας που έχουν τεθεί. Το UI θα πρέπει να αντανακλά την κατάσταση του ιδιότητες διαμόρφωσης, πρώτα στο syncUI , κατά τις οποίες ξεκινά και στη συνέχεια σε κάθε περίπτωση αλλαγή των χαρακτηριστικών. Για το τελευταίο, πρέπει να επισυνάψετε μια ακροατή εκδήλωση, η οποία κάνουμε σε bindUI . Widget προβλέπει ήδη ένα μηχανισμό για να κάνει τόσο απλό, που περιέγραψα στα σχόλια του προηγούμενου άρθρου.

Widget χρησιμοποιεί την ιδιότητα παράδειγμα _UI_ATTRS που περιέχει ένα αντικείμενο με δύο άλλες ιδιότητες, SYNC και BIND . Κάθε ένα από αυτά είναι ένας πίνακας αναγράφονται τα ονόματα των χαρακτηριστικών διαμόρφωσης για να synched αρχικά και στη συνέχεια να ακούσει για να κρατήσει το UI που αντανακλούν τις τρέχουσες τιμές. Widget αναμένει κάθε ένα από τα στοιχεία αυτά να έχουν μια μέθοδο που συνδέονται με αυτό, το όνομά του από την επωνυμία του χαρακτηριστικού πρόθεμα _uiSet με τον πρώτο χαρακτήρα του ονόματος χαρακτηριστικού μετατραπεί σε κεφαλαία για να έχουν το όνομα της μεθόδου στη σωστή καμήλα περίπτωση. Έτσι, εάν "value" είναι εισηγμένη σε κανένα από τα _UI_ATTRS συστοιχίες (είτε SYNC ή BIND ), Widget θα περίμενε να βρει μια _uiSetValue μέθοδο. Αυτή η μέθοδος θα λάβουν δύο επιχειρήματα, η value που καθορίζεται και το src της αλλαγής. Αυτός είναι ο κώδικας για Spinner μας _uiSetValue μέθοδο:

  _uiSetValue: λειτουργία (αξία, SRC) {
     αν (src === UI) {
         επιστροφή?
     }
     this._inputNode.set (VALUE, this.get (μορφοποίησης) (αξία))?
 }, 

Όλα τα κεφαλαία αναγνωριστικά που βλέπετε σε αυτό το κομμάτι του κώδικα αντιστοιχούν σε σταθερές συμβολοσειράς δηλώνεται αλλού, να επιτραπεί η Yui συμπιεστή για να κάνει τη δουλειά της καλύτερα. Η μέθοδος, βασικά, θέτει την value HTML χαρακτηριστικό στο <input> πλαίσιο για τη νέα σειρά αξίας, αφού διαμορφωθεί. Η αναφορά στο πλαίσιο κειμένου δόθηκε από _locateNodes . Το src επιχείρημα είναι αρχικά ελέγχονται για να διαπιστωθεί εάν έχει ρυθμιστεί στην τιμή της συμβολοσειράς 'ui' . Αν είναι έτσι, καμία ενέργεια δεν θα πρέπει να ληφθούν. Αυτό γίνεται για να αποφευχθεί η ατελείωτη βρόχους. Αν ο χρήστης εισάγει κάτι στο πλαίσιο εισαγωγής, η αξία της θα πάει στην value χαρακτηριστικό διαμόρφωση η οποία στη συνέχεια θα βάλει φωτιά σε έναν valueChange εκδήλωση, η οποία θα πάρει _uiSetValue ονομάζεται το οποίο, αν δεν ελεγχθεί, τότε θα πάει και αλλάξτε την τιμή του πλαισίου εισαγωγής, η οποία ενεργοποιούν την όλη διαδικασία και πάλι. Έτσι, σε _uiSetValue , αν γνωρίζουμε την αλλαγή προέρχεται από το UI, δεν κάνουμε τίποτα και έτσι να σπάσει το βρόχο. Ωστόσο, αυτό απαιτεί ένα άλλο κομμάτι του κώδικα αλλού. Στον ακροατή για το συμβάν DOM, όταν θέτουμε το χαρακτηριστικό διαμόρφωση, χρησιμοποιούμε το τρίτο προαιρετική επιχείρημα για να ρυθμίσετε, όπως αυτό:

  _afterValueChange: λειτουργία (EV) {
     this.set (VALUE, ev.newVal, {src: UI})?
 } 

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

Με όλο αυτό το είπε, δεν έχω αναφερθεί ακόμη η στατική ιδιοκτησία _ATTRS_2_UI αναφέρεται στην κλάση του τμήματος αυτού. Δεδομένου ότι τα σχόλια στο προηγούμενο άρθρο μου δείχνει (μέσω της λάθη που έκανα σ 'αυτές), εξασφαλίζοντας ότι όλες οι παράμετροι που επηρεάζουν το περιβάλλον εργασίας χρήστη σωστά αναφέρονται είναι κάπως μπερδεμένη. Δεν πρέπει ποτέ να προετοιμαστεί _UI_ATTRS από το μηδέν από το Widget απαριθμεί ήδη ένα σωρό ιδιότητες και αυτών θα χαθεί. Θα πρέπει να ενώσετε τα νέα ονόματα αποδίδουν πάνω από τις ήδη υπάρχουσες, οι οποίες είναι κάπως δύσκολο να θυμηθείτε πώς να το κάνουν σωστό. Για να γίνει απλό, MakeNode θα διαβάσει από το στατικό ιδιοκτησία _ATTRS_2_UI και να κάνουμε ότι αλληλουχία για εσάς. Θα ενώσετε όλες αυτές τις λίστες από κάθε κατηγορία στην αλυσίδα της κληρονομιάς, ώστε σε κάθε επίπεδο κάθε κατηγορία μπορεί να χειριστεί τις δικές του ιδιότητες. Σε Spinner, έχουμε:

  _ATTRS_2_UI: {
     BIND: VALUE,
     SYNC: VALUE
 }, 

MakeNode θα δεχθεί τόσο μια σειρά από ονόματα ή ένα ενιαίο όνομα του χαρακτηριστικού, όπως στην προκειμένη περίπτωση.

Το ερώτημα που τίθεται φυσικά, γιατί δύο λίστες, μία για την άλλη δεσμευτική για το συγχρονισμό; Αρκετά συχνά το SYNC συστοιχία έχει λιγότερες καταχωρίσεις από το BIND λίστα και αυτό οφείλεται στο γεγονός ότι το πρότυπο για το στοιχείο θα μπορούσε να έχει ήδη την ίδια προεπιλεγμένη τιμή ως το χαρακτηριστικό διαμόρφωση και δεν υπάρχει καμία ανάγκη να κάνει μια αρχική συγχρονισμό. Έτσι, εάν η προεπιλεγμένη τιμή για την value χαρακτηριστικό διαμόρφωση είναι ένα κενό string και η <input> στοιχείο του προτύπου δεν έχει καμία value χαρακτηριστικό, τότε δεν υπάρχει λόγος να τα συγχρονίσετε σε προετοιμασία.

MakeNode θα ελέγξει για διπλές καταχωρήσεις σε οποιαδήποτε από αυτές τις συστοιχίες. Εάν οποιαδήποτε εμφανιστεί, αυτό σημαίνει ότι μια κλάση συστατικό μας κληρονομεί από τους ήδη χειρίζεται αυτό το χαρακτηριστικό και κάθε νέα δήλωση θα ήταν κατά πάσα πιθανότητα υπερέβη τα _uiSetXxxx handler για αυτό. Παρεμπιπτόντως, MakeNode ελέγχει, επίσης, για τις διπλές εγγραφές στο _CLASS_NAMES , η οποία μπορεί επίσης να προκαλέσει σύγκρουση σε ορισμένες, αν όχι όλες, τις περιστάσεις. MakeNode θα γράψει ένα μήνυμα στο αρχείο καταγραφής για κάθε τέτοιο σφάλμα.

Συμπέρασμα

MakeNode παρέχει ένα πολύ απλό επεξεργαστή πρότυπο, με απλές λειτουργίες που είναι στενά συνδεδεμένη με την τάξη θεμέλιο Widget. Προβλέπει, επίσης, μεθόδους βοηθός για τη δημιουργία classNames που θα χρησιμοποιηθούν στο πρότυπο και να χρησιμοποιούν αυτά τα ονόματα για να εντοπίσετε τους κόμβους δημιουργήθηκε. Επίσης, παρέχει τα μέσα για να συνδέσετε τα γεγονότα που δημιουργούνται τόσο από το UI και το ίδιο το στοιχείο και των συνδεδεμένων με την κάθε μέθοδο. Κάνει όλα αυτά τα πράγματα, φροντίζοντας να σεβαστούν την αλυσίδα κληρονομιά ευθεία μέχρι Widget και οποιοδήποτε επίπεδο των τάξεων μπορείτε να ορίσετε.

Δεν προβλέπει απολύτως όλες οι δυνατότητες, αλλά καλύπτει μια καλή σειρά από αυτούς. Παρ 'όλα αυτά, δεν σας εμποδίζει να προσθέτουν επιπλέον λειτουργικότητα. Ίσως σπάνια έχουν να γράψουν ένα bindUI ή syncUI μέθοδο αν χρησιμοποιείτε την κόλλα που παρέχονται από MakeNode, αλλά μπορείτε να το κάνετε, αφού MakeNode δεν τα χρησιμοποιούν.

Σαν μπόνους σε αυτούς που είχαν την υπομονή να διαβάσει αυτό το μέτρο, έχω τροποποιήσει επίσης Button Anthony παδέλα του σύνολο στοιχείων γκαλερί:

• button.js
• button.css
• κουμπί-group.js
• κουμπί-group.css
• background.png
• υπόβαθρο-active.png
• icon-sprite.gif
• παράδειγμα

Το API docs μπορεί να βρεθεί εδώ .

Εύρεση συζητήσεις: Bloglines | technorati

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