14. Die Anwendung [SimuPaie] – Version 10 – ein Flex-Client für einen ASP.NET-Webdienst

Wir stellen nun einen Flex-Client für den ASP.NET-Webdienst, Version 5, vor. Als IDE wird Flex Builder 3 verwendet. Eine Demoversion dieses Produkts kann unter der URL [https://www.adobe.com/cfusion/tdrc/index.cfm?loc=fr_fr&product=flex] heruntergeladen werden. Flex Builder 3 ist eine Eclipse-basierte IDE. Um den Flex-Client auszuführen, verwenden wir zusätzlich einen Apache-Webserver aus dem Wamp-Tool [http://www.wampserver.com/]. Jeder Apache-Server ist geeignet. Auf dem Browser, der den Flex-Client anzeigt, muss Flash Player Version 9 oder höher installiert sein.

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 JavaScript-Skripte in die an den Browser gesendeten Seiten eingebettet und dann im Browser ausgeführt werden. Eine Flex-Anwendung ist keine Webanwendung im üblichen Sinne: Sie ist eine Client-Anwendung für Dienste, die von Webservern bereitgestellt werden. In dieser Hinsicht ist sie vergleichbar mit einer Desktop-Anwendung, die als Client für dieselben Dienste fungieren würde. In einem Punkt unterscheidet sie sich jedoch: Sie wird zunächst von einem Webserver in einen Browser heruntergeladen, der mit dem Flash Player-Plugin ausgestattet ist, das sie ausführen kann.

Genau wie eine Desktop-Anwendung besteht auch eine Flex-Anwendung im Wesentlichen aus zwei Elementen:

einer Präsentationsschicht: den im Browser angezeigten Ansichten. Diese Ansichten bieten denselben Funktionsumfang wie die Fenster einer Desktop-Anwendung. Eine Ansicht wird mithilfe einer Markup-Sprache namens MXML beschrieben.
einem Codeabschnitt, der in erster Linie Ereignisse verarbeitet, die durch Benutzeraktionen in der Ansicht ausgelöst werden. Dieser Code kann in MXML oder in einer objektorientierten Sprache namens ActionScript geschrieben werden. Es sind zwei Arten von Ereignissen zu unterscheiden:
- Ereignisse, die eine Kommunikation mit dem Webserver erfordern: das Auffüllen einer Liste mit Daten, die von einer Webanwendung bereitgestellt werden, das Senden von Formulardaten an den Server usw. Flex bietet eine Reihe von Methoden für die Kommunikation mit dem Server, die für den Entwickler transparent ablaufen. Diese Methoden sind standardmäßig asynchron: Der Benutzer kann weiterhin mit der Ansicht interagieren, während die Serveranfrage läuft.
- Ereignisse, die die angezeigte Ansicht ändern, ohne Daten mit dem Server auszutauschen, wie z. B. das Ziehen eines Elements aus einer Baumstruktur und das Ablegen in einer Liste. Diese Art von Ereignis wird vollständig lokal im Browser verarbeitet.

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

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

Der Flex-Client läuft lokal im Browser, außer wenn er externe Daten benötigt. In diesem Fall fordert er diese vom Server an [3]. Er empfängt sie in [4] in verschiedenen Formaten: XML oder binär. Die auf dem Webserver abgefragte Anwendung kann in jeder beliebigen Sprache geschrieben sein. Es kommt nur auf das Antwortformat an.

Wir haben die Ausführungsarchitektur einer Flex-Anwendung beschrieben, damit der Leser den Unterschied zu einer herkömmlichen Webanwendung versteht, bei der Seiten keinen Code (JavaScript, Flex, Silverlight usw.) einbetten, den der Browser ausführen würde. Bei letzterer ist der Browser passiv: Er zeigt lediglich HTML-Seiten an, die auf dem Webserver erstellt wurden, der sie an ihn sendet.

14.1. Client/Server-Anwendungsarchitektur

Die hier implementierte Client/Server-Architektur ähnelt der in den Versionen 6 und 8:

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

einen ASP.NET-Webserver, auf dem der Webdienst [S] läuft
einen Apache-Webserver, auf dem der Web-Client [1] läuft

14.2. Das Flex 3-Client-Projekt

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

Erstellen Sie in Flex Builder 3 unter [1] ein neues Projekt
Wir geben ihm in [2] einen Namen und legen in [3] fest, in welchem Ordner es erstellt werden soll

In [4] benennen wir die Hauptanwendung (diejenige, die ausgeführt wird)
in [5] das Projekt, sobald es generiert wurde
in [6] die Haupt-MXML-Datei der Anwendung
Eine MXML-Datei enthält eine Ansicht und den Code zur Verarbeitung ihrer Ereignisse. Über die Registerkarte [Source] [7] können Sie auf die MXML-Datei zugreifen. Dort finden Sie <mx>-Tags, die die Ansicht beschreiben, sowie ActionScript-Code.
Die Ansicht kann grafisch über die Registerkarte [Design] [8] erstellt werden. Die MXML-Tags, die die Ansicht beschreiben, werden dann automatisch auf der Registerkarte [Source] generiert. Das Gegenteil trifft ebenfalls zu: MXML-Tags, die direkt auf der Registerkarte [Source] hinzugefügt werden, werden grafisch auf der Registerkarte [Design] angezeigt.

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 erfolgreich hergestellt wurde. Das Dropdown-Menü „Mitarbeiter“ wird dann ausgefüllt.
in [2] die Ansicht, wenn die Verbindung zum Webdienst fehlgeschlagen ist. Es wird dann eine Fehlermeldung angezeigt.

Die Hauptdatei des Clients [main.xml] sieht wie folgt aus:


<?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[
...    
            // données
            [Bindable]
            private var employes : ArrayCollection;
 
            private function init():void{
...
            }
        ]]>
    </mx:Script>
</mx:Application>

In diesem Code sind mehrere Elemente zu unterscheiden:

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

Beginnen wir mit einem Kommentar zur Definition der Anwendung selbst und zur Beschreibung ihrer Ansicht:

Zeilen 2–3: define:
- das Layout der Komponenten innerhalb des Ansichts-Containers. Das Attribut layout="vertical" gibt an, dass die Komponenten untereinander angeordnet werden.
- die Methode, die ausgeführt werden soll, wenn die Ansicht instanziiert wurde, d. h. wenn alle ihre Komponenten instanziiert wurden. Das Attribut creationComplete="init();" gibt an, dass die Methode init in Zeile 38 ausgeführt werden muss. creationComplete ist eines der Ereignisse, die die Klasse Application auslösen kann.
Zeilen 4–25 definieren die Komponenten der Ansicht
Zeilen 4–25: ein vertikaler Container: Die Komponenten werden untereinander angeordnet
Zeile 5: definiert eine Textkomponente
Zeilen 6–23: ein horizontaler Container: Die Komponenten werden darin horizontal angeordnet.
Zeilen 7–10: ein vertikaler Container, der Text und eine Dropdown-Liste enthält
Zeile 8: der Text
Zeile 9: Die Dropdown-Liste, in der die Liste der Mitarbeiter angezeigt wird. Das Tag „dataProvider="{employees}"“ gibt die Datenquelle an, aus der die Liste gefüllt werden soll. Hier wird die Liste mit dem in Zeile 36 definierten Objekt „employees“ gefüllt. Um „dataProvider="{employees}"“ schreiben zu können, muss das Feld „employees“ das Attribut [Bindable] aufweisen (Zeile 35). Dieses Attribut ermöglicht es, außerhalb des <mx:Script>-Tags auf eine ActionScript-Variable zu verweisen. Das Feld „employees“ ist vom Typ „ArrayCollection“, einem ActionScript-Typ, mit dem Sie Listen von Objekten speichern können, in diesem Fall eine Liste von Objekten vom Typ „Employee“.
Zeilen 11–14: Ein vertikaler Container, der 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 Text und einen Zähler enthält
Zeile 16: der Text
Zeile 17: der Zähler zur Eingabe der gearbeiteten Tage
Zeilen 19–22: ein vertikaler Container, der Text und eine Schaltfläche enthält, die die Berechnung des Gehalts für die im Dropdown-Menü ausgewählte 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 Textbereich in einer TextArea-Komponente. Hier werden Fehlermeldungen angezeigt.
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 Label-Komponente in Zeile 5 generiert
[2]: wurde von der ComboBox-Komponente in Zeile 9 generiert
[3]: wurde von der TextInput-Komponente in Zeile 13 generiert
[4]: wurde von der NumericStepper-Komponente in Zeile 17 generiert
[5]: wurde von der Button-Komponente in Zeile 21 generiert
[6]: wurde von der TextArea-Komponente in Zeile 24 generiert

Sehen wir uns nun die Deklaration des Remote-Webdienstes an:


<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“ (id-Attribut)
Zeile 2: Die URI der WSDL-Datei des Webdienstes (siehe Abschnitt 9.2)
Zeile 3: Die Methode, die bei einem Fehler während der Kommunikation 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 ein Austausch mit dem Webdienst im Gange ist.
Zeilen 5–10: Eine der vom Remote-Webdienst angebotenen Operationen. Hier die Methode „GetAllIdentitiesEmployees“.
Zeile 7: Die Methode, die ausgeführt werden soll, wenn der Aufruf dieser Methode erfolgreich abgeschlossen wurde, d. h. 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 für die Operation „GetAllEmployeeIDs“. Wir wissen, dass diese Methode keine Parameter erwartet. Daher lassen wir das <mx:request>-Tag leer.

Sehen wir uns nun den mit dem Webdienst verknüpften ActionScript-Code an:


<mx:Script>
        <![CDATA[
            import mx.rpc.events.FaultEvent;
            import mx.collections.ArrayCollection;
            import mx.rpc.events.ResultEvent;
 
            // données
            [Bindable]
            private var employes : ArrayCollection;
 
            private function init():void{
                // on note les coordonnées de la zone de message
                msgHeight=msg.height;
                msgWidth=msg.width;
                // on cache la zone de message
                hideMsg();
                // requête au service web distant pour avoir la liste simplifiée des employés
                pam.GetAllIdentitesEmployes.send();
            }
 
            private function wsFault(event:Event):void{
                    // on signale l'erreur
                    msg.text="Service distant indisponible";
                    showMsg();
            }
 
            private function loadEmployesCompleted(event:ResultEvent):void{
                // remplissage combo des employés
                employes=event.result as ArrayCollection;
            }
 
            private function displayEmploye(employe:Object):String{
                // identité d'un employé
                return employe.Prenom + " " + employe.Nom;
            }
 
            private function loadEmployesFault(event:FaultEvent):void{
                // affichage msg d'erreur
                msg.text=event.fault.message;
                // formulaire
                showMsg();
            }
 
    // gestion des blocs
        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 init-Methode wird beim Start der Anwendung ausgeführt, da wir geschrieben haben:


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

Zeilen 13–14: Wir speichern die Höhe und Breite des Meldungsbereichs. Wir verwenden zwei Methoden, hideMsg (Zeilen 48–51) und showMsg (Zeilen 53–56), um den Meldungsbereich je nachdem, ob ein Fehler aufgetreten ist oder nicht, auszublenden bzw. anzuzeigen. Die Methode hideMsg blendet den Meldungsbereich aus, indem sie dessen Höhe und Breite auf 0 setzt. Die Methode showMsg zeigt den Meldungsbereich an, indem sie die in der Methode init gespeicherten Werte für Höhe und Breite wiederherstellt.
Zeile 16: Der Meldungsbereich ist 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 abgeschlossen wird. Zeile 8 des Webdienstes gibt an, dass die Methode „loadEmployesFault“ ausgeführt wird, falls dieser asynchrone Aufruf fehlschlägt.
Zeile 27: Die Methode „loadEmployesCompleted“, die ausgeführt wird, wenn der Webdienstaufruf in Zeile 18 erfolgreich abgeschlossen wird.
Zeile 29: Wir wissen, dass der Webdienst eine XML-Antwort zurückgibt. Es ist hilfreich, darauf zurückzugreifen, um den ActionScript-Code zu verstehen:

in [1], die Webdienst-Seite [Service.asmx]
in [2] der Link zur Testseite für die Methode [GetAllIdentitesEmployes]
in [3] wird der Test durchgeführt. Es werden keine Parameter erwartet.
In [4]: Die XML-Antwort enthält ein Array von Mitarbeitern. Für jeden Mitarbeiter gibt es fünf Informationen, die in den Tags <Id>, <Version>, <SS>, <LastName> und <FirstName> enthalten sind. Wenn die XML-Antwort in einem Array `employees` vom Typ `ArrayCollection` gespeichert wird:
- employees.getItemAt(i): ist das i-te Element des Arrays
- employees.getItemAt(i).SS: ist die Sozialversicherungsnummer dieses Mitarbeiters.
- employees.getItemAt(i).LastName: ist der Nachname dieses Mitarbeiters
- ...

Kehren wir zum ActionScript-Code zurück:

Zeile 29: event.result steht für die XML-Antwort des Webdienstes. Die Methode GetAllIdentitiesEmployees gibt ein Array von Mitarbeitern zurück. event.result steht für dieses Array von Mitarbeitern. Es wird in einer Variablen vom Typ ArrayCollection gespeichert, einem Typ, der im Allgemeinen eine Sammlung von Objekten darstellt. Diese Variable mit dem Namen employees wird in Zeile 9 deklariert. Erinnern Sie sich daran, dass diese Variable die Datenquelle für das Kombinationsfeld „Mitarbeiter“ ist:


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

Für jeden Mitarbeiter in ihrer Datenquelle ruft die Kombinationsfeld die Methode „displayEmploye“ (Attribut „labelFunction“) auf, um den Mitarbeiter anzuzeigen. Die Zeilen 32–34 zeigen, 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 eingefügt
Zeile 41: Das Meldungsfeld wird angezeigt.

Sobald die Anwendung erstellt wurde, befindet sich ihr ausführbarer Code im Ordner [bin-debug] des Flex-Projekts:

Oben

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

Wir sind bereit, den Flex-Client auszuführen. Zunächst müssen wir die dafür erforderliche Laufzeitumgebung einrichten. Kehren wir zu der von uns getesteten Client/Server-Architektur zurück:

Serverseitig:

Starten Sie den ASP.NET-Webdienst [S]

Client-seitig:

Starten Sie den Apache-Server, der die Flex-Anwendung bereitstellt.

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

Das Wamp-Symbol befindet sich am unteren Bildschirmrand [1]
Klicken Sie mit der linken Maustaste auf das Wamp-Symbol, wählen Sie die Option „Apache“ [2] / „Alias-Verzeichnisse“ [3, 4]
Wählen Sie die Option [5]: Alias hinzufügen

Geben Sie unter [6] einen Alias (beliebiger Name) für die Webanwendung ein, die ausgeführt werden soll
Geben Sie unter [7] das Stammverzeichnis der Webanwendung an, die diesen Alias verwenden soll: Dies ist der Ordner [bin-debug] des soeben erstellten Flex-Projekts.

Sehen wir uns die Struktur des Ordners [bin-debug] im Flex-Projekt an:

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

in [1] die URL der Flex-Anwendung
in [2], das Mitarbeiter-Dropdown-Menü, wenn alles ordnungsgemäß funktioniert
in [3], das Ergebnis, wenn der Webdienst gestoppt ist

Vielleicht möchten Sie sich den Quellcode der empfangenen HTML-Seite ansehen:

<!-- saved from 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 Browser History required section -->
<link rel="stylesheet" type="text/css" href="history/history.css" />
<!--  END Browser History required section -->

<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 kein Standard-HTML, sondern ein Objekt (Zeile 28) vom Typ „application/x-shockwave-flash“ (Zeile 41). Dies ist die Datei [main.swf] (Zeile 31), die sich im Ordner [bin-debug] des Flex-Projekts befindet. Es handelt sich um eine große Datei: etwa 600 KB für dieses einfache Beispiel.

14.4. Ansicht Nr. 2

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

In [4,5] haben wir [main2.mxml] als neue Standardanwendung festgelegt. Diese wird nun kompiliert.
In [6] wird die Standardanwendung durch einen blauen Punkt gekennzeichnet.

Der Container [1] zeigt Informationen zu dem Mitarbeiter an, der im Kombinationsfeld [2] ausgewählt wurde. Wir duplizieren [main.xml] als [main2.xml] [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 in Zeile 26 oben, der den MXML-Code für den Container [1] der Ansicht enthält. Wir geben ihm die Kennung employe, damit wir ihn per Code steuern können. Dieser Container muss sich mit derselben Technik, die zuvor für den Nachrichtenbereich verwendet wurde, ein- und ausblenden lassen.

Kehren wir zum visuellen Layout der Ansicht zurück:

Lassen Sie uns die verschiedenen Container für die neu angezeigten Informationen identifizieren:

V1: vertikaler Container für alle Komponenten: die Beschriftung „Mitarbeiter [1]“ und die horizontalen Container [H1] und [H2]
H1: horizontaler Container für die Angaben zu Nachname, Vorname und Adresse
V2: vertikaler Container für die Beschriftung „Nachname“ und die Anzeige des Nachnamens des Mitarbeiters
H2: horizontaler Container für die Angaben zu Stadt, Postleitzahl und Index

Der vollständige Code für den Container „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. Lassen Sie uns kurz den vertikalen Container erläutern, der beispielsweise den Namen des Mitarbeiters anzeigt:

Zeilen 4–9: der vertikale Container
Zeile 5: die Beschriftung „Name“
Zeilen 6–8: Ein vertikaler Container, der den Namen des Mitarbeiters anzeigt (Zeile 7). Wir möchten den Feldern, die Mitarbeiterinformationen anzeigen, eine andere Hintergrundfarbe geben. Die Text-Komponente bietet diese Option nicht (oder vielleicht habe ich nicht gründlich genug gesucht). Man kann die Hintergrundfarbe eines Containers festlegen. Deshalb wurde er hier verwendet.
Zeile 7: Die Textkomponente, die den Namen des Mitarbeiters anzeigt. Wir haben dafür eine Mindesthöhe und -breite festgelegt.

Wir verwenden den Container „employee“, um die Mitarbeiterinformationen anzuzeigen, die der Benutzer aus der Mitarbeiter-Dropdown-Liste auswählt, unabhängig von der Schaltfläche [Salary], die später zur Berechnung des Gehalts verwendet wird, sobald alle erforderlichen Informationen eingegeben wurden.

Um die Änderung der Auswahl im Kombinationsfeld „Mitarbeiter“ zu berücksichtigen, ändert sich der MXML-Code wie folgt:


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

Das Change-Ereignis wird von der Kombinationsfeld ausgelöst, wenn der Benutzer seine Auswahl ändert. Der Handler für dieses Ereignis ist die Methode displayInfosEmploye.

Sehen wir uns die vom Remote-Webdienst bereitgestellten Methoden an:


    // liste de toutes les identités des employés 
    public Employe[] GetAllIdentitesEmployes();
    // ------- le calcul du salaire 
public FeuilleSalaire GetSalaire(string ss, double heuresTravaillees, int joursTravailles);

Hier möchten wir die Informationen (Nachname, Vorname usw.) für den im Dropdown-Menü ausgewählten Mitarbeiter anzeigen. Der Webdienst stellt keine Methode zum Abrufen dieser Informationen bereit. Wir können jedoch die Methode GetSalary verwenden, indem wir die Sozialversicherungsnummer des ausgewählten Mitarbeiters und 0 für die Arbeitsstunden und -tage übergeben. Es wird eine redundante Gehaltsberechnung durchgeführt, aber die Methode GetSalary gibt ein PayStub-Objekt zurück, das die benötigten Informationen enthält.

Die aktuelle Webdienst-Deklaration 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: Definition der Methode „GetSalary“ 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>value1</param1> definiert. Der Bezeichner „param1“ kann nicht beliebig gewählt werden. Sie müssen die vom Webdienst erwarteten Namen verwenden:

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

Kehren wir zur Webservice-Deklaration 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“. Erinnern Sie sich daran, dass beim Start der Flex-Anwendung das Array aller Mitarbeiter in einer Variablen namens „employees“ vom Typ ArrayCollection gespeichert wurde.
- employees.getItemAt(i): ist der Mitarbeiter mit der Nummer i im Array
- employees.getItemAt(i).SS: Ist die Sozialversicherungsnummer dieses Mitarbeiters.
- cmbEmployees.selectedIndex: ist der Index des ausgewählten Elements im Kombinationsfeld „employees“ (cmbEmployees).

Woher wissen wir im obigen Code, dass „SS“ die Sozialversicherungsnummer eines Mitarbeiters ist? Um dies zu beantworten, müssen wir auf die Antwort zurückgreifen, die von der Methode „GetAllIdentitiesEmployees“ gesendet wurde:

in [1], die Webdienstseite [Service.asmx]
in [2] der Link zur Testseite für die Methode [GetAllIdentitesEmployes]
in [3] wird der Test durchgeführt. Es werden keine Parameter erwartet.
In [4]: Die XML-Antwort enthält ein Array mit Mitarbeitern. Dieses Array wird in der Variablen `employees` gespeichert. Wie in [5] gezeigt, ist `SS` tatsächlich das Tag, das zur Speicherung der Sozialversicherungsnummer verwendet wird.

Schließen wir unsere 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 hoursWorked bereitgestellt
Zeile 6: Die Anzahl der Arbeitstage wird durch die Variable daysWorked bereitgestellt

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


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

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


<mx:Script>
        <![CDATA[
            import mx.rpc.events.FaultEvent;
            import mx.collections.ArrayCollection;
            import mx.rpc.events.ResultEvent;
 
            // données
            [Bindable]
            private var employes : ArrayCollection;
            [Bindable]
            private var heuresTravaillees:Number;
            [Bindable]
            private var joursDeTravail:int;
 
            private function init():void{
                // on note les hauteur / largeur de # blocs
                employeHeight=employe.height;
                employeWidth=employe.width;
                // on cache certains éléments
                hideEmploye();
...
            }
 
            private function displayInfosEmploye():void{
                // formulaire
                hideEmploye();
                // on calcule un salaire fictif
                heuresTravaillees=0;
                joursDeTravail=0;
                pam.GetSalaire.send();
            }
 
            private function getSalaireCompleted(event:ResultEvent):void{
    ...
            }
 
            private function getSalaireFault(event:FaultEvent):void{
    ...
            }
 
        // vues partielles -------------------------------------------------
        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 Methode „init“, die beim Start der Flex-Anwendung ausgeführt wird, speichert die Höhe und Breite des vertikalen Mitarbeiter-Containers, damit diese nach dem Ausblenden (Zeilen 45–48) wiederhergestellt werden können (Zeilen 50–53).
Zeile 24: Die Methode „displayInfosEmploye“ wird ausgeführt, wenn der Benutzer seine Auswahl im Kombinationsfeld „employee“ ändert.
Zeile 26: Der Mitarbeiter-Container wird ausgeblendet, falls er zuvor sichtbar war
Zeile 30: Die GetSalary-Methode des Webdienstes wird asynchron aufgerufen. Wir wissen, 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 Sozialversicherungsnummer des in der Mitarbeiter-Kombinationsfeld ausgewählten Mitarbeiters
Zeile 2: Die Methode „displayInfosEmploye“ weist der Variablen „hoursWorked“ den Wert 0 zu (Zeile 28)
Zeile 3: Die Methode „displayInfosEmploye“ weist der Variablen „daysWorked“ 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{
                // hide error msg
                hideMsg();
                // you receive a payslip
                var feuilleSalaire:Object=event.result;
                // display
                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: Wir blenden das Meldungsfeld aus, falls es angezeigt wird.
Zeile 5: Wir rufen die von der GetSalary-Methode zurückgegebene Gehaltsabrechnung ab

Um herauszufinden, was genau die Methode „GetSalaire“ zurückgibt, kehren wir zur Webdienst-Seite zurück:

[1] ist die Webdienst-Seite [Service.asmx]
in [2] der Link, der zur Testseite für die Methode [GetSalaire] führt
in [3] geben wir Parameter an
in [4] das resultierende XML.

Kehren wir zur Methode getSalaireCompleted zurück:


private function getSalaireCompleted(event:ResultEvent):void{
                // hide error msg
                hideMsg();
                // you receive a payslip
                var feuilleSalaire:Object=event.result;
                // display
                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: PayrollSheet = event.result steht für den XML-Feed [4], der von der Methode GetSalary zurückgegeben wird. Aus diesem Feed geht Folgendes hervor:
- payrollSheet.Employee der XML-Stream für einen Mitarbeiter ist
- sheetSalary.Employee.Name der Name dieses Mitarbeiters ist
- ...
Zeilen 7–12: Der XML-Feed „Payroll.Employee“ wird verwendet, um die verschiedenen Felder des Mitarbeiter-Containers zu füllen.
Zeile 13: Der Mitarbeiter-Container wird angezeigt.

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


            private function getSalaireFault(event:FaultEvent):void{
                // error msg display
                msg.text=event.fault.message;
                // form
                showMsg();            
            }

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

Damit sind die für diese neue Version erforderlichen Änderungen abgeschlossen. Wenn Sie die Datei speichern und die Syntax korrekt ist, wird die ausführbare Version im Ordner [bin-debug] des Projekts generiert:

Oben ist [main2.html] die HTML-Seite, die die Flex-Anwendungsdatei [main2.swf] einbettet, die vom Flash Player ausgeführt wird.

Wir können diese neue Version testen:

Der ASP.NET-Webdienst muss laufen
Der Apache-Server muss für den Flex-Client laufen

Unter der Annahme, dass der in der vorherigen Version verwendete Alias [pam-v10-flex-client-webservice] noch existiert, rufen wir die URL [http://localhost/pam-v10-flex-client-webservice/main2.html] vom Apache-Server in einem Browser auf:

in [1], die angeforderte URL
in [2] das Mitarbeiter-Dropdown-Menü
in [3] die Auswahl im Dropdown-Menü ändern, um das Änderungsereignis auszulösen
in [4] das erzielte Ergebnis: Justine Lavertis Profil.

14.5. Ansicht Nr. 3

Ansicht 3 übernimmt die Formularvalidierung. Hier wird nur das Eingabefeld „txtHeuresTravaillees“ überprüft. Solange das Formular ungültig ist, bleibt die Schaltfläche „btnSalaire“ deaktiviert.

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

Von nun an arbeiten wir mit [main3.mxml], das wir als Standardanwendung festlegen (siehe dieses Konzept in 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. Dies ist 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 werden anders vorgehen, indem wir eine Validierungskomponente verwenden:


    <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: Die Komponente <mx:NumberValidator> überprüft, ob eine andere Komponente eine Ganzzahl 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 NumberValidator-Komponente validiert wird. Hier wird das Eingabefeld „txtHeuresTravaillees“ validiert.
Zeile 1: „source“ ist der Name der Eigenschaft der Quellkomponente, die den zu validierenden Wert enthält. Letztendlich wird der Wert „source.property“ validiert, in diesem Fall „txtHeuresTravaillees.text“.
Zeile 2: „precision“ legt die maximal zulässige Anzahl von Dezimalstellen fest. „precision=0“ bedeutet, dass die eingegebene Zahl eine ganze Zahl sein muss.
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 einem Tooltip neben der ungültigen Komponente angezeigt. Standardmäßig sind diese Meldungen auf Englisch. Sie können diese Meldungen selbst 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 Verhältnis zum Attribut „precision“ falsch ist
- negativeError: Die Fehlermeldung, wenn die Zahl negativ ist, das Attribut allowNegative="false" jedoch gesetzt ist
- requiredFieldError: Die Fehlermeldung, wenn keine Eingabe erfolgt ist, obwohl das Attribut requiredField="true" gesetzt ist
- invalidFormatCharsError: Die Fehlermeldung, die angezeigt wird, wenn der Text ungültige Zeichen enthält oder ein ungültiges Format aufweist?

Kehren wir zur Komponente „txtHeuresTravaillees“ zurück:


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

Die Methode „validateForm“ könnte innerhalb des <mx:Script>-Tags wie folgt aussehen:


        private function validateForm(event:Event):void 
        {                    
            // validate hours worked
            var evt:ValidationResultEvent = heuresTravailleesValidator.validate();
            // successful validation?
            btnSalaire.enabled=evt.type==ValidationResultEvent.VALID;
}

Zeile 4: Der Validator „heuresTravailleesValidator“ wird ausgeführt. Er gibt ein Ergebnis vom Typ ValidationResultEvent zurück.
Zeile 6: evt.type ist vom Typ String und gibt den Ereignistyp an. evt.type kann für den Typ ValidationResultEvent zwei Werte annehmen: „invalid“ oder „valid“, dargestellt durch die Konstanten ValidationResultEvent.INVALID und ValidationResultEvent.VALID. Wenn die Validierung in Zeile 4 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 wurden beim Kompilieren des Projekts die Dateien [main3.html] und [main3.swf] erzeugt. Wir geben die URL [http://localhost/pam-v10-flex-client-webservice/main3.html] in einen Browser ein und prüfen auf verschiedene Fehlerfälle:

Ein fehlerhaftes Feld ist rot umrandet [1, 2, 3], ein korrektes Feld ist blau umrandet [4].
Beachten Sie in [4], dass die Schaltfläche [Gehalt] aktiv ist, da die Anzahl der geleisteten Arbeitsstunden korrekt ist.

14.6. Ansicht Nr. 4

Ansicht 4 vervollständigt das Formular zur Gehaltsberechnung. Dazu duplizieren wir [main3.xml] in [main4.xml] und arbeiten nun mit main4, das wir als Standardanwendung festlegen (siehe Abschnitt 14.4).

Die in [main4.xml] [1] vorgenommenen Änderungen lauten wie folgt:

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

Die Ansicht entwickelt sich wie folgt:

Der neue Container folgt dem gleichen Prinzip wie der vorherige. Es handelt sich um einen vertikalen VBox-Container [V1], der vier horizontale HBox-Container [Hi] enthält. Die horizontalen Container H1 bis H3 bestehen aus vertikalen Containern, die jeweils zwei Beschriftungen enthalten, wobei sich die zweite Beschriftung ihrerseits in einem vertikalen Container befindet, um eine Hintergrundfarbe bereitzustellen.

Frage 1: Schreiben Sie den Gehaltscontainer. Er wird im Folgenden als „complements“ bezeichnet.

Frage 2: Schreiben Sie die Methoden zum Ein- und Ausblenden des „complements“-Containers. Orientieren Sie sich dabei an dem, was zuvor für den „employee“-Container gemacht wurde.

Wir ordnen dem „click“-Ereignis der Schaltfläche „btnSalaire“ einen Handler zu:


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

Die Methode *calculerSalaire* sieht wie folgt aus:


            private function calculerSalaire():void{
                // form preparation
                affichageSalaire=true;
                msg.text="";                
                // salary calculation parameters
                heuresTravaillees=Number(txtHeuresTravaillees.text);
                joursDeTravail=int(joursTravailles.value);
                // the salary is requested from the web service
                pam.GetSalaire.send();
}

Zeile 3: Die boolesche Variable displaySalary gibt an, ob der Container „complements“ angezeigt werden soll, der die Gehaltsdetails enthält. Die Methode getSalaryCompleted wird bei zwei Ereignissen ausgeführt:
- wenn der Mitarbeiter im Mitarbeiter-Dropdown-Menü geändert wird, um dessen Informationen ohne das Gehalt anzuzeigen. In diesem Fall wird salaryDisplay=false gesetzt.
- Gehaltsberechnung
Zeile 6: Der Text im Eingabefeld „txtHeuresTravaillees“ wird in eine reelle Zahl umgewandelt.
Zeile 7: Der Wert des Zählers „daysWorked“ wird in eine Ganzzahl umgewandelt.
Zeile 9: Die Remote-Methode „GetSalary“ wird aufgerufen. Beachten Sie, dass diese Methode drei Parameter erwartet, darunter die in den Zeilen 6 und 7 initialisierten Parameter „hoursWorked“ und „daysWorked“. Beachten Sie außerdem, dass bei erfolgreichem asynchronem Aufruf der Methode „GetSalary“:
- erfolgreich ist, die Methode „getSalaireCompleted“ aufgerufen wird
- fehlschlägt, die Methode „getSalaireFault“ aufgerufen wird

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

Derzeit werden Gehaltsposten ohne das Euro-Zeichen angezeigt. Sie können es in den Code einfügen oder einen Formatter verwenden. Dies ist der Ansatz, den wir derzeit verfolgen. Der Formatter sieht wie folgt aus:


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

Zeile 1: id ist die Kennung des Formatierers, precision ist die Anzahl der beizubehaltenden Dezimalstellen.
Zeile 2: currencySymbol ist das zu verwendende Währungssymbol. useNegativeSign gibt an, ob für negative Werte das Minuszeichen verwendet werden soll oder nicht.
Zeile 3: alignSymbol gibt an, wo das Währungssymbol relativ 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 wird. Sie gibt eine Zeichenkette zurück.
feuilleSalaire.Indemnites.BaseHeure ist die zu formatierende Zahl.
lblSH ist der Name einer Text-Komponente.

Frage 4: Ändern Sie die Methode getSalaireCompleted so, dass sie den Währungsformatierer verwendet.