Bygg et Adobe Air-program med Flex

I en tidligere opplæring presenterte vi Adobe Air-rammeverket som illustrerte hvordan man oppretter en enkel applikasjon. Husk at Adobe Air er et rammeverk som gjør det mulig for webutviklere, vanligvis involvert i html / js / flash programmering, for å bygge skrivebordsapplikasjoner. I denne veiledningen vil vi illustrere hvordan du bygger et Adobe Air-program med Flex, et åpen kildekode-sett med teknologier for utvikling av rike Internett-applikasjoner.

Trinn 1 - Hurtig introduksjon til Flex

Flex er et rammeverk som tillater generering av SWF-filer. Du kan spørre: Hva er forskjellen med hensyn til Flash? Bortsett fra forskjeller bak kulissene er hovedforskjellen med hensyn til Flash tilstedeværelsen av et oppslagsspråk som heter MXML. Figuren nedenfor illustrerer prosessen med å generere en SWF-fil.

Mxml er et xml-basert språk, som ser mer vennlig ut til designere enn Actionscript, og det er likt i konsept til HTML (med tagger og egenskaper). På kompileringstid blir Mxml transkodet til ActionScript, som deretter er inkludert i den endelige SWF-filen. I dette perspektivet kan du vurdere Mxml som en abstraksjon av Actionscript, mye enklere å håndtere. Flex SDK er født som et utviklingsverktøy for å generere swf-filer (de samme filene som genereres med Flash). Etter noen endringer fra Adobe Flex kan nå også generere Adobe Air-applikasjoner.

Trinn 2 - Installasjon og konfigurering av Flex SDK

Flex SDK er åpen kildekode og kan lastes ned herfra. Den finnes i en zip-fil som, når den er utvidet, ser slik ut.

De viktigste filene, som vi vil bruke i denne opplæringen, er plassert i bin / katalogen. Nærmere bestemt vil vi bruke:

  • AMXMLC (kompilatoren)
  • ADL (debugger / launcher)
  • ADT (utviklerverktøyet)

SDK-en må konfigureres til å bli kjørt fra hver mappe på datamaskinen din. Konfigurasjonen ligner veldig på Adobe Air-rammen, forklart i
tidligere opplæring. Jeg vil rapportere det her for enkelhets skyld. På MacOSX følg dette skriptet.

  1. Åpne terminalen

    (/ Programmer / Verktøy / Terminal)

  2. Type cd for å være sikker på at du er i din hjemmemappe
  3. se etter en fil som heter .profil eller .bash_profile. Hvis det ikke finnes, opprett det.
  4. Se etter en linje som ligner dette: eksporter PATH = $ PATH: / usr / bin
  5. legg til en annen linje som

    dette: eksporter PATH = $ PATH: / flexsdk / bin

  6. hvis banen til flex SDK inneholder hvit

    mellomrom pakke det med et dobbelt tilbud (for eksempel "/ min pathtosdk / air")

  7. I filen min har jeg for eksempel følgende

    linje: / Programmer / flex_sdk_3 / bin

  8. Lukk og åpne terminalen igjen. Eller skriv inn source.profile

På Windows er dette prosedyren for å konfigurere SDK.

  1. Høyreklikk på Min datamaskin, velg Egenskaper
  2. Velg fanen Avansert og klikk deretter Miljøvariabler-knappen
  3. Å velge STI fra bunnlisten og legg til banen til sdk-mappen på slutten, som i figuren.

For å teste konfigurasjonen, la oss åpne skallet og prøve å skrive følgende kommando:

 amxmlc

Hvis resultatet er som følger, er SDK riktig installert.

Trinn 3 - Opprettelse av beskrivelsesfilen

La oss lage en mappe som vil inneholde filene i prosjektet vårt. Som forklart i den forrige veiledningen, må et Adobe Air-program inneholde en beskrivelsesfil som beskriver funksjonene i programmet. La oss lage en fil som heter MyApplication-descr.xml med følgende innhold.

Den første linjen er bare deklarasjonen av filformatet; den virkelige spesifikasjonen starter fra linje to til slutten av filen id innebærer identifikatoren av søknaden. Jeg vil inkludere mitt nettsted domenet for å sikre at det er unikt. De versjon tag angir nummeret på utgivelsen. Husk å endre det tilsvarende når du slipper ut nye versjoner av søknaden din. Merket filnavn, hvis navn kan være misvisende, inneholder navnet på søknaden, som vises i hovedvinduet i søknaden, i menyene, osv.. Innhold angir den første filen som skal lastes av Air-programmet ved oppstart. Denne filen kalles vanligvis rotfil eller inngangspunkt. Vi satte synlig eiendom til sann, for å visualisere
søknaden som den er lastet inn. De systemChrome indikerer utseende og følelse av vinduet som er vert for søknaden din. Hvis du setter det til standard, vil programmet ha et vindu som er identisk med det operative systemet du bruker. Hvis du setter den til ingen Flex
vil bruke sin egen krom som på MacOsX, ser ut som følgende.

På Windows (XP / Vista) er det veldig lik. Hovedforskjellen er plasseringen av knappene for endring / lukking.

I denne opplæringen vil vi bygge et program med en standard krom. De gjennomsiktig Egenskapen indikerer om hovedvinduet i programmet er transparent, mens linjene 11 og 12 angir startbredden og høyden på vinduet når den vises på skrivebordet.

Trinn 4 - Skrive den virkelige koden

Nå begynner vi å bygge programkoden, som blir samlet i SWF-filen.

De WindowedApplication tag inneholder all din søknad, på samme måte som tagg for nettsider. Eiendommen tittel definerer strengen som vil vises øverst på applikasjonen. Flex inneholder en stor liste over grafiske komponenter. Den komplette listen over komponenter er tilgjengelig her. La oss nå legge en knapp i vinduet vårt.

Som du kan se, på en måte som ligner på html, åpner du et tag (Knapp) og angi funksjonene til komponenten via attributter. I dette tilfellet definerer vi teksten som skal vises på knappen via etikettegenskapen (linje 3). Nå legger vi til noen handlinger på knappen.

Som du kan se kan vi legge inn ActionScript-kode, som ligner på JavaScript, som gjør det mulig å definere det som vanligvis kalles "logikken" i programmet vårt (linjer 3-11). På linje fem importerer vi Varsling
komponent, som er et slags popup-vindu. Vi definerer deretter en funksjon (linje 7). Handlingen som er tilknyttet, er å vise et advarselsvindu som inneholder meldingen "Hei" (linje 8). For å legge ved koden ved å klikke på knappen fyller vi bare klikk Attributt av knappen med navnet på funksjonen (linje 12).

Trinn 5 - Kompilere og teste

For å kompilere programmet må vi flytte til prosjektmappe og deretter kjøre følgende kommando:

 amxmlc MyApplication.mxml

Skallet skal returnere en melding som dette:

Meldingen inneholder en advarsel om at det i motsetning til en feil ikke krever en løsning. Kompilatoren foreslår ganske enkelt å sjekke ut koden og "forbedre" den. For å kjøre programmet riktig, og for omfanget av denne opplæringen, er det ikke nødvendig å fikse det. Nå er vi klare til å teste vår søknad. Fra samme katalog skriver vi inn følgende kommando:

 adl MyApplication-descr.xml

(Legg merke til at vi passerer xml-filen og ikke mxml med den faktiske koden). Vi bør se følgende vindu som vises.

Hvis vi klikker på knappen, blir varselet korrekt visualisert.

Trinn 6 - Styling Application

Det er sannsynlig at du ikke er fornøyd med standard farge / layout av Flex SDK. Du kan stile din Air-applikasjon via CSS, som du gjør med HTML-sidene dine. Selvfølgelig er det forskjeller med hensyn til standard W3C CSS, men ideen og syntaksen er nesten det samme. La oss for eksempel bytte til hvit etiketten på alle knappene i vår søknad. Vi setter inn en utdrag av CSS i vår mxml-fil som i figuren
nedenfor (linje 3-7).

For å få en ide om styling evner Flex se på denne linken.

Trinn 7 - Lag den distribuerbare filen

Det siste trinnet for å lage vår første applikasjon er å pakke en distribuerbar fil som skal installeres på andre maskiner. Først trenger vi et sertifikat. For mer informasjon om behovet for et sertifikat, vennligst se
tidligere opplæring (trinn 7). Vi vil rapportere her bare kommandoen for å lage et selvsignert sertifikat som trengs for å bygge den distribusjonspakken.

 adt -certificate -cn SelfSigned 1024-RSA mycertificate.p12 mypassword

Den endelige søknaden vil bli distribuert som en .air-fil som kan bygges ved hjelp av følgende kommando.

 adt-package -storetype pkcs12 -keystore mycertificate.p12 MyApplication.air MyApplication-descr.xml MyApplication.swf

De keystore parameter indikerer filen som inneholder sertifikatet som er generert ovenfor.
Deretter må vi spesifisere navnet på .air-filen vi vil generere, beskrivelsen av
søknad (inneholdt i MyApplication-descr.xml) og rotfilen som ble generert tidligere (MyApplication.swf). Denne kommandoen vil spørre deg om passordet du oppgav under opprettelsen av sertifikatet. Du kan nå omfordele den resulterende MyApplication.air-filen til brukerne. Påminn dem om at de trenger å installere Air Installer.