Disse kan også motta lettere tema rulle stylings. De kan settes inn i foreldrene

.

Lær mer om listedeler.

Vær oppmerksom på at vi ikke skal bruke skillelinjer for denne applikasjonen.

---

Trinn 5: CSS

jQuery Mobile tar vare på en stor del av formateringen, men vi har selvsagt selv behov for vårt eget stilark for tweaking. For eksempel ser vi på bildene ovenfor, kan vi se at veiledningsikonene må skyves opp litt. I tillegg vil jeg gjerne bruke Tuts + rødt for bakgrunnsfargen til overskriften og bunnteksten, i stedet for standard svart.

Lag en ny mappe, CSS, og legg til et nytt stilark - jeg ringer til min: mobile.css. I denne filen vil vi først fikse ikonposisjonering:

 .ui-li-ikon topp: 9px; 

Deretter oppretter vi en håndfull klasser, oppkalt etter deres respektive opplæringssider. Disse klassene vil inneholde spesifikke formatering / farger for nettstedet. For eksempel har Nettuts + en mørkere grønn farge, mens MobileTuts + er gul.

 .nøtter bakgrunn: # c24e00;  .nettuts bakgrunn: # 2d6b61;  .psdtuts bakgrunn: # af1c00;  .vektortuts bakgrunn: # 1e468e;  .aetuts bakgrunn: # 4a3c59;  .fototutter bakgrunn: # 3798aa;  .cgtuts bakgrunn: # 723b4a;  .audiotuts bakgrunn: # 4b7e00;  .webdesigntutsplus bakgrunn: # 0d533f;  .mobiletuts bakgrunn: # dba600; 

Det burde være bra for nå. Det siste trinnet for index.php er å søke på .Tuts klasse til Overskrift og bunntekst elementer. På den måten, Overskrift og bunntekst vil gi den riktige bakgrunnsfargen.

 
? 



---

Trinn 6: YQL, PHP og Caching

Nå er det på tide å gå vekk fra oppsettet, og jobbe med funksjonaliteten. Hvert av linkene vi opprettet rettet til site.php? sitename = "sitename". La oss gå videre og lage den filen nå.

Selv om dette er en relativt liten app, bør vi likevel streve etter å følge gode praksis. I dette tilfellet betyr det at vi skal holde så lite PHP i dokumentet som mulig. I stedet bruker vi site.php som en kontrolleren av sorter. Denne filen vil håndtere den innledende logikken, og vil da, nederst, laste inn vår HTML-mal.

Tildele nettstednavnet

For å hente ønsket RSS-feed må vi først fange navnet på nettstedet som brukeren klikket på først. Hvis du refererer til et tidligere trinn, da vi koblet til site.php, Vi passerte også navnet på nettstedet gjennom spørringen. Med PHP kan dette lett hentes, med $ _GET [ 'sitename']. Men, om det for en eller annen merkelig grunn ikke eksisterer denne verdien? Kan være site.php ble åpnet direkte? Vi bør sette et standardnettsted for å kompensere for disse situasjonene.

 $ siteName = tomt ($ _ GET ['siteName'])? 'nettutsøk': $ _GET ['siteName'];

Hvis $ _GET [ 'sitename'] er tom, vil vi sette "nettutsatser" til variabelen, $ sitename. Ellers vil det være lik navnet på det respektive nettstedet.

Sikkerhet

Selv om dette er et lite prosjekt, la oss også prøve å sette noe sikkerhet på plass. For å forhindre at brukeren automatisk tilordner en potensielt farlig verdi til side navn nøkkel, la oss sikre at verdien faktisk er navnet på en av våre opplæringssider.

 // Forbered et utvalg av opplæringssider $ siteList = array ('nettutsetter', 'flashtuts', 'webdesigntutsplus', 'psdtuts', 'vectortuts', 'phototuts', 'mobiletuts', 'cgtuts', 'audiotuts', 'aetuts '); // Hvis strengen ikke er et nettstednavn, må du bare bytte til nettuttrykk i stedet. hvis (! in_array ($ siteName, $ siteList)) $ siteName = 'nettuts'; 

De in_array () funksjonen tillater oss å bestemme om en verdi - i vårt tilfelle, verdien av $ sitename -- er lik en av elementene i $ siteList matrise.

caching

Til slutt bruker vi den ypperlige YQL til å utføre våre spørsmål. Tenk på YQL som en API for APIer. Snarere enn å måtte lære tjue forskjellige APIer, kan YQLs SQL-lignende syntaks bare lære deg en. Men selv om YQL utfører litt caching på egenhånd, la oss også lagre RSS feeds til en tekstfil på vår server. På den måten kan vi forbedre ytelsen en god bit.

Vi begynner med å opprette en ny variabel, $ cache, og gjør det lik plasseringen til hvor den cachede filen vil bli lagret.

 $ cache = dirname (__ FILE__). "/ Cache / $ sitename";

Koden ovenfor peker på den nåværende katalogen av filen, og deretter til en cachemappe, og til slutt navnet på det valgte nettstedet.

Jeg har bestemt meg for at denne hurtigbufrede filen skal oppdateres hver tredje time. Som sådan kan vi kjøre en rask hvis erklæring, og bestemme siste gang filen ble oppdatert. Hvis filen ikke eksisterer, eller oppdateringen var lenger enn tre timer siden, spør vi om YQL.

 $ cache = dirname (__ FILE__). "/ Cache / $ sitename"; // Re-cache hver tredje time hvis (filemtime ($ cache) < (time() - 10800) )  // grab the site's RSS feed, via YQL 

YQL er latterlig lett å jobbe med. I vårt tilfelle bruker vi det for et veldig enkelt formål: Ta tak i RSS-feed, i JSON-form, av nettstedet som ble sendt gjennom spørringen, via side navn. Du kan eksperimentere med de forskjellige kommandoene ved å bruke YQL-konsollen.





For å spørre om en RSS-feed bruker vi kommandoen: SELECT * FROM feed hvor url = "path / to / rss / feed".

• Nettnutter + Feed: http://feeds.feedburner.com/nettuts
• Psdtuts + Feed: http://feeds.feedburner.com/psdtuts
• Vectortuts + Feed: http://feeds.feedburner.com/vectortuts
• etc.

Bygg veien

For lesbarhets skyld vil vi bygge opp vår YQL-spørring i seksjoner.

 // YQL spørring (SELECT * fra feed?) // Split for readability $ path = "http://query.yahooapis.com/v1/public/yql?q="; $ path. = urlencode ("SELECT * FROM feed WHERE url =" http://feeds.feedburner.com/$siteName ""); $ path. = "& format = json";

Nøkkelen er den andre delen over; Når siden lastet, tok vi navnet på nettstedet fra spørringsstrengen. Nå trenger vi bare å sette den inn i Å VELGE spørsmål. Heldigvis bruker alle opplæringssteder Feedburner! Pass på at du urlencode spørringen om å erstatte noen spesialtegn.

Ok, banen er klar; la oss bruke file_get_contents () å ta tak i fôret!

 $ feed = file_get_contents ($ path, true);

Forutsatt at $ feed er nå lik den returnerte JSON, kan vi lagre resultatene i en tekstfil. La oss imidlertid først sørge for at dataene ble returnert. Så lenge noe returneres fra spørringen, $ Fôr-> query-> count vil være lik en verdi som er større enn null. Hvis det er, åpner vi den cachelagrede filen, skriver dataene til filen, og til slutt lukker den.

 // Hvis noe ble returnert, cache hvis (is_object ($ feed) && $ feed-> query-> count) $ cachefile = fopen ($ cache, 'w'); skriv ut ($ cachefile, $ feed); fclose ($ cachefile); 

Det virker forvirrende, men det er egentlig ikke. Funksjonen fopen () aksepterer to parametere:

• Filen som skal åpnes: Vi lagret denne banen i $ cache variabel øverst på siden. Merk at hvis denne filen ikke eksisterer, vil den opprette filen for deg.
• Tilgangsprivilegier: Her kan vi spesifisere hvilke privilegier som er tilgjengelige. w står for "skrive".

Deretter åpner vi den filen, og skriver innholdet i $ fôr (den returnerte RSS JSON-data) til filen, og lukk den.

Bruke den cachede filen

Ovenfor sjekket vi først om den cachelagrede filen var større enn tre timer gammel.

 hvis (filemtime ($ cache) < (time() - 10800) )  // grab the site's RSS feed, via YQL 

Men hva om det ikke var? I så fall driver vi en ellers setning og grip innholdet i tekstfilen, i stedet for å bruke YQL.

 hvis (filemtime ($ cache) < (time() - 10800) )  // grab the site's RSS feed, via YQL?  else  // We already have local cache. Use that instead. $feed = file_get_contents($cache); 

Til slutt kan vi ikke gjøre mye med JSON RSS-feeden før vi dekoder det med PHP.

 // Dekode det shizzle $ feed = json_decode ($ feed);

Og det burde gjøre det for vår kontrolleren! Med logikken ut av veien, la oss ta med vår HTML-mal.

 // Inkluder visningen inkluderer ('views / site.tmpl.php');

Her er vår siste site.php. Klikk på utvide ikonet for å vise det.

 telle) $ cachefile = fopen ($ cache, 'wb'); skriv ut ($ cachefile, $ feed); fclose ($ cachefile);  else // Vi har allerede lokal cache. Bruk det i stedet. $ feed = file_get_contents ($ cache);  // Dekode det shizzle $ feed = json_decode ($ feed); // Inkluder visningen inkluderer ('views / site.tmpl.php'); 

---

Trinn 7: Nettstedskalenderen

På slutten av forrige trinn lastet vi inn i vår mal (eller visning). Gå videre og skape det visninger mappe og site.tmpl.php fil. Ta gjerne navnet på det du ønsker. Deretter legger vi inn HTML-koden vår.

Interessante steder ovenfor

• Legg merke til hvordan vi følger samme grunnleggende layout: header, innholds område, bunntekst.
• Siden denne malen vil bli brukt for alle Tuts + opplæringssider, må vi sette tittelen dynamisk. Heldigvis, hvis du husker, ble nettstednavnet sendt gjennom spørringen, og lagret i $ sitename variabel (som, "nett"). Å kapitalisere det første bokstaven, og bruk signaturen + Etter navnet løper vi variabelen gjennom ucwords () (oppsummerer første bokstav i hvert ord i strengen), og legg til a "+":

• Vi viser snart antall kommentarer for hvert innlegg ved siden av tittelen. Vi kan igjen bruke ThemeRoller til å stilte det, via data-counttheme = "e" Egenskap.


Filtrering gjennom fôret

På dette tidspunktet har vi tilgang til $ fôr objekt som inneholder vårt RSS-feed. Å dissektere dette objektet, kan du heller print_r ($ feed), eller bruk YQL-konsollen for en finere visning. Vi bruker sistnevnte i dette tilfellet. Sjekk det ut.





For å få tak i dataene for hvert innlegg, må vi filtrere gjennom: $ Fôr-> query-> resultater-> element. PHP gjør dette til en film med for hver().

Innen for hver() uttalelse, kan vi nå få tilgang til de ønskede verdiene med $ Element-> tittelen, eller $ Element-> kommentarer, som vil vise tittelen, og kommentarnummeret, henholdsvis. Legg til følgende i

tags.

 
 spørring-> resultater-> element som $ element) ?> 
 
 & OrigLink =guid-> innhold); ?> "> tittel; ?>  
 kommentarer; ?>  
  

I koden ovenfor bygger vi opp en listeobjekt med tittelen på innlegget, antall kommentarer og en link til article.php som også inneholder nettstednavnet og den permanente lenken (til den opprinnelige artikkelen på Tuts + -siden) i søkeordet.

Når vi ser den oppdaterte siden i nettleseren, tada!



Legg merke til hvordan kommentar tellingen er i en gul boble, og er floated til høyre? Det er fordi vi brukte data-counttheme = "e" attributt til den ukompliserte innpakningslisten. Hvor praktisk.

Hmm? Jeg tror teksten er for stor til disse lange titlene. Et raskt besøk til Firebug viser at jeg kan målrette mot h2 koder med en klasse av .ui-li-overskriften. La oss gå tilbake til stilarket vårt (mobile.css), og legg til en ny regel:

 .ui-li-heading font-size: 12px; 

Det er bedre.



---

Trinn 8: Viser hele innlegget

Det siste trinnet er å bygge article.php, som vil vise hele innlegget. Som med site.php, article.php vil tjene som vår kontrolleren, og vil spørre den valgte artikkelen med YQL, og laste den aktuelle visningen.

 query-> resultater-> element; omfatte ( 'syn / article.tmpl.php');

Hvis du har fulgt med, må koden ovenfor se litt mer kjent ut av deg. Når vi lastet inn denne siden, fra site.php, vi passerte gjennom to elementer via spørringsstrengen:

• Side navn: Inneholder navnet på det valgte opplæringsstedet
• Orig Link: En lenke til det opprinnelige innlegget på opplæringsstedet

Forskjellen med YQL-spørringen, denne gangen, er at vi samsvarer med guid (orig link) med innlegget som brukeren klikket på (eller trykket). På denne måten vil nøyaktig ett innlegg bli returnert. Sjekk ut denne prøven YQL-spørringen for å få en bedre ide om hva jeg mener.



Artikkel mal

På bunnen av koden ovenfor lastet vi malfilen for artikkelsiden: visninger / article.tmpl.php. Vi lager den filen nå.

   
 
 
  
  
 
 tittel; ?> 
 
 beskrivelse; ?> 
 
  
  

Ah - så kjent. Vi har allerede gått over denne malen. Den eneste forskjellen er at denne gangen, fordi det bare er ett innlegg fra YQL-spørringen som skal vises, trenger vi ikke å bry oss med en for hver() uttalelse.


Ustylt artikkel side

På dette tidspunktet, på egen hånd, ville neste skritt være å begynne å bruke ønsket styling til artikkelen. Jeg ser ikke et behov for å gå over det i denne opplæringen, da det hele kommer ned til personlig smak. Her er min superminimale versjon.


Bruke skriftstørrelse, linjehøyde, polstring og bildeformatering.

Låst bunntekst

En siste ting: i bunntekstdelen av artikkelen knytter vi til den opprinnelige innleggingen på Nettuts +. I sin nåværende tilstand vil leseren bare se det når de når bunnen av artikkelen. La oss låse bunnteksten til bunnen av det nåværende visningspunktet til enhver tid. Vi kan bruke data-stilling attributt for å oppnå dette.

Det er bedre!

---

Vi er ferdige!

Og med relativt lite arbeid har vi vellykket bygget en mobil RSS-leser for Tuts + -nettene. Det kan sikkert bli utvidet for å gi tilleggsfunksjoner, feilkontroll og ytelsesforbedringer, men dette vil forhåpentligvis komme i gang! Hvis du vil gaffel prosjektet og gjøre det bedre, for all del? gjøre! Takk for at du leser, og vær sikker på at du henviser til jQuery Mobile-dokumentasjonen for mer informasjon. Jeg har ingen tvil om at du kommer over flere jQuery mobilopplæringer på søstersiden vår, Mobiletuts+.

Legg til leseren på iPhone-startskjermbildet


Se demoen eller gjør det bedre!
Kode