Yahoo! User Interface Blog (YUIBlog)

Fragen Sie Satyam: Mit YQL und YUI mit YQLDataSource

Satyam (aka Daniel Barreiro) ist seit langer Zeit eine YUI-Nutzer und einer der produktivsten, großzügige Experten in der YUI-Foren . Er ist auch der Autor eines neuen Buches über YUI 2.8.0, 2.8.0 YUI: Das Erlernen der Bibliothek . Dieser Artikel in der "Ask Satyam"-Serie wurde von Mike Hatfield vorgeschlagen . Satyam wird die Beantwortung einiger zusätzlicher Fragen in den kommenden Wochen hier auf YUIBlog als Teil der Serie.

Anreise nach YQL wissen

Yahoo! Query Language, YQL , ist eine großartige Möglichkeit für den Zugriff auf eine immense Menge an Informationen über einen Standard einfach zu bedienende Benutzeroberfläche. Um einen Eindruck davon, wie einfach es ist, vergleichen Sie die alte Artist Service-Dokumentation mit dieser einfachen YQL query: select * from music.artist.search where keyword='Rihanna'.

Die YQL Console ist sehr einfach zu bedienen. Er listet viele der verfügbaren Tabellen und Abfragen auf Probe ihnen so können Sie problemlos erkunden Sie die Fülle von Informationen durch sie zugänglich. YQL speichert keine Daten, sondern es ist ein Abfrage-Schnittstelle zu anderen Datenbanken oder APIs. Die Anzahl der Tabellen, Listen von Yahoo! YQL Quellen 142 ist aber, wenn Sie auf der Karte Gemeinschaft Tabellen Link, steigt die Zahl auf 825 und umfasst den Zugang zu öffentlichen Daten auf Amazon, Facebook, Netflix oder die New York Times. (Das ist, wo man ein paar YUI-verknüpften Tabellen finden Sie auch.)

Manchmal sind diese Tabellen benötigen Sie einen Zugangscode haben, von ihren Besitzern zu erhalten, denn ohne sie können Sie entweder nicht in der Lage sein, um die Abfrage durchzuführen, oder Sie werden eine begrenzte Anzahl von Ergebnisse zu erzielen. Die YQL Dienst selbst hat zwei Adressen, eine öffentliche und eine andere, die eine Registrierung erfordert und bietet eine bessere Leistung und natürlich, müssen Sie die Authentifizierung, um private Daten von einigen der Tabellen zugreifen.

Standardmäßig wird YQL nur ein Muster Antwort mit etwa 10 Datensätze. Sie können eine größere Anzahl von Ergebnissen, indem Sie die gewünschte Anzahl der Ergebnisse in Klammern nach dem Name der Tabelle, zum Beispiel angeben:

  select * from music.artist.search (22), wo keyword = "Madonna" 

Neben jedem Tisch Name in den Datentabellen in der Liste YQL Konsole, wenn Sie die Maus über einen Tabellennamen ein Desc-Taste auf der rechten Seite der Name der Tabelle zeigen. Das wird eine Beschreibung der Tabelle und wird in der Regel enthalten Beispiel-Abfragen und eine Liste von Feldern. Seien Sie aufmerksam zu, welche Felder sind markiert als erforderlich. Hier können Sie aufgefordert werden Zugriffstasten für bestimmte Tabellen zu finden.

Mit YQL mit YUI

YQL ist eine flexible, generische Schnittstelle zu strukturierten Daten im Web, und YUI (mit DataSource , AutoVervollständigen , DataTable und Charts ) ist gut in Konsum und durch Schnittstellen zu diesen Daten.

Es gibt ein paar Einschränkungen zu beachten, von Anfang an zu halten, jedoch.

Quirk # 1: Partielle Anfragen und YQL Source Data

Einige Tische sind nicht für das Pairing mit passen AutoVervollständigen da sie keinen Treffer für Teil-Suchschlüssel. Obwohl YQL ermöglicht Wildcard-Abfragen wie keyword like 'mado%' , dem eigentlichen Anbieter der Daten möglicherweise nicht unterstützen solche Abfragen - so wie der Benutzer beginnt der Eingabe in das Auto-Vervollständigen-Box den Namen der Madonna, werden nur Ergebnisse mit Full-Wort gesuchte Produkt angeboten wird und Madonna wird nicht angeboten, bis der Name vollständig eingegeben ist. Beachten Sie dies, wie Sie die Tabellen, die YQL von Interesse für Sie in Ihrer Anwendung sind zu erkunden.

Quirk # 2: Die Sortierung und Nummerierung in YQL

Die Sortierung in YQL ist ein Filter angewendet, nachdem die Ergebnismenge wird geholt. Wenn Sie die Anwendung YQL als Quelle für eine DataTable mit Server-Side-Sortier-und Seitenzahlen wären, würden Sie in Schwierigkeiten geraten: Wenn der Benutzer über den Tisch bereits von einer bestimmten Spalte sortiert und bittet um Seite zwei, YQL wird zuerst wählen Sie die nächste N Aufzeichnungen des unsortierten Tabelle zu sortieren und dann diejenigen, wenn Sie normalerweise erwarten würden die nächsten N Datensätze der Tabelle sortiert. Zum Beispiel, sagen, Sie haben eine Tabelle mit einer einzigen numerischen Feld und die Tabelle enthält 4,3,2,1 in dieser Reihenfolge. Sie haben eine DataTable mit zwei Zeilen pro Seite und lassen Sie es von seiner einzigen Spalte sortiert. YQL werden 3,4 für die erste Seite und 1,2 für das zweite zurück, anstatt 1,2 und dann 3,4. Das ist, weil es tut zuerst die "Seite" Auswahl auf den unsortierten Daten und sortiert sie.

Quirk # 3: YQL Antwortstrukturen

YQL Reaktion Strukturen ändern in Abhängigkeit von der Anzahl der Elemente zurück. Wenn wir die Variable, die auf die Ergebnisse werfen waren, können wir irgendeines dieser, abhängig von der Anzahl der Angaben:

  Null 

  [] 

  {SomeChangingPropertyName: {
			 FieldName1: Wert1, 
			 FieldName2: Wert2, 
			 ...
		 }} 

  [
			 {
				 FieldName1: Wert1, 
				 FieldName2: Wert2, 
			 ...
			 }
		 ] 

  {SomeChangingPropertyName: [
		     {
				 FieldName1: value1row1, 
				 FieldName2: value2row1,
				 ...
			 },
		     {
				 FieldName1: value1row2, 
				 FieldName2: value2row2, 
				 ...
			 },
		     ...
		 ]} 

  [
		     {
				 FieldName1: value1row1, 
				 FieldName2: value2row1, 
				 ...
			 },
		     {
				 FieldName1: value1row2, 
				 FieldName2: value2row2, 
				 ...
			 },
		     ...
		 ] 

Die letzte Spalte zeigt eine konsequentere Alternative, keine skurrilen Namen der Eigenschaft und immer ein Array mit welcher Anzahl von Elementen kann die Anfrage zurück, sondern immer ein einfaches Array.

YQL und Asynchronous Cross-Domain-Daten

YQL kann auch die gleichen Informationen in verschiedenen Formaten, XML , JSON und JSONP , die später als die, die wir am meisten interessieren Aufgrund der Same Origin Policy , Browser nicht zulassen, dass ihre XMLHttpRequest- Objekt auf Quellen zuzugreifen aus eine eigene Domain. YUI Connection Manager und YUI IO , die ursprünglich auf XMLHttpRequest begrenzt waren, haben eine eingeführte XDR-Schnittstelle mit Flash , die solche Cross-Domain-Zugriffe ermöglicht.

Die YUI Get Utility mit der YQL gekoppelt JSONP Fähigkeit dieses Problem ebenfalls anspricht. Mal sehen, wie das funktioniert. Sie können <script> Tags jederzeit und <script> Tags kann alles von überall zu laden, wir tun dies regelmäßig, wenn wir die YUI-Bibliothek-Komponenten zu laden von Yahoo! 's EUR unabhängig davon, wo unsere Seite befindet. Allerdings erfordert dieser Ansatz etwas Hilfe aus dem Server, da die <script> Tag erwartet JavaScript-Code. Wenn wir eine Datei mit folgendem Inhalt zu laden:

  123 

es würde uns nichts gut, weil der Wert nicht zu einer Variablen zugewiesen. Wenn wir dies zu laden:

  var result = 123; 

dann würde sich die Anzahl in Variablen gespeichert werden result . Eine solche Variable wäre im globalen Bereich, sei das nicht eine gute Idee . Schlimmer noch, obwohl Wert würde abrufbar einmal gespeichert werden, würden wir nicht wissen, wann sie verfügbar sind, müssten wir die Umfrage result Variable zu entdecken, wenn wir Daten bekommen hatte. Die YUI Get Utility löst dieses Problem durch Signalisierung sowohl erfolgreiche als auch fehlgeschlagene Transaktionen.

Eine allgemeinere Lösung, die sich auf etwas Hilfe von dem Server, ist es, den Wert in einer Callback-Funktion wickeln:

  callbackFunction (123); 

Diese Funktion übernimmt die Speicherung oder Verarbeitung des Wertes, und es wäre nicht aufgerufen, bis der Gehalt vollständig geladen ist, so kann auch auf die Ankunft der Daten. Die meisten JSONP Servern akzeptieren eine URL-Argument (der normalerweise callback ), die den Namen der Funktion, die Daten mit einwickeln enthält. Namespaced Funktionen wie YAHOO.example.SiteExplorer.callback sind eine kluge Wahl für Callback-Funktionen.

Ein wichtiger Punkt ist zu beachten: JSONP ist keineswegs so sicher wie JSON. JSON nicht erlaubt jede Art von ausführbaren Code in das Feld Werte. Obwohl im Prinzip jede gute JSON-Encoder sollte Code in das JSON-Ausgang injiziert zu verhindern, YUI JSON-Dienstprogramm prüft auch, dass keines empfangen wird. Dies ist nicht der Fall, wo alles mit JSONP erhielt glücklich ausgeführt werden, mit allen Arten von möglichen Nebenwirkungen, keine Fragen gestellt. In JSONP, sind Sie grundsätzlich fragen, einen ausländischen Server, um ein Skript zu laden produzieren. So vorsichtig sein, um JSONP mit vertrauenswürdigen Servern und verwenden, wenn Sie JSONP von Ihrem Server bereitgestellt werden sollen, stellen Sie sicher, eine gute JSON-Encoder vor dem Verpacken die Ergebnisse in der Callback zu verwenden, so dass alle Felder, die betrügerische Code enthalten könnten, wird entkommen und somit neutralisiert. So wie wir gelernt, über SQL-Injection und wie es zu verhindern, denken Sie daran JSONP teilt diese Art von Verletzlichkeit .

Der Dienst unterstützt YQL JSONP; in der Konsole, erscheint eine zusätzliche Eingabefeld auf der rechten Seite des JSON-Checkbox, zunächst mit dem Text cbfunc .

Dies wird zu einem zusätzlichen Parameter in querystring übersetzt. Wenn wir wählen JSON, die URL ändert sich von:

  http://query.yahooapis.com/v1/public/yql?q=select% 20 *% 20von% 20
	       geo.places% 20where% 20text% 3D% 22san% 20francisco% 2C% 20CA% 22 

zu

  http://query.yahooapis.com/v1/public/yql?q=select% 20 *% 20von% 20
	      geo.places% 20where% 20text% 3D% 22san% 20francisco% 2C% 22 &% 20CA
	      format = json & callback = cbfunc 

Die grundlegende URL dauert q Argument mit dem URL-kodierten Query. Für JSON können wir angeben, format=json und, um es JSONP bieten wir den Namen der callback Funktion. Eine optionale diagnostics=true Argument hinzugefügt werden, um einige zusätzliche Diagnose-Informationen in der Antwort zu bekommen.

Mit YQL als Datenquelle in YUI

Jonathan LeBlanc hat außerdem ein handliches geschrieben Dienstprogramm zu YQL Abfragen zu tun und zu formatieren ihre Ergebnisse auf einer einfachen Schablone, die er in einem Basis vorgestellt YUI Blog-Artikel . Sie müssen nur die YQL Abfrage, die Vorlage, um das Ergebnis und den Behälter für das Ergebnis zu formatieren und sie kümmert sich um all die Kleinigkeiten für uns zu sorgen.

  yqlWidget.push (
    / / Abfrage
    'Wählen Sie aus item.description weather.forecast wo location = 90210',  
    / / Konfigurationsoptionen
    {},
    / / Template mit Platzhaltern mit Feldnamen in geschweiften Klammern
    '<br /> {Style="clear:both" item.description}',
    / / ID des Behälters für die Ergebnisse
    'WidgetContainer'
 );
 yqlWidget.render (); 

Es können beliebig viele Felder können in der Abfrage angefordert werden, auch verschachtelte Felder wie item.description können in der Vorlage, indem Sie sie in geschweiften Klammern verwendet werden.

YQLDataSource

Die Klasse nimmt YQLDataSource Jonathans Arbeit noch einen Schritt weiter durch die Umwandlung der YQL Daten in eine formelle DataSource-Objekt, dass YUI nutzen können. Das Ergebnis einer Abfrage YQL ist in der Regel einige Informationen in Tabellenform. YUI DataSource -Komponente wurde entwickelt, um diese Art von Informationen abzurufen. Mehrere andere YUI-Komponenten verwenden DataSource auf ihre Daten, einschließlich holen AutoVervollständigen , Charts und DataTable . Vor einiger Zeit entwickelte ich eine Unterklasse von DataSource, YQLDataSource erstreckt, die YAHOO.util.ScriptNodeDataSource auf dem Web-Service YQL verbinden, um Daten aus sie zu holen. Ich benutzte es in diesem Beispiel , wo die Daten für eine Auto-Vervollständigen-Box und zwei Ebenen von verschachtelten DataTables YQLDataSource bereitgestellt werden (die verschachtelten DataTables wird Gegenstand eines weiteren Artikels sein).

YQLDataSource ist einfach und könnte einfacher sein noch. Im Konstruktor setzen wir den Standard-URL für den Web-Service YQL, wenn keiner explizit vom Entwickler angegeben:

  YAHOO.util.YQLDataSource = function (oLiveData, oConfigs) {
	     oLiveData = oLiveData | | 'http://query.yahooapis.com/v1/public/yql?format=json&q =';
	     YAHOO.util.YQLDataSource.superclass.constructor.call (this, oLiveData, oConfigs); 
	 }; 

Als Teil der URL, die wir bereits das Format der Antwort als JSON und fügen Sie die q Argument, um die YQL Abfrage erhalten.

Genau wie alle anderen DataSource Unterklassen tun, kopieren wir in den statischen Mitglieder, meist Konstanten, die wir nutzen können:

  YAHOO.lang.augmentObject (YAHOO.util.YQLDataSource, YAHOO.util.DataSourceBase); 

Beim Erweitern der ScriptNodeDataSource, überschreiben wir mehrere seiner Mitglieder, der erste von ihnen war der responseType da wir das Know responseType wird JSON sein:

  YAHOO.lang.extend (YAHOO.util.YQLDataSource, YAHOO.util.ScriptNodeDataSource, {
	     ResponseType: YAHOO.util.DataSource.TYPE_JSON, 

Da wir einen YQL Aussage, wie die Anfrage erhalten, müssen wir es, bevor es in den Rest der URL verkettet werden entfliehen. Wir tun das in der makeConnection Methode, die wir so überschreiben:

  makeConnection: function (Orequest, ÔRückruf, oCaller) {
	      YAHOO.util.YQLDataSource.superclass.makeConnection.call (this,
	           encodeURIComponent (Orequest), ÔRückruf, oCaller);
	 } 

Wir nennen die ursprüngliche Version mit dem oRequest Argument, das die Abfrage YQL, richtig entkam enthält.

Nun fügen wir etwas Magie. Wir gehen davon aus, dass wir vorsichtig gewesen und explizit aufgezählt, um die Felder abzurufen. Ich mag es zu sehen Select * Aussagen in der Produktion Code, es geht ihnen gut zu erkunden, aber verschwenderisch in einem Endprodukt. So, ich hoffe, dass was auch immer kommen Felder in der Antwort die, die wir wollten wirklich sind. Leider YQL nicht automatisch eine Liste der Felder noch deren Datentyp, außerdem abhängig von der Abfrage, könnten Bereiche wie Termine zeigen sich in sehr unterschiedlichen Formaten. Seit YQL ist nicht mehr als Vermittler, das sind die Werte, es gibt diese von der ursprünglichen Quelle in welchem ​​Format sie zur Verfügung gestellt werden, welche Konten für die verschiedenen Formate von Werten wie Datum oder Boolean.

Also, am Ende werden wir vertrauen, was kommt in den Ergebnissen aber, wenn einige Stück von Daten ist nicht im richtigen Format, werden wir immer noch erlauben, ein Parser angegeben werden. Zum Beispiel eine Spalte mit Zahlen in YUI DataTable sortieren zu müssen, um tatsächliche Anzahl Felder JavaScript-Zahlen sein, nicht nur Ziffern enthalten, Saiten. Die YQL Abfrage für die Tracks eines bestimmten Albums gibt die numerischen Werte als Strings, also müssen wir sie in Zahlen zu analysieren. Wir können sagen:

  var = new tracksDS YQLDS ("{
	     responseSchema: {
	         Felder: [
	             {Key: 'Track.discNumber', Parser: "Zahl"}, 
	             {Key: 'Track.trackNumber', Parser: "Zahl"},
	             {Key: 'Track.duration', Parser: "Zahl"},
	             {Key: 'Track.popularity', Parser: "Zahl"}
	         ]
	     }
	 }); 

Die Abfrage enthält auch einen title -Feld, ist das ein String und benötigt keine Parsing. Beachten Sie auch, dass die Daten eine Ebene weiter nach unten, so dass wir Dot-Notation verwenden, um es zu holen verschachtelt. Wenn die erste Zeile der Daten, die wir verwenden, um herauszufinden, was Felder kommen, ist nicht repräsentativ für die Struktur der Reaktion können die Felder fehlen in dieser ersten Reihe als auch spezifiziert werden, und schließlich, wenn aus irgendeinem Grund die Daten so verläuft, YQLDataSource übernimmt, können wir auch den resultsList .

Wir werden nicht in jedem Detail zu gehen, der Quellcode enthält Kommentare, die Sie durch die Schritte leiten wird. Genug zu sagen, dass die parseJSONData Methode überschrieben, so ist, vor Ablauf der ursprünglichen Methode aufgerufen wird, alle Informationen über ein Feld aus der ersten Reihe der Daten über die analysiert und kombiniert werden mit dem, was der Entwickler hat angegeben wird extrahiert. In diesem Verfahren haben wir auch noch die responseSchema.metaFields Eigentum, wenn nicht bereits vorhanden, um Meta-Informationen, die immer verfügbar auf der Abfrage, kehrte die Anzahl der Datensätze (Auszug count ), wenn die Ergebnismenge erstellt wurde ( created ) und die Sprache der Daten ( lang ).

Für einfache Fälle, baute ich dieses Beispiel die YQLDataSource verwendet und ist in der Lage, einen bestimmten Container mit den Ergebnissen einer Abfrage auf Basis einer Vorlage zu füllen. Die Funktion kann wie folgt aufgerufen werden:

  YAHOO.example.YQLSubstitute (
	     'List',
	     "Wählen Sie Titel, Abstract, url, Quelle, von wo search.news query =" Barcelona "',
	     '<li> <h2> {Title} <\ / h2> <p {abstract} <\ / p> <a <Adresse> href="{url}"> {source} <\ / a> <\ / Adresse> <\ / li> '
	 ); 

Ich rief die Funktion YQLSubstitute und legte es unter den YAHOO.example Namespace. Es nimmt die folgenden Argumente:

1. Ein Verweis auf oder die ID der HTML, die die Ergebnisse enthält (in diesem Fall, ein Verweis auf eine <ul id='list'> Element an anderer Stelle auf der Seite).
2. Die YQL Anweisung auszuführen.
3. Die Vorlage mit den Feldnamen als Platzhalter

4. Eine optionale Konfiguration Objekt.

Da die Abfrage von YQLDataSource unterstützt wird, ist es möglich, dot-Notation verwenden, um verschachtelte Felder in den Platzhalter angeben. Der optionale vierte Argument, die Konfigurations-Optionen, wird gerade durch die YQLDataSource so, wenn überhaupt Parser benötigt wird, sie kann hier eingestellt werden weitergegeben. Zusätzlich wird die YQLWebService können Konfigurations-Option überschreiben Sie die URL des Web-Service YQL.

YQL und YUI 3

Für YUI 3 gibt es noch nicht viele andere Komponenten, die die Daten aus einer DataSource und DataSchema so, für den Augenblick, ich Dav Glass 'verwendet verbrauchen kann YQLQuery Galerie-Modul, das Teil der 3.2.0 Version sein wird. In der YQLSubstitute Beispiel für YUI 3 Ich habe versucht, die gleiche Schnittstelle wie in der YUI-2 beispielsweise mit wenigen Ausnahmen vorsehen. Das erste Argument ist ein CSS3-Selektor wie in YUI 3 üblich, geschachtelte Felder und Parser sind nicht verfügbar und es gibt keine zusätzlichen Konfigurations-Option, nur die ersten drei obligatorische Argumente. Beide Beispiele sind gut kommentiert, scrollen Sie einfach, um die Kommentare nach der Ausgabe der Abfrage zu erreichen.

Abschluss

In diesem Artikel haben wir:

• gesehen, was YQL ist und erkundeten die YQL-Konsole, die uns zusammen eine YQL Abfrage und sehen Sie die resultierende Ausgabe in mehreren Formaten zur Verfügung gestellt lässt
• erklärt, was JSONP ist und wie man es mit der YUI Get Utility verwenden
• in Verbindung mit ein paar Beispiele, die Lernen Sie YQL Tabellen abfragen und die Ergebnisse nutzen
• gesehen die YQLDataSource und wie es funktioniert, unter anderem Beispiele mit AutoComplete und DataTable
• definiert ein YQLSubstitute Funktion mit YQLDataSource
• definiert die gleiche Funktion für YUI3 mit dem YQLQuery Galerie Komponente

Haben die vielen Links entlang der Artikel bereitgestellt erkunden, die Beispiele sind real-life-Abfragen geradeaus auf die YQL Web-Service. Denken Sie daran, nach unten scrollen, vorbei an der Beispiel-Ausgabe, um die Beschreibungen und die kommentierten Code zu lesen.

Finden Gespräche: Bloglines | technorati

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!