Web F2PS - UvAEen schets van de gewenste frontend is hieronder weergegeven: Figuur 3.1: Schets van...

Informatic

a—

Univ

ersi

teit

van

Amst

erdam

Supervisor(s): Inge Bethke (UvA)

Signed: Inge Bethke (UvA)

9724095, [email protected]

Menno Bisschops

19 juni 2008

Web F2PS

Bachelor Informatica

Samenvatting

Deze scriptie beschrijft het traject wat ik heb doorlopen om een webapplicatie te ontwikkelen.De applicatie ontwikkel ik in opdracht van Nuon Business. Nuon Business gebruikt momenteeleen windows applicatie om energie-opwekkers te beheren. Deze windows applicatie moet wordenvervangen door een webapplicatie, met behoud van het gebruiksgemak van de windows applicatie.

Inhoudsopgave

1 Inleiding 7

2 Probleemomschrijving 9

2.1 ENSO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

2.2 WKK . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

2.3 De Client . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

3 Opdrachtomschrijving 11

3.1 User-interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

3.2 Webapplicatie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

4 Theorie 15

4.1 Softwareontwikkeling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

4.2 Model-View-Controller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

4.3 Webapplicatie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

4.4 AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

4.5 PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

4.6 Javascript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

4.7 XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

4.8 DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

5 Uitvoering 21

5.1 Plan van aanpak . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

5

5.2 Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

5.3 View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

5.4 Controller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

5.5 Oplossingen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

6 Conclusie 31

7 Documentatie 33

Referenties 51

6

HOOFDSTUK 1

Inleiding

Deze scriptie beschrijft het traject wat ik heb doorlopen om een webapplicatie te ontwikkelen.De applicatie ontwikkel ik in opdracht van Nuon Business. Nuon Business gebruikt momenteeleen windows applicatie om energie-opwekkers te beheren. Deze windows applicatie moet wordenvervangen door een webapplicatie, met behoud van het gebruiksgemak van de windows applicatie.

Ik zal in hoofdstuk 2 een omschrijving geven van het probleem. Hierin komen de opdrachtgever,de energie-opwekkers en de huidige situatie aan bod.

In hoofdstuk 3 ga ik vervolgens verder met het beschrijven van de opdracht. Een schets van deuser-interface en de eisen van de opdrachtgever komen hierin voor.

Daarna beschrijf ik de theorie, waarop ik de uitvoering heb gebaseerd, in hoofdstuk 4. Ik zaldaarin uiteenzetten hoe een software ontwikkelingstraject verloopt, wat een webapplicatie is, enwelke technieken ik gebruik. Ook zal ik de Model-View-Controller(MVC) structuur introduceren.

In hoofdstuk 5 beschrijf ik vervolgens de uitvoering. Per onderdeel van de MVC structuur leg ikuit hoe ik aan de kennis ben gekomen en hoe ik dat tot uitvoering heb gebracht.

Vervolgens sluit ik af met de conclusie in hoofdstuk 6. In de conclusie kijk ik terug en analyseerik of de opdracht is geslaagd. Ik laat zien dat een webapplicatie een prima vervanger kan zijnvan een huidige windows applicatie.

7

HOOFDSTUK 2

Probleemomschrijving

2.1 ENSO

De afdeling Energy Solutions (ENSO) is een afdeling van Nuon Business. De afdeling verzorgt hetbeheer en de exploitatie van energie-installaties van zakelijke klanten. Het grootste deel van deklanten bevindt zich in de glastuinbouw en de woningbouw. ENSO bestaat uit 35 medewerkers,waarvan er 6 verantwoordelijk zijn voor het beheer van de energie-installaties. Deze energie-installaties zijn voornamelijk warmtekrachtkoppeling-centrales (WKK’s).

2.2 WKK

Wikipedia[1] : Een warmtekrachtkoppeling is de gecombineerde opwekking van warmte en elek-triciteit (kracht). Een WKK (zie figuur 2.1) wekt energie op door een motor te laten draaienop aardgas. De motor drijft direct een generator aan die vervolgens elektriciteit opwekt. Bijhet verbranden van aardgas komt warmte en CO2 vrij. Deze warmte wordt vervolgens gebruiktom gebouwen, zwembaden of tuinbouwkassen te verwarmen. Bij de tuinbouwkassen wordt vaakook nog de CO2 gebruikt om de planten beter te laten groeien. Doordat zowel de warmte als deelektricteit wordt benut zijn WKK’s efficienter en milieuvriendelijker dan het gebruik van ketelsom te verwarmen.

De status mogelijkheden van een WKK zijn:

In bedrijf De WKK draait.

Uit bedrijf De WKK staat stil, maar is beschikbaar.

In storing De WKK staat stil en is niet beschikbaar.

Geen communicatie Er is geen communicatie met de WKK, dus de status op lokatie is nietbekend.

9

Figuur 2.1: Foto van een WKK

2.3 De Client

ENSO heeft op dit moment een beheer- en monitoringsysteem draaien om deze WKK’s op afstandte beheren. Elke WKK is aangesloten op een meetsysteem. Dit meetsysteem stuurt zijn gegevensdraadloos via het Mobitex netwerk op naar een database van ENSO. Een in Pascal geschrevenwindows client staat in verbinding met deze database en bevat de volgende functionaliteiten :

• Het live bekijken van de status en het actuele vermogen van de individuele WKK’s.

• Het weergeven van de status en totale vermogen van het hele park.

• Het op afstand aansturen van de WKK’s.

De windows clients staan op dit moment op de 6 pc’s van de beheerders geınstalleerd.

De beheerders van ENSO willen meer flexibiliteit en meer integratie van F2PS met de huidigesystemen.

De windows clients wil ENSO laten vervangen door web-clients. Het voordeel van web-clients isdat de gebruikers ervan met elke webbrowser (Internet explorer/firefox e.a.) op elke PC binnenhet netwerk in kunnen loggen op de F2PS-applicatie. Dit betekent platform-onafhankelijkheid,en ongevoeligheid voor toekomstige wijzigingen van besturingssystemen (overgang naar Vista)en bijbehorende her-installaties van de clients.

Op dit moment zijn een aantal losse applicaties (Rapportages, APX biedingen) uit noodzaakgekoppeld aan F2PS, maar integratie zou efficıenter en professioneler zijn. Deze integraties entoekomstige uitbreidingen van F2PS zijn in de nieuwe situatie gemakkelijker door te voerenomdat het ontwerp dan weer zal voldoen aan de huidige applicatiestandaard (webapplicatie -databasemodel). In de huidige situatie is uitbreiding van de applicatie niet mogelijk.

Met het oog op de toekomst, kan ENSO ook deze nieuwe webapplicatie eenvoudig voor eenbeveiligde internet omgeving ontwikkelen. De beheerders kunnen dan vanaf elke willekeurigeinternetlocatie (thuis, klant, kantoor, enz.) inloggen op het systeem. Er zijn dan bijvoorbeeldmogelijkheden om aparte klantpagina’s te creeren, waar de klant zelf rapportages kan genereren.

10

HOOFDSTUK 3

Opdrachtomschrijving

ENSO wil een nieuwe frontend voor F2PS. De nieuwe frontend dient webbased te zijn en meteen webbrowser te benaderen te zijn vanaf elke werkplek.

3.1 User-interface

De nieuwe frontend moet net zo gebruiksvriendelijk te bedienen zijn als de windows client. Degebruiksvriendelijkheid van de applicatie wordt mede bepaald door :

Repsonsetijd De tijd dat de gebruiker moet wachten op een resultaat na het selecteren van eenWKK.

Overzichtelijkheid De opbouw van het scherm is belangrijk voor het snel kunnen overzien vande algehele status van een WKK.

Uitstraling Als de gebruikte kleuren overeenkomen met de Nuon-huisstijl dan krijgt het geheelde gewenste professionele uitstraling.

Interactiviteit De gebruiker wil snel de gewenste informatie verkijgen door het maken vanselecties en te klikken op items.

11

Een schets van de gewenste frontend is hieronder weergegeven:

Figuur 3.1: Schets van de frontend

In de linkerkolom is het mogelijk een WKK te selecteren. Vervolgens verschijnt in het blauwevlak de huidige status van de WKK. Van links naar rechts en boven naar beneden verschijnen :

Header De naam van het project en het WKK-nummer, met de huidige status.

Status Een overzicht van de verschillende signalen die binnenkomen.

• De tijd waarop de laatste verandering is binnengekomen.• Het actuele terugleververmogen van de WKK.• De status van de vermogensschakelaar.• Het storingssignaal van de WKK.• Het warmtevraagsignaal van de WKK.

Bijzonderheden Een overzicht van bijzonderheden die van toepassing kunnen zijn op de WKK.

Vandaag APX sturing Als de WKK automatisch wordt aangestuurd omdat er vermo-gen is ingeboden op de energiemarkt, dan is dat hier aangegeven.

Op uitsluitingenlijst Als de WKK op een lijst van probleemgevallen staat, dan wordtdat hier weergegeven.

Status handmatig Als de status van de WKK handmatig is aangepast, dan is dat hieraangegeven.

Vermogen handmatig Als het vermogen van de WKK handmatig is aangepast, dan isdat hier aangegeven.

Meer informatie Als een item uit de bijzonderheden wordt aangeklikt, dan verschijnt hier meerinformatie over het item.

Status Een overzicht van de statusveranderingen van vandaag.

Acties Het geselecteerde item uit bijzonderheden kan acties bevatten; deze acties verschijnen indit blok.

Grafiek Een grafiek van het actuele terugleververmogen van de WKK van vandaag.

12

3.2 Webapplicatie

ENSO eist dat de nieuwe frontend volledig te benaderen is met een webbrowser. Op dit momentwordt Nuon breed Internet explorer 6.0 gebruikt. De nieuwe frontend dient minimaal compatibelte zijn met de volgende browsers :

• Internet explorer 6.0

• Internet explorer 7.0

• Firefox 2.0

De webapplicatie dient te worden ontwikkeld op basis van Ajax. Ajax heeft als voordeel dathet de interactiviteit vergroot, waardoor de user-interface vergelijkbaar blijft met de windowsapplicatie.

Als achterliggende database dient een oracle 10.0 database te worden gebruikt. Deze databasebevindt zich in het database-cluster van Nuon.

13

De specificatie van het overzichtsscherm zoals omschreven door Nuon luidt:

Overzichtsscherm Toelichting Prioriteit OpmerkingStatusmodule Onderdeel van de over-

zichtspagina waar de ac-tuele status van een in-stallatie te bekijken is.Ook aangeven of instal-latie die dag wordt ge-stuurd, als installatie opuitsluitingenlijst staat enof F2PS-status handmatigis aangepast.

Must have Status met gekleurdeicoontjes aangegeven.Status kan zijn:

• In bedrijf• Uit bedrijf• In storing• Geen communicatie• Ongedefineerd

Bij ongedefineerd moetextra informatie wordengegeven.

Filter Filtermogelijkheid op:

• Assetmanager• Exploitatiemanager• APX• Onderhoudsfirma• Userdefined

Must have

Selectie Installaties zijn te selecte-ren uit de gefilterde lijstvan projecten. Per instal-latie al de status laten zienin de lijst.

Must have Status met gekleurdeicoontjes aangeven. Vetgedrukt als die dag APXwordt gestuurd.

APX-stuurmodule Onderdeel van de over-zichtspagina waar directeen signaal naar de in-stallatie kan worden ge-stuurd. Bevesting nodigvoor daadwerkelijk sturen.

Must have Signalen :

• Moet aan• Moet uit• Belichting uit• Extern• Belichting extern

APX-statusmodule Overzicht van de uit tevoeren schakelingen voordie dag.

Must have Alleen zichtbaar als daad-werkelijk wordt gestuurddie dag.

Uitsluitingenmodule Ingeven van uitsluitingenper installatie. Keuzelijstvoor uitsluitingsrede. Ditwordt onderdeel van deoverzichtspagina.

Must have Alleen huidige uitsluitingzichtbaar, voor overzichtis de historie te raadple-gen.

Handmatige status-module

Ingeven van een tijdelij-ke status, omdat er geencommunicatie met de in-stallatie mogelijk is.

Must have Alleen huidige aanpassingzichtbaar, voor overzichtis de historie te raadple-gen.

Grafiekmodule Onderdeel van de over-zichtspagina. In grafiekweergeven van de laatste24 uur van de betreffendeinstallatie.

Could have Mogelijkheid om stan-daard grafieksoort aan tepassen. Zie rapportage-module.

Historiemodule Scrollable lijst van de ver-anderingen (queue-in) vande afgelopen paar dagen.

Could have Mogelijkheid om historie-soort aan te passen. Zierapportagemodule.

14

HOOFDSTUK 4

Theorie

4.1 Softwareontwikkeling

De ontwikkeling van software is vaak opgesplitst in een aantal fases, de specificatie fase, deimplementatie fase en de acceptatie fase. Hieronder een beschrijving van de verschillende fases.

Specificatie fase

In de specificatie fase wordt een technischontwerp gemaakt van de applicatie. Een technischont-werp bestaat uit een gedetailleerde beschrijving van de modules van de applicatie, de workflowvan de applicatie en eventuele schetsen van de user-interface. Hoe uitgebreider het technischont-werp hoe eenvoudiger de implementatie kan verlopen.

Implementatie fase

Tijdens de implementatie fase wordt de applicatie gebouwd volgens het technischontwerp.

Acceptatie fase

In de acceptatie fase wordt de applicatie in gebruik genomen en grondig getest. Als alle tests suc-cesvol verlopen wordt het project geaccepteerd. Tijdens de acceptatie fase is er ook gelegenheidvoor de gebruikers om te leren omgaan met de applicatie voordat het daadwerkelijk in gebruikwordt genomen.

Watervalmethode

In de ideale situatie worden de fases na elkaar uitgevoerd. Pas als de specificatie fase is afgerondwordt begonnen met de implementatie fase en na de implementatie fase wordt pas begonnenmet de acceptatie fase. Het vloeiend naar beneden doorlopen van deze fases wordt ook wel de

15

watervalmethode genoemd. In [2, pag. 113-114] is de watervalmethode nog verder opgesplitst inverschillende fases, maar de de bovenstaande drie fases kunnen als hoofdfases worden omschreven.

4.2 Model-View-Controller

Model-view-controller (MVC) is een structuur die kan worden gebruikt bij het ontwerpen enimplementeren van een interactieve applicatie. De structuur is voor het eerst beschreven doorTrygve Reenskaug in 1979. Hij stelt in [3] voor om een applicatie op te splitsen in 3 onderdelen;het model, de view en de controller.

Model

Het model bevat de data die de gebruiker wil zien en bewerken in de applicatie. De data wordtgepresenteerd op een manier zoals die voor de gebruiker logisch en te begrijpen is.

View

De view bevat de manier waarop de gegevens van het model worden gepresenteerd. De viewstelt vragen aan het model en deze stuurt de benodigde gegevens terug. De view bevat opmaak,filters en structuur om de gegevens zo duidelijk mogelijk weer te geven.

Controller

De controller verwerkt gebeurtenissen van de gebruiker. De controller bepaalt aan de hand vande gebeurtenis welke actie moet worden uitgevoerd. Een actie kan bestaan uit het aanpassenvan data in het model of het veranderen van de view.

16

Figuur 4.1: Model-View-Controller

MVC wordt tegenwoordig veel gebruikt in webapplicaties. De view van een webapplicatie is dande HTML, CSS en Javascript code in de browser (client). De controller bestaat voor een deel uitJavascript in de client en voor een deel uit een script op de server. Het model is een representatievan de gegevens uit de onderliggende database. In een webapplicatie worden vaak de volgendestappen doorlopen.

1. De gebruiker veroorzaakt een gebeurtenis (muisklik) in de view.

2. De controller handelt de gebeurtenis af door een query te sturen naar het model.

3. Het model voert de query uit. Het model verandert.

4. De view geeft de verandering weer of de controller bepaalt een andere view.

Door elk onderdeel zo goed mogelijk autonoom te ontwikkelen kunnen eenvoudig nieuwe viewsaan een applicatie worden toegevoegd of een andere bron als model worden gebruikt zonder deandere onderdelen aan te passen. Ook is de code makkelijker te onderhouden.

17

4.3 Webapplicatie

Een webapplicatie is een programma dat op een webserver draait en via een webbrowser kanworden benaderd. Het model van een klassieke webapplicatie ziet er als volgt uit :

Figuur 4.2: Klassieke Webapplicatie

De gebruiker stuurt met de webbrowser een HTTP request naar de webserver. De webservervoert de gevraagde handelingen uit, genereert vervolgens een HTML-pagina met bijbehorendenCSS-opmaak en stuurt deze terug naar de webbrowser. In de tussentijd kan de gebruiker nietsdoen en zal moeten wachten tot de pagina in zijn geheel in de webbrowser is geladen. Als degebruiker een update van de pagina wil zien, dan wordt er weer een HTTP request naar dewebserver gestuurd en deze zal een nieuwe pagina terugsturen.

18

4.4 AJAX

AJAX is een manier om interactieve webapplicaties te ontwikkelen. AJAX staat voor ’Asynchro-nous Javascript And XML’.

AJAX maakt gebruik van het Javascript XMLHttpRequest-object. Dit object wordt door demeest gangbare browsers ondersteund. Met behulp van dit object kan de browser client op deachtergrond http-requests sturen naar de server. Het model van een Ajax webapplicatie ziet erals volgt uit :

Figuur 4.3: Ajax Webapplicatie

De gebruiker laadt de webapplicatie in de webbrowser door middel van een HTTP request. Alsde gebruiker vervolgens een update vraagt van een aantal gegevens op de site, dan wordt er op deachtergrond een HTTP request uitgevoerd door een Javascript script. De server beantwoordt devraag met een XML bestand. Dit bestand wordt vervolgens in de webbrowser door een Javascriptscript verwerkt en de site wordt bijgewerkt, zonder dat een algehele reload van de pagina nodig is.Het op de achtergrond uitvoeren van een HTTP request en het verwerken van het XML bestandwordt gedaan door een AJAX engine. Deze engine is volledig geprogrammeerd in Javascript.Tijdens het uitvoeren van een request kan de gebruiker gewoon met de webapplicatie verderwerken. Er is dus sprake van asynchrone communicatie met de server.

4.5 PHP

PHP is een opensource scripttaal. PHP wordt op webservers gebruikt om dynamische webpagi-na’s te genereren. Binnen klassieke webapplicaties wordt PHP vaak gebruikt om gegevens uit eendatabase te halen en die gegevens om te zetten in HTML en CSS. Binnen AJAX webapplicatiesis een deel van de dynamiek verschoven naar Javascript en wordt PHP meer gebruikt om XMLbestanden te genereren, die door de client worden verwerkt, eventueel op basis van gegevens uiteen database.

19

4.6 Javascript

Javascript is ook een scripttaal en wordt voornamelijk client-side gebruikt in webbrowsers. Metbehulp van Javascript kan de interactiviteit van webapplicatie worden vergroot. Javascript kangebruikersevents afvangen, zoals bewegingen van de muis en toetsaanslagen. Ook veranderingvan velden en timer-events kunnen worden afgevangen. Een andere handige functionaliteit vanJavascript is dat het toegang heeft tot het in 4.8 beschreven Document Object Model en via datobject gegevens van de webpagina kan wijzigen. Deze gegevens kunnen zoals eerder aangegevenasynchroon worden opgehaald van een externe server met behulp van het XMLHttpRequest-object. Javascript is het meest belangrijke onderdeel van AJAX webapplicaties.

4.7 XML

XML staat voor eXtensible Markup Language. XML is een taal waarmee gestructureerde ge-gevens kunnen worden beschreven. Gestructureerde gegevens, bijvoorbeeld een verzameling re-cords, kunnen in een XML bestand worden opgeslagen zonder dat de structuur verloren gaat.Een XML-bestand is een tekstbestand en kan dus eenvoudig worden gelezen. XML bestandenworden gebruikt in AJAX webapplicaties om gegevens van de webserver naar de webbrowserte sturen. Het Javascript programma in de webbrowser verwerkt vervolgens het XML bestanden kan aan de hand van de XML structuur bepalen welke gegevens in het bestand staan. Dezegegevens kunnen worden gebruikt om de webpagina aan te passen via het Document ObjectModel.

4.8 DOM

Het Document Object Model is een object dat toegang geeft tot alle elementen van een webpagina.Het DOM kan met een javascript worden aangesproken. Er kunnen elementen aan het DOMworden toegevoegd, worden verwijderd of worden aangepast. Dit is dan direct terug te zien in dewebpagina. In een op AJAX gebaseerde webpagina is het DOM nodig om gegevens te updatenop de achtergrond.

20

HOOFDSTUK 5

Uitvoering

5.1 Plan van aanpak

Ik ben begonnen met een literatuuronderzoek. Omdat ik een PHP achtergrond heb, heb ik hetboek [4] eerst gelezen. Het boek bevat veel AJAX voorbeelden. Een paar van deze voorbeeldenheb ik getest om te analyseren hoe AJAX in elkaar zit. Na het draaien van een paar voorbeeldscriptjes bleek dat AJAX voornamelijk programmeren is in Javascript. Een ander boek dat bijmijn literatuuronderzoek hoorde is [5]. In [5] wordt beschreven hoe je een webapplicatie kanopzetten op basis van van het model-view-controller principe. Ik heb vervolgens alle voorbeeldscriptjes uit het boek genomen en geprobeerd deze werkend te krijgen. Nadat dit was gelukt hebik de sciptjes aangepast om mijn resultaat te verkrijgen.

De opdracht is om een front-end te maken voor een WKK-beheer systeem. Het beheer systeemzelf kan je zien als een black-box waar meetgegevens uitkomen en aanstuurgegevens ingaan.

Hieronder volgt per onderdeel een beschrijving van mijn uitvoering.

5.2 Model

In [5] wordt een manier beschreven om met Javascript klassen aan te maken. Ik heb die tech-niek ook gebruikt om het model te implementeren. Het model is voor het grootste gedeeltein Javascript geschreven. Het Javascript gedeelte draait in de browser. Hieronder geef ik eenbeschrijving van de gemplementeerde Javascript klassen. Daarna volgt een beschrijving van hetgedeelte wat ik in PHP heb geschreven en op de server draait.

DataModel

De klasse DataModel bestaat uit een aantal SubjectHelper functies en een aantal functies diede gegevens van het model kunnen aanpassen. De functies, welke de gegevens aanpassen, zijn de4 basisoperaties die je op een verzameling gegevens kunt uitvoeren. Dit zijn de CRUD-operaties,Create (insert), Read (select), Update en Delete (remove).

21

SubjectHelper

De SubjectHelper klasse wordt gebruikt om bij te houden welke observeerder bij welke actiemoet worden gewaarschuwd. Een observeerder kan zichzelf aanmelden bij de SubjectHelpervan de update-actie. Op het moment dat de gegevens van het model worden aangepast, wordenalle observeerders hiervan op de hoogte gesteld door middel van een notificatie.

ActiveRecordDataModel

De DataModel klasse heb ik vervolgens uitgebreid naar de ActiveRecordDataModel klasse. Indeze klasse implementeer ik een extra functie, die ik nodig heb voor de applicatie. Ook introduceerik de volgende attributen :

• Items Dit is een lijst van de gegevens van het model. De gegevens van deze applicatie zijnrecords uit de database. De index van de elementen is de primary key van het desbetreffenderecord.

• activeRecordId Dit is de unieke waarde van het actieve record van het model.

• prevActiveRecordId Dit is de unieke waarde van het vorige actieve record van het model.

De volgende functies worden in de klasse geımplementeerd:

insert

Deze functie voegt een record toe aan de Items lijst. Als het record al bestaat in de lijst, danwordt de update functie aangeroepen. Na het toevoegen van het record wordt een onRowsInsertednotificatie uitgevoerd om de aangemelde observeerders te waarschuwen.

read

Deze functie geeft de Items lijst terug.

update

Deze functie werkt het record bij dat bij de meegegeven index hoort en voert een onRowsUpdatednotificatie uit.

remove

Deze functie verwijdert het record uit de Items lijst en voert een onRowsDeleted notificatie uit.

updateActiveRecordId

De enige nieuwe functie die ik in deze klasse implementeer is de functie updateActiveRecordId.Deze functie past de waarde van activeRecordId aan en voert een onActiveRecordIdUpdated

22

notificatie uit, zodat door middel van de SubjectHelper de aangemelde observeerders wordengewaarschuwd.

RemoteDataModel

Vervolgens heb ik de ActiveRecordDataModel klasse weer uitgebreid om een RemoteDataModelte verkrijgen. De RemoteDataModel klasse is een ActiveRecordDataModel klasse aangevuldmet een HttpRequestObject en een callback functie. Dit is van belang om te communicerenmet de server en dus de database. De callback functie verwerkt vervolgens de teruggekomengegevens en laat daarna de observeerders weten dat er een verandering heeft plaatsgevonden inhet datamodel. De volgende attributen zijn onderdeel van de RemoteDataModel klasse:

• handler Dit attribuut bevat een string met de URL waar de requests naar worden gestuurd.Deze string moet worden gevuld voordat een CRUD operatie wordt uitgevoerd.

• m httpRequest Het HttpRequest-object brengt de communicatie met de remote-server totstand.

• readMethodBusy Een char die aangeeft of de functie readMethod is aangeroepen. HetHttpRequest-object kan maar een request tegelijk afhandelen. Door de readMethodBusyte verhogen bij het aanroepen van de readMethod functie, kan worden voorkomen dat ermeerdere requests tegelijkertijd plaatsvinden. De callback functie, welke wordt aangeroepennadat de gegevens van de server zijn teruggekomen, zet deze variabele weer op 0.

• handlerQueue In de handlerQueue staat de handler van de volgende aanroep. De queuebestaat uit ten hoogste 1 handler. Een handler wordt in de queue gezet op het momentdat de read method bezet is. Dus als de variabele readMethodBusy groter is dan 0. Alser al een handler in de queue stond, dan wordt deze overschreven met de nieuwe handler.Er wordt vanuit gegaan dat nieuwe requests de oude requests overbodig maken.

• itemInQueue Deze variabel bevat de waarde true als er een handler in de handlerQueuestaat en nog moet worden uitgevoerd als de readMethod weer vrij is voor gebruik.

• onDataReady Een nieuwe SubjectHelper waar observeerders zich voor kunnen aanmelden.Deze SubjectHelper wordt gebruikt als de data succesvol is teruggekomen van de server.

In de RemoteDataModel klasse zijn ook de volgende 2 functies gemplementeerd :

• read Deze functie bestond al in de ActiveRecordDataModel klasse en zal nu opnieuwworden geımplementeerd. Als deze functie wordt aangeroepen zal het model een requestuitvoeren met de URL die in de handler-variabele is gezet. Een request wordt uitgevoerdmet behulp van het HttpRequest-object. Als het model al een request aan het uitvoerenis, dan zal de nieuwe request, zoals hierboven beschreven, in de queue komen te staan. Alsde request is uitgevoerd zal de callback functie m readComplete worden uitgevoerd om deteruggekomen gegevens te verwerken.

• m readComplete Deze functie is de callback-functie en verwerkt de teruggekomen gegevens.Voordat de gegevens worden verwerkt, wordt eerst gecontroleerd of er nog een request inde queue staat. Als er een nieuwe request in de queue staat, dan wordt de nieuwe requestuitgevoerd zonder dat de net binnengekomen gegevens worden verwerkt. Er wordt vanuitgegaan dat een nieuwe request altijd de meest actuele gegevens ophaalt en daarom wordthet verwerken van de vorige request overgeslagen.

23

HttpRequest

De RemoteDataModel klasse maakt gebruik van de HttpRequest klasse. Deze klasse is de meestbelangrijke en verzorgt de communicatie met de server. Ik heb om de applicatie browser onaf-hankelijk te maken eerst een XHRFactory object aangemaakt.

XHRFactory

Het XHRFactory object bevat de functie createXHR. Deze functie controleert welke browserer wordt gebruikt. Als Internet Explorer 6.0 wordt gebruikt dan wordt een ActiveXObjectaangemaakt. Wordt Internet Explorer 7.0 of een van de W3C browsers gebruikt, dan wordt hetinternet XMLHttpRequest object aangemaakt. Dit object wordt vervolgens teruggegeven doorcreateXHR.

De HttpRequest klasse bestaat uit de volgende attributen:

• handler Deze string bevat de URL waar de request naar toe moet worden gestuurd.

• aysnc Deze boolean variabele geeft aan of de request asynchroon of synchroon moet wordenuitgevoerd.

• responseType Deze string geeft aan wat voor gegevens er terugverwacht mogen worden.In deze applicatie gebruik ik XML.

• httpObj Deze variabele bevat het HttpRequestObject dat aangemaakt is door de XHRFactory.

• response Dit attribuut wordt gevuld met de XML gegevens door de requestCompletefunctie.

• completeCallBack Deze variabele bevat een verwijzing naar de callback functie.

De HttpRequest klasse bevat ook nog de volgende functies:

• get Deze functie voert de daadwerkelijke request uit. Eerst wordt een verbinding met deserver opgezet. Daarna wordt gedefinieerd dat bij elke verandering van de status van hetHttpRequest object, de requestComplete functie moet worden uitgevoerd. Vervolgenswordt de requestHeader op XML gezet en de request verzonden.

• requestComplete Bij elke verandering van de status van het HttpRequest object wordtdeze functie uitgevoerd. Het HttpRequest object kan de volgende status hebben :

– 0 uninitialized

– 1 loading

– 2 loaded

– 3 interactive

– 4 complete

Zodra de status complete is bereikt, wordt het antwoord naar de response variabelegeschreven, waarna de gedefinieerde callback functie wordt aangeroepen.

Het Javascript gedeelte van het model is verreweg het meest belangrijke deel van de webapplicatie.In figuur 5.1 heb ik in UML de hierboven beschreven klassen weergegeven.

24

Figuur 5.1: UML van het model

25

Servermodel

Het server gedeelte van het model heb ik geschreven in PHP. De php code bestaat uit webf2ps.php,module.class.php, database.class.php en error.class.php. Hieronder zal ik beschrijvenwat de belangrijkste functionaliteiten zijn.

webf2ps

De requests van de client roepen allemaal dit script aan. Afhankelijk van de variabele die wordtmeegegeven bij het aanroepen van het script worden er gegevens opgehaald uit de database. Hetophalen uit de database en omzetten in XML wordt gedaan door de module klasse.

module

De module klasse heeft de volgende 3 functies:

• construct De contructor legt de verbinding met de database en maakt alvast het rootelement van het terug te sturen xml-object.

• query De query functie stuurt de in webf2ps geformuleerde query naar de database envoegt het resultaat toe aan het xml-object.

• send xml Deze functie stuurt de xml headers terug naar de client en stuurt het xml-objecter achteraan.

Dat is alles wat er aan de server-kant van het model gebeurd. De database en error klassenzijn standaard klassen. De database klasse draagt zorg voor een goede afwikkeling van decommunicatie met de database en de error klasse zorgt voor nette foutmeldingen.

26

5.3 View

De view is het onderdeel van de model-view-controller waar de gebruiker interactie mee heeften waar de gegevens worden gepresenteerd. Ik heb er voor gekozen om een hoofdpagina temaken met een aantal div-blokken. Elk div-blok heeft zijn eigen view, met als basis een eigenmodel. Ik zal hieronder een beschrijving geven van de view klasse en een manier om een view teimplementeren.

View klasse

De view klasse bestaat uit een aantal attributen en functies. De volgende attributen zijn in deklasse voorgedefinieerd :

• datamodel Dit object wordt gevuld met een RemoteDataModel object. Hierdoor is de viewgekoppeld aan het RemoteDataModel. Het definieren van het model gebeurt buiten de viewklasse door het direct benaderen van het RemoteDataModel.

• div element Deze variabele is een string die wordt gevuld met de naam van het div-blokwaar de view aan is gekoppeld.

• pre innerHTML Deze string bevat de vorige html-code, welke zich in het div-blok bevond.

• timerId Deze variabele bevat een unieke waarde van een eventueel ingestelde timer. Eentimer wordt ingesteld om de gegevens regelmatig te synchroniseren met het model.

De view klasse heeft naast deze attributen nog 2 functies :

• render Deze functie is niet gedefinieerd in de klasse, maar alleen als prototype aangemaakt.Per view is het verschillend hoe de gegevens gerenderd moeten worden. Na het aanmakenvan een view, wordt de render functie geımplementeerd.

• showLoadingIcon Deze functie slaat de oorspronkelijke inhoud van een div-blok op in deprev innerHTML string en vult vervolgens het div-blok met een tekst of icoontje, welkeaangeeft dat nieuwe gegevens worden ingeladen.

Projectlijst

Het aanmaken van een view omvat wel wat meer acties dan het het aanmaken van een viewklasse. Ik zal als voorbeeld beschrijven hoe de view van de projectlijst eruit ziet. De projectlijstview maak ik aan door de constructor van de view klasse aan te roepen.

Vervolgens zet ik de handler van het datamodel op de gewenste URL, in dit geval is dat../backend/webf2ps.php?model=projectlist en het div element attribuut op div projects.Daarna vul ik het div-blok met een HTML-tabel, welke later gevuld wordt door de nog aan temaken render functie.

render functie

De render functie definieer ik daarna en krijgt als input een response variabele. De renderfunctie gebruikt deze variabele om de HTML-tabel te vullen, zodat er een projectlijst ontstaat.

27

De response variabele is een DOM-object en met behulp van de Javascript functies kan destructuur van het DOM-object omgezet worden in de gewenste HTML-code.

Overige functies

Na het definieren van de render functie, definieer ik nog een aantal andere functies, zoals defunctie ActiveRecordDataModel. Deze functie past de opmaak van een rij van de tabel aan omte laten zien wat het actieve record is. Ook definieer ik een functie update. De functie updatepast de handler van het datamodel aan om op die manier updates van de server binnen te halen.De update functie wordt door een timer om de 60 seconden aangeroepen.

Aanmelden SubjectHelper

Als laatste meld ik de render functie aan bij de insert en update SubjectHelper van hetdatamodel, zodat op het moment dat de data in het model verandert, de render functie wordtuitgevoerd.

5.4 Controller

Elke view heb ik op deze manier gedefinieerd. Het enige wat nu nog ontbreekt is het verwerkenvan events die door de gebruikers zijn veroorzaakt. Deze events worden door de controllerafgevangen. De controller bestaat uit een eventmanager.

EventManager

Deze EventManager is een verzameling van attributen en functies. Hieronder een beschrijvingvan de attributen:

• handlerId Deze variabele is een counter. Op het moment dat een event wordt geregistreerdwordt de handlerId opgehoogd en gebruikt.

• elementId Deze variabele is ook een counter en wordt ook opgehoogd op het moment dateen event wordt geregistreerd.

• m elements Dit is een lijst met DOM elementen waaraan events zijn gekoppeld.

De EventManager bevat tevens de volgende functies:

• attachEvent De functie attachEvent wordt gebruikt om een handler te koppelen aaneen bepaalde gebeurtenis van een element. Zo is in het voorbeeld van de projectlijst hetonClick event gekoppeld aan de lijst. Op het moment dat een regel wordt aangekliktdan wordt de desbetreffende handler uitgevoerd. In het voorbeeld is dat een in de viewgedefinieerde onclickevent functie. Deze functie past de waarde van het activeRecordIdvan het model aan. Door de verandering in het model veranderen ook de views.

• m notify Deze functie voert de gekoppelde handler uit op het moment dat er een gebeur-tenis plaatsvindt.

28

RemoteEvent

De RemoteEvent klasse bevat functies om een event om te zetten in een actie op de server. Dooreen RemoteEvent aan te maken en deze met de EventManager te koppelen aan een gebeurtenis,kunnen veranderingen worden doorgevoerd in het model op de server. De attributen en functieszijn gelijk aan de RemoteDataModel attributen en functies.

De controller bestaat dus uit de EventManager, de RemoteEvent klasse en de gedefinieerde eventfuncties in de view.

Het model-view-controller principe is op deze manier toegepast in mijn applicatie.

5.5 Oplossingen

Bij het testen van de applicatie kwam naar boven dat de handlerQueue, zoals ik die in eer-ste instantie had geımplementeerd, perfect werkte, maar daardoor ook de nodige vertragingveroorzaakte. De test bestond uit het veelvuldig klikken in de projectlijst om zodoende dehandlerQueue te vullen met achtereenvolgende requests. De queue werkte toen volgens het FI-FO principe en de requests stapelden zich op in de queue. Het duurde vervolgens enkele secondenvoordat de laatste request werd uitgevoerd. Dit is niet bevordelijk voor de interactiviteit, en ikheb dat probleem als volgt opgelost. Ik heb de handlerQueue niet meer als queue ingesteld,maarals buffer en in de buffer wordt maar maximaal 1 handler toegestaan, zoals beschreven bij dehandlerQueue van de RemoteDataModel klasse. Het voordeel is dat alleen de laatste requesttelkens in de buffer wordt opgeslagen, en na het vrijkomen van server-verbinding deze opdrachtook direct wordt uitgevoerd. Hierdoor is er geen vertraging voor de gebruiker merkbaar. Ik gaer vanuit dat het laatste commando leidend is en de voorgaande daardoor niet meer uitgevoerddienen te worden. Mocht dit wel zo zijn, dan zal de gebruiker dit direct terug zien, omdat zijnvoorgaande requests geen resultaat opleveren.

29

HOOFDSTUK 6

Conclusie

Wat is er bereikt?

Uiteindelijk heb ik bereikt wat ik wilde bereiken, namelijk een webapplicatie met eenzelfde ge-bruiksgemak als de bestaande windows applicatie ontwikkelen. Na het installeren van de webap-plicatie op het intranet van Nuon, heb ik de gebruikers laten omgaan met de nieuwe webappli-catie. De gebruikers en ikzelf zijn erg tevreden over de responstijd van de webapplicatie. Dezeis vergelijkbaar met de windows applicatie. Dit was ook een van de doelstellingen, maar van tevoren had ik niet verwacht dat het gebruiksgemak zo goed kon worden geevenaard.

Hoe zijn de doelstellingen bereikt?

Met behulp van de MVC-methode en het object georienteerd programmeren van Javascript is hetgelukt om de webapplicatie zo modulair mogelijk op te bouwen en kan de applicatie eenvoudigworden uitgebreid met nieuwe functionaliteiten.

Wat heeft dit project bijgedragen?

Dit project is maar een klein deel van de ontwikkeling van het algehele beheersysteem, maar geeftwel een solide basis, waar de resterende functionaliteiten om heen kunnen worden gebouwd.

Is er vastgehouden aan het software ontwikkeltraject?

Ik heb geleerd dat voor het ontwikkelen van een applicatie op dit niveau, niet zomaar de trial-and-error methode kan worden toegepast. Het opsplitsen van het traject in de specificatie fase,implementatie fase en acceptatie fase heeft ervoor gezorgd dat er van te voren goed is nagedachtover de te implementeren modules. Met name in de specifatie fase is naar boven gekomen dathet gescheiden houden van de Model, View en Controller voor een overzichtelijke manier vanprogrammeren zorgt.

31

Welke problemen zijn er opgelost?

Tijdens het uitvoeren van de eerste test ben ik een probleem tegengekomen. Het probleemontstond, zoals ook beschreven in de uitvoering, door veelvuldig andere selecties te maken inde projectlijst, waardoor verzoeken om nieuwe gegevens zich in de queue opstapelden. Hierdoorduurde het enkele seconden voordat het resultaat zichtbaar was. Dit heb ik toen opgelost doorde queue te vervangen door een buffer van grootte 1, waar alleen de laatste opdracht in komt testaan. Hierdoor zal alleen de laatste selectie worden uitgevoerd en gelijk zichtbaar worden voor degebruiker. In eerste instantie had ik verwacht dat de opdrachten in de queue snel genoeg zoudenworden verwerkt, waardoor de gebruiker geen vertraging zou merken en een nette afhandelingvan alle opdrachten kon worden gerealiseerd, maar dit bleek niet het geval te zijn. Omdat hetgaat om gebruikersinteractie waarbij de gebruiker gelijk resultaat ziet, zal de gebruiker sneldoorhebben of zijn verzoek juist is afgehandeld.

Was AJAX een goede keus?

De opdracht was om een webapplicatie te maken. AJAX heeft als voordeel dat een klassiekewebapplicatie voorzien wordt van de mogelijheid om op de achtergrond gegevens op te halen enbij te werken. Hierdoor ervaart de gebruiker geen hinder van het opnieuw inladen van gegevensen kan de gebruiker gewoon blijven doorwerken. AJAX is dus zeker een goede keuze geweest omdit te realiseren. Een webapplicatie op basis van AJAX kan in elke moderne browser wordenuitgevoerd en vereist aan de client-side geen extra installatie. Een alternatief voor AJAX isbijvoorbeeld een Java-applet, maar daarvoor dient te gebruiker wel een Java runtime environmentte installeren en dat is toch weer een extra eis.

Wat kan er nog uitgebreid worden?

Er kan nog veel worden verbeterd aan de code. Ik heb getracht de code zo modulair mogelijkop te bouwen, maar voornamelijk de View-klasse kan nog verder worden uitgebreid om bij deinitialisatie van de view zo min mogelijk code te herhalen. Ook, zoals eerder beschreven, is ditproject maar een klein deel van een groot geheel en zal de applicatie in de nabije toekomst nogverder worden uitgebreid.

Wat zou er anders gedaan kunnen worden?

Ik ben erg tevreden met de implementatie zoals die nu is. Als ik het opnieuw zou doen, dankan ik me voorstellen dat ik met de kennis die ik nu heb opgedaan, de gebruikte klassen nogabstracter kan definieren waardoor de klassen beter zijn her te gebruiken voor andere projecten.

Welke kennis is opgedaan?

Ik heb vooral veel kennis opgedaan van Javascript. Ik wist niet dat de Javascript taal zo veelmogelijkheden had voor object georienteerd programmeren. Ook de Model-View-Controller me-thode, alhoewel ik dat onbewust vaak deels al toepaste, is een methode waar ik veel aan zalhebben in de toekomst.

Ik weet nu wat de kracht is van een webapplicatie op basis van AJAX en dat zal ik mee kunnennemen in de projecten die hierop volgen.

32

HOOFDSTUK 7

Documentatie

Documentation generated by JsDoc Toolkit 2.0.1 on Wed Jun 18 2008 14:08:21 GMT+0200 (CEST)

Namespace console

Is gedefnieerd om browsers die 'console' niet ondersteunen geen fouten te laten genereren.

Defined in: webf2ps.init.js.

Namespace Detail

console

Method Detail

<static> console.log(obj)

Parameters:

obj

Namespace Summary

console

Method Summary

<static> console.log(obj)

33

Namespace webf2ps

Is gedefnieerd om andere naamgevingen niet in de weg te zitten.

Defined in: webf2ps.init.js.

Namespace Summary

webf2ps

Field Summary

<static> webf2ps.FF

Bevat true als de browser "Firefox" is.

<static> webf2ps.IE

Bevat true als de browser "Internet Explorer" is.

<static> webf2ps.IE5

Bevat true als de browser "Internet Explorer 5.0" is.









<static> webf2ps.OP

Bevat true als de browser "Opera" is.

<static> webf2ps.SF

Bevat true als de browser "Safari" is.

<static> webf2ps.ua

Bevat de string, waarmee de browser kan worden geidentificeerd.

<static> webf2ps.XHRFactory

Met behulp van dit object kan een browseronafhankelijk http-request object worden aangemaakt.

Method Summary

<static> webf2ps.attachAfter(oContext, oMember, oAContext,

oAMember)

Deze functie wordt gebruikt om te voorkomen dat events worden vervangen.

<static> webf2ps.close(context, func, params)

34

Namespace Detail

webf2ps

Field Detail

<static> webf2ps.FF

Bevat true als de browser "Firefox" is.

<static> webf2ps.IE

Bevat true als de browser "Internet Explorer" is.











Functie om 'memory leak' bij 'closures' in Internet Explorer te voorkomen.

<static> webf2ps.display(message, div)

Vervangt de HTML van het 'div'-element door 'message'

<static> webf2ps.extend(subClass, baseClass)

Functie om klassen uit te breiden.

<static> webf2ps.implement(klass, interface)

Functie om interfaces te implementeren.

<static> webf2ps.init()

Deze functie maakt alle afzonderlijke views aan.

<static> webf2ps.setTimeout(func, ms)

Timeout functie

<static> webf2ps.startTimer(func, ms)

Timer functie

<static> webf2ps.stopTimer(timer_id)

Stop een bepaalde timer

<static> webf2ps.to_php_date(date)

Functie om een javascript date-object om te zetten in een string die door php kan worden verwerkt.

35

<static> webf2ps.OP

Bevat true als de browser "Opera" is.

<static> webf2ps.SF

Bevat true als de browser "Safari" is.

<static> webf2ps.ua

Bevat de string, waarmee de browser kan worden geidentificeerd.

<static> webf2ps.XHRFactory

Met behulp van dit object kan een browseronafhankelijk http-request object worden aangemaakt. Dit wordt

ook wel de factory-method genoemd.

Defined in: HttpRequest.class.js.

Method Detail

<static> webf2ps.attachAfter(oContext, oMember, oAContext, oAMember)

Deze functie wordt gebruikt om te voorkomen dat events worden vervangen.

Parameters:

oContext

oMember

oAContext

oAMember

<static> webf2ps.close(context, func, params)

Functie om 'memory leak' bij 'closures' in Internet Explorer te voorkomen.

Parameters:

context

func

params

<static> webf2ps.display(message, div)

Vervangt de HTML van het 'div'-element door 'message'

Parameters:

message

div

<static> webf2ps.extend(subClass, baseClass)

Functie om klassen uit te breiden. Nodig voor object georienteerd programmeren in Javascript

Parameters:

subClass

baseClass

<static> webf2ps.implement(klass, interface)

36


Functie om interfaces te implementeren. Nodig voor object georienteerd programmeren in Javascript

Parameters:

klass

interface

<static> webf2ps.init()

Deze functie maakt alle afzonderlijke views aan.

Defined in: views.init.js.

<static> webf2ps.setTimeout(func, ms)

Timeout functie

Parameters:

func

ms

<static> webf2ps.startTimer(func, ms)

Timer functie

Parameters:

func

ms

<static> webf2ps.stopTimer(timer_id)

Stop een bepaalde timer

Parameters:

timer_id

<static> webf2ps.to_php_date(date)

Functie om een javascript date-object om te zetten in een string die door php kan worden verwerkt.

Parameters:

date

37

Class webf2ps.DataModel

Dit is een abstracte klasse van het datamodel.

Defined in: DataModel.class.js.

Class Detail

webf2ps.DataModel()

Field Detail

onRowsDeleted

SubjectHelper om observeerders te koppelen aan verwijderingen uit het model.

onRowsInserted

SubjectHelper om observeerders te koppelen aan toevoegingen aan het model.

onRowsUpdated

SubjectHelper om observeerders te koppelen aan veranderingen in het model.

Method Detail

Class Summary

webf2ps.DataModel()

Field Summary

onRowsDeleted

SubjectHelper om observeerders te koppelen aan verwijderingen uit het model.

onRowsInserted

SubjectHelper om observeerders te koppelen aan toevoegingen aan het model.

onRowsUpdated

SubjectHelper om observeerders te koppelen aan veranderingen in het model.

Method Summary

insert(item, index)

Nog niet geimplementeerde insert functie.

read()

Nog niet geimplementeerde read functie.

remove(index)

Nog niet geimplementeerde remove functie.

update(item, index)

Nog niet geimplementeerde update functie.

38


insert(item, index)

Nog niet geimplementeerde insert functie.

Parameters:

item

index

read()

Nog niet geimplementeerde read functie.

remove(index)

Nog niet geimplementeerde remove functie.

Parameters:

index

update(item, index)

Nog niet geimplementeerde update functie.

Parameters:

item

index

39

Class webf2ps.ActiveRecordDataModel

Extends webf2ps.DataModel.

Dit is een extensie van de DataModel klasse.

Defined in: ActiveRecordDataModel.class.js.

Fields borrowed from class webf2ps.DataModel:

onRowsDeleted, onRowsInserted, onRowsUpdated

Class Detail

webf2ps.ActiveRecordDataModel()

Field Detail

Items

Array van records. Hierin staan de gegevens van het model.

onActiveRecordIdUpdated

Class Summary

webf2ps.ActiveRecordDataModel()

Field Summary

Items

Array van records.

onActiveRecordIdUpdated

SubjectHelper om observeerders te koppelen aan veranderingen van het activerecord van het model.

Method Summary

insert(item, index)

Implementatie van de insert functie.

read(query)

Geeft de Items-array terug (leest het model).

remove(index)

Niet geimplementeerd.

update(item, index)

Werkt het item bij en laat de subjecthelper weten dat er een item is bijgewerkt.

updateActiveRecordId(item)

Verandert het activerecord en laat de subjecthelper weten dat de selectie is gewijzigd.

40


SubjectHelper om observeerders te koppelen aan veranderingen van het activerecord van het model.

Method Detail

insert(item, index)

Implementatie van de insert functie. Deze voegt het item toe aan de Items-array en laat de subjecthelper

weten dat er een item is toegevoegd.

Parameters:

item

index

read(query)

Geeft de Items-array terug (leest het model).

Parameters:

query

remove(index)

Niet geimplementeerd. Er komen geen verwijderingen voor in dit model

Parameters:

index

update(item, index)

Werkt het item bij en laat de subjecthelper weten dat er een item is bijgewerkt.

Parameters:

item

index

updateActiveRecordId(item)

Verandert het activerecord en laat de subjecthelper weten dat de selectie is gewijzigd.

Parameters:

item

41

Class webf2ps.RemoteDataModel

Extends webf2ps.ActiveRecordDataModel.

Deze klasse is een extensie van de ActiveRecordDataModel klasse.

Defined in: RemoteDataModel.class.js.

Fields borrowed from class webf2ps.ActiveRecordDataModel:

Items, onActiveRecordIdUpdated

Fields borrowed from class webf2ps.DataModel:

onRowsDeleted, onRowsInserted, onRowsUpdated

Methods borrowed from class webf2ps.ActiveRecordDataModel:

insert, remove, update, updateActiveRecordId

Class Detail

webf2ps.RemoteDataModel(items)

Parameters:

Class Summary

webf2ps.RemoteDataModel(items)

Field Summary

handler

De URL die wordt gebruikt voor de HTTP-request naar de server

itemInQueue

Variabele om bij te houden of er een nieuwe request klaarstaat.

m_httpRequest

Intern HTTP-request object.

onDataReady

Deze subjecthelper wordt gebruikt om observeerders te laten weten dat de data klaar is om gebruikt te worden.

readMethodBusy

Variabele om bij te houden of er al een HTTP-request wordt uitgevoerd.

Method Summary

m_readComplete(serverResponseArgs)

Deze functie is de callback-functie en verwerkt de teruggekomen gegevens.

read()

Als deze functie wordt aangeroepen zal het model een request uitvoeren met de URL die in de handler-variabele is gezet.

42


items

Field Detail

handler


itemInQueue


m_httpRequest


onDataReady

Deze subjecthelper wordt gebruikt om observeerders te laten weten dat de data klaar is om gebruikt te

worden.

readMethodBusy


Method Detail

m_readComplete(serverResponseArgs)

Deze functie is de callback-functie en verwerkt de teruggekomen gegevens. Voordat de gegevens worden

verwerkt, wordt eerst gecontroleerd of er nog een request in de queue staat. Als er een nieuwe request in de

queue staat, dan wordt de nieuwe request uitgevoerd zonder dat de net binnengekomen gegevens worden

verwerkt. Er wordt vanuit gegaan dat een nieuwe request altijd de meest actuele gegevens ophaalt en daarom

wordt het verwerken van de vorige request overgeslagen.

Parameters:

serverResponseArgs

read()

Als deze functie wordt aangeroepen zal het model een request uitvoeren met de URL die in de handler-

variabele is gezet. Een request wordt uitgevoerd met behulp van het HttpRequest-object. Als het model al een

request aan het uitvoeren is, dan zal de nieuwe request in de queue komen te staan. Als de request is

uitgevoerd zal de callback functie m_readComplete worden uitgevoerd om de teruggekomen gegevens te

verwerken.

43


Class webf2ps.View

Dit is de klasse waar views op zijn gebaseerd.

Defined in: View.class.js.

Class Detail

webf2ps.View()

Field Detail

datamodel

RemoteDataModel object, om de koppeling tussen de view en het datamodel tot stand te brengen.

Method Detail

init()

Niet (hier) geimplementeerd.

render(args)


Parameters:

args

showLoadingIcon()

Laten zien van een icoontje of melding dat de view opnieuw wordt ingeladen.

Class Summary

webf2ps.View()

Field Summary

datamodel

RemoteDataModel object, om de koppeling tussen de view en het datamodel tot stand te brengen.

Method Summary

init()


render(args)


showLoadingIcon()

Laten zien van een icoontje of melding dat de view opnieuw wordt ingeladen.

44

Class webf2ps.ISubject

Dit is een interface klasse, welke als basis dient voor de subjecthelper klasse.

Defined in: ISubject.class.js.

Class Detail

webf2ps.ISubject()

Field Detail

guid

Counter die wordt opgehoogd om elke observeerder een eigen id te geven.

observers

Lijst met observeerders.

Method Detail

notify(eventArgs)

Deze functie laat elke aangemelde observeerder weten dat er een verandering heeft plaatsgevonden.

Parameters:

eventArgs

subscribe(observer)

Met deze functie worden observeerders aangemeld bij de subjecthelper.

Class Summary

webf2ps.ISubject()

Field Summary

guid


observers


Method Summary

notify(eventArgs)

Deze functie laat elke aangemelde observeerder weten dat er een verandering heeft plaatsgevonden.

subscribe(observer)

Met deze functie worden observeerders aangemeld bij de subjecthelper.

unSubscribe(guid)

Met deze functie kunnen observeerders zich afmelden.

45


Parameters:

observer

unSubscribe(guid)

Met deze functie kunnen observeerders zich afmelden.

Parameters:

guid

46


Class webf2ps.SubjectHelper

Extends webf2ps.ISubject.

Dit is een klasse waar een subjecthelper mee kan worden aangemaakt, bij een subjecthelper kunnen

observeerders zich aanmelden om gewaarschuwd te worden voor bepaalde gebeurtenissen.

Defined in: SubjectHelper.class.js.

Methods borrowed from class webf2ps.ISubject:

notify, subscribe, unSubscribe

Class Detail

webf2ps.SubjectHelper()

Field Detail

guid


observers


Class Summary

webf2ps.SubjectHelper()

Field Summary

guid


observers


47

Class webf2ps.EventManager

Met behulp van deze klasse worden events aan elementen gekoppeld.

Defined in: EventManager.class.js.

Class Detail

webf2ps.EventManager()

Maak een EventManager object aan. Dit is een Singleton object.

Field Detail

<static> webf2ps.EventManager.elementId

Counter die telkens wordt opgehoogd om een nieuw elementId uit te geven.

<static> webf2ps.EventManager.handlerId

Counter die telkens wordt opgehoogd om een nieuwe handlerId uit te geven.

<static> webf2ps.EventManager.m_elements

Lijst met DOM elementen waaraan events zijn gekoppeld.

Method Detail

<static> webf2ps.EventManager.attachEvent(element, type, handler, context,

capture)

Class Summary

webf2ps.EventManager()

Maak een EventManager object aan.

Field Summary

<static> webf2ps.EventManager.elementId

Counter die telkens wordt opgehoogd om een nieuw elementId uit te geven.

<static> webf2ps.EventManager.handlerId

Counter die telkens wordt opgehoogd om een nieuwe handlerId uit te geven.

<static> webf2ps.EventManager.m_elements

Lijst met DOM elementen waaraan events zijn gekoppeld.

Method Summary

<static> webf2ps.EventManager.attachEvent(element, type, handler,

context, capture)

Wordt gebruikt om een handler te koppelen aan een bepaalde gebeurtenis van een element.

<static> webf2ps.EventManager.m_notify(eventObj, element)

Deze functie voert de gekoppelde handler uit op het moment dat er een gebeurtenis plaatsvindt.

48


Wordt gebruikt om een handler te koppelen aan een bepaalde gebeurtenis van een element.

Parameters:

element

type

handler

context

capture

<static> webf2ps.EventManager.m_notify(eventObj, element)

Deze functie voert de gekoppelde handler uit op het moment dat er een gebeurtenis plaatsvindt.

Parameters:

eventObj

element

49

Class webf2ps.RemoteEvent

Deze klasse wordt gebruikt om aanpassingen aan het model uit te voeren op basis van een event.

Defined in: RemoteEvent.class.js.

Class Detail

webf2ps.RemoteEvent()

Field Detail

handler


itemInQueue


m_httpRequest


onSentReady

Subjecthelper om observeerders te laten weten dat het versturen is gelukt.

Class Summary

webf2ps.RemoteEvent()

Field Summary

handler


itemInQueue


m_httpRequest


onSentReady

Subjecthelper om observeerders te laten weten dat het versturen is gelukt.

writeMethodBusy


Method Summary

m_writeComplete(serverResponseArgs)

Deze functie is de callback-functie en verwerkt de teruggekomen meldingen.

write()

Als deze functie wordt aangeroepen zal de controller een request uitvoeren met de URL die in de handler-variabele is gezet.

50


writeMethodBusy


Method Detail

m_writeComplete(serverResponseArgs)

Deze functie is de callback-functie en verwerkt de teruggekomen meldingen. Daarna wordt de subjecthelper

gewaarschuwd dat het versturen is gelukt.

Parameters:

serverResponseArgs

write()

Als deze functie wordt aangeroepen zal de controller een request uitvoeren met de URL die in de handler-

variabele is gezet. Een request wordt uitgevoerd met behulp van het HttpRequest-object. Als de controller al

een request aan het uitvoeren is, dan zal de nieuwe request in de queue komen te staan. Als de request is

uitgevoerd zal de callback functie m_writeComplete worden uitgevoerd om de teruggekomen meldingen te

verwerken.

51

Referenties

[1] Wikipedia-bijdragers. Warmtekrachtkoppeling — wikipedia, de vrije encyclopedie, 2008.http://nl.wikipedia.org/wiki/Warmtekrachtkoppeling.

[2] Christian W. Dawson. Projects in Computing and Information Systems. Addison Wesley,2005.

[3] Trygve Reenskaug. Models - views - controllers. http://hjem.ifi.uio.no/trygver/, 1979.

[4] Cristian Darie, Bogdan Brinzarea, Filip Chereches-Tosa, and Mihai Bucica. AJAX and PHP.Packt Publishing, 2006.

[5] David Johnson, Alexei White, and Andre Charland. Enterprise Ajax. Prentice Hall, 2007.

53

Web F2PS - UvAEen schets van de gewenste frontend is hieronder weergegeven: Figuur 3.1: Schets van...

Documents

Transcript of Web F2PS - UvAEen schets van de gewenste frontend is hieronder weergegeven: Figuur 3.1: Schets van...