Sette opp en Flash Development Sandbox: < br /> Part 2

Setting Up en Flash Development Sandbox: Part 2
Del
Del
Del
Del

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

Dette er del 2 av hvordan du setter opp en Flash Development Sandbox. Du kan lese del 1 her. I denne opplæringen skal vi gå over hvordan du setter opp en lokal testing miljø, se på Debugger, Flex Builder Profiler, snakke om prosjektorganisering, og sette opp /hjelp AS Docs.



Trinn 1 - Å velge en AMP (Apache MySQL og PHP) Solution

For så lenge jeg kan huske, har jeg alltid jobbet i en LAMP (Linux, Apache, MySQL, PHP) miljø. Dette er trolig en av de mest vanlige sever oppsett fordi det er gratis, åpen kildekode, og lett å sette opp. Ett av målene med å sette opp min egen utvikling sandkasse er å ha en lokal server på min datamaskin som samsvarer med produksjonsmiljøet. Vi kommer til å dekke to løsninger som vil få deg opp og kjører raskt. Hvis du bruker en PC, kan du gå til trinn 2. Hvis du bruker en Mac, kan du gå til trinn 3.

Trinn 2 - PC Setup (XAMP)

Installere AMP er som enkelt som å laste ned pre-samlet pakke XAMP og installere den. Her er noen av de tingene jeg gjorde når du installerer programmet.

Jeg brukte standard plasseringen ..

.. med standard installere alternativer.

Ser ut som alt riktig installert.

Etter at jeg installerte XAMP, jeg brukte kontrollpanelet for å aktivere serveren og jeg var oppe og går. Du kan følge disse instruksjonene også.

Det er viktig å merke seg at du skal plassere alle dine web-filer innsiden av XAMP katalogen her \\ xampp \\ htdocs
. Sørg for at du legger merke til hvor du har installert XAMP

Trinn 3 -. Mac Setup

Det er mange måter du kan sette opp din mac til å kjøre en lokal server. Heldigvis er den grunnleggende oppsett bygget inn i OS. Bare gå inn i "System Preferences" og deretter se etter "Sharing" under. "Internet & Network"

Når du er i Deling-panelet, klikk på Webdeling alternativ og Apache er startet for deg.

Ta hensyn til den personlige nettsiden url du får. Dette er hva du trenger som base url når du konfigurerer Flex Builder å jobbe med din lokale server. I mitt tilfelle er det http://10.0.1.4/~jessefreeman/
. Her er et triks skjønt, kan du erstatte din ip-adresse med "localhost". Derfor vil den url jeg vil bruke for resten av denne opplæringen være http:. //Localhost /~ jessefreeman

Hvis du ønsker å sette opp PHP og MySQL vil jeg foreslå følgende dette tutorial.

Hvis du trenger PHP og MySQL, men er ikke komfortabel med kommandolinjen, kan du sjekke ut denne alt-i-ett-programvarepakke som ligner XAMP kalt MAMP. Jeg vurderte det når du gjør denne opplæringen, og jeg var ikke fornøyd med hvor de plasserte htdocs katalogen. Ved å bruke den innebygde Apache du kan beholde alle filene dine i din nettsteder mappe, på denne måten de er koblet direkte til din brukerkonto og i et enkelt sted å sikkerhetskopiere. MAMP holder filene i hovedbiblioteket katalogen, et sted jeg egentlig ikke har lyst til å jobbe i Det er viktig at du velger den løsningen som fungerer best for deg

Trinn 4 -.. Sette opp vår nettside

I denne opplæringen vi bare røre på å få Apache oppe og går. Som jeg nevnte tidligere, er det mange ting du kan gjøre for å tilpasse lokal server. I dette trinnet skal vi lage en tom mappe som heter "Helloworld" i vår htdocs mappen

På en PC.
c: \\ xampp \\ htdocs
< p> På en Mac:
/brukere /DIN-brukernavn /nettsteder

Dette Helloworld mappen vil inneholde vår Flash-side og bli den basen url for oss å bruke når testing /debugging vår Action prosjekt. Som du begynner å legge flere prosjekter til Flex Builder du ønsker å legge til flere kataloger for å teste hvert prosjekt. La oss se på hvordan vi kan konfigurere Flex Builder å flytte vår swf og støtte aktiva til våre vert mappe

Trinn 5 -. Konfigurer Flex Builder for Local Testing

Vi ønsker å fortelle Flex Builder hvordan til å flytte filer til våre lokale serveren, så vi må høyreklikke på vår Helloworld prosjektet og velg "Egenskaper". Derfra går du til "Action Build Path" delen. Her kan vi endre banen til Output mappe. Klikk "Bla gjennom" og finn katalogen på datamaskinen der vi laget vår tomt Helloworld mappe.

Du vil merke at den "bin-debug" -mappen har nå et ikon med en pil på den. Dette indikerer at katalogen er knyttet utenfor gjeldende arbeidsområde.

Nå skal vi vil endre vår Run. Hvis du går å kjøre (i menyen) > Run > Andre ..., vil du kunne konfigurere nettadressen som blir lansert når du tester prosjektet. Velg Helloworld Kjør fra under Flex Søknad falle ned.

Nå, hvis du ser på nettadressen eller banen for å starte, vil du se at standard url kamper filbanen som du valgte i papirbanen. Dette vil fungere, men for å teste dette på en lokal server vi kommer til å trenge å be om det gjennom vår localhost. Husk når vi setter opp Apache, vi vi gitt en base url som representerte vår localhost url? På PC var det http: //localhost Hotell og på mac det var http: //localhost /~ brukernavn /
. Vi kommer til å ønske å oppdatere nettadressene her ved å fjerne "Bruk mislighold" og sette i banen til Helloworld mappe:

Det er viktig å merke seg at en av de viktigste grunnene til at vi driver vår Action prosjektet gjennom Apache og ikke direkte fra filen av datamaskinen er å eksponere noen server side sikkerhets feil eller produksjons problemer før de dukker opp når du prøver å starte nettstedet. Ved å gjenskape vår hosting miljø kan vi sørge for at våre filen vil kjøre akkurat hvordan det ville på live server. Dette vil kutte ned timer med frustrasjon når du prøver å få et område ut døren. Og når du må begynne å legge i PHP eller andre server side scripting du kan teste det lokalt og ikke være avhengig av produksjonsserveren.

Sørg for at du treffer på "Apply", og deretter prøve å kjøre eller Debug til se om det fungerte. Nå bør du se samme side åpner opp, men denne gangen den kjører fra Apache lokalt på maskinen din

Trinn 6 -. SVN Organization

Holde SVN repository organisert er svært viktig, spesielt når du arbeider i et team av utviklere eller lage dine prosjekter med åpen kildekode. Først opp, skal vi ta en rask titt på min personlige svn repo. Google Code tillater bruk for å utforske noen repo via nettsiden så la oss åpne opp Flashbum sin pappeske og rote rundt i mappestrukturen.

Som du ser, holder jeg alle mine prosjekter i bagasjerommet på repo. Stammen representerer arbeidskopier av kode. Neste, jeg bryte opp hvert prosjekt basert på denne typen: "eksperimenter", "sandkasser", og "sites". La meg gå over hver katalog og hva de er ment for:

Eksperimenter
representerer brorparten av det jeg skaper. For meg er et eksperiment et frittstående program med en klar sluttresultatet. Jeg faktisk organisere disse inn i undermapper som 3d, Camo2, spill osv Et eksperiment er noe så enkelt som et bevis på konseptet til et fullt fungerende program. Den eneste forskjellen er at forsøkene ikke er fullt funksjonelle områder. Vanligvis mine nettsteder er derivater av disse forsøkene.

  • Sandkasser
    er prosjekter der jeg teste kode. De er typen som eksperimenter, men de har vanligvis ingen retning eller sluttprodukt. Mesteparten av tiden de ikke engang fullt arbeid. Jeg bruker sandkasser mye når jeg lære en ny teknikk eller prøver å forstå andres kode.
  • nettsteder
    er rett frem og er fullt realisert prosjekter som vil være vert på en server. I de fleste tilfeller, hvis et område er stor nok, kan du ha en hel repo utelukkende dedikert til det. For min personlige ting, jeg bare holde det hele blandet sammen med min andre koder.

    Du er fri til å organisere katalogen slik du ønsker. Dette oppsettet fungerer fint for meg og holde ting organisert basert på prosjektets sluttresultatet hjelper andre får en grunnleggende idé om hva de kan forvente når du sjekker noe ut. Målet i en offentlig SVN repository det å tillate andre å raskt finne det de leter etter uten å vite mye om din egen personlige måte å kategorisere /organisere dine prosjekter.

    Nå la oss ta en titt på min rammeverk, Flash Camouflage. Dette er et bibliotek med kode på en offentlig åpen kildekode SVN repo. Du kan utforske hele repo ved å klikke her.

    Som du kan se dette er strukturert litt annerledes. Det er en klar vekt på tags katalogen og stammen representerer hele prosjektet. Dette er også ligner på hvordan jeg skulle sette opp en stor Flash området i sin egen repo. Tidligere nevnte jeg begrepet tagger og grener, men la oss gjøre en oppsummering:

    Tags
    representerer en spesiell revisjon av koden i et depot. Dette brukes til å markere stabil bygger og er lettere å kassa enn en spesiell revisjon.

  • Grener
    representerer en bestemt retning. Hvis du har en ny funksjon eller ommøblerer du ønsker å gjøre uten å forstyrre andre utviklere det ville gå i en gren. Dessuten er grenene mappen et flott sted å gi hver av utviklerne sitt eget område for å bidra til prosjektet. Når deres endringer er stabile de kan flette dem inn i bagasjerommet.

    Det er viktig å forstå konsekvensene av kodeendringer til et bibliotek som deles av flere utviklere eller flere hundre utviklere. Det er derfor du bruker tags og grener er avgjørende for stabiliteten i et prosjekt. Som du kan se i Flash Camo, har jeg merket hver versjon av rammeverket. Stort antall intervaller som en eller to mark store forskjeller i kodebasen. Mindre revisjoner som 1.xx representere små inkrementelle endringer.

    Når du arbeider med aktive prosjekter fra andre utviklere er det viktig å bygge prosjektet av et bestemt merke eller revisjon. Det hjelper å vite hva bygger du arbeider av når du ønsker å oppgradere ved å bytte til en ny versjon. I neste trinn vil vi gå over hvordan du bytter mellom grener og merker i Flex Builder

    Trinn 7 -. Bytter til en Branch /Tag

    Fra tid til annen kan det hende du må bytte over til en ny kode i en svn repo. Flex Builder gjør dette veldig enkelt med innebygd støtte for versjonskontroll. Siden jeg skrev del 1 av denne opplæringen, har jeg sluppet en ny versjon av Flash Camouflage. vi kommer til å slå vår FlashCamo 2.0 Beta til den nye 2.1 Beta tag.

    For å komme i gang, høyreklikk på FlashCamo2 prosjekt vi opprettet i del 1. Gå ned til teamet alternativ i kontekstmenyen og velg Bytt til en annen Branch /Tag /Revisjon.

    Nå skal du være ute på et vindu med prosjektets svn checkout bane. Hvis du kjenner url, kan du taste det manuelt, eller klikk på Velg for å finne den. La oss treffe velger.

    Nå er du ute på Repository Browser. Herfra vil du se innholdet av din nåværende sjekke ut dybde, eller du kan klikke på Root og utforske hele svn repo. Klikk Root > tags > FlashCamo_2.1_beta og trykke OK

    Nå når du kommer tilbake til Switch vinduet "til URL" skal fylles ut

    http:.. //flash-camouflage.googlecode. com /svn /tags /FlashCamo_2.1_beta

    Nå kan du trykke på "OK" for å ha Flex Builder erstatte den nåværende kassa med det nye innholdet fra 2,1 lappen.

    Når du komme tilbake til arbeidsplassen din kan du se følgende feilmelding:

    Når du bytter mellom koder eller grener, noen av de nye klassene kan ikke velges i prosjektets kildebane. Dette skjer bare når vi har å gjøre med Flex bibliotekprosjekter. Du kan fikse dette ved å høyreklikke på prosjektet, i dette tilfellet "FlashCamo2" og velge Egenskaper. Deretter går du til Flex Library Build Path. Hvis du blar rundt vil du se at noen av de nye klassene ikke er sjekket ut.

    Hvis du raskt fikse dette ved å trykke "Select All" og trykk "OK". Dette vil gjenoppbygge biblioteket med alle de utvalgte klasser. Noen ganger vil du kanskje ikke ønsker å bruke alle klasser, spesielt hvis de har en feil eller avhengighet av et annet bibliotek du kanskje ikke har. Ved å være i stand til å velge bare de klassene du trenger, er du i stand til å custom bygge SWC for dine behov. Flash Camo trenger alle disse klassene, så sørg for at du har valgt dem og er feilfri i arbeidsområdet

    Trinn 8 -. Opprette klasser

    Nå er vi klare til å begynne å legge til vår Helloworld prosjektet. Flex Builder har en stor veiviser for å lage klasser. Du kan dra den opp ved å høyreklikke på src mappen i Helloworld og velge New > Action Class.

    Her skal vi lage en "DemoLabelComponent" og sette det inn i en com.tutsplus.flash.components
    pakken. I neste trinn vil jeg snakke om pakken organisasjon, men før du treffer OK du ønsker å klikke på "superklassen Browse" -knappen. Dette er en flott funksjon i Flex Builder som lar oss plukke fra alle klassene og biblioteker vårt prosjekt har tilgang til. Vi ønsker å utvide utenfor "CamoDisplay"

    Når du har valgt CamoDisplay, din konfigurere veiviser se slik ut:.

    Neste, la oss snakke om pakken navnekonvensjonene
    <. h2> Trinn 9 - Pakker

    I Actionscript 3 bruker vi pakker å organisere våre klasser og bidra til å unngå navnekonflikter. Hvis du har to biblioteker med kode og hver har et verktøy du trenger en måte å differensiere dem. Siden Java gjør bruk av pakkene jeg prøver å følge de grunnleggende om sin navnekonvensjon.

    I det foregående trinn opprettet vi en ny pakke kalt com.tutsplus.flash.components
    . I Java, pakker begynne med toppnivådomenet navnet på organisasjonen, i dette tilfellet skriver jeg en tutorial for flash.tutsplus.com så vi bruker dette domenenavnet, men i revers. Vi har også lagt våre under pakke "komponenter" som vil være et oppbevaringssted for alle våre komponent klasser. Det er viktig å følge enhetlig pakke navnekonvensjoner så her er noen fra Java og min egen at jeg prøver å holde seg til:

    util Anmeldelser - en base pakkenavn for Utility klasser

    net Anmeldelser - for nettverkstilkoblinger

    math Anmeldelser - for matematikk klasser

    modell /view /controller Anmeldelser - Du har kanskje hørt om MVC (Model View Controller) og en masse folk bruker de for pakkenavn. En modell representerer data, en kontroller er noe som forvalter andre klasser /brukerundersøkelser, og det er noe som kan vises. Dette er en veldig løs tolkning av design mønster og jeg pleide å bryte mine klasser opp som dette. Selv om jeg ikke gjør det lenger, er det tydelig å se hva slags funksjonalitet du kan forvente fra klasser i hver pakke

    komponenter Z -. Det er der jeg lagrer alle mine visuelle klasser nå . Det er fornuftig å tenke på alle skjerm klasser en type komponent. Selv en videospiller kan betraktes som en komponent består av mange små komponenter. Du kan ha under pakker for dine komponenter som "knapper" eller "layout".

    Nå som vi har gått over det grunnleggende pakke navngiving, la oss ta en titt på å skape en enkelt komponent for vår Hello World prosjekt

    Trinn 10 -. Den DemoLabelComponent

    For å spare litt tid, jeg har allerede opprettet en klasse for oss å bruke. Kopier og lim inn følgende kode inn i den nye klassen du nettopp opprettet:
    pakke com.tutsplus.flash.components {import camo.core.display.CamoDisplay; import flash.text.TextField; public class DemoLabelComponent strekker CamoDisplay {beskyttet statisk konst FIRST_WORD: String = "Hei"; beskyttede Var ord: Array = new Array ("World", "People", "Flash", "Flash Tuts"); beskyttet Var label: Textfield; offentlig funksjon får totalWords (): Antall {return words.length; } Offentlig funksjon DemoLabelComponent () {super (); i det(); } Beskyttet funksjonen init (): void {label = createTextField (); addChild (label); } Beskyttet funksjon createTextField (): Textfield {var tempTextField: Textfield = new Textfield (); tempTextField.selectable = false; returnere tempTextField; } Offentlig funksjon changeWords (id: Number): void {label.text = FIRST_WORD + "" + ord [id]; }}}

    Vi kommer også til å ønske å oppdatere Doc klasse, så gå inn i Helloworld klasse fra del 1 og erstatte det med følgende:
    pakke {import com.tutsplus.flash.components.DemoLabelComponent; import flash.display.Sprite; import flash.events.TimerEvent; import flash.utils.Timer; public class Helloworld strekker Sprite {private Var teller: Antall = 0; private Var label: DemoLabelComponent; offentlig funksjon Helloworld () {label = new DemoLabelComponent (); addChild (label); Var timer: Timer = new Timer (1000, 0); timer.addEventListener (TimerEvent.TIMER, onTimer); timer.start (); } Private funksjon onTimer (event: Timerevent): void {teller ++; if (teller > (label.totalWords - 1)) teller = 0; label.changeWords (counter); }}}

    Nå når du kjører klassen bør du se en enkel Textfield der tilfeldig endrer teksten. Jeg vet det er ikke mye, men det er alt vi trenger for å virkelig forklare de siste skrittene

    Trinn 11 -. Den Debugger

    Flex Builder har en fantastisk debugger, og er en viktig del i noen arbeidsflyt . Jeg har tidligere snakket om hvordan du kan se spor i konsollen når du treffer Debug. Vel nå skal vi snakke om "stoppunkter" og bruker hele Debugger.

    En stoppunkt er en markør i koden som forteller spilleren til å stoppe på det punktet. Det gir deg en utmerket mulighet til å sjekke ut hva som skjer under panseret. For å legge til et stoppunkt du bare dobbeltklikke på linjenummer. La oss gå inn i DemoLabelComponent og legge et stoppunkt på linje 41:

    Nå la oss kjøre debug. Husk debug er bug-ikonet ved siden av den grønne play-knappen.

    Når du har godtatt innkallingen å starte debugger, vil du bli presentert med en frossen nettleser på hvilket punkt Flex Builder vil være i full debug-modus . Du bør være kjent med det grunnleggende i denne fra del 1 av opplæringen. La oss snakke om hver av de tre hovedvinduene.

    Hovedvinduet inneholder klassen der stoppunkt ble opprettet. Legg merke til hvordan linje 40 er markert, og det er en blå pil over stoppunkt. Dette indikerer at du nå stoppet på dette punktet. Over dette vinduet vil du se debug panel.

    debug-panelet er svært viktig og vil hjelpe deg backtrack alle funksjoner kalt før dette tidspunktet. Når det er en feil du vil være i stand til å bruke denne bunken å gjøre retrett nøyaktig hva som gikk galt. Når du beveger deg bakover gjennom tidligere kalt metoder, vil du kunne se hvert sett av verdier på det tidspunktet. Du kan utforske egenskapene til objektene i "Variable" panelet til sin rett.

    Variabel panel viser deg alle de aktive variablene og deres verdier. Du skal se to variabler nå "dette" og "id". Legg merke til hvordan "dette" har en hake ved siden av det? Klikk på den og la oss utforske "dette". Dette er den nåværende forekomst av DemoLabelComponent. Legg merke til på toppen du har [arvet] og under at alle variablene i klassen? Dette er viktig fordi du kan bruke den til å finne ut hvor variabler kom fra så vel som den klassen som inneholder dem. La oss se på de variable "ord" ved å klikke på det ..

    Den "ord" variabelen er en Array. Her kan vi utforske alle sine verdier, samt se hva lengden verdien er.

    Jeg kan ikke understreke hvor viktig dette verktøyet er. Jeg pleide å spore alt ut, og jeg hadde en egendefinert verktøy som ville recessivt spore ut innholdet i klassenes egenskaper, men nå er alt jeg har å gjøre er å legge et stoppunkt, og jeg kan utforske noen variable som helst i tid.

    La oss snakke om hva som skjedde her. Vi har lagt et stoppunkt i DemoLabelComponent sin changeWords metode. Hvis vi går til debugger panel og klikk på handlingen som skjedde før dette Helloworld /onTimer, vil du se at vi har hoppet inn i Helloworld klassen og linje 30 er uthevet. Vi gikk tilbake til kilden for den som ringer på changeWords metoden.

    Husk at debugger og nettleseren er nå stanset. Du kan gå til neste handling ved å trykke på play-knappen øverst til høyre i Debug Tab.

    Når du trykker på den, vil koden utføre og deretter pause igjen. Siden vi lagt vår stoppunkt i en sløyfe det vil fortsette å stoppe på samme stoppunkt hver gang. Hvis du sjekke id variabelen du vil legge merke til det nå har en verdi på "2". Vi bare så verdien økes.

    Du kan avslutte Debugger ved å trykke på den røde stopp eller frakoblingsikonet ved siden av den. "Disconnect" vil beholde programmet kjører, men kobler du debugger. Du bør også fjerne stoppunkt; du kan gjøre dette ved å dobbeltklikke på det. Som dekker Debugger, la oss ta en titt på "Profiler"

    Trinn 13 -. The Profiler

    Akkurat som Debugger, dette er et annet verktøy jeg kan ikke leve uten. Den "Profiler" er nøkkelen til å se på minne fotavtrykk av søknaden din. Den Profiler kan du også overvåke de totale forekomstene av hver klasse samt spore eventuelle tilfeller som ikke blir frigjort ved søppelinnsamler. Sørg for at du er ute av Debugger og klikk på profiler; det er den knappen til høyre for feilen som ser ut som en avspillingsknapp med linjer under den. Når du trykker på den og jeg aksepterer innkalling til bytte visninger, vil du bli tatt inn i profiler.

    Som profiler lanserer vil du se en rekke alternativer, bare godta standardoppsett og klikk "Fortsett" .

    Nå Flex Builder vil laste opp profiler, så la oss ta en titt på våre vinduer. Hovedvinduet nederst er "Levende Objects" -liste. I kategorien Levende Objekter vil du se alle forekomstene kjører i søknaden din. Du kan filtrere dem eller sortere dem etter "Kumulative forekomster" eller "Memory". Her kan du se i detalj på hvor mange tilfeller blir skapt og spore opp minnelekkasjer som skyldes feil ødelagt klasser.

    Neste er opp "Memory Usage" diagrammet. Dette vil vise deg toppene i minne over tid. Ikke mye som skjer i vår Helloworld prosjektet, så ting bør bo på rundt 91k. Når du legger flere og flere gjenstander og eiendeler i din app, vil denne grafen vokse. Omsider Garbage solfangeren bør fjerne ubrukte ressurser fra minnet. Du kan fremskynde prosessen ved å klikke på ikonet til papirkurven kan med en play-knappen.

    Til slutt kan du ta "Memory Snapshots" eller Finn loitering gjenstander i kategorien Profil øverst til venstre. Hver gang du tar et øyeblikksbilde minne vises det som et barn under driften tråden. Du kan deretter sammenligne hvert stillbilde for å matche ytelsen over tid.

    Dette berører bare overflaten av Profiler, men som du ser, kan ha disse verktøyene hjelpe ta gjette arbeid ut av minnehåndtering og hjelpe deg finjustere din søknad. Neste la oss snakke om refactoring

    Trinn 14 -. Refactoring

    "refactoring" eller "restrukturering" koden din er en stor del av utviklingen. Nå som alle våre kode er i eksterne class filer og hver klasse er avhengig av stiene i hver pakke vi ikke bare kan flytte rundt på ting hvis vi ikke er fornøyd med oppsettet. Flex Builder tilbyr to gode verktøy for å endre Klasse navnene samt gjøre store endringer i hele prosjektet. Først la oss se på hvordan du utfører en enkel refactor.

    Gå tilbake til Flex Development prospektiv og høyreklikk på DemoLabelComponent.as filen. Herfra vil vi se et alternativ for å endre navnet på klassen. La oss klikk på den. Nå har vi to steder som refererer til denne klassen; Helloworld klasse samt DemoLabelComponent selv. Normalt, hvis du omdøpt en klasse, ville du må gå tilbake gjennom hver klasse og fikse navnet. La oss gi denne klassen et nytt navn på "LabelComponent". I stedet for å trykke "OK", lar trykk "Preview".

    Flex Builder vil nå gå gjennom og vise deg alle referanser til denne klassen og hvordan endringen vil påvirke prosjektet. Ta deg tid til å se gjennom og se hva Flex Builder funnet. Når du er ferdig med å trykke OK og alle referanser til DemoLabelComponent vil bli endret til LabelComponent. Dobbeltsjekk at du ikke har noen feil i "problemer" panel og du vil se at klassen ble omdøpt. Dette er en stor tid saver, men hva hvis du vil flytte den til en annen pakke?

    Høyreklikk på LabelComponent og bruke "Move" for å flytte filen opp ett nivå ut av komponentene pakken og inn i com.tutsplus.flash
    i Helloworld src mappen. Hit OK når du er ferdig. Klassen ble flyttet, men vi har nå tre problemer.

    Dette er fordi flytting ikke endre navn på pakkene. Vi kommer til å bruke den avanserte "Søk og erstatt" for å fullføre jobben. Gå til Rediger > Finn i filer eller Skift + Kommando + F.

    Vi har nettopp åpnet opp avansert søk panel. La oss endre com.tutsplus.flash.components til com.tutsplus.flash. Vi kan gjøre dette ved å søke etter de som inneholder teksten "com.tutsplus.flash.components".

    Legg merke til hvordan du kan finjustere søket på tvers av prosjekter eller arbeidsområder. Vi kommer til å holde alt ved mislighold og trykke "Skift ...". Vi er nå presentert med en standard Erstatt dialog, legge til "com.tutsplus.flash" inn i "Med" -feltet og trykk "Erstatt alle".

    Nå er alle våre problemer er borte og vi kan fortsette på vår måte. Slett komponenter mappen og la oss snakke om Kode Dokumentasjon

    Trinn 15 -. Kode Dokumentasjon

    Dokumentere kode er en av de viktigste tingene du bør gjøre. Heldigvis, hvis du bruker Flex Builder alt du trenger for å lage pent formatert HTML-dokumenter som Adobe egen Action dokumentasjon er allerede på datamaskinen. Vi kommer til å sette opp en rask ekstern Tool til å kjøre "ASDoc" (kommandolinjen kode dokumentasjon program). Dette vil fungere på en PC eller en Mac, og når det er satt opp, kan du bruke den på alle prosjekt.

    Først la oss åpne "External Tools Wizard". Du kan gjøre dette ved å gå til Kjør > Eksterne Verktøy > Åpne eksterne verktøy Dialog eller klikk på rømmen snarvei i Flex Development Window.

    Herfra må du klikke på "Launch New Configuration" eller dobbeltklikke på programikonet i listen.

    Nå bør du være i stand til å redigere ditt nye programmet, start ved å gi den et navn. Vi kommer til å sette opp et generisk program som kan kjøres på alle prosjekter og som ikke har delte biblioteker. Jeg ga den navnet "ASDoc Generator".

    Neste vi må påpeke plasseringen til hvor du har asdoc program. På en mac er det i "Application /Adobe Flex Builder 3 /SDK /" da SDK du bruker (for meg, jeg har en 3.2 build) "bin /asdoc"

    Her er min full bane.
    /Programmer /Adobe Flex Builder 3 /SDK /3.2.0 /bin /asdoc

    Du kan bruke Browse File System for å finne det hvis banen er forskjellig. På en PC vil du være på jakt etter den asdoc.exe.

    Nå må vi definere en Working Directory. Dette kan gjøres ved å velge "Browse arbeidsområde ..." og peker til prosjektet, eller "Bla gjennom File System" hvis du ikke holde dine prosjekter i arbeidsområdet. Det siste alternativet er den vi kommer til å bruke såkalte "variabler". Eclipse har innebygd støtte for shortcutting stier og verdier i arbeidsområdet. De er formatert som dette $ {TOKEN} hvor TOKEN er variabelnavnet. Når du klikker på Variable alternativet, vises en liste over alle støttede variabel vist. Vi ønsker ASDoc å bruke det aktuelle prosjektet vi er i, så skriver du inn følgende i Working Directory feltet:
    $ {project_loc}

    Til slutt må vi gi argumenter til ASDoc. Dette er vanlig med kommandolinjeprogrammer så la oss se på den grunnleggende oppsett av hva du trenger for å komme i gang.
    -doc-Kilder src-utgang docs -vindu-title "$ {project_name}« -Main-title "$ { project_name} "

    Her er hva hver parameter gjør.

    -doc-kilder
    representerer mappen der kildekoden er

    -utgang
    representerer den mappen der docs vil gå.

    -vindu-tittelen
    jeg bruke prosjektets navn som tittel for HTML Window

    -Main-tittelen
    igjen jeg bruke prosjektnavnet for hovedtittelen på HTML-docs

    Før vi kjører dette programmet vi kommer til å legge en ekstra param til argumentene:
    -Ekstern-bibliotek-banen "/Users /jessefreeman /Dokumenter /Flex Builder 3 Demo /FlashCamo2 /bin"

    Pass på at du erstatte banen til din egen datamaskin vei til Flash Camo kassen. Dette er veldig viktig; det forteller ASDoc hvor Camo bibliotek kode er og ikke å inkludere det i dokumentasjonen. Du kan legge til dette så mange ganger som du trenger for hver ekstern bibliotek du har.

    For en fullstendig liste over støttede alternativer sjekke ut Adobes ASDoc dokumentasjon. Nå bør du ha følgende oppsett:

    La oss erstatte koden i vår LabelComponent klasse med følgende dokumentert kode:
    pakke com.tutsplus.flash {import camo.core.display.CamoDisplay; import flash.text.TextField; public class LabelComponent strekker CamoDisplay {beskyttet statisk konst FIRST_WORD: String = "Hei"; beskyttede Var ord: Array = new Array ("World", "People", "Flash", "Flash Tuts"); beskyttet Var label: Textfield; /** * *return Totalt antall ord. * * /Public funksjon få totalWords (): Antall {return words.length; } /** * Klasse Constructor. * * /Public funksjon LabelComponent () {super (); i det(); } /** * Klasse init funksjon * * /beskyttet funksjonen init (): void {label = createTextField (); addChild (label); } /** * *return Textfield for å vise en melding på. * * /Funksjon som er beskyttet createTextField (): Textfield {var tempTextField: Textfield = new Textfield (); tempTextField.selectable = false; returnere tempTextField; } /** * Endrer et ord basert på en ID. *param Id indeksen knyttet til ord Array. * * /Offentlig funksjon changeWords (id: Number): void {label.text = FIRST_WORD + "" + ord [id]; }}}

    På en side notat, kan du raskt kommentere noen funksjon ved å sette markøren på linjen før og treffer Shift + Command + D. Det vil også sette oppparams ogreturns for deg også. Nå la oss kjøre Dokumentasjon script og se hva som skjer. En ny "docs" mappen bli opprettet og inne vil du finne en index.html du kan åpne i nettleseren din.

    Hvis av noen sjanse du var heldig nok til å få følgende feil, her er det Løsningen:

    kommandolinje: Feil: tvetydig argument liste; ute av stand til å finne ut hvor "compiler.external-bibliotek-banen" Parametere slutten, og standard 'doc-klassenes parametere begynne. Bruk '-' for å avslutte parameterlisten, eller kanskje bruke '-compiler.external-bibliotek-path = val [, val] +' syntaks stedet

    Bruk 'asdoc. -Hjelp 'for informasjon om hvordan du bruker kommandolinjen.

    Kommandolinje apps, spesielt Mac de som kjører på Unix, hater mellomrom i mappenavn. Du må sørge for at du vikler stier med mellomrom i navnene på innsiden av sitater.

    Åpne opp index.html dokumentasjon og sjekke det ut. Det ser ut som vår Doc Klassen ble dokumentert i det ved et uhell

    Siden vi ikke ønsker å ha den klassen som en del av våre docs vi kan legge følgende kode ovenfor pakken erklæring på linje 7:.
    /** *private * /

    Som så:

    Nå hvis du kjør ASDoc Program, Doc klasse vil bli utelatt fra docs. La oss se på lagring av disse endringene tilbake til SVN Repo.

    Se hvor enkelt det var å sette opp ASDocs? sites:


    http://blogs.adobe.com/aharui/

    http://www.as3dp.com/

    http://labs.bigspaceship.com/

    http://drawlogic.com/

    http://blog.flexexamples.com/

    http://www.gskinner.com/blog/

    http://www.guahanweb.com/

    http://www.igorcosta.org/

    http://jessewarden.com/

    http://www.jodieorourke.com/blog.php

    http://madowney.com/blog/

    http://maohao.wordpress.com/

    http://www.morearty.com/blog/

    http://www.blog.noponies.com/

    http://pixelwelders.com/blog/

    http://lab.polygonal.de/

    http://blog.onebyonedesign.com/

    http://www.reflektions.com/miniml/

    http://www.rogue-development.com/blog2/

    http://blog.soulwire.co.uk/

    http://theflashblog.com/

    http://www.unitzeroone.com/blog/

    http://www.websector.de/blog/

    http://www.warmforestflash.com/blog/

    http://visiblearea.com/blog/bin/view/VisibleArea


    Conclusion

    We