Een paar maanden geleden bracht Google een nieuwe Twitter-achtige service uit, genaamd Buzz. We kunnen deze service gebruiken om onze nieuwste buzzes op elke site weer te geven. Dus, in deze tutorial zal ik je begeleiden bij het maken van je eigen Buzz-widget.
Stap 1. Lees openbare updates van Buzz
Op dit moment is er geen API om met de Buzz-service te werken; Google zal er naar verwachting binnen de komende maanden een aanbieden, maar voor nu zijn de openbare updates beschikbaar als Atom-feeds.
Eerst moeten we de gegevens van de Buzz-service ophalen. Om dit te doen, zullen we een PHP-script instellen dat de gegevens van de Buzz-service leest. Dit script is een soort proxy die we gebruiken om de gegevens op te halen. Door dit te doen, kunnen we een AJAX-aanvraag doen en een XML-document krijgen met de gewenste updates.
Dit is de eerste PHP-code:
header ('Inhoudstype: application / xml'); // Het antwoordinhoudstype instellen op XML $ handle = fopen ($ _ GET ['url'], "r"); // Open de gegeven URL als ($ handle) while (! Feof ($ handle)) $ buffer = fgets ($ handle, 4096); // lezen van de gegevens echo $ buffer; fclose ($ handle);
Bewaar dit bestand als "readfeed.php," en onthoud dat dit slechts een voorbeeld is. In een real-world-project moet u de url-parameter opschonen en ervoor zorgen dat de gebruiker iets belangrijks op uw bestandssysteem niet opent.
Stap 2. De structuur van ons JavaScript-object maken
Zodra we deze gegevens kunnen lezen, moeten we een object bouwen dat onze code bevat in JavaScript. Maak een nieuw bestand en noem het "buzz-widget.js". Om een object uit te breiden, moeten we de eigenschap 'prototype' gebruiken; Als je hierover vragen hebt, bekijk dan de tutorial waarin Jeffrey ons laat zien hoe dit werkt met native objects.
De structuur van ons object zal ongeveer zo zijn:
var BuzzReader = function (options) // Stap 1 // code voor de constructor; BuzzReader.prototype = // Stap 2 renderTo: "", proxy: "readfeed.php", gebruiker: "", url: "", items: 10, onLoad: function () , onRender: function () , render: functie (element) , lees: function () , parseren: functie (xml, succes, antwoord) , formaat: functie (datum) , createDate: function (str) ;
In stap één hebben we de constructorfunctie voor ons object gemaakt. Nu gaan we controleren op de vereiste configuraties en lezen we de updates van onze proxy.
renderTo : het element waar de widget wordt weergegeven; deze eigenschap kan ook een jQuery-selector zijn.
volmacht : de URL waar we een AJAX-aanroep doen om onze gegevens op te halen. We hebben al het PHP-bestand gemaakt dat de informatie van de Buzz-service leest; standaard is het "readfeed.php".
gebruiker : de Buzz-gebruiker waarvan we de updates willen ontvangen.
items : het aantal updates dat we in de widget gaan weergeven.
onLoad : een gebeurtenis die we gaan activeren wanneer de gegevens in de widget worden geladen; standaard is dit een lege functie.
onRender : deze gebeurtenis wordt geactiveerd wanneer de widget op de pagina wordt weergegeven; lege functie standaard.
Stap 3. De aannemer
Laten we werken aan de constructorfunctie van onze widget.
var BuzzReader = function (options) var url = "http://buzz.googleapis.com/feeds/user/public/posted"; // Stap 1 jQuery.extend (dit, opties || ); // Stap 2 als (this.user === "") gooi "De eigenschap 'gebruiker' is vereist"; // Stap 3 als (this.renderTo === "") gooi "De eigenschap 'renderTo' is vereist"; if (this.url === "") this.url = url.replace (/ user /g,this.user); // Stap 4 this.read (); // Stap 5;
In stap één hebben we de URL gedefinieerd van de Buzz-service waarvan we de gegevens gaan ophalen. We zullen de string "user" vervangen door de gebruikersconfiguratie (zie stap 4).
In stap twee hebben we de standaardeigenschappen met de gegeven opties overschreven; we gebruikten jQuery.extend om dat te doen.
In stap drie hebben we de vereiste configuraties gecontroleerd, een daarvan is de "gebruiker" en de "renderTo". Als een van deze ontbreekt, gooien we een uitzondering. Dit is handig voor de ontwikkelaar die onze plug-in gebruikt.
In stap vier hebben we naar de "user" -reeks in de variabele "url" gezocht en deze vervangen door de gebruiker wiens buzz we in onze widget willen weergeven.
De laatste stap is erg belangrijk. Hier beginnen we met het lezen en weergeven van de informatie.
Stap 4. De informatie lezen
We hebben het PHP-script ingesteld dat de gegevens naar onze server haalt. Nu hoeven we alleen nog een Ajax-verzoek in te dienen om de gegevens met jQuery op te halen; laten we de volgende code bekijken:
In stap één hebben we een nieuw element aan de container toegevoegd, waardoor de kijker wordt geïnformeerd dat we momenteel informatie verwerken.
In stap twee hebben we het Ajax-verzoek gedaan. Het belangrijkste is de eigenschap "context"; Met deze configuratie kunt u de context van de functie wijzigen die wordt aangeroepen wanneer de server reageert. Ten slotte stellen we de context in op "this", dit is het BuzzReader-object.
Vergeet niet dat het PHP-script de parameter "url" verwacht. dus vergeet niet om het te verzenden; wanneer de server antwoordt, wordt de methode "parseren" uitgevoerd.
Stap 5. Het XML-document parseren
De Buzz-service leverde de gegevens in een Atom-feedindeling, dus we moeten de informatie die we nodig hebben, ontleden en extraheren.
Dit is een voorbeeld van het XML-document dat wordt geretourneerd door de Buzz-service:
Google Buzz2009-12-14T20: 04: 39.977Ztag: google.com, 2009: buzz-voer / public / gepost / 117377434815709898403Google - Google BuzzBuzz door A. Googler van Mobile2009-12-14T20: 04: 39.000Z2009-12-14T20: 04: 39.977Ztag: google.com, 2009: buzz / z12bx5v5hljywtfug23wtrrpklnhf3gd3A. Googlerhttp://www.google.com/profiles/a.googlerBzz! Bzz!http://activitystrea.ms/schema/1.0/posthttp://activitystrea.ms/schema/1.0/notewebupdates: [email protected]Buzz door A. Googler van MobileBzz! Bzz!0
Zodra we het antwoord kennen, kunnen we het document vrij eenvoudig analyseren met jQuery.
We hebben twee argumenten ontvangen: de eerste is de gegevens, in dit geval een XML-document; het tweede argument is de tekststatus van het verzoek.
In stap één hebben we alle "entry" -knooppunten; dit is de plaats waar onze Buzz-updates en alle informatie die we nodig hebben zich bevinden. Vervolgens hebben we de container van onze widget geleegd en een lege array gemaakt om onze gegevens op te slaan als een JavaScript-object voor elk knooppunt.
In stap twee hebben we herhaald via de "entry" -knooppunten en de "titel", "auteur", "inhoud" enzovoort geëxtraheerd. Dit is een heel eenvoudig proces; alles wat we moeten doen is de selector schrijven en de root voor de zoekopdracht instellen, in dit geval is de root het knooppunt 'entry'.
Ik zou willen wijzen op de regel waar we het "antwoord" -attribuut uitpakken - de selector ziet er ongeveer zo uit:
Groepen [rel = antwoorden]
We hebben aangegeven dat we de knoop "link" willen, die een attribuut "rel" heeft dat gelijk is aan "antwoorden". Dit is belangrijk omdat er veel 'link'-knooppunten zijn binnen elk' item '.
In stap drie hebben we de "this.data" -referentie gemaakt naar de array die onze gegevens bevat. Daarna hebben we het evenement "onLoad" uitgevoerd en de informatie doorgegeven die we hebben geëxtraheerd.
In stap vier hebben we de rendermethode uitgevoerd.
Voordat we verdergaan met de "render" -methode, laten we de methoden "createData" en "format" bekijken. We noemen deze methoden voor elke invoer.
In de "createDate" -methode maken we alleen een nieuw Date-object met de gegeven string. De tekenreeks heeft het formaat "2009-12-14T20: 04: 39.977Z", zodat we het object Date als volgt kunnen maken:
createDate: function (str) var date = new Date (); date.setDate (str.substring (8,10)); date.setMonth (str.substring (5,7) - 1); date.setFullYear (str.substring (0,4)); date.setUTCHours (str.substring (11,13)); date.setUTCMinutes (str.substring (14,16)); date.setUTCSeconds (str.substring (17,19)); retourdatum;
Of we kunnen een eenvoudige regexp gebruiken om de string op te maken en deze aan de constructor Date te geven:
createDate: function (str) // str = '2009-12-14T20: 04: 39.977Z' str = str.substring (0,19) .replace (/ [ZT] /, "") .replace (/ \ - / g "/"); // str = '2009/12/14 20:04:39' retourneer nieuwe datum (str);
In de indelingsmethode gaan we het datumobject gebruiken dat we zojuist hebben gemaakt en geven we de tijd terug die ligt tussen de publicatiedatum en de lokale tijd van het systeem - bijvoorbeeld '11 minuten geleden' of '3 uur geleden'.
De vorige code, hoewel een beetje vervelend, is redelijk rechttoe rechtaan. Ten eerste hebben we het verschil tussen de huidige tijd en de publicatiedatum verkregen in minuten, dagen en maanden. Daarna hebben we de resultaten eenvoudig vergeleken en een tekenreeks in het juiste formaat geretourneerd.
Laten we nu de "render" -methode bekijken.
Stap 6. De GUI maken
Tot nu toe hebben we alleen de gegevens van de Buzz-server opgehaald en het XML-document geparseerd. Dat betekent dat we klaar zijn om de informatie op het scherm weer te geven.
render: function (element) this.onRender.call (this, this); // Stap 1 var html = []; // Stap 2 html.push ("
"); for (var i = 0; i < this.items || i < this.data.lenght;i++) html.push("
In de eerste stap hebben we de gebeurtenis "onRender" geactiveerd, dit is wederom handig voor de programmeur die onze plug-in gebruikt.
In de tweede stap hebben we een array gemaakt om onze dynamische HTML op te slaan. Daarna hebben we een lijst "ul" gemaakt en vervolgens hebben we door onze gegevens herhaald, waarbij we de "li" -knoop voor elk item hebben gemaakt; je hebt waarschijnlijk gemerkt dat de "voor" -voorwaarde een "of" -operator heeft; Hiermee kunnen we de iteraties stoppen wanneer de array met gegevens eindigt, of wanneer de index "i" de eigenschap "items" heeft bereikt die is gedefinieerd door de ontwikkelaar die de plug-in gaat gebruiken.
In de laatste stap hebben we de HTML in de container ingevoegd met behulp van de methode "toevoegen".
Stap 7. De widget gebruiken
Om onze widget te gebruiken, moeten we een instantie van onze klasse "BuzzReader" maken, maar laten we voordat we dit doen, definiëren waar we het willen weergeven. Maak een HTML-bestand en binnen het body-element en voeg het volgende toe:
We gaan onze widget in de div renderen met de klasse "reader", laten we het exemplaar van onze widget als volgt maken:
Vergeet niet om de jQuery-bibliotheek en de "buzz-widget.js" in uw HTML-bestand te importeren. Als alles correct is geconfigureerd en gecodeerd, zou u iets moeten zien dat lijkt op de volgende afbeelding:
Stap 8. De widget stylen
Welnu, we kunnen nu de updates zien, maar het ziet er niet erg mooi uit; we moeten het een beetje stylen.
/ * stap 1 * / body font-family: "Trebuchet MS", Arial, schreefloos, regelhoogte: 24px; lettertypegrootte: 14px; / * Stap 2 * / #buzz width: 300px; margin : 100px auto; border: 1px solid #AFAFAF; #buzz> div background-color: # E4E4E4; border: 1px solid # F6F6F6; padding: 10px; #buzz. Reader height: 350px; overflow: auto; border : 1px solid # F6F6F6; opvulling: 80px 10px 10px 10px; achtergrond: #fff url (title.jpg) center 0 no-repeat; / * Stap 3 * / #buzz ul margin: 0; opvulling: 0; # buzz ul li list-style-type: none; kleur: # A3A3A3; border-bottom: 1px solid # E4E4E4; margin-bottom: 5px; padding-bottom: 5px; #buzz ul li div color: # 777; #buzz ul li a color: # 444; text-decoration: none; font-weight: normal; #buzz ul li a: hover text-decoration: onderstrepen; #buzz ul li span float: right; / * Stap 4 * / #buzz .buzz-laden position: absolute; margin-left: 240px; width: 16px; height: 16px; background: transparent url (ajax-loader.gif) center center no-repeat;
In de eerste twee stappen hebben we de widget op het scherm gecentreerd en de grootte, randen en kleuren voor de container ingesteld; we hebben het logo ook als header voor de widget toegevoegd.
In de laatste twee stappen hebben we de stijlen ingesteld op de dynamische lijst, hebben we de kleur van de lettertypen gewijzigd en hebben we enkele marges, randen en opvullingen aan onze links toegevoegd.
Dientengevolge hebben we een veel aantrekkelijker product.
Stap 9. De plug-in maken
De laatste stap in deze zelfstudie is om de plug-in jQuery te maken. Laten we het bestand "buzz-widget.js" aanpassen en de volgende code toevoegen aan het einde van het bestand.
In de eerste stap hebben we simpelweg onze plug-in genoemd.
In stap twee hebben we het configuratieobject gemaakt als het argument "opties" leeg is. Vervolgens hebben we de eigenschap "renderTo" gedefinieerd voor het daadwerkelijke element.
In stap drie hebben we een nieuw exemplaar van onze widget gemaakt.
Nu kunnen we onze plug-in gebruiken in onze HTML, zoals deze:
Ik hoop dat je een beetje hebt geleerd hoe je gegevens uit XML-documenten kunt extraheren en hoe je de nieuwste buzzes op elke website kunt weergeven. Nog vragen? Bedankt voor het lezen!
Share
Accentsconagua
