Tips en trucs: Richtlijnen voor het ontwerpen van SWF-toepassingen

De beste manier om Animate-toepassingen te maken, hangt af van de toepassing die u maakt en de technologie die u gebruikt om de toepassing te maken.

Bij een online toepassing kan de gebruiker door interactie invloed uitoefenen op een website. De toepassing kan bijvoorbeeld gegevens van de gebruiker verzamelen (zoals een gebruikersnaam en wachtwoord voor registratie), gegevens toevoegen aan de site (zoals in een forum) of er kan sprake zijn van realtime interactie tussen bezoekers van een site (zoals in een chatroom of interactief whiteboard). De resultaten van de server worden vaak in het SWF-bestand opgenomen, afhankelijk van de interactie. Dit zijn voorbeelden van toepassingen waarbij de gebruiker invloed uitoefent en verschillende typen interactie met de server plaatsvinden. Een website die geen informatie of gegevens van gebruikers gebruikt, is geen toepassing (zoals een portfolio, een animatie of een site met statische informatie). Animate-toepassingen omvatten een interactief proces tussen de gebruiker, een webtoepassing en een server. Het basisproces is als volgt:

Wanneer u een toepassing maakt, moet u een protocol voor het verzenden van gegevens selecteren. Het protocol waarschuwt de toepassing wanneer gegevens worden verzonden of ontvangen, in welke indeling de gegevens worden overgezet en hoe de reactie van de server moet worden verwerkt. Nadat de gegevens door het SWF-bestand zijn ontvangen, moeten deze worden gemanipuleerd en opgemaakt. Wanneer u een protocol gebruikt, hoeft u zich geen zorgen te maken dat gegevens in een onverwachte indeling worden verzonden. Wanneer u gegevens via naam-waardeparen overdraagt, kunt u de indeling van de gegevens controleren. Controleer of de gegevens de juiste indeling hebben, zodat u geen XML-gegevens ontvangt en het SWF-bestand weet welke gegevens het kan verwachten en verwerken.

Gegevens verzamelen en opmaken

Toepassingen zijn afhankelijk van gebruikersinteractie met het SWF-bestand. Vaak is de toepassing afhankelijk van de invoer van gegevens in formulieren. Animate biedt vele manieren om gegevens in Animate-toepassingen in te voeren en op te maken. Deze flexibiliteit is mogelijk dankzij animatiemogelijkheden en creatief beheer van de interface en dankzij de foutcontrole en -validatie die u met ActionScript kunt uitvoeren.

Het gebruik van Animate om formulieren te maken voor gegevensverzameling biedt de volgende voordelen:

• Meer controle over het ontwerp.

• Pagina's hoeven niet of minder vaak te worden vernieuwd.

• Algemene elementen kunnen opnieuw worden gebruikt.

   Wanneer u informatie wilt opslaan die u van de gebruiker hebt verzameld, slaat u deze op in een gezamenlijk object op de computer van de gebruiker. Via gezamenlijke objecten kunt u gegevens op de computer van de gebruiker opslaan, vergelijkbaar met het gebruik van een cookie. Raadpleeg de klasse sharedObject in de Naslaggids voor ActionScript 2.0 of de Naslaggids voor ActionScript® 3.0 voor Adobe® Flash® Professional CS5 voor meer informatie over gezamenlijke objecten.

Gegevens verzenden en verwerken

Gewoonlijk moet u informatie verwerken voordat u deze naar de server verzendt, zodat de gegevens een indeling hebben die de server begrijpt. Wanneer de server de gegevens ontvangt, kunnen deze op verschillende manieren worden gemanipuleerd en teruggestuurd naar een SWF-bestand in een indeling die dat bestand accepteert. De indeling kan variëren van naam-waardeparen tot complexe objecten.

 Op uw applicatieserver moet het MIME-type van de uitvoer zijn ingesteld op application/x-www-urlform-encoded. Wanneer dat MIME-type ontbreekt, is het resultaat gewoonlijk onbruikbaar wanneer het Animate bereikt.

In de volgende tabel worden diverse opties getoond voor het verzenden van gegevens naar een server en het ontvangen van gegevens met Animate:

Gegevens laden en valideren

Gegevens die u ontvangt, moeten worden gevalideerd voordat ze naar de server worden verzonden. Hierdoor neemt de belasting van de externe server af, aangezien minder aanvragen hoeven te worden afgehandeld wanneer gebruikers de vereiste velden niet invullen. Vertrouw echter in geen enkele toepassing uitsluitend op validatie aan de clientzijde; zorg ook voor validatie aan de serverzijde.

Zelfs wanneer u een eenvoudig registratie- of aanmeldingsformulier maakt, moet u controleren of de gebruiker zijn/haar naam en wachtwoord heeft ingevoerd. Voer deze validatie uit voordat u de aanvraag naar het script op de externe server verzendt en op een resultaat wacht. Vertrouw niet uitsluitend op validatie aan de serverzijde. Wanneer de gebruiker alleen een gebruikersnaam invoert, moet het serverscript de aanvraag ontvangen, de verzonden gegevens valideren en een foutbericht naar de Animate-toepassing terugsturen waarin wordt vermeld dat zowel een gebruikersnaam als een wachtwoord is vereist. Wanneer de validatie daarentegen alleen wordt uitgevoerd aan de clientzijde (in het SWF-bestand), zou een gebruiker het SWF-bestand kunnen kraken, de validatie omzeilen en gegevens naar de server verzenden om te proberen onjuiste gegevens te posten.

Clientvalidatie kan zeer eenvoudig zijn. U kunt bijvoorbeeld controleren of een formulierveld ten minste één teken bevat of dat de gebruiker een numerieke waarde heeft ingevoerd en geen tekenreeks. Wanneer u bijvoorbeeld een e-mailadres wilt valideren, controleert u of het tekstveld in Animate niet leeg is en op zijn minst een apenstaartje (@) en punt (.) bevat. Voor servervalidatie voegt u complexere validatie toe en controleert u of het e-mailadres deel uitmaakt van een geldig domein.

U moet ActionScript-code schrijven om de gegevens te verwerken die vanaf de server in het SWF-bestand worden geladen. Nadat de gegevens in een SWF-bestand zijn geladen, kunt u vanaf die locatie toegang krijgen tot de gegevens. Gebruik ActionScript om te controleren of de gegevens volledig zijn geladen. U kunt callback-functies of listeners gebruiken om een signaal te verzenden dat aangeeft dat de gegevens in het document zijn geladen.

Wanneer u gegevens laadt, kunnen deze op verschillende manieren worden opgemaakt:

• U kunt XML laden, in welk geval u de methoden en eigenschappen van XML-klassen gebruikt om de gegevens te parseren en te gebruiken. Wanneer u naam-waardeparen gebruikt, worden de paren omgezet in variabelen en kunt u ze als variabelen manipuleren.

• U kunt gegevens ontvangen van een webservice of via Animate Remoting.

In beide gevallen zou u complexe gegevensstructuren kunnen ontvangen, zoals arrays, objecten of recordsets, die u moet parseren en binden.

Foutafhandeling en foutopsporing gebruiken

Uw toepassing moet krachtig genoeg zijn om te anticiperen op bepaalde fouten en deze op de juiste manier te verwerken.

Een van de beste manieren om foutafhandeling toe te passen in ActionScript 2.0 is om try-catch-finally-blokken te gebruiken waarmee u aangepaste fouten kunt genereren en afvangen. Door aangepaste foutklassen te maken, kunt u code in uw toepassing opnieuw gebruiken zonder dat u de foutafhandelingscode opnieuw hoeft te schrijven. Raadpleeg de klasse Error in de Naslaggids voor ActionScript 2.0 voor meer informatie over het genereren van aangepaste fouten. Zie voor meer informatie over try-catch-finally-blokken try..catch..finally in de Naslaggids voor ActionScript 2.0 voor meer informatie.

Gebruik in ActionScript 3.0 de klasse flash.errors om fouten af te vangen.

Zie Synchrone fouten in een toepassing afhandelen in ActionScript 3.0 programmeren voor meer informatie.

Bestanden ordenen en code opslaan

Beantwoord de volgende vragen voordat u bestanden ordent en code opslaat:

• Splitst u het SWF-bestand op in meerdere SWF-bestanden en zo ja, hoe moeten deze met elkaar communiceren?

• Welke elementen kunt u tussen SWF-bestanden delen?

• Welke bestanden worden dynamisch geladen?

• Hoe en waar slaat u ActionScript-code op?

  Wanneer u een toepassing ontwikkelt, slaat u code en bestanden aan de serverzijde op in een logische mapstructuur, vergelijkbaar met die in een ActionScript-pakket. Wanneer u de code op deze manier opslaat, blijft deze goed geordend en verkleint u de kans dat de code wordt overschreven.

  Voor grotere toepassingen kunt u client/server-communicatie en -services onderbrengen in klassen. Het gebruik van klassen biedt de volgende voordelen:

• U kunt de code opnieuw gebruiken in meerdere SWF-bestanden.

• U kunt code bewerken op een centrale locatie en alle SWF-bestanden bijwerken door ze opnieuw te publiceren.

• U kunt een enkele API maken die verschillende elementen van de gebruikersinterface of andere elementen kan manipuleren die soortgelijke functies uitvoeren.

Het ontwerppatroon MVC gebruiken

Het ontwerppatroon MVC wordt gebruikt om de verwerking van informatie, uitvoer en gegevens in de toepassing van elkaar te scheiden. De toepassing bestaat uit drie onderdelen: model, weergave en bediening (in het Engels: model, view en controller, kortweg MVC), waarbij elk onderdeel een ander deel van het proces afhandelt.

- omvat de gegevens en regels van de toepassing. Een groot deel van de verwerking van de toepassing vindt plaats in dit deel van het ontwerppatroon. Het model bevat ook eventuele componenten (zoals CFC's, EJB's en webservices) en de database. De geretourneerde gegevens worden in dit deel van het proces niet opgemaakt voor de interface (of front-end) van de toepassing. De geretourneerde gegevens kunnen voor verschillende interfaces (of weergaven) worden gebruikt.

Handelt het front-end van de toepassing af (de interface waarmee de interactie met de gebruiker plaatsvindt) en rendert de inhoud van het model. De interface bepaalt hoe de gegevens van het model worden aangeboden, levert de weergave voor de gebruiker, biedt de gebruiker toegang tot de gegevens van de toepassing en maakt het mogelijk dat de gebruiker die gegevens manipuleert. Wanneer het model verandert, wordt de weergave bijgewerkt om die wijzigingen te weerspiegelen door gegevens te verzenden ('push') of op te vragen ('pull'). Wanneer u een hybride webtoepassing maakt (zoals een toepassing waarbij Animate interacties aangaat met andere toepassingen op de pagina), moet u de verschillende interfaces beschouwen als onderdeel van de weergave in het ontwerppatroon. Het ontwerppatroon MVC ondersteunt de afhandeling van diverse weergaven.

- handelt de vereisten van het model en de weergave af om gegevens te verwerken en weer te geven en bevat gewoonlijk veel code. De bediening roept een deel van het model aan, afhankelijk van de gebruikersaanvragen vanuit de interface (of de weergave) en bevat code die specifiek is voor de toepassing. Aangezien deze code specifiek is voor de toepassing, kan deze gewoonlijk niet opnieuw worden gebruikt. De andere componenten in het ontwerppatroon kunnen echter wel opnieuw worden gebruikt. De bediening verwerkt geen gegevens en levert geen uitvoer van gegevens, maar ontvangt de aanvraag van de gebruiker en beslist welk onderdeel van het model of de weergave moet worden aangeroepen. Vervolgens wordt bepaald waar de gegevens naartoe moeten worden verzonden en welke indeling op de geretourneerde gegevens moet worden toegepast. De bediening zorgt ervoor dat weergaven toegang hebben tot de onderdelen van de modelgegevens die moeten worden weergegeven. De bediening verzendt en reageert op wijzigingen die betrekking hebben op het model en de weergave.

Elk onderdeel van het model is ontworpen als een op zichzelf staande component binnen het algemene proces. Wanneer u een onderdeel van het model wijzigt (u zou bijvoorbeeld de interface kunnen aanpassen), hoeven de andere onderdelen van het proces gewoonlijk niet te worden gewijzigd, waardoor de kans op problemen afneemt. Wanneer uw ontwerppatroon correct is opgezet, kunt u de weergave wijzigen zonder het model of de bediening te hoeven aanpassen. Wanneer uw toepassing MVC niet gebruikt, kunnen wijzigingen in de toepassing overal elders in de code doorwerken, waardoor meer wijzigingen nodig zijn dan wanneer u een specifiek ontwerppatroon gebruikt.

Een belangrijke reden om het ontwerppatroon MVC te gebruiken, is dat gegevens en logica worden gescheiden van de gebruikersinterface. Doordat deze onderdelen van het proces worden gescheiden, kunt u verschillende grafische interfaces gebruiken die hetzelfde model en dezelfde niet-opgemaakte gegevens gebruiken. Dit betekent dat u uw toepassing met verschillende Animate-interfaces kunt gebruiken, zoals een interface voor het web, een interface voor Pocket PC, een versie voor mobiele telefoons en wellicht een HTML-versie die helemaal geen gebruik maakt van Animate. Door de gegevens van de rest van de toepassing te scheiden, kan het ontwikkelen, testen en zelfs bijwerken van meerdere clientinterfaces aanzienlijk minder tijd in beslag nemen. Om dezelfde reden kunt u gemakkelijker nieuwe front-ends voor dezelfde toepassing toevoegen wanneer u een bestaand model kunt gebruiken.

Gebruik MVC alleen wanneer u een grote of complexe toepassing maakt, zoals een e-commercewebsite of een e-learningtoepassing. Het gebruik van de architectuur vereist planning en begrip van de manier waarop Animate en dit ontwerppatroon werken. Overdenk zorgvuldig de interactie tussen de verschillende delen door ze te testen en fouten op te sporen. Wanneer u MVC gebruikt, zijn tests en foutopsporing veelomvattender en ingewikkelder dan in standaard Animate-toepassingen. Wanneer u een toepassing maakt waarin u extra complexiteit nodig hebt, overweeg dan het gebruik van MVC om uw werk te ordenen.

Beveiligde toepassingen maken

Kwaadwillende gebruikers kunnen proberen uw toepassing te kraken, ongeacht of u een kleine portalsite maakt waar gebruikers zich kunnen aanmelden en artikelen kunnen lezen of een grote e-commercewinkel. Overweeg daarom de volgende stappen te nemen om uw toepassing te beveiligen.

• Post gegevens die moeten worden beveiligd als HTTPS. Versleutel waarden in Animate voordat u deze voor verwerking naar een externe server verzendt.

   Sla informatie of code die gebruikers niet mogen zien nooit in een SWF-bestand op. SWF-bestanden kunnen gemakkelijk worden gedeassembleerd, waarna de inhoud ervan met software van derden kan worden bekeken.

• Voeg een interdomeinbeleid toe dat voorkomt dat onbevoegde domeinen toegang krijgen tot uw elementen.