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.
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.
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.
(/ Programmer / Verktøy / Terminal)
cd
for å være sikker på at du er i din hjemmemappe .profil
eller .bash_profile. Hvis det ikke finnes, opprett det. eksporter PATH = $ PATH: / usr / bin
dette: eksporter PATH = $ PATH: / flexsdk / bin
mellomrom pakke det med et dobbelt tilbud (for eksempel "/ min pathtosdk / air")
linje: / Programmer / flex_sdk_3 / bin
source.profile
På Windows er dette prosedyren for å konfigurere SDK.
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.
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.
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).
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.
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.
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.