Vielleicht haben Sie diesen Tweet gesehen: “jQuery ist eine Gateway-Droge. Dies führt zu einer vollständigen Verwendung von JavaScript. “Ein Teil dieser Sucht, so behaupte ich, lernt andere JavaScript-Frameworks. Und genau darum geht es in dieser vierteiligen Serie des unglaublichen Dojo Toolkits: Sie bringen Sie zur nächsten Stufe Ihrer JavaScript-Sucht.

In dieser letzten Episode unserer Sitzung betrachten wir das letzte Mitglied des Dojo trinity: DojoX.

---

Was ist DojoX??

DojoX ist ein Ort, an dem Module beliebig schnell wachsen und sich entwickeln können. Aber verstehen Sie nicht, dass DojoX eine für alle freie Codierung ist. Kaum.

Sie können sich DojoX (was für Dojo Extensions steht) als eine Sandbox vorstellen, ein Ort, an dem Module beliebig schnell wachsen und sich entwickeln können. DojoX-Module sind nicht unbedingt so ausgereift wie Dojo- und Dijit-Module. Und obwohl es einen DojoX-Leader gibt, wie für Dojo und Dijit, werden alle Unterprojekte (wie sie genannt werden) einzeln verwaltet.

Aber verstehen Sie nicht, dass DojoX eine für alle freie Codierung ist. Kaum. In der Tat gibt es einige strenge Regeln. Für jedes Teilprojekt muss eine README-Datei vorhanden sein, die Sie im obersten Verzeichnis unter dem Verzeichnis finden dojox Mappe. Dann hat jedes Teilprojekt auch einen Status (in der README gefunden). Der Status eines Unterprojekts kann basierend auf der Höhe der Verpflichtung und dem Umfang der verfügbaren Tests und der Dokumentation einer der folgenden sein:

• Experimental-
• Alpha
• Beta
• Produktion

Interessanterweise muss ein DojoX-Leader (BDFL) den Status genehmigen, wenn ein Teilprojekt seinen Status ändern möchte.

Welche Dinge werden Sie in DojoX finden? Es gibt viele Erweiterungen der Dojo- und Dijit-Funktionalität (viele UI-Widgets). Dann gibt es Projekte zum Erstellen von Diagrammen, zum Arbeiten mit Feeds, zum Erstellen von Datentabellen und mehr.

Über DojoX im Allgemeinen gibt es nicht mehr viel zu sagen. Verwenden wir also ein DojoX-Teilprojekt - und viele andere Dojo-Chops, die wir gelernt haben - und schließen Sie unsere Dig-in-Dojo-Sitzung mit einem kleinen Demo-Projekt ab.

Folgendes bauen wir: Es ist ein interaktiver Tisch (ein DojoX-Projekt mit dem Namen a) DataGrid) mit einer Liste aktueller Tutorials von den Tuts + Websites. Wir können die Tutorials filtern, indem wir sie in ein Texteingabefeld eingeben.

Vergessen Sie nicht, dass Sie als Tuts + Premium-Mitglied den begleitenden Screencast erhalten, in dem ich Sie Schritt für Schritt durch das Projekt bringe. Als Premium-Mitglied können Sie auch den Code für dieses Mini-Projekt herunterladen. Es ist immer ein guter Zeitpunkt, um sich anzumelden!

---

Rahmen Sie es: das HTML

Beginnen wir mit etwas HTML in index.html, Na sicher.

Zweifellos ganz normal. Wir laden Dojo von einer CDN und Einstellung parseOnLoad: true. Lassen Sie uns noch ein paar Elemente hinzufügen. Beachten Sie, dass wir eine haben div # einstellungen; Lassen Sie uns dort einige Einstellungen vornehmen. Wir möchten in der Lage sein zu wählen, von welchen Tuts + Websites wir Tutorials sehen. Wir haben eine Liste mit Kontrollkästchen, mit denen wir genau das tun können:

 
 
Wählen Sie die Websites aus, die Sie aufnehmen möchten:
 
 
 Aetuts+
 
 Cgtuts+
 
 Wptuts+
 
 Nettuts+
 
 Psdtuts+
 
 Phototuts+
 
 Audiotuts+
 
 Vectortuts+
 
 Aktivierungen+
 
 Mobiletuts+
 
 Webdesigntuts+
 
  Aktualisieren  

Beachten Sie, dass wir deklarativ eine Dijit-Schaltfläche erstellen. Wir werden unsere Kontrollkästchen später programmatisch in Dijit-Kontrollkästchen umwandeln.

Was ist damit div # Inhalt?

 
 
 Neues Tutorial vom Tuts + Network
  
 

Eine andere deklarative Schöpfung; Diesmal ein Textfeld. Stellen Sie sicher, dass Sie die Eigenschaft festlegen intermediChanges zu wahr; Dadurch wird sichergestellt, dass die bei Änderung wird nach jedem Tastendruck im Textfeld ausgelöst und nicht nur, wenn das Textfeld den Fokus verliert. Wir werden dieses Verhalten wünschen, wenn wir später unsere Tabellenfilterung vornehmen.

Wenn Sie von Tischen sprechen, können Sie wahrscheinlich vermuten, dass unser Tisch in erscheint div # table später.

Noch etwas hier: Wir müssen ein paar Stylesheets verknüpfen. In dem :

Das erste ist ein Standard-Dijit-Thema. Die nächsten beiden sind für die DataGrid wir werden verwenden Zum Schluss fügen wir noch ein eigenes Styling hinzu. Lass uns das als nächstes betrachten!

---

Style It: Das CSS

Hier ist nichts zu bahnbrechend. Wir konzentrieren uns auf unseren Inhalt und schieben unser kleines Einstellungsfeld nach rechts. Wenn Sie den Mauszeiger über die Einstellungen bewegen, werden sie mit einem einfachen CSS3-Übergang problemlos ausgefahren.

Der sehr wichtige Punkt ist, dass wir eine Höhe einstellen #Tabelle. Das wird von der gefordert DataGrid Klasse, die wir verwenden werden. Die andere Sache ist, dass wir einstellen .dijitTextBox eine Breite von 100% haben.

Das gehört natürlich dazu style.css Datei, die wir verlinkt haben:

 body margin: 40px 0; Polsterung: 0; Schrift: 14px / 1,5 serifenlos; Überlauf versteckt; Hintergrund: #ccc;  #main border: 1px fest # 474747; Breite: 940px; Marge: auto; Polsterung: 10px; Hintergrund: #fff; -webket-border-radius: 7px; -moz-border-radius: 7px; Grenzradius: 7px;  #settings padding: 20px 30px; Breite: 240px; Hintergrund: #ececec; z-Index: 10; Grenze: 1px fest # 474747; -webkit-border-radius: 7px 0 0 7px; -moz-border-radius: 7px 0 0 7px; Grenzradius: 7px 0 0 7px; -Webkit-Übergang: Rechts 0.3s Leichtigkeit; -Moz-Übergang: Rechts 0,3s Leichtigkeit; -o-Übergang: Rechts 0,3s Leichtigkeit; -ms-Übergang: Rechts 0.3s Leichtigkeit; Übergang: Rechts 0,3s Leichtigkeit; Position: absolut; rechts: -270px;  #settings: hover right: -1px;  .dijitTextBox width: 100%;  #table margin-top: 20px; Höhe: 600px; 

---

Macht es: Das JavaScript

Jetzt mach das auf script.js Datei, zu der wir in unserem HTML-Dokument verlinkt haben. Wir fangen an benötigen-die Funktionalität, die wir brauchen:

 dojo.require ('dijit.form.Button'); dojo.require ('dijit.form.TextBox'); dojo.require ('dijit.form.CheckBox'); dojo.require ('dojo.io.script'); dojo.require ('dojox.grid.DataGrid'); dojo.require ('dojo.data.ItemFileReadStore');

Sie sind wahrscheinlich nicht mit den letzten beiden "Kursen" vertraut, in denen wir einsteigen. dojox.data.DataGrid ist der interaktive Tisch, den wir verwenden werden. Das Letzte, dojo.data.ItemFileReadStore, ist einer von Dojos vielen Datenspeichern. Um Datenspeicher richtig zu erklären, wäre ein ganzes Tutorial erforderlich, aber wir werden genug behandeln, um sie heute in unserem Projekt zu verwenden. Für jetzt wissen Sie einfach, dass unser DataGrid nimmt in unserem Fall einen Datenspeicher an ItemFileReadStore-als seine Datenquelle, und deshalb verwenden wir sie.

Natürlich wollen wir einige Aktionen ausführen, sobald diese Module geladen wurden. Lassen Sie uns daher den Großteil unseres Codes so umhüllen:

 dojo.ready (function () );

Abgesehen von zwei Funktionen außerhalb dieses Bereichs wird unser gesamter Code hier enthalten sein. Beginnen wir mit ein paar Variablen.

 var checks = dojo.query ('input [type = checkbox]'). map (function (el) neues dijit.form.CheckBox zurückgeben (checked: true, value: el.value, el);),

Auf den ersten Blick könnte man das meinen prüft wird ein ... sein NodeList der Checkboxen. Beachten Sie jedoch, dass wir das verwenden Karte Methode, um jedes reguläre alte Textfeld in ein Dijit-Kontrollkästchen zu verwandeln. So, prüft wird ein Array von Checkbox-Widgets sein. In unserem Optionshash markieren wir die Kontrollkästchen und setzen den Wert auf das value-Attribut des Elements. Aus irgendeinem Grund akzeptiert die Widget-Klasse dies standardmäßig nicht. Natürlich speichern wir Verweise auf diese Widgets in einem Array, da wir später darauf zugreifen müssen, um zu sehen, welche Kontrollkästchen aktiviert sind.

 Struktur = [Feld: 'Titel', Name: 'Titel', Breite: '650px', Feld: 'Ersteller', Name: 'Autor', Breite: 'Auto', Feld: 'pubDate', Name: 'Datum', Breite: 'Auto'],

Als nächstes ist ein Struktur. Dies ist die Struktur für unsere DataGrid Tabelle: Jedes Objekt im Array wird eine Spalte in unserer Tabelle sein. Das Feld Eigenschaftskarten auf die Daten, die wir haben, so die DataGrid wird wissen, was ich wo platzieren soll. Das Name ist die benutzerfreundliche Spaltenüberschrift. Das Breite ist die Breite der Spalte.

Nun kommen wir zum Gitter selbst:

 grid = new dojox.grid.DataGrid (sortInfo: '-3', Struktur: Struktur, Abfrage: title: '*', 'table'); grid.queryOptions = ignoreCase: true;

Wir setzen drei Eigenschaften an DataGrid Beispiel. Der Erste, sortInfo, sagt, dass wir Zeilen nach der dritten Spalte sortieren wollen; das - bedeutet, dass die Reihenfolge absteigend sein sollte. Rückruf von unserem Struktur Variable, dass die dritte Spalte das Datum ist, an dem das Lernprogramm veröffentlicht wurde: Die Out-Tabelle wird also nach dem neuesten Lernprogramm oben sortiert. Natürlich die Gitter weiß noch nichts von dieser Struktur, also informieren wir sie mit der Struktur Eigentum. Zum Schluss setzen wir die Abfrage. Dies ist wichtig: Es begrenzt die Zeilen aus unserem Datenspeicher, die in der Tabelle angezeigt werden. Zum Beispiel, wenn unser Abfrageobjekt war Ersteller: 'J *', nur Zeilen, deren Schöpfer Das Feld beginnt mit "J". In unserem Fall werden alle Zeilen standardmäßig verwendet. Wir werden später sehen, wie wir das ändern können.

Endlich passieren wir die Ich würde des Elements, das die beherbergen sollte DataGrid als zweiten Parameter für unseren Konstruktor. Danach setzen wir die queryOptions Objekt; Wir möchten nicht, dass bei Abfragen die Groß- und Kleinschreibung beachtet wird, also teilen wir unser Widget mit Fall ignorieren.

Ausgezeichnet! Lassen Sie uns nun einige Aktionen vorbereiten. Wenn wir das Textfeld eingeben, möchten wir, dass die Liste der Tutorial-Anzeigen gefiltert wird (ja, ich weiß, dass wir noch keine Tutorials anzeigen, aber wir werden dorthin gelangen)..

 filterBox.set ('onChange', function () grid.filter (title: '*' + filterBox.get ('value') + '*'););

Wenn Sie sich erinnern, setzen wir data-dojo-id = 'filterBox' Wenn Sie das Dijit-Textfeld deklarativ erstellen, können wir es hier in unserem JavaScript verwenden. Wir stellen es ein bei Änderung Handler, es ist eine supereinfache Änderung: Wir nennen das nur grid.filter Übergeben Sie ein Abfrageobjekt. Wenn wir beispielsweise "Scr" in das Textfeld eingeben, werden nur Tutorials angezeigt, deren Titel übereinstimmen * scr * wird Angezeigt werden. Das Schöne daran ist, dass, wenn wir das Textfeld löschen, die Titel nach gefiltert werden **, das passt zu ihnen allen.

Wir haben noch zwei Aufgaben:

1. Füllen Sie die Tabelle zunächst mit Daten (wenn die Seite geladen wird).
2. Laden Sie nur Tutorials für die geprüften Sites, wenn Sie auf die Schaltfläche "Aktualisieren" klicken.

Dazu werden wir einige Funktionen in zwei Hilfsfunktionen zusammenfassen. Zuerst haben wir die GetSites Funktion; Wie Sie vielleicht schon vermutet haben, verwenden wir YQL, um die Feeds der Tuts + -Seiten zu erhalten. Daher müssen wir eine Abfrage erstellen, die auf den Websites basiert, deren Kontrollkästchen aktiviert sind. Hier ist das Format der Abfrage:

 Wählen Sie den Ersteller, das pubDate und den Titel aus der URL, in der sich die URL befindet (URL1, URL2,…).

Also hier ist unsere Funktion:

 Funktion getSites (prüft) var urls = []; dojo.forEach (prüft, Funktion (check) if (check.get ('checked') === true) urls.push ('' http://feeds.feedburner.com/ '+ check.get (' Wert ') +' '');); return 'select creator, pubDate, title from rss wobei url in (' + urls.join (',') + ')'; 

Es ist ziemlich einfach, und ich denke, Sie können sehen, was los ist: Wir übergeben die Reihe der Kontrollkästchen-Widgets, die dann wiederholt werden. Wenn das Kontrollkästchen aktiviert ist, erstellen wir eine URL und legen sie in ein Array. Wir erstellen die endgültige YQL-Abfrage, indem wir einige Zeichenfolgen verketten und das Array verwenden Beitreten Methode.

Das war leicht genug, aber diese nächste Methode ist etwas komplexer.

 Funktion getTuts (Abfrage) return dojo.io.script.get (url: 'http://query.yahooapis.com/v1/public/yql', Inhalt: q: Abfrage, Format: 'Json', callbackParamName: 'callback'). then (Funktion (Daten) ); 

Wir beginnen mit der Annahme eines Parameters: der Abfrage. Also richten wir zuerst unseren YQL-Aufruf über ein dojo.io.script.get, Wie Sie bereits gesehen haben (Wir machen keine Zwischenspeicherung dieser Anfrage, nur um die Dinge ein bisschen einfacher zu halten). Wir benutzen die dojo.Deferred Methode dann Hier können Sie unseren eigenen Rückruf registrieren. Beachten Sie aber noch etwas ganz oben: Rückkehr. Dies wird tatsächlich ein neues zurückgeben dojo.Deferred Objekt, das wir nennen können dann Methode auf. Dies ist eine Alternative zum Akzeptieren einer Rückruffunktion.

Aber bevor wir all das erreichen, müssen wir unseren eigenen verzögerten Rückruf erledigen. So fängt das an:

 var items = data.query.results.item, typemap = 'Date': deserialize: function (value) var date = new Datum (Wert), month = date.getMonth (), day = date.getDate () ; Monat = Monat < 10 ? '0' + month : month; day = day < 10 ? '0' + day : day; return date.getFullYear() + '-' + month + '-' + day;   ;

Hey, komm zurück: So schlimm ist es nicht. Sie sind cool, wenn Sie diesen langen YQL-Objektpfad auf "nur" reduzieren Artikel, aber lass das nicht typemap dich erschrecken. Dies ist einfach ein Objekt von speziellen Typen, die wir in unserem verwenden DataGrid. In diesem Fall erstellen wir eine Datum Geben Sie ein, damit wir unsere Daten entsprechend formatieren können. Während es andere Eigenschaften geben kann, verwenden wir nur die deserialisieren one, eine Funktion take, erhält den Rohwert (in unserem Fall eine Datumszeichenfolge) aus dem Speicher und gibt das Format aus, das in unserer Tabelle angezeigt wird. In unserem Fall formatieren wir das Datum einfach als JJJJ-MM-TT.

Als Nächstes müssen wir einige einfache Änderungen an den Daten vornehmen, die wir von YQL erhalten haben:

 for (var i = 0; items [i]; i ++) items [i] .creator = (Typ der Elemente [i] .creator === 'string')? items [i] .creator: items [i] .creator.content; items [i] .pubDate = _value: items [i] .pubDate, _type: 'Date'; 

Das Schöpfer value ist normalerweise der Name des Autors. Für einige der Feeds möchten wir jedoch tatsächlich Erzeugerinhalt. Unsere erste Linie kümmert sich darum.

Die zweite Zeile ist wichtig: Denken Sie daran typemap wir kreierten? Wir können unser sagen Gitter Um einen bestimmten Typ auf diese Weise zu verwenden: Wir ändern unsere pubDate Eigenschaft von der Datumszeichenfolge zu einem Objekt: Dieses Objekt hat zwei Eigenschaften: _Wert ist der Wert für das Feld, während _Art ist der zu verwendende Datentyp.

Schließlich erstellen wir unseren Datenspeicher:

 return neues dojo.data.ItemFileReadStore (data: items: items, typeMap: typemap);

In unserem Fall ist das ziemlich einfach: das Daten Eigenschaft nimmt ein Objekt, wo Artikel sind unsere Daten; dann geben wir es auch unser typemap. Sie denken vielleicht, dass es sinnlos ist, dies zurückzugeben, weil dies eine dojo.DeferredCallback-Funktion, und wir weisen sie keinem Objekt zu. Aber denken Sie daran, wir geben ein neues zurück dojo.Deferred object und dieser Datenspeicher wird an eine Callback-Funktion übergeben, die für dieses Objekt verwendet wird.

Wenn Sie verwirrt sind, wird dies durch ein einfaches Beispiel geklärt. Zurück in unsere dojo.ready Aufruf, beginnen wir mit dem, was passiert, wenn auf die Schaltfläche „Update“ geklickt wird:

 update.set ('onClick', function () getTuts (getSites (prüft)) .then (function (data) grid.setStore (data);););

Wir setzen die onClick Attribut für unsere aktualisieren Dijit-Taste. Wir zuerst GetSites, und übergeben Sie diese Abfrage an getTuts. Da kehrt ein dojo.Deferred Objekt übergeben wir unsere Callback-Funktion an ihr dann Methode. Wir können benutzen grid.setStore die auffrischen DataGrid mit neuen Daten.

Schließlich, wenn die Seite geladen wird, tun wir sehr:

 // fülle zuerst die Tabelle getTuts (getSites (checks)) .then (function (tutsdata) grid.set ('store', tutsdata); grid.startup (););

Beachten Sie, dass wir anrufen grid.startup (); Dies ist zum Einrichten der Benutzeroberfläche erforderlich. ohne dies würde nichts auf unserer Seite angezeigt.

---

Bewundern Sie es: Das fertige Produkt

Gut gemacht! Hier ist unser abgeschlossenes Projekt:

---

Fazit

Nun, das bringt uns zum Ende unserer „Dig in Dojo“ -Sitzung. Ich hoffe, es hat Sie dazu inspiriert, wirklich in diese unglaubliche Bibliothek einzusteigen.

Dies ist jedoch nicht das Ende der Dojo-Tutorials hier auf Nettuts +; weit davon entfernt, wenn ich etwas damit zu tun habe! Ihr alle habt in den Kommentaren zu den anderen Beiträgen einige großartige Vorschläge. Lass sie kommen und danke dir vielmals für das Lesen!