14. Die Anwendung [SimuPaie] – Version 10 – Flex-Client eines Webdienstes ASP.NET

Wir stellen nun einen Flex-Client für den Webdienst ASP.NET der Version 5 vor. Als IDE wird Flex Builder 3 verwendet. Eine Demoversion dieses Produkts kann unter URL [https://www.adobe.com/cfusion/tdrc/index.cfm?loc=fr_fr&product=flex] heruntergeladen werden. Flex Builder 3 ist ein IDE Eclipse. Um den Flex-Client auszuführen, verwenden wir außerdem einen Apache-Webserver aus dem Wamp-Tool [http://www.wampserver.com/]. Jeder Apache-Server ist dafür geeignet. Der Browser, der den Flex-Client anzeigt, muss über das Flash Player-Plugin (mindestens Version 9) verfügen.

Flex-Anwendungen zeichnen sich dadurch aus, dass sie innerhalb des Flash-Player-Plugins des Browsers ausgeführt werden. In dieser Hinsicht ähneln sie Ajax-Anwendungen, bei denen in die an den Browser gesendeten Seiten Skripte eingebettet sind, die anschließend im Browser ausgeführt werden. Eine Flex-Anwendung ist keine Webanwendung im herkömmlichen Sinne: Sie ist eine Client-Anwendung für Dienste, die von Webservern bereitgestellt werden. In dieser Hinsicht ähnelt sie einer Desktop-Anwendung, die ebenfalls Client dieser Dienste wäre. Sie unterscheidet sich jedoch in einem Punkt: Sie wird zunächst von einem Webserver in einen Browser heruntergeladen, der über das Flash Player-Plugin verfügt, mit dem sie ausgeführt werden kann.

Wie eine Desktop-Anwendung besteht eine Flex-Anwendung im Wesentlichen aus zwei Elementen:

einem Präsentationsteil: den im Browser angezeigten Ansichten. Diese Ansichten sind so umfangreich wie die Fenster von Desktop-Anwendungen. Eine Ansicht wird mithilfe einer Auszeichnungssprache namens MXML beschrieben.
einem Codeteil, der hauptsächlich die Ereignisse verarbeitet, die durch Benutzeraktionen auf der Ansicht ausgelöst werden. Dieser Code kann ebenfalls in MXML oder in einer objektorientierten Sprache namens ActionScript geschrieben werden. Es sind zwei Arten von Ereignissen zu unterscheiden:
- das Ereignis, das einen Datenaustausch mit dem Webserver erfordert: das Auffüllen einer Liste mit Daten, die von einer Webanwendung bereitgestellt werden, das Senden von Formulardaten an den Server usw. Flex stellt eine Reihe von Methoden bereit, um für den Entwickler transparent mit dem Server zu kommunizieren. Diese Methoden sind standardmäßig asynchron: Der Benutzer kann während der Anfrage an den Server weiterhin mit der Ansicht interagieren.
- das Ereignis, das die angezeigte Ansicht ohne Datenaustausch mit dem Server verändert, zum Beispiel das Ziehen eines Elements aus einem Baum, um es in einer Liste abzulegen. Diese Art von Ereignis wird vollständig lokal im Browser verarbeitet.

Eine Flex-Anwendung wird häufig wie folgt ausgeführt:

in wird eine Seite HTML angefordert
in [2] wird sie gesendet. Sie enthält eine Binärdatei SWF (ShockWave Flash), die die gesamte Flex-Anwendung umfasst: alle Ansichten und den Code zur Ereignisbehandlung dieser Ansichten. Diese Datei wird vom Flash Player-Plugin des Browsers ausgeführt.

Die Ausführung des Flex-Clients erfolgt lokal im Browser, es sei denn, er benötigt externe Daten. In diesem Fall fordert er diese vom Server [3] an. Er erhält sie im Format [4] in verschiedenen Formaten: XML oder binär. Die auf dem Webserver abgefragte Anwendung kann in einer beliebigen Sprache geschrieben sein. Entscheidend ist lediglich das Format der Antwort.

Wir haben die Ausführungsarchitektur einer Flex-Anwendung beschrieben, damit der Leser den Unterschied zwischen dieser und einer klassischen Webanwendung erkennen kann, bei der die Seiten keinen Code (JavaScript, Flex, Silverlight, …) enthalten, den der Browser ausführen würde. Bei letzterer ist der Browser passiv: Er zeigt lediglich HTML-Seiten an, die auf dem Webserver erstellt und an ihn gesendet werden.

14.1. Architektur der Client-Server-Anwendung

Die implementierte Client-Server-Architektur entspricht derjenigen der Versionen 6 und 8:

In [1] wird die Webschicht ASP.NET durch eine Flex-Webschicht ersetzt, die in MXML und ActionScript geschrieben ist. Der Client [C] wird vom Flex Builder IDE generiert. An dieser Stelle sei daran erinnert, dass diese Architektur zwei nicht dargestellte Webserver umfasst:

einen Webserver ASP.NET, auf dem der Webdienst [S] ausgeführt wird
ein Webserver APACHE, auf dem der Web-Client [1] ausgeführt wird

14.2. Das Flex-3-Projekt des Clients

Wir erstellen den Flex-Client mit Flex Builder 3 unter der Bezeichnung IDE:

In Flex Builder 3 erstellen wir ein neues Projekt unter [1]
Wir geben ihm einen Namen und legen fest, in welchem Ordner er erstellt werden soll

In [4] gibt man der Hauptanwendung (die ausgeführt werden soll) einen Namen
In [5] wird das generierte Projekt
In [6]: die Hauptdatei der Anwendung MXML
Eine Datei MXML enthält eine Ansicht und den Code zur Verwaltung ihrer Ereignisse. Die Registerkarte [Source] [7] bietet Zugriff auf die Datei MXML. Darin befinden sich Tags <mx>, die die Ansicht beschreiben, sowie Code ActionScript.
Die Ansicht kann grafisch mithilfe der Registerkarte [Design] [8] erstellt werden. Die Tags MXML, die die Ansicht beschreiben, werden dann automatisch in der Registerkarte [Source] generiert. Das Gegenteil trifft ebenfalls zu: Die direkt auf der Registerkarte „[Source]“ hinzugefügten Tags „MXML“ werden grafisch auf der Registerkarte „[Design]“ abgebildet.

14.3. Ansicht Nr. 1

Wir werden schrittweise eine Weboberfläche erstellen, die der von Version 1 ähnelt (siehe Abschnitt 4). Zunächst erstellen wir die folgende Oberfläche:

in [1]: Die Ansicht, wenn die Verbindung zum Webdienst hergestellt werden konnte. Das Kombinationsfeld „Mitarbeiter“ ist dann ausgefüllt.
in [2]: Die Ansicht, wenn die Verbindung zum Webdienst nicht hergestellt werden konnte. In diesem Fall wird eine Fehlermeldung angezeigt.

Die Hauptdatei [main.xml] des Kunden lautet wie folgt:


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
    creationComplete="init()">
    <mx:VBox width="100%">
        <mx:Label text="Feuille de salaire" fontSize="30"/>
        <mx:HBox>
            <mx:VBox>
                <mx:Label text="Employés"/>
                <mx:ComboBox id="cmbEmployes" dataProvider="{employes}" labelFunction="displayEmploye"/>
            </mx:VBox>
            <mx:VBox>
                <mx:Label text="Heures travaillées"/>
                <mx:TextInput id="txtHeuresTravaillees"/>
            </mx:VBox>
            <mx:VBox>
                <mx:Label text="Jours travaillés"/>
                <mx:NumericStepper id="joursTravailles" minimum="0" maximum="31" stepSize="1"/>
            </mx:VBox>
            <mx:VBox>
                <mx:Label text=""/>
                <mx:Button id="btnSalaire" label="Salaire"/>
            </mx:VBox>
        </mx:HBox>
        <mx:TextArea id="msg" minWidth="400" minHeight="100" editable="false" visible="true" enabled="true" horizontalScrollPolicy="auto" verticalScrollPolicy="auto" x="0" y="0" maxHeight="100" maxWidth="400"/>        
    </mx:VBox>

    <mx:WebService ...>
        ...
    </mx:WebService>

    <mx:Script>
        <![CDATA[
...    
            // Daten
            [Bindable]
            private var employes : ArrayCollection;

            private function init():void{
...
            }
        ]]>
    </mx:Script>
</mx:Application>

In diesem Code sind verschiedene Dinge zu unterscheiden:

die Definition der Anwendung (Zeilen 2–3)
die Beschreibung der Ansicht (Zeilen 4–25)
die Ereignisbehandler in der Sprache ActionScript innerhalb des Tags <mx:Script> (Zeilen 31–42)
die Definition des Remote-Webdienstes (Zeilen 27–29)

Lassen Sie uns zunächst die Definition der Anwendung selbst und die Beschreibung ihrer Ansicht erläutern:

Zeilen 2–3: definieren:
- die Anordnung der Komponenten im Container der Ansicht. Das Attribut layout="vertical" gibt an, dass die Komponenten untereinander angeordnet werden.
- die Methode, die ausgeführt werden soll, sobald die Ansicht instanziiert wurde: c.a.d. den Zeitpunkt, zu dem alle ihre Komponenten instanziiert wurden. Das Attribut creationComplete="init();" gibt an, dass die Methode init aus Zeile 38 ausgeführt werden soll. creationComplete ist eines der Ereignisse, die die Klasse Application auslösen kann.
Die Zeilen 4–25 definieren die Komponenten der Ansicht
Zeilen 4–25: ein vertikaler Container: Die Komponenten werden darin untereinander angeordnet
Zeile 5: definiert einen Text
Zeilen 6–23: ein horizontaler Container: Die Komponenten werden darin horizontal angeordnet.
Zeilen 7–10: Ein vertikaler Container, der einen Text und eine Dropdown-Liste enthält
Zeile 8: der Text
Zeile 9: Die Dropdown-Liste, in die die Liste der Mitarbeiter eingefügt wird. Das Tag dataProvider="{employes}" gibt die Datenquelle an, aus der die Liste gefüllt werden soll. Hier wird die Liste mit dem in Zeile 36 definierten Objekt employes gefüllt. Um dataProvider="{employes}" schreiben zu können, muss das Feld employes das Attribut [Bindable] (Zeile 35) besitzen. Dieses Attribut ermöglicht es, außerhalb des Tags <mx:Script> auf eine Variable ActionScript zu verweisen. Das Feld employes ist vom Typ ArrayCollection, einem Typ ActionScript, der das Speichern von Objektlisten ermöglicht, in diesem Fall einer Liste von Objekten vom Typ Employe.
Zeilen 11–14: Ein vertikaler Container, der einen Text und ein Eingabefeld enthält
Zeile 12: der Text
Zeile 13: das Eingabefeld für die geleisteten Arbeitsstunden.
Zeilen 15–18: Ein vertikaler Container, der einen Text und einen Zählwert enthält
Zeile 16: der Text
Zeile 17: der Zähler zur Eingabe der gearbeiteten Tage.
Zeilen 19–22: Ein vertikaler Container, der einen Text und eine Schaltfläche enthält, die die Berechnung des Gehalts der in der Kombinationsliste ausgewählten Person auslöst.
Zeile 20: der Text
Zeile 21: die Schaltfläche.
Zeile 23: Ende des in Zeile 6 begonnenen horizontalen Containers
Zeile 24: Ein Textfeld in einer Komponente vom Typ TextArea. Es zeigt Fehlermeldungen an.
Zeile 25: Ende des vertikalen Containers, der in Zeile 4 begonnen hat

Die Zeilen 4–25 erzeugen die folgende Ansicht auf der Registerkarte „[Design]“:

[1]: wurde von der Komponente Label aus Zeile 5 generiert
[2]: wurde von der Komponente ComboBox in Zeile 9 generiert
[3]: wurde von der Komponente TextInput in Zeile 13 generiert
[4]: wurde von der Komponente NumericStepper in Zeile 17 generiert
[5]: wurde von der Komponente Button in Zeile 21 generiert
[6]: wurde von der Komponente TextArea in Zeile 24 generiert

Betrachten wir nun die Deklaration des Remote-Webdienstes:


<mx:WebService id="pam"
        wsdl="http://localhost:1077/Service1.asmx?WSDL" 
        fault="wsFault(event);" 
        showBusyCursor="true">
        <mx:operation 
            name="GetAllIdentitesEmployes" 
            result="loadEmployesCompleted(event)" 
            fault="loadEmployesFault(event);">
            <mx:request/>
        </mx:operation>
    </mx:WebService>

Zeile 1: Der Webdienst ist eine Komponente mit der Kennung pam (Attribut „id“)
Zeile 2: Die ID URI der Datei WSDL des Webdienstes (siehe Abschnitt 9.2)
Zeile 3: Die Methode, die im Falle eines Fehlers beim Datenaustausch mit dem Webdienst ausgeführt werden soll: die Methode wsFault.
Zeile 4: Fordert an, dass ein Indikator angezeigt wird, um dem Benutzer zu signalisieren, dass gerade ein Austausch mit dem Webdienst stattfindet.
Zeilen 5–10: Eine der vom Remote-Webdienst angebotenen Operationen. Hier die Methode GetAllIdentitesEmployes.
Zeile 7: Die Methode, die ausgeführt werden soll, wenn der Aufruf dieser Methode normal endet: c.a.d. Dies ist der Fall, wenn der Webdienst die Liste der Mitarbeiter erfolgreich zurückgibt.
Zeile 8: Die Methode, die ausgeführt werden soll, wenn der Aufruf dieser Methode mit einem Fehler endet.
Zeile 9: Die Parameter der Operation GetAllIdentitesEmployes. Da diese Methode keine Parameter erwartet, lassen wir das Tag <mx:request> leer.

Betrachten wir nun den Code ActionScript, der mit dem Webdienst verknüpft ist:


<mx:Script>
        <![CDATA[
            import mx.rpc.events.FaultEvent;
            import mx.collections.ArrayCollection;
            import mx.rpc.events.ResultEvent;
                        
            // Daten
            [Bindable]
            private var employes : ArrayCollection;
    
            private function init():void{
                // Die Koordinaten des Nachrichtenfelds werden notiert
                msgHeight=msg.height;
                msgWidth=msg.width;
                // Das Nachrichtenfeld wird ausgeblendet
                hideMsg();
                // Abfrage beim Remote-Webdienst, um die vereinfachte Mitarbeiterliste abzurufen
                pam.GetAllIdentitesEmployes.send();
            }
            
            private function wsFault(event:Event):void{
                    // Der Fehler wird gemeldet
                    msg.text="Service distant indisponible";
                    showMsg();
            }
            
            private function loadEmployesCompleted(event:ResultEvent):void{
                // Ausfüllen des Dropdown-Menüs „Mitarbeiter“
                employes=event.result as ArrayCollection;
            }
            
            private function displayEmploye(employe:Object):String{
                // Identität eines Mitarbeiters
                return employe.Prenom + " " + employe.Nom;
            }
            
            private function loadEmployesFault(event:FaultEvent):void{
                // Anzeige einer Fehlermeldung
                msg.text=event.fault.message;
                // Formular
                showMsg();
            }

    // Blockverwaltung
        private var msgWidth:int;
        private var msgHeight:int;
        
        private function hideMsg():void{
            msg.height=0;
            msg.width=0;
        }
        
        private function showMsg():void{
            msg.height=msgHeight;
            msg.width=msgWidth;
        }
        
      
        ]]>
    </mx:Script>

Zeile 11: Die Methode init wird beim Start der Anwendung ausgeführt, da folgender Code geschrieben wurde:


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

Zeilen 13–14: Die Höhe und Breite des Meldungsbereichs werden gespeichert. Es werden zwei Methoden verwendet: hideMsg (Zeilen 48–51) und showMsg (Zeilen 53–56), um den Meldungsbereich je nachdem, ob ein Fehler aufgetreten ist oder nicht, auszublenden bzw. einzublenden. Die Methode hideMsg blendet den Meldungsbereich aus, indem sie dessen Höhe und Breite auf 0 setzt. Die Methode showMsg blendet den Meldungsbereich ein, indem sie ihm die in der Methode init gespeicherten Werte für Höhe und Breite wieder zuweist.
Zeile 16: Das Meldungsfeld wird ausgeblendet. Zu Beginn liegt kein Fehler vor.
Zeile 18: Die Methode GetAllIdentitesEmploye (Zeile 6 des Webdienstes) des Webdienstes pam (Zeile 1 des Webdienstes) wird aufgerufen. Der Aufruf erfolgt asynchron. Zeile 7 des Webdienstes gibt an, dass die Methode loadEmployesCompleted ausgeführt wird, wenn dieser asynchrone Aufruf erfolgreich endet. Zeile 8 des Webdienstes gibt an, dass die Methode loadEmployesFault ausgeführt wird, wenn dieser asynchrone Aufruf fehlschlägt.
Zeile 27: Die Methode loadEmployesCompleted wird ausgeführt, wenn der Aufruf des Webdienstes in Zeile 18 erfolgreich ist.
Zeile 29: Wir wissen, dass der Webservice eine Antwort mit dem Code XML zurückgibt. Es ist sinnvoll, darauf zurückzukommen, um den Code ActionScript zu verstehen:

in [1], Seite des Webdienstes [Service.asmx]
zu [2], dem Link zur Testseite der Methode [GetAllIdentitesEmployes]
in [3], der Test ist abgeschlossen. Es werden keine Parameter erwartet.
in [4]: Die Antwort XML enthält eine Tabelle mit Mitarbeitern. Für jeden von ihnen liegen fünf Informationen vor, die in den Tags <Id>, <Version>, <SS>, <Nom> und <Prenom> gekapselt sind. Wenn die Antwort XML in ein Array employes vom Typ ArrayCollection eingefügt wird:
- employes.getItemAt(i): ist das Element Nr. i des Arrays
- employes.getItemAt(i).SS: ist die Sozialversicherungsnummer dieses Mitarbeiters.
- employes.getItemAt(i).Name: ist der Name dieses Mitarbeiters
- ...

Kehren wir zum Code ActionScript zurück:

Zeile 29: event.result steht für die Antwort XML des Webdienstes. Die Methode GetAllIdentitesEmployes gibt ein Array von Mitarbeitern zurück. event.result steht für dieses Array von Mitarbeitern. Es wird in eine Variable vom Typ ArrayCollection gespeichert, einem Typ, der allgemein eine Sammlung von Objekten darstellt. Diese Variable mit dem Namen employes wird in Zeile 9 deklariert. Wir erinnern uns, dass diese Variable die Datenquelle für das Mitarbeiter-Combo-Feld ist:


<mx:ComboBox id="cmbEmployes" dataProvider="{employes}" labelFunction="displayEmploye"/>

Für jeden Mitarbeiter aus ihrer Datenquelle ruft das Kombinationsfeld die Methode displayEmploye (Attribut labelFunction) auf, um den Mitarbeiter anzuzeigen. In den Zeilen 32–34 ist zu sehen, dass diese Methode den Vor- und Nachnamen des Mitarbeiters anzeigt.

Zeile 37: Die Methode loadEmployesFault, die ausgeführt wird, wenn der Aufruf des Webdienstes in Zeile 18 fehlschlägt. event.fault.message ist die vom Webdienst zurückgegebene Fehlermeldung.
Zeile 39: Diese Fehlermeldung wird in das Meldungsfeld geschrieben
Zeile 41: Das Meldungsfeld wird angezeigt.

Nach der Erstellung der Anwendung befindet sich ihr ausführbarer Code im Ordner „[bin-debug]“ des Flex-Projekts:

Oben

stellt die Datei „[main.html]“ die Datei „HTML“ dar, die der Browser vom Webserver anfordert, um den Flex-Client zu erhalten
Die Datei [main.swf] ist die Binärdatei des Flex-Clients, die in die an den Browser gesendete Seite HTML eingebettet und anschließend vom Flash Player-Plugin des Browsers ausgeführt wird.

Wir sind bereit, den Flex-Client auszuführen. Zuvor müssen wir jedoch die dafür erforderliche Ausführungsumgebung einrichten. Kehren wir zur getesteten Client-Server-Architektur zurück:

Auf der Serverseite:

Den Webdienst ASP.NET [S] starten

Auf der Client-Seite:

Starten Sie den Apache-Server, an den die Flex-Anwendung angefordert wird.

Hier verwenden wir das Tool Wamp. Mit diesem Tool können wir dem Ordner [bin-debug] des Flex-Projekts einen Alias zuweisen.

Das Wamp-Symbol befindet sich am unteren Bildschirmrand von [1]
Wählen Sie durch einen Linksklick auf das Symbol Wamp die Option Apache [2] / Alias Directories [3, 4]
die Option „[5]: Add an alias“ auswählen

In [6] der Webanwendung, die ausgeführt werden soll, einen Alias (einen beliebigen Namen) zuweisen
Geben Sie in [7] das Stammverzeichnis der Webanwendung an, die diesen Alias tragen soll: Dies ist der Ordner [bin-debug] des Flex-Projekts, das wir gerade erstellt haben.

Zur Erinnerung: Die Struktur des Ordners [bin-debug] des Flex-Projekts sieht wie folgt aus:

Die Datei „[main.html]“ ist die Datei „HTML“ der Flex-Anwendung. Dank des Alias, den wir gerade für den Ordner „[bin-debug]“ erstellt haben, wird diese Datei über „URL“ und „[http://localhost/pam-v10-flex-client-webservice/main.html]“ aufgerufen. Wir rufen diese Datei in einem Browser auf, der über das Flash Player-Plugin der Version 9 oder höher verfügt:

in [1], die Datei URL aus der Flex-Anwendung
in [2], die Mitarbeiter-Auswahl, wenn alles einwandfrei funktioniert
in [3], das Ergebnis, wenn der Webdienst angehalten ist

Vielleicht möchten Sie den Quellcode der empfangenen Seite HTML anzeigen:

<!-- gespeichert von 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 Erforderlicher Abschnitt „Browser-Verlauf“ -->
<link rel="stylesheet" type="text/css" href="history/history.css" />
<!--   END Abschnitt „Browserverlauf erforderlich“ -->

<title></title>
....
</head>

<body scroll="no">
...
<noscript>
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
                        id="main" width="100%" height="100%"
                        codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
                        <param name="movie" value="main.swf" />
                        <param name="quality" value="high" />
                        <param name="bgcolor" value="#869ca7" />
                        <param name="allowScriptAccess" value="sameDomain" />
                        <embed src="main.swf" quality="high" bgcolor="#869ca7"
                                width="100%" height="100%" name="main" 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>

Der Hauptteil der Seite beginnt in Zeile 25. Er enthält nicht das klassische HTML, sondern ein Objekt (Zeile 28) vom Typ „application/x-shockwave-flash“ (Zeile 41). Es handelt sich um die Datei [main.swf] (Zeile 31), die im Ordner [bin-debug] des Flex-Projekts zu finden ist. Es ist eine relativ große Datei: etwa 600 K für dieses einfache Beispiel.

14.4. Ansicht Nr. 2

Wir fügen der aktuellen Ansicht einen neuen Container vom Typ VBox hinzu:

In [4,5] legen wir fest, dass [main2.mxml] die neue Standardanwendung ist. Diese wird fortan kompiliert.
In [6] wird die Standardanwendung durch einen blauen Punkt gekennzeichnet.

Der Container [1] zeigt die Informationen zu dem Mitarbeiter an, der im Kombinationsfeld [2] ausgewählt wurde. Wir duplizieren [main.xml] in [main2.xml] und [3], um die neue Ansicht zu erstellen. Wir arbeiten nun mit [main2.xml].

Die Änderung am vorherigen Projekt besteht in der Hinzufügung des Containers aus Zeile 26 oben, der den Code MXML des Containers [1] der Ansicht enthält. Wir weisen ihm die Kennung employe zu, um ihn per Code bearbeiten zu können. Dieser Container soll nämlich mit derselben Technik ein- und ausgeblendet werden können, die zuvor für den Meldungsbereich verwendet wurde.

Kehren wir zum Layout der Ansicht zurück:

Identifizieren wir die verschiedenen Container der neu angezeigten Informationen:

V1: vertikaler Container für alle Komponenten: die Beschriftung Employé, [1] sowie die horizontalen Container [H1] und [H2]
H1: horizontaler Container für die Informationen Nom, Prénom, Adresse
V2: vertikaler Container für die Bezeichnung Nom und die Anzeige des Namens des Mitarbeiters.
H2: horizontaler Container für die Informationen Ville, Postleitzahl, Indice

Der vollständige Code des Containers „employe“ lautet wie folgt:


<mx:VBox id="employe" width="100%">
        <mx:Label text="Employé" fontSize="20" color="#09F3EB"/>
        <mx:HBox>
        <mx:VBox >
            <mx:Label text="Nom"/>
            <mx:VBox backgroundColor="#EECA05">
            <mx:Text id="lblNom" minWidth="100" minHeight="20" fontFamily="Verdana" textAlign="center"/>
            </mx:VBox>
        </mx:VBox>
        <mx:VBox >
            <mx:Label text="Prénom"/>
            <mx:VBox backgroundColor="#EECA05">
            <mx:Text id="lblPreNom" minWidth="100" minHeight="20" fontFamily="Verdana" textAlign="center"/>
            </mx:VBox>
        </mx:VBox>
        <mx:VBox >
            <mx:Label text="Adresse"/>
            <mx:VBox backgroundColor="#EECA05">
            <mx:Text id="lblAdresse" minWidth="250" minHeight="20" fontFamily="Verdana" textAlign="center"/>
            </mx:VBox>
        </mx:VBox>
        </mx:HBox>
        <mx:HBox>
        <mx:VBox >
            <mx:Label text="Ville"/>
            <mx:VBox backgroundColor="#EECA05">
            <mx:Text id="lblVille" minWidth="100" minHeight="20" fontFamily="Verdana" textAlign="center"/>
            </mx:VBox>
        </mx:VBox>
        <mx:VBox >
            <mx:Label text="Code Postal"/>
            <mx:VBox backgroundColor="#EECA05">
            <mx:Text id="lblCodePostal" minWidth="70" minHeight="20" fontFamily="Verdana" textAlign="center"/>
            </mx:VBox>
        </mx:VBox>
        <mx:VBox >
            <mx:Label text="Indice"/>
            <mx:VBox backgroundColor="#EECA05">
            <mx:Text id="lblIndice" minWidth="20" minHeight="20" fontFamily="Verdana" textAlign="center"/>
            </mx:VBox>
        </mx:VBox>
        </mx:HBox>
    </mx:VBox>

Der Code ist selbsterklärend. Erläutern wir kurz den vertikalen Container, der beispielsweise den Namen des Mitarbeiters anzeigt:

Zeilen 4–9: der vertikale Container
Zeile 5: die Bezeichnung Nom
Zeilen 6–8: ein vertikaler Container, der den Namen des Mitarbeiters anzeigt (Zeile 7). Wir möchten den Feldern, die Informationen zum Mitarbeiter anzeigen, eine andere Hintergrundfarbe zuweisen. Die Komponente Text bietet diese Möglichkeit nicht (oder ich habe nicht richtig gesucht). Man kann die Hintergrundfarbe eines Containers festlegen. Deshalb wurde er hier verwendet.
Zeile 7: Die Komponente Text, die den Namen des Mitarbeiters anzeigt. Wir legen eine Mindesthöhe und -breite fest.

Wir werden den Container „employe“ verwenden, um die Informationen des Mitarbeiters anzuzeigen, den der Benutzer aus der Mitarbeiter-Auswahlliste auswählt – und zwar unabhängig von der Schaltfläche [Salaire], deren Aufgabe später darin bestehen wird, das Gehalt zu berechnen, sobald alle erforderlichen Informationen eingegeben wurden.

Um die Änderung der Auswahl in der Kombinationsliste „employes“ zu verarbeiten, ändert sich deren Code „MXML“ wie folgt:


<mx:ComboBox id="cmbEmployes" dataProvider="{employes}" labelFunction="displayEmploye" change="displayInfosEmploye();"/>

Das Ereignis „change“ wird vom Kombinationsfeld ausgelöst, wenn der Benutzer seine Auswahl ändert. Die Methode displayInfosEmploye ist für die Verarbeitung dieses Ereignisses zuständig.

Zur Erinnerung: Die vom Remote-Webdienst bereitgestellten Methoden lauten:


    // Liste aller Mitarbeiteridentitäten 
    public Employe[] GetAllIdentitesEmployes();
    // ------- Gehaltsabrechnung 
public FeuilleSalaire GetSalaire(string ss, double heuresTravaillees, int joursTravailles);

Wir möchten hier die Informationen (Name, Vorname, …) des in der Combobox ausgewählten Mitarbeiters anzeigen. Der Webdienst stellt keine Methode bereit, um diese Daten abzurufen. Dennoch können wir die Methode GetSalaire verwenden, indem wir die Nummer SS des ausgewählten Mitarbeiters und den Wert 0 für die gearbeiteten Stunden und Tage übergeben. Es wird zwar eine unnötige Gehaltsberechnung durchgeführt, aber die Methode GetSalaire gibt uns ein Objekt vom Typ FeuilleSalaire zurück, in dem wir die benötigten Informationen finden.

Die aktuelle Deklaration des Webdienstes wird geändert, um die Definition der Methode GetSalaire aufzunehmen:


<mx:WebService id="pam"
        wsdl="http://localhost:1077/Service1.asmx?WSDL" 
        fault="wsFault(event);" 
        showBusyCursor="true">
        <mx:operation 
            name="GetAllIdentitesEmployes" 
            result="loadEmployesCompleted(event)" 
            fault="loadEmployesFault(event);">
            <mx:request/>
        </mx:operation>
        <mx:operation name="GetSalaire" 
            result="getSalaireCompleted(event)"
            fault="getSalaireFault(event);">
            <mx:request>
                <ss>{employes.getItemAt(cmbEmployes.selectedIndex).SS}</ss>
              <heuresTravaillees>{heuresTravaillees}</heuresTravaillees>
              <joursTravailles>{joursDeTravail}</joursTravailles>
            </mx:request>
        </mx:operation>
</mx:WebService>

Zeilen 11–19: Die Definition der Methode GetSalaire des Webdienstes
Zeile 12: Definiert die Methode, die ausgeführt werden soll, wenn der Aufruf der Methode GetSalaire erfolgreich ist
Zeile 13: Definiert die Methode, die ausgeführt werden soll, wenn der Aufruf der Methode GetSalaire fehlschlägt
Zeilen 14–18: Die Methode GetSalaire erwartet drei Parameter. Diese werden innerhalb eines <mx:request>-Tags in der Form <param1>Wert1</param1> definiert. Der Bezeichner „param1“ darf nicht beliebig gewählt werden. Es müssen die vom Webdienst erwarteten Namen verwendet werden:

in [1] die Seite des Webdienstes [http://localhost:1077/Service1.asmx]
in [2], der Link zur Testseite der Methode [GetSalaire]
in [3], die von der Methode erwarteten Parameter. Diese Namen müssen als untergeordnete Tags des Tags <mx:request> verwendet werden.

Kehren wir zur Deklaration des Webdienstes zurück:


        <mx:operation name="GetSalaire" 
            result="getSalaireCompleted(event)"
            fault="getSalaireFault(event);">
            <mx:request>
                <ss>{employes.getItemAt(cmbEmployes.selectedIndex).SS}</ss>
              <heuresTravaillees>{heuresTravaillees}</heuresTravaillees>
              <joursTravailles>{joursDeTravail}</joursTravailles>
            </mx:request>
        </mx:operation>

Zeile 5: der Parameter „ss“. Wir erinnern uns, dass beim Start der Flex-Anwendung das Array aller Mitarbeiter in einer Variablen „employes“ vom Typ ArrayCollection gespeichert wurde.
- employes.getItemAt(i): ist der Mitarbeiter Nr. i aus dem Array
- employes.getItemAt(i).SS: ist die Sozialversicherungsnummer dieses Mitarbeiters.
- cmbEmployes.selectedIndex: ist die Nummer des in der Mitarbeiter-Auswahlliste ausgewählten Elements cmbemployes.

Wie lässt sich nun feststellen, dass SS die Sozialversicherungsnummer eines Mitarbeiters ist? Dazu muss man auf die von der Methode GetAllIdentitesEmployes gesendete Antwort zurückgreifen:

in [1], Seite des Webdienstes [Service.asmx]
in [2], der Link zur Testseite der Methode [GetAllIdentitesEmployes]
in [3], der Test ist abgeschlossen. Es werden keine Parameter erwartet.
in [4]: Die Antwort XML enthält ein Mitarbeiterarray. Dieses Array wurde in der Variablen employes gespeichert. In [5] ist zu sehen, dass SS tatsächlich das Tag ist, das zur Speicherung der Sozialversicherungsnummer verwendet wird.

Schließen wir die Untersuchung des Webdienstes ab:


        <mx:operation name="GetSalaire" 
            result="getSalaireCompleted(event)"
            fault="getSalaireFault(event);">
            <mx:request>
                <ss>{employes.getItemAt(cmbEmployes.selectedIndex).SS}</ss>
              <heuresTravaillees>{heuresTravaillees}</heuresTravaillees>
              <joursTravailles>{joursDeTravail}</joursTravailles>
            </mx:request>
</mx:operation>

Zeile 6: Die Anzahl der gearbeiteten Stunden wird durch die Variable heuresTravaillees bereitgestellt
Zeile 6: Die Anzahl der gearbeiteten Tage wird durch die Variable joursDeTravail bereitgestellt

Diese Variablen müssen im Tag <mx:Script> mit dem Attribut [Bindable] deklariert werden, damit sie von den Komponenten MXML referenziert werden können (Zeilen 7–10 unten).


    <mx:Script>
        <![CDATA[
...
            // Daten
            [Bindable]
            private var employes : ArrayCollection;
            [Bindable]
            private var heuresTravaillees:Number;
            [Bindable]
            private var joursDeTravail:int;
...
</mx:Script>

Der Code zur Ereignisverwaltung der Ansicht ändert sich wie folgt:


<mx:Script>
        <![CDATA[
            import mx.rpc.events.FaultEvent;
            import mx.collections.ArrayCollection;
            import mx.rpc.events.ResultEvent;
                        
            // Daten
            [Bindable]
            private var employes : ArrayCollection;
            [Bindable]
            private var heuresTravaillees:Number;
            [Bindable]
            private var joursDeTravail:int;
    
            private function init():void{
                // Höhe und Breite von # Blöcken werden notiert
                employeHeight=employe.height;
                employeWidth=employe.width;
                // Bestimmte Elemente werden ausgeblendet
                hideEmploye();
...
            }
            
            private function displayInfosEmploye():void{
                // Formular
                hideEmploye();
                // ein fiktives Gehalt berechnen
                heuresTravaillees=0;
                joursDeTravail=0;
                pam.GetSalaire.send();
            }
            
            private function getSalaireCompleted(event:ResultEvent):void{
    ...
            }
            
            private function getSalaireFault(event:FaultEvent):void{
    ...
            }

        // Teilansichten -------------------------------------------------
        private var employeHeight:int;
        private var employeWidth:int;
        
        private function hideEmploye():void{
            employe.height=0;
            employe.width=0;
        }
        
        private function showEmploye():void{
            employe.height=employeHeight;
            employe.width=employeWidth;
        }
        ]]>
    </mx:Script>

Zeile 15: Die beim Start der Flex-Anwendung ausgeführte Methode „init“ speichert die Höhe und Breite des vertikalen Containers employe, um ihn (Zeilen 50–53) wiederherstellen zu können, nachdem er ausgeblendet wurde (Zeilen 45–48).
Zeile 24: Die Methode displayInfosEmploye wird ausgeführt, wenn der Benutzer seine Auswahl in der Mitarbeiter-Auswahlliste ändert.
Zeile 26: Der Container employe wird ausgeblendet, falls er sichtbar war.
Zeile 30: Die Methode GetSalaire des Webdienstes wird asynchron aufgerufen. Es ist bekannt, dass sie drei Parameter erwartet:


                <ss>{employes.getItemAt(cmbEmployes.selectedIndex).SS}</ss>
              <heuresTravaillees>{heuresTravaillees}</heuresTravaillees>
              <joursTravailles>{joursDeTravail}</joursTravailles>

Zeile 1: Der Parameter „ss“ ist die Nummer SS des Mitarbeiters, der im Mitarbeiter-Dropdown-Menü ausgewählt wurde
Zeile 2: Die Methode displayInfosEmploye weist der Variablen heuresTravaillees (Zeile 28) den Wert 0 zu
Zeile 3: Die Methode displayInfosEmploye weist der Variablen joursDeTravail den Wert 0 zu (Zeile 29)

Die Methode GetSalaireCompleted wird ausgeführt, wenn die Methode GetSalaire des Webdienstes erfolgreich abgeschlossen wurde:


private function getSalaireCompleted(event:ResultEvent):void{
                // Fehlermeldung ausblenden
                hideMsg();
                // Lohnabrechnung erhalten
                var feuilleSalaire:Object=event.result;
                // Anzeige
                lblNom.text=feuilleSalaire.Employe.Nom;
                lblPreNom.text=feuilleSalaire.Employe.Prenom;
                lblAdresse.text=feuilleSalaire.Employe.Adresse;
                lblVille.text=feuilleSalaire.Employe.Ville;
                lblCodePostal.text=feuilleSalaire.Employe.CodePostal;
                lblIndice.text=feuilleSalaire.Employe.Indice;
                showEmploye();
            }

Zeile 3: Das Meldungsfeld wird ausgeblendet, falls es angezeigt wird.
Zeile 5: Die von der Methode GetSalaire zurückgegebene Gehaltsabrechnung wird abgerufen

Um zu erfahren, was die Methode GetSalaire genau zurückgibt, kehren wir zur Seite des Webdienstes zurück:

in [1], die Seite des Webdienstes [Service.asmx]
in [2], der Link, der zur Testseite der Methode [GetSalaire] führt
in [3] werden Parameter angegeben
in [4] das erhaltene Ergebnis XML.

Kehren wir zur Methode getSalaireCompleted zurück:


private function getSalaireCompleted(event:ResultEvent):void{
                // Fehlermeldung wird ausgeblendet
                hideMsg();
                // Man erhält eine Gehaltsabrechnung
                var feuilleSalaire:Object=event.result;
                // Anzeige
                lblNom.text=feuilleSalaire.Employe.Nom;
                lblPreNom.text=feuilleSalaire.Employe.Prenom;
                lblAdresse.text=feuilleSalaire.Employe.Adresse;
                lblVille.text=feuilleSalaire.Employe.Ville;
                lblCodePostal.text=feuilleSalaire.Employe.CodePostal;
                lblIndice.text=feuilleSalaire.Employe.Indemnites.Indice;
                showEmploye();
}

Zeile 5: feuilleSalaire=event.result steht für den Datenfluss XML [4], der von der Methode GetSalaire zurückgegeben wird. Aus diesem Datenfluss geht hervor, dass:
- feuilleSalaire.Employe ist der Datenfluss XML eines Mitarbeiters
- feuilleSalaire.Employe.Nom ist der Name dieses Mitarbeiters
- ...
Zeilen 7–12: Der Datenstrom XML feuilleSalaire wird verwendet, um die verschiedenen Felder des Containers „employe“ zu füllen.
Zeile 13: Der Container „employe“ wird angezeigt.

Die Methode getSalaireFault wird ausgeführt, wenn die Methode GetSalaire des Webdienstes fehlschlägt:


            private function getSalaireFault(event:FaultEvent):void{
                // Anzeige der Fehlermeldung
                msg.text=event.fault.message;
                // Formular
                showMsg();            
            }

Zeile 3: Die Fehlermeldung event.fault.message wird in das Meldungsfeld geschrieben
Zeile 5: Das Meldungsfeld wird angezeigt

Hier enden die für diese neue Version erforderlichen Änderungen. Beim Speichern wird, sofern die Syntax korrekt ist, die ausführbare Version im Ordner „[bin-debug]“ des Projekts generiert:

Oben ist [main2.html] die Seite HTML, die die Binärdatei der Flex-Anwendung [main2.swf] enthält, die vom Flash Player ausgeführt wird.

Wir können diese neue Version testen:

Der Webdienst ASP.NET muss gestartet sein
der Apache-Server muss für den Flex-Client gestartet werden

Angenommen, der in der vorherigen Version verwendete Alias [pam-v10-flex-client-webservice] existiert noch, dann rufen wir in einem Browser die Aliase URL und [http://localhost/pam-v10-flex-client-webservice/main2.html] beim Apache-Server auf:

in [1], das angeforderte URL
in [2], die Mitarbeiter-Auswahl
in [3], die Auswahl im Dropdown-Menü wird geändert, um das Ereignis change auszulösen
in [4], das Ergebnis: die Karteikarte von Justine Laverti.

14.5. Ansicht Nr. 3

Ansicht Nr. 3 führt die Gültigkeitsprüfung des Formulars durch. Hier wird nur das Eingabefeld „txtHeuresTravaillees“ überprüft. Solange das Formular fehlerhaft ist, bleibt die Schaltfläche „btnSalaire“ deaktiviert.

Um diese Funktion hinzuzufügen, duplizieren wir [main2.mxml] in [main3.mxml]:

Von nun an arbeiten wir mit „[main3.mxml]“, das wir als Standardanwendung festlegen (siehe dieses Konzept, Abschnitt 14.4). Zunächst fügen wir der Komponente „txtHeuresTravaillees“ ein Attribut hinzu:


<mx:TextInput id="txtHeuresTravaillees" change="validateForm(event)"/>

Jedes Mal, wenn sich der Inhalt des Eingabefelds „txtHeuresTravaillees“ ändert, wird die Methode validateForm aufgerufen. Dabei handelt es sich um eine vom Entwickler geschriebene lokale Methode. Darin könnten wir überprüfen, ob der Inhalt des Eingabefelds „txtHeuresTravaillees“ tatsächlich eine positive ganze Zahl ist. Wir gehen jedoch anders vor und verwenden eine Validierungskomponente:


    <mx:NumberValidator id="heuresTravailleesValidator" source="{txtHeuresTravaillees}" property="text"
    precision="2" allowNegative="false"
    invalidCharError="Caractères invalides"
    precisionError="Deux chiffres au plus après la virgule"
    negativeError="Le nombre d'heures doit être positif ou nul"
    invalidFormatCharsError="Format invalide"
    required="true"
requiredFieldError="Donnée requise"/>

Zeile 1: Mit der Komponente <mx:NumberValidator> lässt sich überprüfen, ob eine andere Komponente eine ganze Zahl oder eine reelle Zahl enthält.
Zeile 1: Das Attribut id weist der Komponente eine Kennung zu.
Zeile 1: source ist die ID der Komponente, die von der Komponente NumberValidator überprüft wird. Hier wird das Eingabefeld „txtHeuresTravaillees“ überprüft.
Zeile 1: property ist der Name der Eigenschaft der Komponente source, die den zu prüfenden Wert enthält. Letztendlich wird der Wert source.property geprüft, hier txtHeuresTravaillees.text.
Zeile 2: precision legt die maximal zulässige Anzahl von Dezimalstellen fest. precision=0 dient dazu, zu überprüfen, ob die eingegebene Zahl eine ganze Zahl ist.
Zeile 2: allowNegative gibt an, ob negative Zahlen zulässig sind oder nicht
Zeile 7: required gibt an, ob die Eingabe obligatorisch ist oder nicht.

Wenn eine Validierungsbedingung nicht erfüllt ist, wird eine Fehlermeldung in einer Sprechblase neben dem fehlerhaften Feld angezeigt. Standardmäßig sind diese Meldungen auf Englisch. Es ist möglich, diese Meldungen selbst zu definieren:

(Fortsetzung)
- invalidCharError: Die Fehlermeldung, wenn der Text ein Zeichen enthält, das in einer Zahl nicht vorkommen darf
- precisionError: Die Fehlermeldung, wenn die Anzahl der Dezimalstellen im Hinblick auf das Attribut precision falsch ist
- negativeError: Die Fehlermeldung, wenn die Zahl negativ ist, obwohl das Attribut allowNegative="false" gesetzt ist
- requiredFieldError: Die Fehlermeldung, wenn keine Eingabe erfolgt ist, obwohl das Attribut requiredField="true" gesetzt ist
- invalidFormatCharsError: Die Fehlermeldung, wenn der Text ungültige Zeichen oder ein ungültiges Format enthält?

Kommen wir zurück zur Komponente „txtHeuresTravaillees“:


<mx:TextInput id="txtHeuresTravaillees" change="validateForm(event)"/>

Die Methode validateForm könnte im Tag <mx:Script> wie folgt aussehen:


        private function validateForm(event:Event):void 
        {                    
            // Die geleisteten Arbeitsstunden werden bestätigt
            var evt:ValidationResultEvent = heuresTravailleesValidator.validate();
            // Bestätigung erfolgreich?
            btnSalaire.enabled=evt.type==ValidationResultEvent.VALID;
}

Zeile 4: Der Validator „heuresTravailleesValidator“ wird ausgeführt. Er liefert ein Ergebnis vom Typ ValidationResultEvent.
Zeile 6: evt.type ist vom Typ String und gibt den Typ des Ereignisses an. evt.type hat zwei mögliche Werte für den Typ ValidationResultEvent: „invalid“ oder „valid“, dargestellt durch die Konstanten ValidationResultEvent.INVALID und ValidationResultEvent.VALID. Wenn in Zeile 4 die Validierung erfolgreich war, muss evt.type den Wert ValidationResultEvent.VALID haben. In diesem Fall ist die Schaltfläche btnSalaire aktiviert, andernfalls ist sie deaktiviert.

Dies reicht aus, um die Gültigkeit der geleisteten Arbeitsstunden zu prüfen.

Oben hat die Kompilierung des Projekts die Dateien [main3.html] und [main3.swf] erzeugt. Wir rufen die Dateien URL und [http://localhost/pam-v10-flex-client-webservice/main3.html] in einem Browser auf und überprüfen verschiedene Fehlerfälle:

Ein fehlerhaftes Feld hat einen roten Rahmen ([1, 2, 3]), ein korrektes Feld einen blauen Rahmen ([4]).
Bei [4] ist zu beachten, dass die Schaltfläche [Salaire] aktiv ist, da die Anzahl der gearbeiteten Stunden korrekt ist.

14.6. Ansicht Nr. 4

Ansicht Nr. 4 schließt das Formular zur Lohnberechnung ab. Dazu duplizieren wir [main3.xml] in [main4.xml] und arbeiten fortan mit main4, das wir als Standardanwendung festlegen (siehe Abschnitt 14.4).

Die in [main4.xml] und [1] vorgenommenen Änderungen sind folgende:

In der Ansicht [2] wird ein neuer vertikaler Container hinzugefügt, um die Gehaltsbestandteile des Mitarbeiters anzuzeigen
Es wurde eine Komponente zur Formatierung von Geldbeträgen in [3] hinzugefügt
Die Anzeige der Gehaltsbestandteile wird von dem Handler übernommen, der dem Ereignis „Klick“ auf die Schaltfläche „btnSalaire“ zugeordnet ist.

Die Ansicht ändert sich wie folgt:

Der neue Container folgt dem Prinzip des vorherigen. Es handelt sich um einen vertikalen Container VBox [V1], der vier horizontale Container HBox [Hi] enthält. Die horizontalen Container H1 bis H3 bestehen aus vertikalen Containern, die zwei Beschriftungen enthalten, wobei sich die zweite wiederum in einem vertikalen Container befindet, um eine Hintergrundfarbe zu erhalten.

Frage 1: Schreiben Sie den Container für das Gehalt. Er wird im Folgenden complements. genannt.

Frage 2: Schreiben Sie die Methoden, mit denen der Container complements ein- und ausgeblendet werden kann. Orientieren Sie sich dabei an dem, was zuvor für den Container employe erstellt wurde.

Dem Ereignis „click“ der Schaltfläche „btnSalaire“ wird ein Handler zugewiesen:


                <mx:Button id="btnSalaire" label="Salaire" click="calculerSalaire()"/>

Die Methode calculerSalaire lautet wie folgt:


            private function calculerSalaire():void{
                // Formularvorbereitung
                affichageSalaire=true;
                msg.text="";                
                // Parameter für die Lohnberechnung
                heuresTravaillees=Number(txtHeuresTravaillees.text);
                joursDeTravail=int(joursTravailles.value);
                // Der Lohn wird beim Webdienst angefordert
                pam.GetSalaire.send();
}

Zeile 3: Der Boolesche Wert affichageSalaire gibt an, ob der Container complements, der die Gehaltsbestandteile anzeigt, angezeigt werden soll oder nicht. Die Methode getSalaireCompleted wird bei zwei Ereignissen ausgeführt:
- beim Wechsel des Mitarbeiters in der Mitarbeiter-Auswahl, um dessen Informationen ohne Gehalt anzuzeigen. In diesem Fall wird affichageSalaire=false gesetzt.
- bei der Gehaltsberechnung
Zeile 6: Der Text des Eingabefelds txtHeuresTravaillees wird in eine reelle Zahl umgewandelt.
Zeile 7: Der Wert des Inkrementierers joursTravailles wird in eine Ganzzahl umgewandelt.
Zeile 9: Aufruf der Remote-Methode GetSalaire. Zur Erinnerung: Diese Methode erwartet drei Parameter, darunter die Parameter heuresTravaillees und joursDeTravail, die in den Zeilen 6 und 7 initialisiert wurden. Zur Erinnerung: Wenn der asynchrone Aufruf der Methode GetSalaire:
- erfolgreich ist, die Methode getSalaireCompleted aufgerufen wird
- fehlschlägt, wird die Methode getSalaireFault aufgerufen

Frage 3: Ergänzen Sie die aktuelle Methode getSalaireCompleted so, dass sie das Gehalt des Mitarbeiters anzeigt, wenn die Schaltfläche btnSalaire angeklickt wurde.

Derzeit werden die Gehaltsbestandteile ohne Euro-Zeichen angezeigt. Man kann dieses entweder in den Code einfügen oder einen Formatierer verwenden. Letzteres wird nun vorgeschlagen. Der Formatierer lautet wie folgt:


    <mx:CurrencyFormatter id="eurosFormatter" precision="2"
        currencySymbol="€" useNegativeSign="true"
alignSymbol="right"/>

Zeile 1: „id“ ist die Kennung des Formatierers, „precision“ die Anzahl der beizubehaltenden Dezimalstellen.
Zeile 2: currencySymbol ist das zu verwendende Währungssymbol. useNegativeSign gibt an, ob bei negativen Werten das Minuszeichen verwendet werden soll oder nicht.
Zeile 3: alignSymbol gibt an, wo das Währungszeichen im Verhältnis zur Zahl platziert werden soll.

Dieser Formatierer wird im Skriptcode wie folgt verwendet:

                    lblSH.text=eurosFormatter.format(feuilleSalaire.Indemnites.BaseHeure);

eurosFormatter ist die ID des zu verwendenden Formatierers
format ist die Methode, die zum Formatieren einer Zahl aufgerufen werden muss. Sie gibt eine Zeichenkette zurück.
feuilleSalaire.Indemnites.BaseHeure ist hier die zu formatierende Zahl.
lblSH ist der Name einer Komponente vom Typ „Text“.

Aufgabe 4: Passen Sie die Methode getSalaireCompleted so an, dass sie den Währungsformatierer verwendet.