Share
In een eerdere tutorial introduceerden we het Adobe Air-framework dat illustreerde hoe een eenvoudige applicatie te maken. Vergeet niet dat Adobe Air een raamwerk is dat webontwikkelaars, meestal betrokken bij html / js / flash-programmering, in staat stelt desktoptoepassingen te bouwen. In deze zelfstudie illustreren we hoe we een Adobe Air-toepassing kunnen bouwen met Flex, een open source set technologieën voor de ontwikkeling van rijke internettoepassingen..
Flex is een raamwerk waarmee SWF-bestanden kunnen worden gegenereerd. Je zou je kunnen afvragen: wat is het verschil met betrekking tot Flash? Afgezien van verschillen achter de schermen, is het grootste verschil met Flash de aanwezigheid van een opmaaktaal met de naam MXML. De onderstaande afbeelding illustreert het proces voor het genereren van een SWF-bestand.
Mxml is een xml-gebaseerde taal, die vriendelijker lijkt voor ontwerpers dan Actionscript, en die qua concept vergelijkbaar is met HTML (met tags en eigenschappen). Tijdens compilatie wordt de Mxml getranscodeerd in Actionscript, dat vervolgens wordt opgenomen in het uiteindelijke SWF-bestand. In dit perspectief kun je Mxml beschouwen als een abstractie van Actionscript, veel eenvoudiger om mee om te gaan. Flex SDK is geboren als een ontwikkeltoolkit om swf-bestanden te genereren (dezelfde bestanden gegenereerd met Flash). Nadat een aanpassing van Adobe Flex nu ook Adobe Air-toepassingen kan genereren.
De Flex SDK is open source en kan hier worden gedownload. Het is opgenomen in een zip-bestand dat, wanneer het wordt uitgebreid, er zo uitziet.
De belangrijkste bestanden die we in deze zelfstudie zullen gebruiken, bevinden zich in de bin / directory. Meer specifiek zullen we gebruiken:
Accentsconagua
amxmlc (de compiler)ADL (de debugger / launcher)ADT (de ontwikkelaarstool) De SDK moet worden geconfigureerd om in elke map van uw computer te worden uitgevoerd. De configuratie lijkt sterk op die van het Adobe Air-framework, uitgelegd in de
vorige zelfstudie Ik zal het hier voor het gemak melden. Volg op MacOSX dit script.
(/ Applications / Utilities / Terminal)
CD om er zeker van te zijn dat je in je thuismap bent .profiel of .bash_profile. Als het niet bestaat, maak het dan. PATH exporteren = $ PATH: / usr / bin deze: PATH exporteren = $ PATH: / flexsdk / bin
spaties omwikkelen met een dubbel aanhalingsteken (bijvoorbeeld "/ mijn pathtosdk / air")
lijn: / Applications / flex_sdk_3 / bin
source.profile In Windows is dit de procedure om de SDK te configureren.
PAD uit de onderste lijst en voeg aan het einde het pad toe aan de map sdk, zoals in de figuur. 
Om de configuratie te testen, openen we de shell en proberen we de volgende opdracht in te typen:
amxmlc
Als het resultaat lijkt op het volgende, is de SDK correct geïnstalleerd.
Laten we een map maken die de bestanden van ons project bevat. Zoals uitgelegd in de vorige zelfstudie, moet een Adobe Air-toepassing een beschrijvingbestand bevatten waarin de functies van de toepassing worden beschreven. Laten we een bestand met de naam maken MyApplication-descr.xml met de volgende inhoud.
De eerste regel is alleen de verklaring van het bestandsformaat; de echte specificatie begint vanaf regel twee tot het einde van het bestand ID kaart sluit de ID van de toepassing in. Ik zal mijn websitedomein opnemen om ervoor te zorgen dat het uniek is. De versie tag geeft het nummer van de release aan. Vergeet niet om het dienovereenkomstig te wijzigen terwijl u nieuwe versies van uw applicatie vrijgeeft. Het etiket bestandsnaam, waarvan de naam misleidend kan zijn, bevat de naam van de applicatie, die in het hoofdvenster van de applicatie, in de menu's, enz. verschijnt.. Inhoud geeft het eerste bestand aan dat moet worden geladen door de Air-toepassing bij het opstarten. Dit bestand wordt meestal aangeduid als rootbestand of ingangspunt. We hebben de zichtbaar eigendom van waar, om te visualiseren
de toepassing zoals deze is geladen. De systemChrome geeft het uiterlijk van het venster aan dat uw toepassing host. Als u dit op standaard instelt, heeft de toepassing een venster dat identiek is aan dat van het besturingssysteem dat u gebruikt. Als je het instelt op geen Buigen
zal zijn eigen chroom gebruiken dat, op MacOsX, als volgt verschijnt.
Op Windows (XP / Vista) is het vergelijkbaar. Het grootste verschil is de positie van de knoppen voor het wijzigen / sluiten van de grootte.
In deze tutorial zullen we een applicatie bouwen met een standaard chrome. De transparant eigenschap geeft aan of het hoofdvenster van de toepassing transparant is, terwijl regels 11 en 12 de aanvankelijke breedte en hoogte van het venster aangeven wanneer ze op het bureaublad worden weergegeven.
Nu gaan we beginnen met het bouwen van de code van de applicatie, die zal worden gecompileerd in het SWF-bestand.
De WindowedApplication tag bevat al uw toepassingen, net als de tag voor webpagina's. Het eigendom titel definieert de string die bovenaan de applicatie zal verschijnen. Flex bevat een enorme lijst met grafische componenten. De volledige lijst met componenten is hier beschikbaar. Laten we nu een knop in ons venster plaatsen.
Zoals je ziet, open je op een manier die vergelijkbaar is met html een tag (Knop) en specificeer de kenmerken van de component via attributen. In dit geval definiëren we de tekst die op de knop moet worden weergegeven via de eigenschap label (regel 3). Nu voegen we wat actie toe aan de knop.
Zoals u ziet, kunnen we ActionScript-code insluiten, die lijkt op JavaScript, waarmee u kunt definiëren wat gewoonlijk de 'logica' van ons programma wordt genoemd (regels 3-11). Bij regel vijf importeren we de alarm
component, wat een soort pop-upvenster is. Vervolgens definiëren we een functie (regel 7). De bijbehorende actie is om een waarschuwingsvenster weer te geven met het bericht "Hallo" (regel 8). Om de code met een druk op de knop te bevestigen, vullen we gewoon de Klik kenmerk van de knop met de naam van de functie (regel 12).
Om de applicatie te compileren moeten we naar de projectmap gaan en vervolgens de volgende opdracht uitvoeren:
amxmlc MyApplication.mxml
De shell zou een bericht als dit moeten retourneren:
Het bericht bevat een waarschuwing die, in tegenstelling tot een fout, geen oplossing vereist. De compiler stelt eenvoudig voor om de code te bekijken en deze te "verbeteren". Om de applicatie correct uit te voeren, en voor het bereik van deze tutorial, is het niet nodig om deze te repareren. Nu zijn we klaar om onze applicatie te testen. Vanuit dezelfde directory typen we de volgende opdracht:
adl MyApplication-descr.xml
(Merk op dat we het descriptor XML-bestand passeren en niet de XML met de feitelijke code). We zouden het volgende venster moeten zien verschijnen.
Als we op de knop klikken, wordt de waarschuwing correct weergegeven.
Het is waarschijnlijk dat u niet tevreden bent met de standaardkleur / indeling van Flex SDK. Je kunt je Air-applicatie via CSS vormgeven, zoals je doet met je html-pagina's. Natuurlijk zijn er verschillen met betrekking tot standaard W3C CSS, maar het idee en de syntaxis is bijna hetzelfde. Laten we bijvoorbeeld het label van alle knoppen in onze toepassing wit wijzigen. We voegen een codefragment in ons mxml-bestand in zoals in de figuur
onder (regels 3-7).
Om een idee te hebben van de stylingmogelijkheden van Flex, bekijkt u deze link.
De laatste stap om onze eerste applicatie te maken is om een distribueerbaar bestand te verpakken en op andere machines te installeren. Eerst hebben we een certificaat nodig. Raadpleeg voor meer informatie over de noodzaak van een certificaat de
vorige zelfstudie (stap 7). We zullen hier alleen de opdracht rapporteren om een zelfondertekend certificaat te maken dat nodig is om het distribueerbare pakket te bouwen.
adt -certificate -cn SelfSigned 1024-RSA mycertificate.p12 mypassword
De laatste applicatie zal worden gedistribueerd als een .air-bestand dat kan worden opgebouwd met behulp van de volgende opdracht.
adt -package -storetype pkcs12 -keystore mycertificate.p12 MyApplication.air MyApplication-descr.xml MyApplication.swf
De keystore parameter geeft het bestand aan met het hierboven gegenereerde certificaat.
Daarna moeten we de naam van het .air-bestand dat we willen genereren specificeren, de beschrijving van het .air-bestand
toepassing (opgenomen in MyApplication-descr.xml) en het eerder gegenereerde rootbestand (MyApplication.swf). Met deze opdracht wordt u gevraagd om het wachtwoord dat u hebt opgegeven tijdens het maken van het certificaat. U kunt het resulterende bestand MyApplication.air nu opnieuw distribueren naar uw gebruikers. Herinner hen eraan dat ze het Air Installer moeten installeren.
