Ontwerp en implementatie in Flex

Ontwerp en implementatie in Flex Maarten Decat

Thomas De l’Arbre

1e Master Ingenieurswetenschappen: Computerwetenschappen Optie Gedistribueerde systemen

3e Bachelor Informatica Minor Verbreding

[email protected] Benjamin Slegers

[email protected] Wouter Theetaert



[email protected]

[email protected]

ABSTRACT Het basisidee van de applicatie is het aanbieden van een platform waarop jonge bandjes zichzelf kunnen voorstellen. Het geheel wordt een webapplicatie voor twee verschillende doelgroepen: enerzijds de bandjes die de mogelijkheid krijgen om zichzelf op een georganiseerde manier te 'verkopen' en anderzijds de organisatoren van een evenement die op zoek zijn naar een geschikte groep voor een optreden. Het grote verschil met andere platformen waarop groepjes zich kunnen voorstellen, is dat deze applicatie probeert om op een bruikbare manier veel multimediale informatie aan te bieden. Bij andere applicaties wordt het vinden van informatie bemoeilijkt door het ontbreken van een handige zoekfunctie en de mogelijkheid om het overzicht te bewaren. Bovendien moet een gebruiker dikwijls heen en weer schipperen tussen verschillende platformen om voldoende info te vinden. De applicatie 'BandStart' biedt een oplossing voor al deze moeilijkheden.

voor implementaties. Het tweede deel bestond uit het groeperen van de gevonden termen om zo tot vier grote categorieën te komen, nl. 'Wedstrijden', 'Muziek op het juiste moment', 'Verschillende genres' en 'TV-muziek'. De verzameling van termen rond het woord 'Wedstrijd' is er vooral gekomen vanuit de enorme hoeveelheid aan liedjeswedstrijden en talentenjachten op televisie. Vaak proberen groepen op die manier bekendheid te verwerven. Er is vandaag geen algemeen platform waar bandjes die zichzelf aan het grote publiek kenbaar willen maken, gebruik van kunnen maken. YouTube wordt gebruikt voor filmpjes, Flickr voor foto's, de ene gebruikt MySpace, de ander heeft een persoonlijke website en de derde verkiest Facebook. Hieruit vloeit vanzelf een idee voor een applicatie uit voort: het aanbieden van een algemeen platform waarop jonge bandjes zich op een georganiseerde manier kunnen voorstellen aan het brede publiek.

Elk groepje krijgt een persoonlijke pagina die ze naar eigen smaak kunnen invullen, binnen een bepaald kader. Bovendien ondersteunt de applicatie een een spectrum van multimediale mogelijkheden zoals video, muziek, foto en tekst. De applicatie biedt ook een zoekfunctie aan die het mogelijk maakt om te zoeken aan de hand van verschillende criteria (genre, leeftijd, locatie, enz). Tenslotte moet het geheel dynamisch en eigentijds ogen. Het resultaat (de uiteindelijke applicatie) kan online bekeken worden [1]. Er staat ook een link naar de applicatie op de wiki.

1. BRAI STORM

Figuur 1: Brainstorm

Het globale resultaat van de brainstormsessie kan gevonden worden in figuur 1. Deze figuur geeft enkel een beeld van het eerste deel van de brainstorm; de scans van de papieren versie van alle brainstormpagina’s staan op de wiki-pagina van groep 5 (doorklikken via 'Sessie 1') [2]. In de begeleidende tekst staat ook de betekenis van de rode en groene pijlen, cirkels en dergelijke aangegeven. De originelen zijn als bijlage bij dit verslag gevoegd.

Een tweede verzamelterm is 'Muziek op het juiste moment'. Er werd even verder nagedacht over het idee van muziek die aangepast moet zijn aan de omgeving, aan de situatie, aan het humeur van de luisteraar, maar deze piste werd snel verlaten omdat ze te dicht aanleunt bij het voorbeeld dat in de eerste les werd aangereikt.

De brainstorm binnen het team kan grosso modo in twee delen worden opgedeeld. Het eerste deel ging heel algemeen over alle ideeën die met muziek te maken hebben, waarbij er geen rekening werd gehouden met eventuele toepassingen of mogelijkheden

Verder werden nog enkele losse ideeën omtrent 'verschillende genres' gebundeld. Twee toepassingen staken hierbij de kop op: het samenbrengen van verschillende genres (als een soort overzicht, een soort interactieve databank) en het kennismaken met een ander genre (bijvoorbeeld de hardrock-liefhebber die met

klassieke muziek in aanraking komt). Omdat geen van beide ideeën direct aanleiding gaf tot een idee voor een concrete applicatie, werd dan ook voor iets anders geopteerd. Een laatste kernwoord is 'TV-muziek'. Het basisidee hierbij is dat de muziek die gebruikt wordt als achtergrond bij een televisieprogramma of een film zeer veel meerwaarde biedt. De beelden op zich zijn duidelijk minder overtuigend als de muziek wordt weggelaten. Het zou misschien leuk zijn een applicatie te ontwikkelen rond de koppeling van beeld en geluid (de gebruiker kan andere muziek onder bestaande beelden plaatsen, of kan zijn vakantievideo's van geluid voorzien). De meest bruikbare ideeën waren die rond het thema's 'Wedstrijden' en 'TV-muziek'. Omdat er op het eerste zicht niet zo veel concrete plannen te vinden waren bij het thema 'TV-muziek', heeft het team er voor gekozen om een applicatie rond 'Wedstrijden' verder uit te bouwen.

2. STORYBOARD Na de brainstorm werd aan de hand van het concept een storyboard getekend. Een scan van de eerste versie van het storyboard kan gevonden worden op figuren 2 en 3 (de scan kan in groot formaat gevonden worden op de wiki-pagina van groep 5: doorklikken via 'Algemeen' [3]), het origineel is als bijlage bij dit verslag gevoegd. Deze eerste versie schetst een globaal beeld van hoe de applicatie er moet gaan uitzien. De globale layout is gebaseerd op de bekende Compiz-Fusion- (zie de link bij 'State of the art' op de wiki) en iTunes-vormgeving waarbij de 'vorige' en 'volgende' pagina in perspectief staan opgesteld ten opzichte van de 'huidige' pagina. In onze applicatie wordt dit idee uitgebreid met kantelende pagina's boven en onder de centrale pagina.

die zich links en rechts van het centrale venster bevinden. De inhoud van die pagina's is variabel, hier wordt verder op teruggekomen. Boven de centrale pagina bevindt zich het menu waarin de gebruiker zijn persoonlijke opties terugvindt (profiel, berichten, favorieten e.d.m.). Onder de centrale pagina tenslotte bevindt zich het zoekmenu waar de gebruiker aan de hand van verschillende criteria op zoek kan gaan naar geschikte groepen. Het centrale tekstvak kan gebruikt worden om op trefwoord te zoeken. De buttons boven het tekstvak leiden naar aparte zoekpagina's afhankelijk van de gekozen zoekmethode. Een druk op de knop 'locatie' leidt bijvoorbeeld tot een kaartje om grafisch naar groepjes op een bepaalde locatie te zoeken. De boven- en onderpagina staan eveneens in perspectief ten opzichte van de centrale pagina en bij een mouse-over kantelen deze pagina's zodat ze leesbaar worden.

2.2 Openingspagina Zie figuur 4. Bij de openingspagina bevat het centrale venster een welkomstpagina. De gebruiker wordt welkom geheten en er wordt een kort overzichtje gegeven van de nieuwste ontwikkelingen op BandStart waar die specifieke gebruiker in geïnteresseerd kan zijn. Links en rechts van het centrale venster (in perspectief dus) bevinden zich pagina's die door de gebruiker zelf kunnen ingesteld worden. In de voorbeeldapplicatie staat op de ene pagina een kalender en op de andere de berichteninbox van de gebruiker. Om over te gaan naar punt 3 ('kiezen volgens locatie') dient de gebruiker het zoekmenu te activeren door er met de muis over te gaan en vervolgens te klikken op "Locatie".

Figuur 4: Openingspagina

2.3 Kiezen volgens locatie

Figuur 2: Storyboad (1)

Figuur 3: Storyboad (2)

De eerste versie van het storyboard werd geëvalueerd tijdens sessie 2 en bleek te weinig gedetailleerd: de verschillende toestanden dienden duidelijker te worden aangegeven, de pagina's moesten effectief worden ingevuld, de buttons moesten een plaats en een waarde krijgen. Op basis van deze opmerkingen werd een nieuw storyboard gemaakt, dat eveneens in appendix en op de wiki [4] te vinden is. De verschillende stappen worden hierna kort verduidelijkt.

Zie figuur 5. Als de gebruiker een groepje wil kiezen op locatie verschijnt in het centrale venster een interactieve kaart van België. Aan de hand hiervan kan de gebruiker groepen kiezen op een geografische manier. De uitwerking hiervan stond op het moment dat het storyboard werd getekend nog niet helemaal vast. In de schermen links en rechts van het centrale venster bevinden zich de andere zoekmogelijkheden. Om naar punt 4 ('zoekresultaten') over te gaan veronderstellen we dat de gebruiker een regio heeft gekozen.

2.1 Algemeen Zie figuur 4. De applicatie bestaat globaal gezien uit vijf delen. Het belangrijkste deel is het centrale venster, waar steeds de info komt. Links en rechts van het centrale venster bevinden zich pagina's in perspectief (zie tekening). Deze kunnen op twee verschillende manieren zichtbaar worden gemaakt: enerzijds door ze aan te klikken, anderzijds door gebruik te maken van knoppen

Figuur 5: Kiezen volgens locatie

2.4 Zoekresultaten Zie figuur 6. Nadat de gebruiker een zoekopdracht gemaakt heeft, worden de resultaten in een overzichtelijke manier weergegeven. Afhankelijk van de gemaakte opdracht kunnen deze resultaten bijvoorbeeld weergegeven worden in een tag cloud (bij genres) of verzameling van korte beschrijvingen van de groepjes. In ons voorbeeld gebruiken we de tweede optie. De groepen die tot de gekozen regio behoren, worden hierin weergegeven in aparte deelschermpjes. Deze bevatten een korte inhoud bestaande uit een foto, een filpje of een tekstje. De precieze inhoud hiervan kan door de groepjes zelf aangepast en gekozen worden. Afhankelijk van de populariteit en de relevantie van de groepjes worden ze meer of minder zichtbaar weergegeven. Nadat er een specifiek groepje gekozen is, gaan we over naar deel 5 ('Pagina per groep').

Figuur 6: Zoekresultaten

2.5 Pagina per groep Zie figuur 7. In het centrale venster wordt de gekozen groep voorgesteld. De inkleding van de pagina kan door de groepen zelf bepaald worden, maar de applicatie biedt een zeker kader waarbinnen dit kan gebeuren. De gebruiker krijgt de mogelijkheid om video, muziek, foto's en tekst weer te geven maar hij/zij bepaalt zelf welke van deze mogelijkheden benut worden en hoe de schikking op de pagina gebeurt. Elk element bevat een slider waarmee de opacity van dat element kan geregeld worden - er is ook een centrale slider om de opacity van alle elementen samen te wijzigen. Op die manier kan bijvoorbeeld een filmpje of een foto op de achtergrond worden gebruikt, waarbij de gebruiker zelf kiest of hij dat wil bekijken (alle elementen onzichtbaar) of niet (sommige elementen zichtbaar). In het linker- en rechtervenster bevinden zich op dit moment de pagina's van de meest relevante groepen die eveneens aan het zoekcriterium voldeden.

Figuur 7: Pagina per groep

3. UITWERKI G I FLEX 3.1 Implementatie De implementatie verliep op zich redelijk vlot. Voor het vermelde cover flow-effect werd gebruik gemaakt van de 3D library PaperVision3D waarvan al een bestaand voorbeeld van een coverflow gevonden kon worden. Dit effect van nul af aan

implementeren was zeker en vast een te moeilijke klus om in twee weken te klaren. Het top-down werken van een bestaand voorbeeld gaf wel bevredigende resultaten, al vergde het toch nog de nodige tijd. Hieromtrent was het spijtig dat Flex toelaat zulke mooie resultaten te bekomen: Er bestaan tal van voorbeelden van de uitgebreide mogelijkheden van Flex en de taal nodigt in alle opzichten uit om deze voorbeelden ook zelf te proberen. De gemakkelijke editor, de snelle grafische resultaten en de uitstekende libraries zorgden voor een verleidelijke mix waarin al snel te veel tijd kroop. De technologie is als het ware te uitnodigend om niet aan te buitensporige ideeën te beginnen. Dit is meteen ook de voornaamste reden van de overtollige uren die in dit project zijn gekropen. Het samenwerken in teamverband liep vlot door de mogelijkheid in Flex om te werken met componenten. Bij aanvang werden duidelijk afspraken getroffen omtrent welke componenten er moesten ontwikkeld worden. Deze componenten konden daarna onafhankelijk van elkaar door een afzonderlijk lid van het team ontwikkeld worden. De cover flow zelf werd ontwikkeld met het invoegen van latere componenten in gedachten, wat het uiteindelijk samenvoegen tot een geheel een eenvoudige taak moest maken. De eerste week werkte ieder teamlid zelfstandig aan zijn component. Op die manier werd er gekeken naar de mogelijkheden tot bijvoorbeeld het afspelen van muziek of film, het kaartje voor geografisch zoeken en de openklabbare menu's. Tegen het einde van de eerste week werden de opgedane ervaringen bijeengelegd en werden meer precieze afspraken gemaakt: de optimale groottes van iedere component, de te gebruiken kleuren, welke dummydata er gebruikt ging worden etc. Nadat al deze componenten ontwikkeld waren, konden ze samengevoegd worden in de cover flow. Dit samenvoegen verliep vrij vlot doordat op voorhand al geweten was dat elke component op zich werkte. Spijtig genoeg staken enkele moeilijkheden de kop op toen er verbindingen gelegd moesten worden tussen verschillende niveau's in de applicatie. Zo leek het bijvoorbeeld bijzonder moeilijk om een knop in een component te verbinden met een functie uit de hoofdapplicatie. Het copy-pasten van de broncode i.p.v. het gebruik van de componenten bleek de snelste oplossing, al is dit niet meteen de meest aangewezen manier van werken. Het was ook bij het samenvoegen dat de meeste moeilijkheden met Flex voorkwamen. Componenten die in het geheel van lay-out veranderden, clipping problemen met de cover flow en het reeds vermelde probleem met de knoppen waren maar enkele van de vlekken op het blazoen van Flex. Het resultaat werd ontwikkeld naar het uitvoeren van het opgestelde storyboard. Alle pagina's hierop aanwezig zijn ontwikkeld, al zijn ze niet allemaal even gedetailleerd. Een belangrijke ontwerpbeslissing die niet meteen uit het storyboard blijkt, is de mogelijkheid tot het combineren van verschillende zoekopdrachten. In de applicatie moet het namelijk mogelijk zijn via de verschillende zoekmethoden tot een gecombineerd resultaat te komen. Bij aanvang van een nieuwe query wordt steeds gezocht tussen alle groepen voorhanden. Als er bijvoorbeeld gezocht wordt op 'Leuven' onder 'locatie', komen alle beschikbare groepen van de regio Leuven voor in het resultaat. Als daarna naar 'dance' gezocht wordt onder 'genre' (nog steeds in hetzelfde onderstaande menu), wordt er enkel gezocht in het voorgaande resultaat. Op die manier kan iemand specifiek zoeken naar alle dance groepen in

Leuven en zal hij/zij bijvoorbeeld op Shameboy of Discobar Galaxie uitkomen. Als de gebruiker een volledig nieuwe zoekopdracht wilt beginnen, kan hij gebruikmaken van de pijlvormige knop in het onderstaande zoekmenu. Voor elke gemaakte zoekopdracht is er een aparte pagina voorzien. In de demo is enkel het resultaat van het zoeken op trefwoord en locatie voorzien. Bij het zoeken op locatie wordt er een kaartje getoond. In de demo is dit een kaartje van België waarbij enkel de provincies gekozen kunnen worden. Het doel is echter dat de gebruiker maar believen in eender welke regio kan zoeken. Niet enkel de provincies moeten gekozen kunnen worden maar het moet mogelijk zijn in te zoomen tot afzonderlijke gemeenten (en dieper desnoods) waarbij de gebruiker per locatie zien krijgt hoeveel bands er precies aanwezig zijn. Bij het aanklikken van een bepaalde locatie worden dan niet enkel de bandjes uit die specifieke gemeente getoond maar wordt er een regio rond de aangeduide locatie gebruikt. De gebruiker moet ten allen tijde in staat zijn de straal van deze regio aan te passen. Het resultaat van zoeken op trefwoord wordt getoond in een gestapelde structuur van schermpjes met een samenvatting van elk groepje. De meest relevante bands (als er bijvoorbeeld al gezocht is op locatie houdt de relevantie de afstand tot de aangeduide locatie in, in het algemene geval wordt onder relevantie populariteit verstaan) worden bovenaan en dus best zichtbaar getoond. Door met de muis over een onderliggend groepje te manoeuvreren, wordt dit groepje beter zichtbaar gemaakt. De getoonde schermpjes bevatten zoals gezegd een korte samenvatting van elke band. Elke gebruiker is in staat de inhoud van deze samenvatting aan te passen. Of dit nu een tekstje, een filmpje of een foto is, het moet allemaal getoond kunnen worden. Enkel de omvang van de schermpjes is vast, over de inhoud heeft de gebruiker totale vrijheid. Andere niet voorziene mogelijkheden zijn zoeken op genre, leeftijd en populareit. Door op de knop in het onderstaande menu te drukken, komt de gebruiker op de overeenkomstige zoekpagina. Voor het zoeken op genre worden alle genres weergegeven in een tag cloud waarbij de grootte van elk genre in deze wolk weer afhankelijk is van het aantal dat er een groepje van in de database voorkomt. Een zoekopdracht op leeftijd wordt dan weer getoond op een tijdsas waarbij de gebruiker gemakkelijk moet kunnen kiezen welke leeftijdscategorie hij zoekt. Voor populariteit wordt weer gebruik gemaakt van de gestapelde structuur van schermpjes, alsook de resultaten van een gemaakte zoekopdracht. Als er bijvoorbeeld gezocht wordt op 'rock', worden alle rockgroepjes op deze manier weergegeven. In dit overzicht worden dus enkel de meest relevante resultaten getoond. Als de gebruiker nog andere bands wil bezoeken dan deze die hier getoond worden, kan hij opteren om een volgend stuk van de complete lijst te tonen of kan hij de zoekopdracht verfijnen. Vanaf het moment dat de gebruiker een bepaald groepje kiest, wordt de groepsppagina hiervan getoond in het centrale scherm van de applicatie. In de zijpanelen links en rechts van dit hoofdscherm worden de andere meest relevante resultaten van de zoekopdracht getoond zodat de gebruiker hier gemakkelijk naar kan navigeren. Zoals aangegeven in alinea 2.5, is ook de inhoud van het centrale scherm volledig bepaald door de gebruiker zelf. Het motto van BandStart is dat elke band zijn pagina de stijl kan geven die perfect de sfeer van de band uitademt. Veel user created content dus, maar de tools moeten wel van BandStart zelf komen.

Het uiteindelijke resultaat wijkt op enkele punten af van het gemaakte storyboard. Het meest in het oog springende is waarschijnlijk de kleine omvang van de gebruikersruimte. Dit is het gevolg van een combinatie van oorzaken. Ten eerste lukte het niet om de menu's onder- en bovenaan de pagina in te brengen in de code van de cover flow. Dit zijn twee afzonderlijke componenten geworden met elk hun eigen 3D scene. Dit heeft tot gevolg dat deze menu's niet over het centrale gedeelte kunnen klappen, wat al een eerste verlies van ruimte tot gevolg heeft. Ten tweede bleek het tunen van de zijpanelen van de coverflow een tijdrovende bezigheid van trial en error te zijn. In het ene geval namen de zijpanelen te veel plaats in en in het andere geval werden ze onleesbaar of vielen ze naast het zichtsveld van de camera. Hierdoor is ook deze ruimte niet optimaal benut en viel de te gebruiken centrale ruimte nogal klein uit. Een ander puntje waarop we afwijken van het storyboard is het feit dat de menu's boven- en onderaan de pagina rond hun centrale horizontale as draaien en niet rond hun boven- en onderzijde respectievelijk. Dit instellen in de gebruikte versie van de PaperVision3D library bleek niet te gaan en dit effectje is dus weggevallen maar zou in de uiteindelijke applicatie nog steeds aanwezig moeten zijn. Een laatste puntje van verschil is het ontbreken van de pijltjes en de overzichtsbalk in het zoekmenu voor het navigeren tussen de verschillende tabs. In de demo is het enkel mogelijk te klikken op de zijpanelen en niet via knoppen hiertussen te navigeren. Dit leek ons niet prioritair maar dient wel toegevoegd te worden aan de volledige applicatie. Al bij al kunnen we dus besluiten dat de implementatie in Flex vlot is verlopen als er gekeken wordt naar wat we bij aanvang in gedachten hadden. Er is te veel tijd in gekropen maar dat was vooral te danken aan de knappe resultaten die met Flex geboekt kunnen worden. Het programma heeft een degelijke indruk achtergelaten maar kon niet volledig overtuigen, al is het bereikte resultaat voor slecht twee weken werk wel mooi!

3.2 Over Flex Flex is een veelzijdige tool die toelaat om zeer gemakkelijk dynamische front-ends voor RIA's te construeren. De eerste indruk die Flex nalaat is positief, maar na twee weken werk kwamen toch enkele nadelen bloot te liggen. Het eerste grote voordeel van Flex is het gebruik van XML en Actionscript 3 in combinatie met de uitstekende Flex Builder 3. Flex Builder 3 is een programma dat uitblinkt in gebruiksgemak. Het gebruik van een grafische editor zorgt voor een zeer lage instapdrempel. Drag en drop werkt heel vlot voor het snel opbouwen van enkele eenvoudige applicaties maar dit soort editor dekt nooit volledig de lading. Gelukkig is het gemakkelijk om de achterliggende code aan te passen. Deze van een Flex applicatie is vooral XML, een terechte keuze in dit geval. XML is leesbaar, eenvoudig te begrijpen en nog eenvoudiger aan te passen. Voor de iets ingewikkeldere applicaties is er de mogelijkheid tot gebruik van Actionscript 3, een object-gebaseerde programmeertaal met een duidelijke Java-syntax. De mix van XML voor de layout en Actionscript 3 voor eventuele achterliggende code vormt een krachtige combinatie. Tenslotte dient vermeld te worden dat Flex Builder gebaseerd is op Eclipse, en dus kan teren op de veelzijdige functies die dat programma aanbiedt. Dit alles zorgt voor de reeds vernoemde positieve eerste indruk van Flex. De mindere kantjes van Flex komen boven drijven als er wat dieper in de taal gegraven wordt. Flex is een zeer aanlokkelijke

taal om meer geavanceerde functies te implementeren en dit heeft al enkele zeer mooie nieuwe libraries opgeleverd. PaperVision3D is hier een goed voorbeeld van. Deze library vormt een krachtige en gebruiksvriendelijke 3D-engine die de deur openzet naar een hele resem nieuwe webapplicaties. De resultaten die op zo'n manier geboekt zijn, spreken tot verbeelding en nodigen uit om zelf aan de slag te gaan. Daarbij steekt het eerste minpuntje van Flex de kop op: de userbase. De userbase van deze taal is namelijk bijlange nog niet zo uitgebreid als bijvoorbeeld die van Java. Dit maakt dat het opzoeken van tutorials, voorbeelden of hulp omtrent de specifieke, beoogde toepassing vaak niet de resultaten geeft waarop gehoopt werd. Buiten de pure en droge documentatie waren er te weinig voorbeelden te vinden voor beginners. De resultaten die als meer ervaren gebruiker met Flex behaald kunnen worden zijn zonder meer knap, maar de weg tot ervaren gebruiker moet vooral op eigen kracht afgelegd worden. Als besluit kan gezegd worden dat Flex een zeer interessante en aanlokkelijke technologie is die spijtig genoeg niet overtuigt over de ganse lijn. Voor het ontwikkelen van kleine applicaties op een website is dit het perfecte pakket. Flex werkt snel en efficiënt en levert bovendien nog mooie gebruikersinterfaces af. Een kalender, een fotoalbum, het weergeven van statistieken, een formulier of een functionele web front-end zijn slechts enkele van de toepassingen waarvoor Flex uitermate geschikt is. Voor meer complexe toepassingen is Flex echter niet de meest aangewezen techonologie. Het was in de eerste plaats niet eenvoudig de juiste tools te vinden voor de beoogde toepassing en bovendien nog moeilijker die tools met succes in gebruik te nemen. Kortom, het was een aangename eerste kennismaking met deze technologie maar voor het schrijven van een iets complexer project zal Flex toch geen vaste partner worden.

4. BESLUIT Het team heeft bijzonder hard gewerkt aan dit eerste deel. Bij nader inzien is er eigenlijk zelfs veel te veel tijd in gestoken. Bij de eerste kennismaking zag Flex er handig uit, en de eerste resultaten waren erg beloftevol. Bijgevolg heeft elk teamlid onmiddellijk een moeilijke opdracht gekozen om het programma zo indrukwekkend mogelijk te maken. Later volgde dan ook de ontnuchtering, het bleek dat er meer tijd voor nodig was om een applicatie te maken dan dat er gepland was. Bovendien moest er nog extra tijd gevonden worden om alle afzonderlijke componenten samen te brengen tot één werkend geheel. Een tweede minpunt is dat er te weinig het overzicht is bewaard tijdens de uitwerking. Er is veel aandacht gegeven aan het uitzicht van de applicatie, onder andere omdat Flex op dat gebied veel mogelijkheden aanbiedt. Het gevolg was wel dat er over de functionaliteit heel wat minder nagedacht was. Dit probleem heeft dan ook nog wat tijd gevraagd naar de deadline toe. De samenwerking in het team is heel goed gelopen. Er is over de meeste punten nauwelijks discussie geweest, omdat de neuzen vanaf het begin in dezelfde richting wezen. Ook de verdeling van de taken verliep op een heel vloeiende manier, elk teamlid had een bepaald idee over een deel van de applicatie dat hij graag wilde uitwerken. Na dit eerste projectje moet het team enkele belangrijke conclusies trekken die het verloop van de volgende projecten zullen beïnvloeden. Ten eerste moet er beter nagedacht worden over de planning, zodat die realistisch is en de tijdsinschatting niet volledig de mist in gaat. Op deze manier moet het ook mogelijk

zijn om het overzicht beter te bewaren, zodat er gecontroleerd kan worden dat aan alle belangrijke functionaliteiten voldoende aandacht besteed wordt. Een tweede puntje dat het team zeker moet meenemen, is om eraan te denken de implementatie efficiënt op te bouwen. Eerst moet ervoor gezorgd worden dat er binnen de geplande tijd een werkende applicatie voltooid is. Als er dan nog tijd over is kan er over aanvullingen nagedacht worden. Deze opbouw mag zeker niet omgekeerd gebeuren!

5. REFERE TIES [1] De applicatie: BandStart http://wouterth.ulyssis.be/mm/final

[2] Brainstorm Groep 5 op Wiki. http://ariadne.cs.kuleuven.be/mediawiki2/index.php/Groep_5 _-_Sessie_1#Brainstorm

[3] Storyboard v1 Groep 5 op Wiki http://ariadne.cs.kuleuven.be/mediawiki2/index.php/Groep_5 _-_Sessie_1#Storyboard

[4] Storyboard v2 Groep 5 op Wiki http://ariadne.cs.kuleuven.be/mediawiki2/index.php/Groep_5 _-_Sessie_2#Storyboard_v2

[5] Tijdsbesteding Groep 5 op Wiki http://ariadne.cs.kuleuven.be/mediawiki2/index.php/Tijdsbes teding_Groep5

APPE DIX A. APPE DIX: TIJDSBESTEDI G De volledige en gedetailleerde tijdsbesteding voor groep 5 kan gevonden worden op de wiki-pagina van de groep (doorklikken via ‘Tijdsbesteding’ [5]. De tijdsbesteding tijdens de sessies is voor alle teamleden gelijk, op Maarten na. Hij miste de eerste sessie omdat hij pas later van studierichting is veranderd. Iedereen heeft telkens de duur van de volledige sessie gewerkt, wat neerkomt op 13.5u per persoon (9.5u voor Maarten). Elk teamlid heeft buiten de sessie ook zo’n 2 à 3 uur gespendeerd aan het leren werken met Flex. Maarten heeft zich bezig gehouden met de implementatie van het cover-floweffect in Flex. Hieraan besteedde hij ongeveer 7 uur. De taak van Thomas was het ontwerpen van een pagina gewijd aan een band. Dit kostte hem 6 uur. Benjamin zocht en implementeerde een dynamische landkaart voor het onderdeel ‘zoeken volgens locatie’ en was hier ongeveer 7 uur mee zoet. Wouter werkte aparte onderdelen uit (mp3-speler, hoofdmenu, zoekmenu) en spendeerde hier een vijftal uur aan. Er werd ook met het team samen gezeten om alle onderdelen samen te brengen, dat heeft elk teamlid 3 uur gekost. Buiten de pure Flex-implementatie werd er ook tijd gestopt in het zoeken van state-of-the-art, het digitaliseren van het storyboard, het opzetten van de wiki, het schrijven van het verslag en het zoeken naar papers. Wouter heeft zich vooral met de wiki bezig gehouden. Het zoeken naar state-of-the-art, het indelen van de wiki (aanmaken van de verschillende pagina’s) en online plaatsen van de brainstorm en beide storyboards (met extra uitleg) nam in totaal 7 uur in beslag. Benjamin en Thomas besteedden elk 2 uur aan state-of-the-art.

Het verslag tenslotte kostte Benjamin een 3.5 uur, Maarten 3u en Wouter 7.5u. De totale tijdsbesteding binnen en buiten de sessies kan gevonden worden in onderstaande tabel.

aam

Binnen sessie

Buiten sessie

Maarten

9.5u

17u

Thomas

13.5u

12u

Benjamin

13.5u

17u

Wouter

13.5u

22.5u

Ontwerp en implementatie in Flex

Recommend Documents