Share
Willkommen zum letzten Teil des YUI3-Widget-Tutorials. Obwohl wir das Widget tatsächlich fertiggestellt haben, werden wir uns ansehen, wie einfach es ist, einem Widget zusätzliche Funktionen hinzuzufügen, ohne es neu schreiben zu müssen.
Lass uns gleich loslegen!
Wenn die Funktionalität für ein bestimmtes Modul erforderlich ist, handelt es sich um eine Erweiterung. Ansonsten ist es ein Plugin.
Es gibt zwei Möglichkeiten, Funktionalität hinzuzufügen - Erweiterungen und Plugins. Der Unterschied zwischen ihnen ist subtil, läuft aber im Wesentlichen darauf hinaus, ob die Funktionalität erforderlich ist oder nicht. Wenn die Funktionalität für ein bestimmtes Modul erforderlich ist, handelt es sich um eine Erweiterung. Wenn die Funktionalität optional ist, handelt es sich um ein Plugin.
Das Plugin, das wir hinzufügen, übernimmt die Paging-Funktion für unser Widget. Möglicherweise möchten nicht alle Entwickler Paging hinzufügen, oder einige möchten es einigen Instanzen des Widgets hinzufügen, andere jedoch nicht. Das Hinzufügen der Funktionalität ist auf diese Weise sinnvoll. Wenn der Entwickler Paging verwenden möchte, kann er das Plugin verwenden. Wir müssen jedoch nicht den gesamten erforderlichen Code ausführen, wenn dies nicht der Fall ist benutze es.
Der Prozess zum Erstellen eines Plugins ähnelt dem zum Erstellen eines Widget. Viele der hier verwendeten Konstrukte sollten aus den vorherigen Teilen dieses Lernprogramms bekannt sein. Genau wie beim Erstellen eines Widgets verwenden wir YUI's hinzufügen() Methode als Wrapper für unseren Code:
Accentsconagua
YUI.add ("Tweet-Suche-Paging"), Funktion (Y) , Genau wie bei unserem Widget müssen wir einen Konstruktor für unser Plugin hinzufügen, damit es initialisiert und den Namespace dafür festgelegt werden kann. Im Gegensatz zu unserem Plugin ist die Einstellung des Namespaces erforderlich. Fügen Sie den folgenden Code innerhalb der anonymen Funktion hinzu, die wir gerade hinzugefügt haben:
var Node = Y.Node; Funktion TweetSearchPaging (config) TweetSearchPaging.superclass.constructor.apply (this, Argumente); Y.namespace ("Plugin.DW"). TweetSearchPaging = TweetSearchPaging; Wir beginnen mit dem Zwischenspeichern von Referenzen zu häufig verwendeten YUI-Ressourcen. In diesem Fall handelt es sich lediglich um das Dienstprogramm Node. Wir fügen den Konstruktor für das Plugin auf dieselbe Weise wie zuvor hinzu. das TweetSearchPaging Die Plugin-Methode ist als Funktion definiert, die ein Konfigurationsobjekt akzeptiert. Die Klasse wird mit dem initialisiert sich bewerben() Methode des Konstruktors der Oberklasse.
Wir haben einen Namespace für unser Plugin festgelegt, dieses Mal wird jedoch der Namespace an den angehängt Plugin Namespace im Gegensatz zum YUI-Objekt.
Da zuvor einige statische Eigenschaften für unser Plugin festgelegt werden sollten, lauten diese wie folgt:
TweetSearchPaging.NAME = "Tweetsearch-Paging"; TweetSearchPaging.NS = "paging"; TweetSearchPaging.ATTRS = origShowUIValue: null, Zeichenfolgen: value: nextLink: "Nächste Seite", prevLink: "Vorherige Seite"; TweetSearchPaging.PAGING_CLASS = Y.ClassNameManager.getClassName (TweetSearchPaging.NAME, "link"); TweetSearchPaging.LINK_TEMPLATE = "Linktext";
Der Name des Plugins wird mit gesetzt NAME Eigentum, und auch die NS Diese Eigenschaft kann verwendet werden, um auf das Plugin des Hosts zu verweisen (der Host ist das Widget oder das Modul, mit dem das Plugin verbunden ist).
Wir können auch die verwenden ATTRS Eigenschaft, um Konfigurationsattribute für das Plugin festzulegen. Diese Attribute verwenden ebenso wie die Widgetattribute das YUI3-Attributmodul und können auf dieselbe Weise verwendet werden. Die Attribute, die wir definieren, sind die origShowUIValue Attribut, das vom Plugin festgelegt wird, um zu speichern, ob die Suchoberfläche beim Initialisieren des Plugins ursprünglich im Widget angezeigt wurde. Wir speichern auch die vom Plugin verwendeten Textzeichenfolgen, um die Internationalisierung zu vereinfachen.
Wir generieren manuell einen Klassennamen für die Elemente, die mithilfe von erstellt werden classNameManager, und definieren Sie die Vorlage, mit der unsere Paging-Links erstellt werden. Da es nur einen einzigen Klassennamen und eine einzige Vorlage gibt, müssen Sie sich nicht um die Verwendung von a kümmern für Schleife.
Genau wie bei der Erstellung der Klasse für unser Widget verwenden wir YUIs erweitern() Methode zum Erweitern eines zugrunde liegenden Moduls. Im Falle eines Plugins ist es das Plugin.Base Klasse, die wir erweitern. Das erweitern() Methode sollte wie folgt aussehen:
Y.extend (TweetSearchPaging, Y.Plugin.Base, );
Wir übergeben unser Plugin als erstes Argument an die erweitern() Methode, die Klasse, die wir als zweite Methode erweitern, und ein Objektliteral mit der hinzugefügten Funktionalität.
Plugins erhalten auch Zugriff auf verschiedene Lebenszyklusmethoden, die überschrieben werden können, um benutzerdefinierten Code hinzuzufügen, den das Plugin zu geeigneten Zeitpunkten für uns ausführt. Wir können den Gebrauch machen Initialisierer und Zerstörer Lebenszyklusmethoden:
Initialisierung: function () Y.StyleSheet ("tweetSearchPagingBase"). set (". yui3-tweetsearch-paging-link", float: "right"); if (Y.one (". yui3-skin-sam")) Y.StyleSheet ("tweetSearchPagingSkin"). set (". yui3-skin-sam .yui3-tweetsearch-paging-link"), marginLeft: "2 % "); var widget = this.get ("host"); if (! widget.get ("showUI")) this.set ("_ origShowUIValue", false); widget.set ("showUI", true); else this.set ("_ origShowUIValue", true); this.afterHostEvent ("tweetsChange", this._afterHostTweetsChange); , destructor: function () Y.StyleSheet ("tweetSearchPagingBase"). unset (". yui3-tweetsearch-paging-link", "float"); if (Y.one (". yui3-skin-sam")) Y.StyleSheet ("tweetSearchPagingSkin"). unset (". yui3-skin-sam .yui3-tweetsearch-paging-link", "marginLeft"); if (! this.get ("_ origShowUIValue")) this.get ("host"). set ("showUI", false); Y.one (". Yui3-tweetsearch-ui"). Remove (); , Das Initialisierer Die Methode wird ausgeführt, wenn das Plugin initialisiert wird. In dieser Methode erstellen wir zunächst das Basis-Stylesheet, das unser Plugin benötigt. Wir könnten nur eine separate CSS-Datei einbinden, aber da wir nur eine einzige Stilregel benötigen, ist es sinnvoll, die Anzahl der Dateien zu reduzieren, die jeder implementierende Entwickler verwalten muss.
Wir verwenden YUI's StyleSheet () Methode, um unser neues Stylesheet zu erstellen. Diese Methode akzeptiert ein einzelnes Argument, das den Namen des neuen Stylesheets darstellt. Wir benutzen dann die einstellen() Methode, um die gewünschten Stile festzulegen. Das einstellen() Methode macht zwei Argumente; Der erste ist der Selektor, auf den wir abzielen möchten, und der zweite ist ein Objektliteral, das die Stile enthält, die auf den Selektor angewendet werden sollen schweben rechts.
Wir prüfen dann, ob die .yui3-sam-skin Selektor ist im Dokument vorhanden; Wenn dies der Fall ist, erstellen wir ein Skin-Stylesheet für das Plugin. Wenn der sam-Skin nicht verwendet wird, lohnt es sich nicht, einen Skinstil zu erstellen, da der implementierende Entwickler zweifellos benutzerdefinierte Stile haben wird, die er möglicherweise anwenden möchte.
Als nächstes müssen wir überprüfen, ob die showUI Attribut des Widgets ist aktiviert. Wir können Zugriff auf die Hostklasse erhalten, mit der das Plugin verbunden ist, indem Sie das integrierte Hostattribut verwenden, das wir mit dem erhalten() Methode wie jedes andere Attribut. Das showUI Das Attribut des Widgets muss aktiviert sein, wenn das Plugin verwendet wird. Wenn das Attribut nicht ursprünglich festgelegt ist, wird es hier festgelegt.
Wenn Sie Plugins verwenden, können wir die Attribute des Hosts erkennen und darauf reagieren. Wir fügen einen Attribut-Änderungs-Handler für das Wann hinzu Tweets Attribut unserer Widget-Änderungen mit der afterHostEvent () Methode. Diese Methode akzeptiert zwei Argumente. Das erste ist das zu überwachende Attribut, das zweite ist die Methode, die ausgeführt wird, wenn sich das Attribut ändert.
Die Destruktorfunktion wird aufgerufen, wenn das Plugin zerstört wird. Mit dieser Methode wird nach dem Plugin aufgeräumt. Alle Änderungen an der Seite sollten rückgängig gemacht werden, ebenso wie alle Änderungen, die wir am Widget vornehmen. Die Änderungen, die wir an der Seite vornehmen, die wir rückgängig machen müssen, sind das Hinzufügen der Stylesheets. Dies ist also das, was wir zuerst tun. Die Stylesheet-Styles können mit dem entfernt werden unset () Methode; Diese Methode setzt voraus, dass der Selektor als erstes Argument und die Formatvorlagen als zweites Argument deaktiviert werden.
Wir prüfen dann, ob die _origShowUiValue Variable ist auf gesetzt wahr oder falsch; wenn die Variable auf gesetzt ist falsch Wir wissen, dass wir seinen Wert zurücksetzen müssen, also setzen wir das Attribut des Hosts zurück auf falsch. Wenn der Wert geändert wurde und die Benutzeroberfläche vom Plugin angezeigt wurde, blenden wir ihn aus, sodass das Widget wieder in den ursprünglichen Zustand versetzt wird.
Wir verwenden in diesem Plugin nur eine einzige Methode zur Änderungsverarbeitung von Attributen. die, die aufgerufen wird, wenn die tweeten Attribut des Hosts ändert sich. Diese Methode sollte folgendermaßen aussehen:
_afterHostTweetsChange: function () var widget = this.get ("host"); if (widget.get ("tweets"). next_page) var nextPageUrl = widget.get ("tweets"). next_page, nextLink = Node.create (Y.substitute (TweetSearchPaging.LINK_TEMPLATE, linkclass: TweetSearchPaging.PAGING_CLASS, url : ["http://search.twitter.com/search.json", nextPageUrl, "& callback = callback"]. join (""), linktext: this.get ("strings"). nextLink)) ; if (this._nextLinkNode) this._nextLinkNode.remove (); this._nextLinkNode = widget._uiNode.appendChild (nextLink); Y.on ("click", Y.bind (this._getPage, this), this._nextLinkNode); if (widget.get ("tweets"). previous_page) var prevPageUrl = widget.get ("tweets"). previous_page, prevLink = Node.create (Y.substitute (TweetSearchPaging.LINK_TEMPLATE, linkclass: TweetSearchPaging.PAGING_CLASS,) url: ["http://search.twitter.com/search.json", prevPageUrl, "& callback = callback"]. join (""), linktext: this.get ("strings"). prevLink) ); if (this._prevLinkNode) this._prevLinkNode.remove (); this._prevLinkNode = widget._uiNode.appendChild (prevLink); Y.on ("click", Y.bind (this._getPage, this), this._prevLinkNode); , Zuerst speichern wir erneut einen Verweis auf die Host-Klasse, da wir mehrmals darauf verweisen müssen. Nun müssen wir feststellen, ob in der Antwort von Twitter seitenweise Ergebnisse vorhanden sind oder nicht und ob es vorherige oder nächste Ergebnisseiten gibt. Das Tolle an der Antwort von Twitter ist, dass automatisch beibehalten wird, welche Ergebnisseite wir anzeigen, wenn mehr Ergebnisse vorhanden sind als die konfigurierte Anzahl von Ergebnissen pro Seite.
Wenn nach der aktuellen Seite eine weitere Ergebnisseite angezeigt wird, wird im JSON-Antwortobjekt eine Eigenschaft aufgerufen Nächste Seite. Wenn es eine vorherige Ergebnisseite gibt, wird auch ein angezeigt vorherige Seite Eigentum. Alles, was wir tun müssen, ist, das Vorhandensein dieser Eigenschaften zu überprüfen und die Links der nächsten Seite und der vorherigen Seite zu erstellen.
Die Links werden mit der Vorlage erstellt, die wir zuvor in der Plugin-Klasse gespeichert haben, und erhalten die generierte KLASSENNAME. Das Nächste Seite und vorherige Seite Antwortobjekte werden von Twitter über eine URL mit einer speziellen Adresse abgerufen ICH WÜRDE in der Abfragezeichenfolge. Wenn Sie diese neuen Knoten erstellen, wird die in diesen Eigenschaften angegebene URL zu jedem Link hinzugefügt. Die Links werden an die angehängt searchUI Knoten des Hosts und Klick-Handler werden für sie hinzugefügt. Diese Click-Handler verweisen auf eine als Dienstprogramm bezeichnete Methode _getPage (). Wir werden diese Methode als nächstes hinzufügen.
Genau wie beim Erstellen des Widgets können wir eine beliebige Anzahl benutzerdefinierter Prototypmethoden hinzufügen, die zum Ausführen von benutzerdefiniertem Code verwendet werden, der von unserem Plugin als Reaktion auf Benutzerinteraktionen oder Statusänderungen benötigt wird. In diesem Plugin müssen Sie nur eine einzige Methode hinzufügen, die wie folgt aussehen sollte:
_getPage: function (e) var widget = this.get ("host"); e.preventDefault (); widget._viewerNode.empty (). hide (); widget._loadingNode.show (); widget.set ("baseURL", e.target.get ("href")), widget._retrieveTweets (); Y.all (". Yui3-tweetsearch-paging-link"). Remove (); Zuerst speichern wir einen Verweis auf die Host-Klasse und verhindern dann, dass dem Paging-Link gefolgt wird, auf den geklickt wurde. Wir entfernen dann alle vorhandenen Tweets im Viewer des Widget und zeigen den Ladeknoten an. Denken Sie daran, dass jeder Paging-Link (oder welcher Link vorhanden ist, wenn wir uns auf der ersten oder letzten Seite befinden) über die URL verfügt, die die nächste (oder vorherige) Ergebnisseite abruft. Daher rufen wir diese URL von den Links ab href und setze das baseURL Attribut des Widgets. Sobald dies geschehen ist, nennen wir das _retrieveTweets () Methode unseres Widgets, um die nächste Seite anzufordern. Schließlich entfernen wir die aktuellen Paging-Links, da sie neu erstellt werden, wenn das neue Antwortobjekt nächste oder vorherige Seiten enthält.
Nun, da wir unser Plugin erstellt haben, können wir sehen, wie einfach es mit unserem Widget ist. Wir müssen unsere aktualisieren benutzen() verwenden Sie unser Plugin und rufen Sie die Stecker() Methode, bevor das Widget dargestellt wird:
YUI (). Use ("tweet-search", "tweet-search-paging"), Funktion (Y) var myTweetSearch = new Y.DW.TweetSearch (srcNode: "#ts"); myTweetSearch.plug (Y.) .Plugin.DW.TweetSearchPaging); myTweetSearch.render ();); Das Stecker() Methode verbindet unser Plugin, das über die Plugin Namespace und welcher Namespace wir bei der Definition der Plugin-Klasse angegeben haben. Wenn wir nun die Seite ausführen, sollten wir unten im Widget Paging-Links haben:
Eine der Funktionen unseres Plugins (genau wie unser Widget) ist die einfache Internationalisierung. Um Strings für das Plugin in einer anderen Sprache bereitzustellen (oder, falls ein Plugin, alle Attribute überschreiben), können Sie das Konfigurationsobjekt einfach als zweites Argument für das Plugin bereitstellen Stecker() Methode, z.B.
myTweetSearch.plug (Y.Plugin.DW.TweetSearchPaging, Zeichenfolgen: nextLink: "Página Siguiente", prevLink: "Página Anterior");
Der Paging-Link sollte jetzt so aussehen:
In diesem Teil des Lernprogramms haben wir untersucht, wie einfach es ist, ein Plugin zu erstellen, mit dem vorhandene Widgets oder andere Module erweitert werden können. Dies ist eine großartige Möglichkeit, zusätzliche Funktionen bereitzustellen, die nicht unbedingt erforderlich sind. Diese können Entwickler bei Bedarf einschließen. Wir haben gesehen, dass die Struktur eines Plugins in einem kleineren Maßstab der eines Widget ähnelt.
In diesem Beispiel war das Plugin sehr eng mit unserem Widget gekoppelt. Es ist beispielsweise nicht möglich, das Plugin mit einem anderen Widget zu verwenden. Dies muss nicht der Fall und Plugins sein, und Erweiterungen können viel locker gekoppelt werden, um die Funktionalität für eine Reihe verschiedener Module hinzuzufügen oder zu erweitern.
Damit sind wir jetzt am Ende der Reihe der YUI3-Widgets angelangt. Ich hoffe, ich habe einen Einblick in die mächtigen Mechanismen der Bibliothek gegeben, die es uns ermöglichen, auf einfache Weise skalierbare und robuste Widgets zu erstellen, die die Stärken der Bibliothek nutzen.
Lassen Sie uns wissen, was Sie in den Kommentaren unten denken, und vielen Dank für das Lesen!
