Skip to content

6. Flex-clients van de afspraakservice JEE

We presenteren nu twee Flex-clients van de webdienst JEE voor afspraken. De gebruikte IDE is Flex Builder 3. Een demoversie van dit product kan worden gedownload via de URL [https://www.adobe.com/cfusion/tdrc/index.cfm?loc=fr_fr&product=flex]. Flex Builder 3 is een IDE Eclipse. Om de Flex-client uit te voeren, gebruiken we bovendien een Apache-webserver van de Wamp-tool [http://www.wampserver.com/]. Elke Apache-server is hiervoor geschikt. De browser die de Flex-client weergeeft, moet beschikken over de Flash Player-plug-in, minimaal versie 9.

Flex-applicaties hebben als bijzonderheid dat ze binnen de Flash Player-plug-in van de browser worden uitgevoerd. In dat opzicht lijken ze op Ajax-applicaties, die in de naar de browser verzonden pagina’s JavaScript-scripts insluiten die vervolgens binnen de browser worden uitgevoerd. Een Flex-toepassing is geen webtoepassing in de gebruikelijke zin van het woord: het is een clienttoepassing voor diensten die door webservers worden geleverd. In dat opzicht is het vergelijkbaar met een desktoptoepassing die als client voor diezelfde diensten zou fungeren. Er is echter één verschil: de toepassing wordt in eerste instantie gedownload vanaf een webserver naar een browser die is uitgerust met de Flash Player-plug-in die de toepassing kan uitvoeren.

Net als een desktopapplicatie bestaat een Flex-applicatie hoofdzakelijk uit twee onderdelen:

  • een presentatiegedeelte: de weergaven die in de browser worden getoond. Deze weergaven zijn net zo rijk aan functies als de vensters van desktopapplicaties. Een weergave wordt beschreven met behulp van een opmaaktaal genaamd MXML.
  • een codegedeelte dat voornamelijk de gebeurtenissen afhandelt die worden veroorzaakt door acties van de gebruiker op de weergave. Deze code kan ook worden geschreven in MXML of in een objectgeoriënteerde taal genaamd ActionScript. Er moet onderscheid worden gemaakt tussen twee soorten gebeurtenissen:
  • de gebeurtenis waarbij communicatie met de webserver nodig is: het vullen van een lijst met gegevens die door een webapplicatie worden aangeleverd, het verzenden van formuliergegevens naar de server, … Flex biedt een aantal methoden om op een voor de ontwikkelaar transparante manier met de server te communiceren. Deze methoden zijn standaard asynchroon: de gebruiker kan tijdens het verzoek aan de server gewoon verdergaan met de interactie met de weergave.
  • de gebeurtenis waarbij de weergegeven weergave wordt gewijzigd zonder gegevensuitwisseling met de server, bijvoorbeeld het slepen van een item uit een boomstructuur om het in een lijst neer te zetten. Dit type gebeurtenis wordt volledig lokaal binnen de browser afgehandeld.

Een Flex-toepassing wordt vaak als volgt uitgevoerd:

  • in [1] wordt een HTML-pagina opgevraagd
  • in [2] wordt deze verzonden. Deze bevat een binair bestand SWF (ShockWave Flash) met daarin de volledige Flex-toepassing: alle weergaven en de bijbehorende code voor het afhandelen van gebeurtenissen. Dit bestand wordt uitgevoerd door de plug-in FlashPlayer van de browser.
  • De Flex-client wordt lokaal in de browser uitgevoerd, behalve wanneer deze externe gegevens nodig heeft. In dat geval vraagt de client deze op bij de server [3]. De client ontvangt de gegevens in [4] in verschillende formaten: XML of binair. De op de webserver aangeroepen applicatie kan in elke willekeurige programmeertaal zijn geschreven. Het enige dat telt, is het formaat van het antwoord.

We hebben de uitvoeringsarchitectuur van een Flex-toepassing beschreven, zodat de lezer het verschil goed begrijpt tussen deze architectuur en die van een klassieke webtoepassing zonder Ajax, zoals de eerder beschreven toepassing Asp.Net. In die laatste is de browser passief: hij geeft eenvoudigweg HTML-pagina’s weer die op de webserver zijn opgebouwd en door de server naar de browser worden verzonden.

Hieronder geven we twee voorbeelden van Flex-clients, uitsluitend om de diversiteit aan clients van een webservice te illustreren. Aangezien de auteur zelf een Flex-beginner is, zullen sommige punten wellicht niet zo gedetailleerd worden behandeld als zou moeten.

6.1. Een eerste Flex-client

We schrijven nu een eerste Flex-client om de lijst met klanten weer te geven. De client/server-architectuur die we opzetten, ziet er als volgt uit:

In deze architectuur zijn er twee webservers:

  • de Glassfish-server die de externe webservice uitvoert
  • de Apache-server waarop de Flex-client van de externe webservice draait

We bouwen de Flex-client met IDE Flex Builder 3:

  • in Flex Builder 3 maken we een nieuw project aan in [1]
  • we geven het een naam in [2] en we geven in [3] aan in welke map het moet worden gegenereerd
  • in [4] geef je de hoofdtoepassing (die zal worden uitgevoerd) een naam
  • in [5] wordt het project, zodra het is gegenereerd
  • in [6], het hoofdbestand van de applicatie MXML
  • een bestand MXML bevat een weergave en de code voor het beheer van de gebeurtenissen van deze weergave. Het tabblad [Source] [7] geeft toegang tot het bestand MXML. Daarin bevinden zich <mx>-tags die de weergave beschrijven, evenals ActionScript-code.
  • De weergave kan grafisch worden opgebouwd met behulp van het tabblad [Design] [8]. De MXML-tags die de weergave beschrijven, worden dan automatisch gegenereerd in het tabblad [Source]. Het omgekeerde geldt ook: de MXML-tags die rechtstreeks in het tabblad [Source] worden toegevoegd, worden grafisch weergegeven in het tabblad [Design].

Net zoals bij de eerdere C#-clients en Asp.Net gaan we de lokale C-proxy [B] genereren voor de externe webservice S [A]:

Om de C-proxy te kunnen genereren, moet de webservice JEE actief zijn.

  • in [1] de optie Data / Import Web Service
  • in [2] de map selecteren waarin de klassen en interfaces van de C-proxy moeten worden gegenereerd.
  • in [3], voer de Uri in van het bestand WSDL van de externe webservice S (zie paragraaf 4.10.2) en ga vervolgens naar de volgende stap
  • in [4] en [5]: de webservice die wordt beschreven door het bestand WSDL, aangegeven in [3]
  • in [6]: de lijst met methoden die voor de C-proxy zullen worden gegenereerd. Merk op dat dit niet de daadwerkelijke methoden van de S-service zijn. Ze hebben niet de juiste handtekening. Hier heeft elke weergegeven methode één enkele parameter, ongeacht het aantal parameters van de daadwerkelijke methode van de webservice. Deze enige parameter is een klasse-instantie die in haar velden de parameters bevat die door de externe methode worden verwacht.
  • in [7]: het pakket waarin de klassen en interfaces van de C-proxy zullen worden gegenereerd
  • in [8]: de naam van de lokale klasse die als proxy naar de externe webservice zal fungeren
  • in [9]: de wizard afsluiten.
  • in [10]: de lijst met klassen en interfaces van de gegenereerde C-proxy.
  • in [11]: de klasse [WsDaoJpaService] die de methoden van de C-proxy implementeert.

De gegenereerde klasse [WsDaoJpaService] implementeert de volgende interface [IWsDaoJpaService]:


/**
 * Service.as
 * This file was auto-generated from WSDL by the Apache Axis2 generator modified by Adobe
 * Any change made to this file will be overwritten when the code is re-generated.
 */
package generated.webservices{
    import mx.rpc.AsyncToken;
    import flash.utils.ByteArray;
    import mx.rpc.soap.types.*;
               
    public interface IWsDaoJpaService
    {
        //Stub-functies voor de bewerking getAllClients
        /**
         * Call the operation on the server passing in the arguments defined in the WSDL file
         * @param getAllClients
         * @return An AsyncToken
         */
        function getAllClients(getAllClients:GetAllClients):AsyncToken;
....
        function getAllClients_send():AsyncToken;
...
        function get getAllClients_lastResult():GetAllClientsResponse;
...
        function set getAllClients_lastResult(lastResult:GetAllClientsResponse):void;
...
       function addgetAllClientsEventListener(listener:Function):void;
...
        function get getAllClients_request_var():GetAllClients_request;
...
        function set getAllClients_request_var(request:GetAllClients_request):void;
...
    }
}
  • regel 11: de interface [IWsDaoJpaService] geïmplementeerd door de klasse [WsDaoJpaService]
  • regels 19-31: de verschillende gegenereerde methoden voor de methode getAllClients() van de externe webservice. De enige die in de buurt komt van de methode die daadwerkelijk door de webservice wordt blootgesteld, is die op regel 19. Deze heeft wel de juiste naam, maar niet de juiste handtekening: de methode getAllClients() van de externe webservice heeft geen parameters.

De enige parameter van de methode getAllClients van de gegenereerde C-proxy is van het type GetAllClients, namelijk:


/**
 * GetAllClients.as
 * This file was auto-generated from WSDL by the Apache Axis2 generator modified by Adobe
 * Any change made to this file will be overwritten when the code is re-generated.
 */

package generated.webservices
{
    import mx.utils.ObjectProxy;
    import flash.utils.ByteArray;
    import mx.rpc.soap.types.*;
    /**
     * Wrapper class for a operation required type
     */
    
    public class GetAllClients
    {
        /**
         * Constructor, initializes the type class
         */
        public function GetAllClients() {}
            
    }
}

Dit is een lege klasse. Dit zou erop kunnen wijzen dat de doelmethode getAllClients geen parameters toestaat.

Laten we nu eens kijken naar de gegenereerde klassen voor de entiteiten Medecin, Client, Rv en Creneau. Laten we bijvoorbeeld eens kijken naar de klasse Client:


package generated.webservices
{
    import mx.utils.ObjectProxy;
    import flash.utils.ByteArray;
    import mx.rpc.soap.types.*;
    
    public class Client extends generated.webservices.Personne
    {
        public function Client() {}
            
    }
}

De klasse Client is eveneens leeg. Deze is (regel 7) afgeleid van de volgende klasse Personne:


package generated.webservices
{
    import mx.utils.ObjectProxy;
    import flash.utils.ByteArray;
    import mx.rpc.soap.types.*;
    
    public class Personne
    {
        public function Personne() {}
            
        public var id:Number;
        public var nom:String;
        public var prenom:String;
        public var titre:String;
        public var version:Number;
    }
}
  • regels 11-15: hier vinden we de attributen van de klasse Personne die is gedefinieerd binnen de webservice JEE.

We hebben nu de belangrijkste elementen van de C-proxy. We kunnen deze nu gebruiken.

Het hoofdbestand [rdvmedecins01.xml] van de client is als volgt:


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init();">
    <mx:Script>
        <![CDATA[
            import generated.webservices.Client;
...
            
            // gegevens
            private var ws:WsDaoJpaService;
            [Bindable]
            private var clients:ArrayCollection;
            
            private function init():void{
...
            }
            
            private function loadClients():void{
...
            }
            
...            
            private function displayClient(client:Client):String{
...
            } 
        ]]>
    </mx:Script>
    <mx:Label text="Liste des clients" fontSize="14"/>
    <mx:List dataProvider="{clients}" labelFunction="displayClient"></mx:List>
    <mx:Button label="Afficher les clients" click="loadClients()"/>
    <mx:Text id="txtMsgErreur" width="454" height="75"/>
    
</mx:Application>

In deze code moeten verschillende zaken worden onderscheiden:

  • de definitie van de applicatie (regel 2)
  • de beschrijving van de weergave ervan (regels 27-30)
  • de gebeurtenishandlers in de taal ActionScript binnen de tag <mx:Script> (regels 3-26).

Laten we om te beginnen de definitie van de applicatie zelf en de beschrijving van de weergave ervan toelichten:

  • regel 2: definieert
    • de manier waarop de componenten in de container van de weergave worden gerangschikt. Het attribuut layout="vertical" geeft aan dat de componenten onder elkaar komen te staan.
    • de methode die moet worden uitgevoerd zodra de weergave is geïnstantieerd, c.a.d. het moment waarop alle componenten zijn geïnstantieerd. Het attribuut creationComplete="init();" geeft aan dat de methode init op regel 13 moet worden uitgevoerd. creationComplete is een van de gebeurtenissen die de klasse Application kan genereren.
  • De regels 27-30 definiëren de componenten van de weergave
  • regel 27: definieert een tekst
  • regel 28: een lijst waarin de lijst met klanten wordt geplaatst. De tag dataProvider="{clients}" geeft de bron aan van de gegevens waarmee de lijst moet worden gevuld. Hier wordt de lijst gevuld met het object clients dat in regel 11 is gedefinieerd. Om dataProvider="{clients}" te kunnen schrijven, moet het veld clients het attribuut [Bindable] hebben (regel 10). Dit attribuut maakt het mogelijk om buiten de tag <mx:Script> naar een variabele ActionScript te verwijzen. Het veld clients is van het type ArrayCollection, een type ActionScript waarmee lijsten met objecten kunnen worden opgeslagen, in dit geval een lijst met objecten van het type Client.
  • regel 29: een knop. De gebeurtenis click ervan wordt afgehandeld. Het attribuut click="loadClients()" geeft aan dat de methode loadClients uit regel 17 moet worden uitgevoerd wanneer er op de knop wordt geklikt. Deze knop zal het verzoek aan de webservice voor de klantenlijst activeren.
  • regel 30: een tekstvak bedoeld om een eventuele foutmelding weer te geven die door de server zou worden teruggestuurd naar aanleiding van het vorige verzoek.

De regels 27-30 genereren de volgende weergave in het tabblad [Design]:

  • [1]: is gegenereerd door de component Label uit regel 27
  • [2]: is gegenereerd door de component List uit regel 28
  • [3]: is gegenereerd door de component Button van regel 29
  • [4]: is gegenereerd door de component Text van regel 30
  • [5]: een uitvoervoorbeeld

Laten we nu eens kijken naar de code ActionScript op de pagina. Deze code regelt de gebeurtenissen in de weergave.


<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import generated.webservices.Client;
...
            
            // gegevens
            private var ws:WsDaoJpaService;
            [Bindable]
            private var clients:ArrayCollection;
            
            private function init():void{
                // de webdienstproxy wordt geïnstantieerd
                ws=new WsDaoJpaService();
                // de gebeurtenishandlers worden geconfigureerd
                ws.addgetAllClientsEventListener(loadClientsCompleted);
                ws.addEventListener(FaultEvent.FAULT,loadClientsFault);
            }
            
            private function loadClients():void{
                // de lijst met clients wordt opgevraagd
                ws.getAllClients(new GetAllClients());
            }
            
            private function loadClientsCompleted(event:GetAllClientsResultEvent):void{
                // de klanten worden opgehaald uit het verzonden resultaat
                clients=event.result as ArrayCollection;
            }
            
            private function loadClientsFault(event:FaultEvent):void{
                // de foutmelding wordt weergegeven
                txtMsgErreur.text=event.fault.message;
            }
            
            private function displayClient(client:Client):String{
                // een klant weergeven
                return client.nom + " " + client.prenom;
            } 
        ]]>
    </mx:Script>
    <mx:Label text="Liste des clients" fontSize="14"/>
    <mx:List dataProvider="{clients}" labelFunction="displayClient"></mx:List>
    <mx:Button label="Afficher les clients" click="loadClients()"/>
<mx:Text id="txtMsgErreur" width="454" height="75"/>
  • regel 9: ws verwijst naar de C-proxy van het type WsDaoJpaService, de eerder gegenereerde klasse die de methoden voor toegang tot de externe webservice implementeert.
  • regel 13: de methode init die wordt uitgevoerd wanneer de weergave is geïnstantieerd (regel 1)
  • regel 15: er wordt een instantie van proxy C aangemaakt
  • regel 17: er wordt een gebeurtenishandler gekoppeld aan de gebeurtenis "de asynchrone methode GetAllClients is succesvol voltooid". Voor elke methode m van de externe webservice implementeert de C-proxy een methode addmEventListener waarmee een handler kan worden gekoppeld aan de gebeurtenis "de asynchrone methode m is succesvol voltooid". Hier geeft regel 17 aan dat de methode loadClientsCompleted op regel 26 moet worden uitgevoerd wanneer de Flex-client de lijst met clients heeft ontvangen.
  • regel 18: er is een gebeurtenishandler gekoppeld aan de gebeurtenis "een asynchrone methode van de C-proxy is mislukt". Hier geeft regel 18 aan dat de methode loadClientsFault uit regel 31 moet worden uitgevoerd telkens wanneer een asynchroon verzoek van de C-proxy naar de webservice S mislukt. Hier is het enige verzoek dat wordt gedaan het verzoek om de lijst met klanten.
  • Uiteindelijk heeft de methode init op regel 13 de C-proxy geïnstantieerd en gebeurtenishandlers gedefinieerd voor het asynchrone verzoek dat later zal worden gedaan.
  • regel 21: de methode die wordt uitgevoerd wanneer op de knop [Afficher les clients] (regel 44) wordt geklikt
  • regel 23: de asynchrone methode getAllClients van proxy C wordt uitgevoerd. Hieraan wordt een instantie GetAllClients doorgegeven die de parameters van de aangeroepen externe methode moet inkapselen. In dit geval zijn er geen parameters. Er wordt een lege instantie aangemaakt. De methode getAllClients is asynchroon. De uitvoering gaat verder zonder te wachten op de gegevens die door de server worden teruggestuurd. De gebruiker kan met name blijven interageren met de weergave. De gebeurtenissen die hij veroorzaakt, worden nog steeds afgehandeld. Dankzij de methode init weten we dat:
    • de methode loadClientsCompleted (regel 26) wordt uitgevoerd zodra de Flex-client de lijst met klanten heeft ontvangen
    • de methode loadClientsFault (regel 31) wordt uitgevoerd als het verzoek met een fout afloopt.
  • regel 28: de klantenlijst wordt opgehaald in de gebeurtenis. We weten dat de methode getAllClients van de externe webservice een lijst retourneert. Deze plaatsen we in het veld clients op regel 11. Er is een typeconversie nodig. Aangezien de lijst op regel 43 gekoppeld is (Bindable) aan het veld ‘clients’, krijgt deze een melding dat de gegevens zijn gewijzigd. Vervolgens wordt de lijst met klanten weergegeven. Elk element van de lijst clients wordt weergegeven met de methode displayClient (regel 43).
  • regel 36: de methode displayClient ontvangt een type Client. Deze moet de tekenreeks retourneren die de lijst voor deze klant moet weergeven. In dit geval de voor- en achternaam (regel 38).
  • regel 31: de methode die wordt uitgevoerd wanneer een verzoek aan de webservice mislukt. Deze ontvangt een parameter van het type FaultEvent. Deze klasse heeft een veld fault dat de door de server geretourneerde fout bevat. fault.message is het bericht dat bij de fout hoort.
  • regel 33: de foutmelding wordt weergegeven in het daarvoor bestemde tekstveld.

Toen de applicatie werd gebouwd, werd de uitvoerbare code opgeslagen in de map [bin-debug] van het Flex-project:

Hierboven

  • is het bestand [rdvmedecins01.html] het HTML-bestand dat door de browser bij de webserver wordt opgevraagd om de Flex-client te verkrijgen
  • is het bestand [rdvmedecins01.swf] het binaire bestand van de Flex-client dat wordt ingekapseld in de HTML-pagina die naar de browser wordt verzonden en vervolgens wordt uitgevoerd door de Flash Player-plug-in van de browser.

We zijn klaar om de Flex-client uit te voeren. Eerst moeten we de benodigde uitvoeringsomgeving opzetten. Laten we terugkeren naar de geteste client/server-architectuur:

Serverzijde:

  • start SGBD MySQL
  • start de Glassfish-server
  • de webservice JEE voor afspraken implementeren als deze nog niet is geïmplementeerd
  • eventueel een van de eerdere clients testen om te controleren of alles aan de serverzijde in orde is.

Aan de clientzijde:

Start de Apache-server op waaraan de Flex-applicatie zal worden opgevraagd. Hier gebruiken we de tool Wamp. Met deze tool kunnen we een alias toewijzen aan de map [bin-debug] van het Flex-project.

  • het Wamp-pictogram bevindt zich onderaan het scherm [1]
  • Klik met de linkermuisknop op het pictogram Wamp en selecteer de optie Apache [2] / Alias Directories [3, 4]
  • selecteer de optie [5]: Een alias toevoegen
  • in [6] een alias (een willekeurige naam) toekennen aan de webapplicatie die zal worden uitgevoerd
  • in [7] de root van de webapplicatie aangeven die deze alias zal dragen: dit is de map [bin-debug] van het Flex-project dat we zojuist hebben gebouwd.

Laten we de structuur van de map [bin-debug] van het Flex-project nog eens bekijken:

Het bestand [rdvmedecins01.html] is het HTML-bestand van de Flex-toepassing. Dankzij de alias die we zojuist hebben aangemaakt voor de map [bin-debug], is dit bestand bereikbaar via de URL [http://localhost/rdvmedecins/rdvmedecins01.html]. We roepen deze op in een browser met de Flash Player-plug-in versie 9 of hoger:

  • in [1], de URL van de Flex-applicatie
  • in [2] vragen we de lijst met klanten op
  • in [3], het resultaat dat wordt verkregen als alles goed gaat
  • in [4], het resultaat dat we krijgen als we vragen om de klanten weer te geven terwijl de webservice is gestopt.

Misschien bent u benieuwd naar de broncode van de ontvangen HTML-pagina 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!-- opgeslagen vanaf url=(0014)about:internet -->
<html lang="en">

<!-- 
Smart developers always View Source. 

This application was built using Adobe Flex, an open source framework
for building rich Internet applications that get delivered via the
Flash Player or to desktops via Adobe AIR. 

Learn more about Flex at http://flex.org 
// -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!--   BEGIN Gedeelte ‘Browser History required’ -->
<link rel="stylesheet" type="text/css" href="history/history.css" />
<!--   END Sectie waarvoor browsergeschiedenis vereist is -->

<title></title>
<script src="AC_OETags.js" language="javascript"></script>
...
<script language="JavaScript" type="text/javascript">
<!--
// -----------------------------------------------------------------------------
// Globals
// Hoofdversie van Flash vereist
var requiredMajorVersion = 9;
// Subversie van Flash vereist
var requiredMinorVersion = 0;
// Subversie van Flash vereist
var requiredRevision = 124;
// -----------------------------------------------------------------------------
// -->
</script>
</head>

<body scroll="no">
<script language="JavaScript" type="text/javascript">
<!--
// Versiecontrole voor de Flash Player die de installatie van het Player-product kan starten (6.0r65)
....
// -->
</script>
<noscript>
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
                        id="rdvmedecins01" width="100%" height="100%"
                        codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
                        <param name="movie" value="rdvmedecins01.swf" />
                        <param name="quality" value="high" />
                        <param name="bgcolor" value="#869ca7" />
                        <param name="allowScriptAccess" value="sameDomain" />
                        <embed src="rdvmedecins01.swf" quality="high" bgcolor="#869ca7"
                                width="100%" height="100%" name="rdvmedecins01" align="middle"
                                play="true"
                                loop="false"
                                quality="high"
                                allowScriptAccess="sameDomain"
                                type="application/x-shockwave-flash"
                                pluginspage="http://www.adobe.com/go/getflashplayer">
                        </embed>
        </object>
</noscript>
</body>
</html>

De hoofdtekst van de pagina begint op regel 39. Deze bevat geen klassieke HTML, maar een object (regel 47) van het type "application/x-shockwave-flash" (regel 60). Dit is het bestand [rdvmedecins01.swf] (regel 54) dat te vinden is in de map [bin-debug] van het Flex-project. Het is een vrij groot bestand: ongeveer 600 K voor dit eenvoudige voorbeeld.

6.2. Een tweede Flex-client

De tweede Flex-client zal geen gebruik maken van de C-proxy die voor de eerste is gegenereerd. We willen laten zien dat deze stap niet onmisbaar is, ook al biedt deze voordelen ten opzichte van de methode die hier wordt gepresenteerd.

Het project ontwikkelt zich als volgt:

  • naar [1], de nieuwe Flex-applicatie
  • naar [2]: de bijbehorende uitvoerbare bestanden
  • naar [3] de nieuwe weergave: we gaan de lijst met artsen weergeven.

De code MXML van de applicatie [rdvmedecins02.mxml] is als volgt:


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
    <mx:Script>
        <![CDATA[
            import mx.rpc.events.ResultEvent;
            import mx.rpc.events.FaultEvent;
            import mx.collections.ArrayCollection;
            
            // gegevens
            [Bindable]
            private var medecins:ArrayCollection;
            
            private function loadMedecins():void{
                // de lijst met artsen wordt opgevraagd
                wsrdvmedecins.getAllMedecins.send();
            }
            
            private function loadMedecinsCompleted(event:ResultEvent):void{
                // Artsen worden opgehaald
                medecins=event.result as ArrayCollection;
            }
            
            private function loadMedecinsFault(event:FaultEvent):void{
                // de foutmelding wordt weergegeven
                txtMsgErreur.text=event.fault.message;
            } 
            
            // weergave van een arts
            private function displayMedecin(medecin:Object):String{
                return medecin.nom + " " + medecin.prenom;
            } 

        ]]>
    </mx:Script>
    <mx:WebService id="wsrdvmedecins" 
        wsdl="http://localhost:8080/serveur-webservice-ejb-dao-jpa-hibernate/WsDaoJpaService?wsdl">
        <mx:operation name="getAllMedecins" 
            result="loadMedecinsCompleted(event)" fault="loadMedecinsFault(event);">
            <mx:request/>
        </mx:operation>
    </mx:WebService>
    <mx:Label text="Liste des médecins" fontSize="14"/>
    <mx:List dataProvider="{medecins}" labelFunction="displayMedecin"></mx:List>
    <mx:Button label="Afficher les médecins" click="loadMedecins()"/>
    <mx:Text id="txtMsgErreur" width="300" height="113"/>
    
</mx:Application>

We zullen alleen de nieuwe elementen toelichten:

  • regels 42 - 45: de nieuwe weergave. Deze is identiek aan de vorige, behalve dat deze is aangepast om artsen weer te geven in plaats van klanten.
  • regels 35-41: de webservice wordt hier beschreven door een <mx:WebService>-tag (regel 35). De C-proxy die in de vorige versie werd gebruikt, wordt hier niet meer gebruikt.
  • regel 35: het attribuut id geeft de webservice een naam.
  • regel 36: het attribuut wsdl geeft de URI aan van het bestand WSDL van de webservice. Dit is dezelfde URI die door de vorige client werd gebruikt en die in paragraaf 4.10.2 is gedefinieerd.
  • regels 37-40: definiëren een methode van de externe webservice door middel van de tag <mx:operation>
  • regel 37: de methode waarnaar wordt verwezen, wordt gedefinieerd door het attribuut name. Hier verwijzen we naar de externe methode getAllMedecins.
  • regel 38: hier worden de methoden gedefinieerd die moeten worden uitgevoerd als de bewerking slaagt (attribuut result) en als deze mislukt (attribuut fault).
  • regel 39: de tag <mx:request> dient om de parameters van de bewerking te definiëren. Hier heeft de externe methode getAllMedecins geen parameters, dus vullen we niets in. Voor een methode die parameters toestaat, zoals param1 en param2, zouden we het volgende schrijven: 
<mx:Request>
    <param1>{param1}</param1>
    <param1>{param1}</param1>
</mx:Request>

waarbij param1 en param2 variabelen zouden zijn die in de tag <mx:Script> zijn gedeclareerd en geïnitialiseerd

[Bindable]
private var param1:Type1;
[Bindable]
private var param2:Type2;

In de tag <mx:Script> vinden we code ActionScript die vergelijkbaar is met die welke in de vorige client is bestudeerd. Alleen de methode loadMedecins in de regels 13-16 verschilt. Het is de manier waarop de externe methode [getAllMedecins] wordt aangeroepen die verschilt:

  • regel 15: er wordt gebruikgemaakt van de webservice [wsrdvmedecins], gedefinieerd in regel 35, en de bijbehorende bewerking [getAllMedecins], gedefinieerd in regel 37. Om deze bewerking uit te voeren, wordt de methode `send` gebruikt. Deze methode start de asynchrone aanroep van de methode getAllMedecins van de webservice die op regel 35 is gedefinieerd. De methode send voert de aanroep uit met de parameters die zijn gedefinieerd door de tag <mx:request> op regel 39. Hier zijn er geen parameters. Als de methode de parameters param1 en param2 had gehad, zou het script loadMedecins waarden aan deze parameters hebben toegewezen voordat de methode send werd aangeroepen.

Nu hoeven we deze nieuwe toepassing alleen nog maar te testen:

 
https://stahe.github.io
Deze cursus-tutorial, geschreven door Serge Tahé, wordt aan het publiek ter beschikking gesteld onder de voorwaarden van de Creative Commons Naamsvermelding – Geen commercieel gebruik – Gelijk delen 3.0 ongewijzigd.