Grav inn i Dojo DojoX

Kanskje du så det tweet: "jQuery er et gateway-stoff. Det fører til fullstendig JavaScript-bruk. "En del av den avhengigheten, bekrefter jeg, er å lære andre JavaScript-rammer. Og det er hva denne firedelte serien på den utrolige Dojo Toolkit handler om: tar deg til neste nivå av JavaScript-avhengigheten din.

I dette, den siste episoden av vår økt, ser vi på det siste medlemmet av Dojo-treenigheten: DojoX.

Hva er DojoX?

DojoX er et sted hvor moduler kan vokse og utvikle seg uansett hvilken hastighet de trenger. Men ikke få ideen om at DojoX er en koding fri for alle. Neppe.

Du kan tenke på DojoX (som står for Dojo Extensions) som en sandkasse, et sted hvor moduler kan vokse og utvikle seg uansett hvilken hastighet de trenger. DojoX-moduler er ikke nødvendigvis like modne som Dojo og Dijit-moduler. Og mens det er en DojoX-leder, som for Dojo og Dijit, blir hver av delprosjektene (som de kalles) forvaltet individuelt.

Men ikke få ideen om at DojoX er en koding fri for alle. Neppe. Faktisk er det et par strenge regler. Hvert delprosjekt må ha en README-fil, som du finner i den øverste katalogen, under dojox mappe. Deretter har hvert delprosjekt også status (funnet i README). En delprosjekts status kan være en av følgende, basert på nivået av engasjement, og hvor mye testing og dokumentasjon som er tilgjengelig:

eksperimentell
alfa
beta
produksjon

Interessant, hvis et delprosjekt ønsker å endre status, må DojoX-lederen (kalt BDFL) godkjenne det.

Så, hva slags ting vil du finne i DojoX? Det er mange utvidelser til Dojo og Dijit-funksjonalitet (tenk, masse UI-widgets); så er det prosjekter for å lage diagrammer, arbeide med feeds, bygge datatabeller og mer.

Vel, det er ikke mye mer å si om DojoX generelt. Så la oss bruke et DojoX-delprosjekt - og mange av de andre Dojo-kotelene vi har lært - og bryte opp vår "Dig i Dojo" -sesjon med et lite demo-prosjekt.

Her er det vi skal bygge: Det er et interaktivt bord (et DojoX-prosjekt kalt a Datagrid) med en liste over nyere opplæringsprogrammer fra Tuts + nettstedene. Vi vil kunne filtrere opplæringsprogrammene ved å skrive inn en tekstfelt.

Ikke glem, hvis du er Tuts + Premium-medlem, får du den medfølgende skjermbildet, der jeg går deg selv om du bygger dette prosjektet, trinnvis. Som premiummedlem kan du også laste ned koden for dette mini-prosjektet. Det er alltid en god tid å registrere seg!

Bruk innramming: The HTML

La oss starte med noen HTML, i index.html, selvfølgelig.

    Grav inn i Dojo | Episode 4

Pretty run-of-the-mill, uten tvil. Vi laster Dojo fra en CDN, og innstillingen parseOnLoad: true. La oss legge til noen flere elementer. Legg merke til at vi har en div # settings; la oss fylle inn noen innstillinger der; Vi ønsker å kunne velge hvilke Tuts + nettsteder vi ser opplæringsprogrammer fra. Vi har en liste over avmerkingsbokser som gjør det mulig for oss å gjøre nettopp det:

  Velg nettstedene du vil inkludere:
   Aetuts+
  Cgtuts+
  Wptuts+
  Nettuts+
  PSDTUTS+
  Phototuts+
  Audiotuts+
  Vectortuts+
  Activetuts+
  Mobiletuts+
  Webdesigntuts+

Legg merke til at vi erklærer å opprette en Dijit-knapp. Vi setter våre bokser i Dijit-boksene programmert senere.

Hva med det div # innhold?

   Nylig opplæring fra Tuts + Nettverket

En annen deklarativ skapelse; denne gangen, en tekstboks. Husk å sette eiendommen intermediateChanges til ekte; gjør dette sikrer at onChange vil brenne etter hvert tastetrykk i tekstboksen, og ikke bare når tekstboksen mister fokus. Vi vil ha denne oppførselen når vi kobler opp bordfiltreringen vår senere.

Når vi snakker om bord, kan du sannsynligvis gjette at vårt bord vil dukke opp i div # tabellen seinere.

En ting her: Vi må koble opp noen stilark. I :

Den første er et standard Dijit tema. De neste to kreves for Datagrid vi skal bruke Til slutt legger vi til egen styling. La oss se på det neste!

Stil det: CSS

Det er ikke noe for banebrytende her. Vi senterer innholdet vårt og trykker på vårt lille innstillingspanel til høyre. Når vi svinger over innstillingene, vil de skli ut jevnt, med en enkel CSS3-overgang.

Det eneste viktige poenget er at vi setter en høyde på #bord. Dette kreves av Datagrid klasse vi skal bruke. Den andre tingen å merke seg er at vi setter inn .dijitTextBox å ha en bredde på 100%.

Selvfølgelig går dette i det style.css fil vi koblet sammen:

 kropp margin: 40px 0; polstring: 0; font: 14px / 1.5 sans-serif; overløp: skjult; bakgrunn: #ccc;  #main border: 1px solid # 474747; bredde: 940px; margin: auto; polstring: 10px; bakgrunn: #fff; -webket-grense-radius: 7px; -moz-grense-radius: 7px; border-radius: 7px;  #settings polstring: 20px 30px; bredde: 240px; bakgrunn: #ececec; z-indeks: 10; grense: 1px solid # 474747; -webkit-grense-radius: 7px 0 0 7px; -moz-grense-radius: 7px 0 0 7px; border-radius: 7px 0 0 7px; -webkit-overgang: høyre 0.3s enkelhet; -moz-overgang: høyre 0.3s enkelhet; -o-overgang: høyre 0,3s enkelhet; -ms-overgang: høyre 0,3s enkelhet; overgang: høyre 0,3 lette; posisjon: absolutt; høyre: -270px;  #settings: hover right: -1px;  .dijitTextBox bredde: 100%;  #table margin-top: 20px; høyde: 600px;

Strøm det: JavaScript

Nå, åpne det script.js fil vi koblet til i vår HTML. Vi begynner med krever-Vi trenger funksjonaliteten:

 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');

Du er nok ikke kjent med de to siste "klassene" vi trekker inn. dojox.data.DataGrid er det interaktive bordet vi skal bruke. Den siste, dojo.data.ItemFileReadStore, er en av Dojos mange datalager. Egentlig, det ville ta en hel veiledning for å forklare datalagerene, men vi vil dekke nok til å bruke dem i vårt prosjekt i dag. For nå, bare vet at vår Datagrid tar en datalager - i vårt tilfelle, en ItemFileReadStore-som datakilde, og det er derfor vi bruker dem.

Selvfølgelig vil vi begynne å utføre noen handlinger når disse modulene er lastet. Derfor, la oss pakke inn det meste av koden vår med dette:

 dojo.ready (funksjon () );

Annet enn to funksjoner utenfor dette, vil hele koden være her inne. La oss komme i gang med noen få variabler.

 var sjekker = dojo.query ('input [type = avkrysningsboks]'). kart (funksjon (el) returner ny dijit.form.CheckBox (merket: sann, verdi: el.value, el);),

Ved første øyekast kan du tenke det sjekker vil være en NodeList av avmerkingsboksene. Vær imidlertid oppmerksom på at vi bruker kart Metode for å slå hver vanlig gammel tekstboks i avmerkingsboksen a Dijit. Så, sjekker vil være en rekke avkrysningsboks widgets. I vår alternativer hash, merker vi av i ruten, og setter verdien til verdien attributtet på elementet. av en eller annen grunn tar ikke widget-klassen det som standard. Selvfølgelig lagrer vi referanser til disse widgetene i en matrise, fordi vi må få tilgang til dem senere, for å se hvilke bokser som er merket.

 struktur = [felt: 'tittel', navn: 'Tittel', bredde: '650px', felt: 'skaperen', navn: 'Forfatter', bredde: 'auto', felt: 'pubDate' navn: 'Dato', bredde: 'auto'],

Neste opp er a struktur. Dette er strukturen for vår Datagrid tabell: hvert objekt i gruppen vil være en kolonne i vårt bord. De felt eiendomsmegling til dataene vi har, så Datagrid vil vite hva du skal sette hvor. De Navn er den menneskelige kolonneoverskriften. De bredde er bredden på kolonnen.

Nå kommer vi til rutenettet selv:

 grid = nytt dojox.grid.DataGrid (sortInfo: '-3', struktur: struktur, spørring: title: '*', 'table'); grid.queryOptions = ignoreCase: true;

Vi setter inn tre egenskaper på ut Datagrid forekomst. Den første, sortInfo, sier at vi vil sortere ut rader ved den tredje kolonnen; de - betyr at ordren skal være synkende. Minner fra vår struktur variabel at den tredje kolonnen er datoen opplæringen ble publisert: så vil ut tabellen bli sortert med den nyeste opplæringen øverst. Selvfølgelig, den Nett vet ikke om denne strukturen ennå, så vi informerer den med struktur eiendom. Til slutt satte vi spørsmål. Dette er viktig: det begrenser radene fra vår datalager som vises i tabellen. For eksempel, hvis vårt søkeobjekt var skaperen: 'J *', bare rader hvis skaperen feltet starter med "J" vises. I vårt tilfelle er vi standard for alle rader; vi vil se på hvordan du endrer dette senere.

Til slutt passerer vi id av elementet som skal huske Datagrid som andre parameter til vår konstruktør. Deretter setter vi inn queryOptions gjenstand; Vi vil ikke at spørringer skal være saksfølsomme, så vi forteller om vår widget til ignorecase.

Utmerket! La oss nå forberede oss til noen handlinger. Når vi skriver inn tekstboksen, vil vi at listen over opplæringsvisning skal filtreres (ja, jeg vet at vi egentlig ikke har noen opplæringsprogrammer ennå, men vi kommer dit).

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

Hvis du husker, setter vi inn data-dojo-id = 'FilterBox' når de erklærer å lage vår Dijit tekstboks, så er det slik vi kan bruke det her i vårt JavaScript. Vi setter det på onChange handler, det er en super enkel endring: vi ringer bare grid.filter metode, sender det et spørringsobjekt. Hvis vi for eksempel skriver "Scr" i tekstboksen, er det bare opplæringsprogrammer som har titler som stemmer overens * scr * vil bli vist. Det fine her er at når vi fjerner tekstboksen, blir titlene filtrert av **, som passer dem alle sammen.

Vi har to oppgaver igjen:

I utgangspunktet fyller du tabellen med data (når siden lastes).
Legg kun veiledning for de markerte nettstedene når du trykker på "oppdatering" -knappen.

For å gjøre disse, skal vi abstrahere noen funksjonalitet i to hjelperfunksjoner. Først har vi getSites funksjon; Som du kanskje har gjettet, bruker vi YQL for å få Tuts + -nettene. Så, vi må lage en forespørsel, basert på nettstedene hvis bokser er merket. Her er formatet på spørringen:

 velg skaperen, pubDate, tittel fra rss hvor url i (URL1, URL2, ...)

Så, her er vår funksjon:

 funksjon getSites (sjekker) var urls = []; dojo.forEach (sjekker, funksjon (sjekk) if (check.get ('checked') === true) urls.push ('' http://feeds.feedburner.com/ '+ check.get (' verdi ') +' '');); returner 'velg skaperen, pubDate, tittel fra rss hvor url i (' + urls.join (',') + ')';

Det er ganske enkelt, og jeg tror du kan se hva som foregår: Vi passerer i en rekke kryssboks widgets, som deretter blir sløyfet over. Hvis boksen er merket, oppretter vi en URL for den og trykker den inn i en matrise. Vi lager den endelige YQL-spørringen ved å sammenkoble noen få snorer og benytte seg av matrisen bli med metode.

Det var lett nok, men denne neste metoden er litt mer kompleks.

 funksjon getTuts (spørring) return dojo.io.script.get (url: 'http://query.yahooapis.com/v1/public/yql', innhold: q: spørring, format: 'json', callbackParamName: 'tilbakeringing'. deretter (funksjon (data) );

Vi starter med å akseptere en parameter: spørsmål. Så først satte vi opp vår YQL samtale via dojo.io.script.get, som du har sett før (Vi gjør ikke noe caching av denne forespørselen, bare for å holde ting litt enklere). Vi bruker dojo.Deferred metode deretter å registrere vår egen tilbakeringing her. Men legg merke til noe annet, rett øverst: komme tilbake. Dette vil faktisk returnere en ny dojo.Deferred objekt, at vi kan ringe en deretter metode på. Dette er et alternativ til å akseptere en tilbakeringingsfunksjon.

Men før vi kommer til alt det, må vi håndtere vår egen utsatt tilbakeringing. Slik begynner det:

 var items = data.query.results.item, typemap = 'Dato': deserialiser: funksjon (verdi) var dato = nytt Dato (verdi), måned = date.getMonth (), day = date.getDate () ; måned = måned < 10 ? '0' + month : month; day = day < 10 ? '0' + day : day; return date.getFullYear() + '-' + month + '-' + day;   ;

Hei, kom tilbake: det er ikke så ille. Du er kul med å bringe den lange YQL-objektbanen ned til bare elementer, men ikke la typemap skremme deg. Dette er bare et objekt av spesielle typer som vi bruker i vår Datagrid. I dette tilfellet oppretter vi en Dato skriv slik at vi kan formatere våre datoer på riktig måte. Selv om det kan være andre egenskaper, bruker vi bare Deserialize En, som er en funksjonstake, mottar den råverdien fra butikken (i vårt tilfelle en datastreng), og sender ut formatet som vil bli vist i vårt bord. I vårt tilfelle formater vi bare datoen som ÅÅÅÅ-MM-DD.

Deretter må vi gjøre noen enkle endringer i dataene som vi kom tilbake fra YQL:

 for (var i = 0; elementer [i]; i ++) elementer [i] .creator = (type av elementer [i] .creator === 'streng')? elementer [i] .kreator: elementer [i] .creator.content; elementer [i] .pubDate = _value: items [i] .pubDate, _type: 'Date';

De skaperen verdien er vanligvis forfatterens navn; Men for noen av feeds vil vi faktisk creator.content. Vår første linje tar vare på det.

Den andre linjen er viktig: husk det typemap vi opprettet? Vi kan fortelle vårt Nett å bruke en bestemt type på denne måten: Vi endrer vår pubDate eiendom fra datastrengen til et objekt: objektet har to egenskaper: _verdi er verdien for feltet, mens _type er datatypen å bruke.

La oss endelig lage vår datalager:

 returner nytt dojo.data.ItemFileReadStore (data: items: items, typeMap: typemap);

Det er ganske enkelt, i vårt tilfelle: data Eiendommen tar et objekt, hvor elementer er våre data; så gir vi det også til oss typemap. Du tror kanskje å returnere dette er meningsløst, fordi dette er en dojo.Deferredtilbakekallingsfunksjon, og vi tilordner ikke det til noe. Men husk, vi vender tilbake en ny dojo.Deferred objekt, og denne datalageren vil bli sendt til en tilbakeringingsfunksjon som brukes på objektet.

Hvis du er forvirret, vil et enkelt eksempel fjerne det. Sikkerhetskopier i vår dojo.ready ring, la oss starte med hva som skjer når knappen "Oppdater" klikkes:

 update.set ('onClick', funksjon () getTuts (getSites (sjekker)) .then (funksjon (data) grid.setStore (data);););

Vi setter inn ved trykk attributt for vår Oppdater Dijit-knappen. Vi først getSites, og send den forespørselen til getTuts. Siden det returnerer a dojo.Deferred objekt, vi sender vår tilbakeringingsfunksjon til sin deretter metode. Vi kan bruke grid.setStore å oppdatere Datagrid med nye data.

Til slutt, når siden laster, gjør vi veldig:

 // i utgangspunktet fylle tabell getTuts (getSites (sjekker)) .then (funksjon (tutsdata) grid.set ('store', tutsdata); grid.startup (););

Legg merke til at vi ringer grid.startup (); Dette er nødvendig for å konfigurere brukergrensesnittet; uten dette vil ingenting vises på vår side.

Beundre det: det ferdige produktet

Fin jobb! Her er vårt ferdige prosjekt:

Konklusjon

Vel, det bringer oss til slutten av vår "Dig i Dojo" økt; Jeg håper det har inspirert deg til å virkelig komme inn i dette utrolige biblioteket.

Men dette er ikke slutten på Dojo-opplæringen her på Nettuts +; langt fra det, hvis jeg har noe å gjøre med det! Du har alle hatt noen gode forslag i kommentarene til de andre innleggene; Kom dem komme og takk så mye for å lese!

Kode