SWFAddress, SEO og Flex Datagrid for Cut og lim Coders

SWFAddress, SEO og Flex Datagrid for Cut og lim Coders
Del
Del
to
Del

Dette Cyber ​​mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

Denne artikkelen viser deg hvordan du setter opp dyplenking i Flex applikasjon som kan bli sett av sluttbrukere samt søkemotorer.


Det er en tutorial hovedsakelig for alle de andre cut-and-pasters der ute som ikke har tid eller energi til å virkelig lære hvordan du oppretter en proxy klasse for bruk med SWFAddress, og mest sannsynlig ikke er programmerere etter handelen.



Endelig resultat Forhåndsvisning

La oss ta en titt på det endelige resultatet vi skal jobbe mot, legge merke til hvordan nettleseren bar gjenspeiler tittelen på siden, Begynnelsen
:

Last ned kildefilene og bruke dem som referanse mens du leser denne opplæringen



Bakgrunn

Dette er mitt første Flex opplæringen, og en jeg. kan bare skrive etter sier følgende påminnelse: Jeg er egentlig bare en cut-and-paste koder, om enn en med nesten 10 års AS1, AS2, og nå AS3 erfaring, som har gitt meg en ganske god komfort nivå med det. Jeg skrive noen funksjoner, hvis-uttalelser, Vars, og sånt - men jeg er mer av en hackmeister enn noe, som noen ganger fører til kreativ koding, mens andre ganger fører til bortkastet tid på ting jeg ikke har ! lest nok om før eksperimentere med

Dyplenking handler om mye mer enn bare SEO; det handler om brukervennlighet. Jeg tror mye mer om brukervennlighet etter å ha bygget et e-lærings app. Nå merker jeg når en Flex eller Flash app rygger du helt ut av programmet når du trykker på tilbake-knappen, og tenke på hvordan jeg vil ikke at mine brukere til å oppleve det ergrelse. Hvem ønsker å bla gjennom alle leksjonene på jakt etter en aktivitet de ønsker å gjøre igjen, eller e-post til sin venn

Dyplenking handler om mye mer enn bare SEO?; det handler om brukervennlighet.

Dette er en tutorial hovedsakelig for alle de andre cut-and-pasters der ute som ikke har tid eller energi til å virkelig lære hvordan du oppretter en proxy klasse for bruk med SWFAddress, og mest sannsynlig ikke er programmerere etter handelen. Mens jeg kan sette pris på noen av veiledningene fra SWFAddress nettsted som gir mye teknisk bagateller om hvorfor du trenger å gjøre ting riktig, og hvor dårlig praksis vil bryte din app, etc - noen ganger en person trenger bare en måte å gjøre ting arbeide på en måte de kan forstå. Noen av disse artiklene at du tror at du ikke kan muligens få dyplenking arbeider med mindre du kan skrive bråte av koden selv.

Grunnen til at jeg kommer til å dele min koding erfaring på dette er fordi jeg googlet pokker ut av SWFAddress, Datagrid, og Flex, til ingen nytte. Jeg fant ikke noen direkte eksempler på noen som bruker SWFAddress å lage dynamiske nettadresser fra deres Datagrid innenfor sitt Flex app. Min mann fleipet med at det må være fordi det er så åpenbart at ingen har brydd seg med å blogge om det, men som du kan finne Flex eksempler, øvinger, og kode for nesten alle grunnleggende koding problemet, jeg tviler sterkt på det. Så her du går



Trinn 1: Samle dine verktøy

Du trenger følgende elementer for å fullføre denne opplæringen:


    Flex /Flash bygning IDE (for eksempel: Flex Builder, Flash, FlashDevelop)

    SWFAddress 2.4 og SWFObject 2.2

    GAforFlash (Google Analytics-sporing for Adobe Flash)

    A.. god regneark app.

    En Apache eller PHP oppsett du kan teste med, eller nettside kan du laste opp og test.

    Et godt søk og erstatt editor som Notepad ++ til å rydde opp i teksten du tar ut av regneark.

    Den frie Vigos Gsitemap skaperen.

    Du kan også laste ned filen pakken for denne opplæringen, som inkluderer en nøkkelfilen inneholder Action eksempler fra nedenfor : RoutingEvents.as



    Trinn 2:. Import SWFAddress; Lage URL Views

    Siden jeg fokusere på Datagrid og SEO for denne opplæringen; Jeg antar at du allerede vet hvordan å lage URL-visninger for SWFAddress. Hvis du ikke gjør det, kan du se på koden for å lage URL-visninger i RoutingEvents.as fil inkludert for denne opplæringen for å se hvordan jeg gjorde det.



    Trinn 3: Lag din Datagrid Variabel

    Jeg visste utenfor balltre at jeg trengte å knyte adresser til en variabel til stede i XML som fylles mitt Datagrid. Å få denne variabelen for å skrive til nettadressen er enkelt. Jeg opprettet en Var fra attributtet jeg ønsket å bruke fra XML for mine adresser: product: [bind] private Var slug: String

    Så flott, ble jeg i stand til å angi URL-er for mine Datagrid elementer, som umiddelbart resulterte i den hyggelige opplevelsen av å se min Datagrid klikk faktisk endre nettadressen i nettleseren min

    Men selvfølgelig dyplenking består av to ting:. forteller nettleseren din hva du vil den skal se, og nettleseren fortelle din app hva den ønsker å se. Den andre del viste seg å være mye vanskeligere.

    Det jeg endelig fikk min hjerne rundt etter dager med fiksing og triksing, var at når du navigerer til en URL i din app direkte fra nettleseren - din app har ingen anelse om hvilke data du vil den skal vise. Din app bare vet hva du kommunisere gjennom nettadressen, og hva du har satt opp som reglene til følge dersom visse verdier er funnet i denne nettadressen. Så hvis du har mer enn én datakilde eller xml fil, som de fleste ganske kompliserte apps gjør - du er nødt til å sette opp betingelser for å presentere de eksakte data URL krav være tilstede for å kunne tjene opp den oppfatning at nettadressen er ber om.

    Ved første jeg naivt trodde at ved å bare bruke som slug Var jeg kunne fortelle SWFAddress å se etter denne verdien, så gå til den tilsvarende oppføringen indeks nummer i Datagrid. Men å sette det opp, og får den variable riktig pass til rett tid - bare skjedd etter omfattende prøving og feiling; tonn Alert.show (slug) og andre varsler for å se hva som faktisk blir gått til hvilken tid, og noen stor kode jeg fant på nettet for å matche opp en Datagrid rad med en bestemt verdi, deretter bla til indeksen for å vise verdi.

    Jeg er enig med en av de mer kompliserte artikler /tutorials finnes på SWFAddress webside: du har å velge variabler veldig nøye når du bruker dem med SWFAddress. Sørg for at de inneholder noen god informasjon - informasjon som du kan analysere inn ting som sidetitler og unike identifikatorer for en Datagrid eller listeelement. Min activityId variabel fra min XML viste seg å være den perfekte var, fordi alle activityIds for en gitt leksjon er:


      unik

      inneholde leksjonen navn

      inneholde aktivitetstypen

      Noen eksempel activityIds:


      present_verbsvocab

      present_verbsquiz

      weather_worksheet

      This informasjon er nå hva SWFAddress bruker for å navigere til høyre leksjonen samt individuell aktivitet.



      Trinn 4: Opprett en del variabel hvis nødvendig

      For andre ting som seksjoner, kan du sette dem opp ved hjelp SWFAddress som setter /getter (jeg bruker dette begrepet løst som ærlig er jeg ikke sikker på om dette oppfyller tekniske definisjonen av en setter /getter! [Ed: du kan finne ut med denne opplæringen;)]) - i mitt tilfelle jeg sette variabelen kalt delen når en bruker klikker på en Datagrid oppføring i denne delen, eller navigerer til en ny seksjon, så får jeg denne verdien tilbake ut av URL hvis noen navigerer til den delen. I mitt tilfelle mine hoveddeler er:

      child

      begynnelsen

      mellom

      nyhetsbrev

      Disse delene er satt i min handleSWFAddress () -funksjonen:
      privat funksjon handleSWFAddress (event: SWFAddressEvent): void {case "/barne" section = 'barnas break; }



      Trinn 5: Pass Variabler via Datagrid Klikk Hendelses

      Så i min klikkhendelsen for Datagrid, passerer jeg avsnittet og slug variabler på som URL:
      selectedRow = rad (myDslug = selectedRow.activityId; SWFAddress.setValue ("/" + seksjon + "/" + slug);



      Trinn 6: Pass dine Tittel til Browser via Datagrid Klikk Hendelses

      Stille tittelen var litt vanskeligere, fordi jeg ønsket å bruke lærdommen tittel som ikke er faktisk en del av strippet ned XML jeg bruker for denne demoen app - så jeg lagt en egenskap som bare trenger å være til stede i . første rad med mitt XML for å sette lærdommen tittelen

      Her er koden fra min Datagrid klikk hendelse som gjør dette mulig:
      SWFAddress.setTitle (myDG.dataProvider.getItemAt (0) .title + & quot; Spanish Lesson - & quot; + selectedRow.lessonTitle);

      getItemAt (0) er en fin liten funksjon som tillater meg å sette en tittel for leseren i akkurat den første raden i hver XML-fil , som gir sidene en bedre beskrivelse. Nå i stedet for min lekse aktivitetssidene leser: