14. [SimuPaie] uygulaması – sürüm 10 – ASP.NET web hizmetinin Flex istemcisi

Şimdi, sürüm 5'teki ASP.NET web hizmetinin bir Flex istemcisini sunuyoruz. Kullanılan IDE, Flex Builder 3'tür. Bu ürünün deneme sürümü URL [https://www.adobe.com/cfusion/tdrc/index.cfm?loc=fr_fr&product=flex] adresinden indirilebilir. Flex Builder 3, Eclipse tabanlı bir IDE'tir. Ayrıca, Flex istemcisini çalıştırmak için Wamp aracının Apache web sunucusunu kullanıyoruz. Herhangi bir Apache sunucusu bu iş için uygundur. Flex istemcisini görüntüleyen tarayıcıda en az Flash Player 9 sürümü yüklü olmalıdır.

Flex uygulamalarının özelliği, tarayıcının Flash Player eklentisi içinde çalışmasıdır. Bu bakımdan, tarayıcıya gönderilen sayfalara JavaScript komut dosyalarını yerleştiren ve bu komut dosyalarının daha sonra tarayıcı içinde çalıştırılan Ajax uygulamalarına benzerler. Bir Flex uygulaması, genel anlamıyla bir web uygulaması değildir: bu, web sunucuları tarafından sağlanan hizmetlerin istemci uygulamasıdır. Bu bakımdan, aynı hizmetlerin istemcisi olan bir masaüstü uygulamasına benzer. Ancak bir noktada farklılık gösterir: başlangıçta, onu çalıştırabilecek Flash Player eklentisine sahip bir tarayıcı aracılığıyla bir web sunucusundan indirilir.

Bir masaüstü uygulaması gibi, bir Flex uygulaması da temel olarak iki unsurdan oluşur:

• görünüm kısmı: tarayıcıda görüntülenen görünümler. Bu görünümler, masaüstü uygulamalarının pencereleri kadar zengin özelliklere sahiptir. Bir görünüm, MXML adlı bir etiket dili kullanılarak tanımlanır.
• kod bölümü: esas olarak kullanıcının görünüm üzerindeki eylemlerinin tetiklediği olayları yönetir. Bu kod, MXML dilinde veya ActionScript adlı nesne yönelimli bir dilde de yazılabilir. İki tür olay arasında ayrım yapmak gerekir:
  • web sunucusuyla veri alışverişi gerektiren olay: bir web uygulaması tarafından sağlanan verilerle bir listenin doldurulması, bir formdaki verilerin sunucuya gönderilmesi, ... Flex, geliştirici için şeffaf bir şekilde sunucuyla iletişim kurmak üzere bir dizi yöntem sunar. Bu yöntemler varsayılan olarak asenkron çalışır: kullanıcı, sunucuya yapılan istek sırasında görünümle etkileşime devam edebilir.
  • sunucu ile veri alışverişi yapmadan görüntülenen görünümü değiştiren olaylar; örneğin, bir ağaçtan bir öğeyi seçip bir listeye bırakmak. Bu tür olaylar tamamen tarayıcı içinde yerel olarak işlenir.

Bir Flex uygulaması genellikle şu şekilde çalıştırılır:

• [1]'te, HTML sayfası istenir
• [2]'te, sayfa gönderilir. Sayfa, Flex uygulamasının tamamını (tüm görünümleri ve bunlara ait olay işleme kodunu) içeren bir ikili dosya olan SWF'i (ShockWave Flash) beraberinde taşır. Bu dosya, tarayıcının Flash Player eklentisi tarafından çalıştırılacaktır.

• Flex istemcisinin çalıştırılması, harici verilere ihtiyaç duymadığı sürece tarayıcı üzerinde yerel olarak gerçekleşir. Bu durumda, verileri [3] sunucusundan ister. Verileri, [4] formatında çeşitli biçimlerde (XML veya ikili) alır. Web sunucusunda sorgulanan uygulama herhangi bir dilde yazılabilir. Önemli olan yalnızca yanıtın formatıdır.

Okuyucunun, sayfaların tarayıcı tarafından çalıştırılacak herhangi bir kod (Javascript, Flex, Silverlight, ...) içermediği geleneksel bir web uygulaması ile Flex uygulamasının yürütme mimarisi arasındaki farkı anlayabilmesi için bu mimariyi açıkladık. Geleneksel web uygulamalarında tarayıcı pasiftir: sadece web sunucusunda oluşturulup kendisine gönderilen sayfaları görüntüler.

14.1. İstemci/sunucu uygulama mimarisi

Uygulanan istemci/sunucu mimarisi, sürüm 6 ve 8’dekine benzerdir:

[1]'te, ASP.NET web katmanı, MXML ve ActionScript dillerinde yazılmış bir Flex web katmanı ile değiştirilmiştir. [C] istemcisi, IDE Flex Builder tarafından oluşturulacaktır. Burada, bu mimarinin gösterilmeyen iki web sunucusu içerdiğini hatırlatmak gerekir:

• [S] web hizmetini çalıştıran ASP.NET web sunucusu
• [1] web istemcisini çalıştıran APACHE web sunucusu

14.2. İstemcinin Flex 3 projesi

Flex istemcisini IDE Flex Builder 3 ile oluşturuyoruz:

• Flex Builder 3'te, [1] ile yeni bir proje oluşturuyoruz
• projeye bir isim veriyoruz ve hangi klasörde oluşturulacağını belirliyoruz

• [4]'te, ana uygulamaya (çalıştırılacak olan) bir ad verilir
• [5]'te, proje oluşturulduktan sonra
• [6]'te, uygulamanın ana dosyası olan MXML
• MXML dosyası, bir görünüm ve bu görünümün olay yönetimi kodunu içerir. [Source] [7] sekmesi, MXML dosyasına erişim sağlar. Bu dosyada, görünümü tanımlayan <mx> etiketleri ve ActionScript kodu bulunur.
• Görünüm, [Design] ve [8] sekmeleri kullanılarak grafiksel olarak oluşturulabilir. Görünümü tanımlayan MXML etiketleri, bu durumda [Source] sekmesinde otomatik olarak oluşturulur. Tersi de geçerlidir: [Source] sekmesine doğrudan eklenen MXML etiketleri, [Design] sekmesinde grafiksel olarak yansıtılır.

14.3. 1 numaralı görünüm

Sırayla, sürüm 1'deki arayüze benzer bir web arayüzü oluşturacağız (bkz. 4. paragraf). Öncelikle şu arayüzü oluşturacağız:

• [1]'te, web hizmetine bağlantı kurulabildiğinde görülen ekran. Bu durumda çalışanlar listesi doldurulur.
• [2] dosyasında, web hizmetine bağlantı kurulamadığında görülen ekran. Bu durumda bir hata mesajı görüntülenir.

Müşterinin ana dosyası [main.xml] şu şekildedir:

<?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[
...    
            // veriler
            [Bindable]
            private var employes : ArrayCollection;

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

Bu kodda çeşitli unsurları ayırt etmek gerekir:

• uygulamanın tanımı (2-3. satırlar)
• uygulamanın görünümünün açıklaması (4-25. satırlar)
• <mx:Script> etiketinin içindeki ActionScript dilinde yazılmış olay işleyicileri (31-42. satırlar).
• uzak web hizmetinin tanımı (27-29. satırlar)

Öncelikle, uygulamanın kendisinin tanımı ve görünümünün açıklamasını inceleyelim:

• 2-3. satırlar: şunları tanımlar:
  • Görünüm konteyneri içindeki bileşenlerin düzenlenme biçimini. layout="vertical" özniteliği, bileşenlerin birbirinin altına yerleştirileceğini belirtir.
  • Görünüm örneklendiğinde çalıştırılacak yöntem, c.a.d. Tüm bileşenleri örneklendiğinde. creationComplete="init();" özniteliği , 38. satırdaki init yönteminin çalıştırılması gerektiğini belirtir. creationComplete, Application sınıfının yayınlayabileceği olaylardan biridir.
• 4-25. satırlar, görünümün bileşenlerini tanımlar
• 4-25. satırlar: dikey bir kap: bileşenler bu kap içinde birbirinin altına yerleştirilecektir
• 5. satır: bir metni tanımlar
• 6-23. satırlar: yatay bir konteyner: bileşenler bu konteyner içinde yatay olarak yerleştirilecektir.
• 7-10. satırlar: Bir metin ve bir açılır liste içerecek dikey bir konteyner
• 8. satır: metin
• 9. satır: Çalışan listesinin yerleştirileceği açılır liste. dataProvider="{employes}" etiketi, listeyi dolduracak verilerin kaynağını belirtir. Burada liste, 36. satırda tanımlanan employes nesnesiyle doldurulacaktır. dataProvider="{employes}" yazabilmek için, employes alanının [Bindable] özniteliğine sahip olması gerekir (satır 35). Bu öznitelik, ActionScript değişkeninin <mx:Script> etiketinin dışında referanslanmasına olanak tanır. employes alanı, ArrayCollection türündedir; bu, nesne listelerini depolamaya olanak tanıyan bir ActionScript türüdür ve burada Employe türündeki nesnelerin bir listesini barındırır.
• 11-14. satırlar: Bir metin ve bir giriş alanı içerecek dikey bir konteyner
• 12. satır: metin
• 13. satır: Çalışılan saatlerin girileceği alan.
• 15-18. satırlar: Bir metin ve bir artırıcı içerecek dikey bir konteyner
• 16. satır: metin
• 17. satır: Çalışılan günlerin girilmesini sağlayacak artırıcı.
• satır 19-22: bir metin ve açılır menüden seçilen kişinin maaş hesaplamasını başlatacak bir düğmeyi içerecek dikey bir konteyner.
• 20. satır: metin
• 21. satır: Düğme.
• satır 23: satır 6'da başlayan yatay konteynerin sonu
• 24. satır: TextArea türünde bir bileşende yer alan metin alanı. Hata mesajlarını görüntüleyecektir.
• 25. satır: 4. satırda başlayan dikey konteynerin sonu

4-25. satırlar, [Design] sekmesinde aşağıdaki görünümü oluşturur:

• [1]: 5. satırdaki Label bileşeni tarafından oluşturulmuştur
• [2]: 9. satırdaki ComboBox bileşeni tarafından oluşturulmuştur
• [3]: 13. satırdaki TextInput bileşeni tarafından oluşturulmuştur
• [4]: 17. satırdaki NumericStepper bileşeni tarafından oluşturulmuştur
• [5]: 21. satırdaki Button bileşeni tarafından oluşturulmuştur
• [6]: 24. satırdaki TextArea bileşeni tarafından oluşturulmuştur

Şimdi uzak web hizmetinin bildirimini inceleyelim:

<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>

• 1. satır: Web hizmeti, pam kimlik bileşenidir (id özniteliği)
• 2. satır: Web hizmetinin WSDL dosyasındaki URI (bkz. paragraf 9.2)
• 3. satır: Web hizmeti ile veri alışverişi sırasında hata oluşması durumunda uygulanacak yöntem: wsFault yöntemi.
• 4. satır: Kullanıcıya web hizmeti ile veri alışverişinin devam ettiğini göstermek üzere bir göstergenin görüntülenmesini talep eder.
• 5-10. satırlar: Uzak web hizmeti tarafından sunulan işlemlerden biri. Burada, GetAllIdentitesEmployes yöntemi.
• 7. satır: Bu yöntemin çağrısı normal şekilde sona erdiğinde yürütülecek yöntem, c.a.d. Web hizmeti çalışan listesini başarıyla döndürdüğünde
• 8. satır: Bu yöntemin çağrısı bir hata ile sonuçlandığında yürütülecek yöntem.
• 9. satır: GetAllIdentitesEmployes işleminin parametreleri. Bu yöntemin parametre beklemediği biliniyor. Bu nedenle <mx:request> etiketini boş bırakıyoruz.

Şimdi web hizmetiyle ilişkili ActionScript kodunu inceleyelim:

<mx:Script>
        <![CDATA[
            import mx.rpc.events.FaultEvent;
            import mx.collections.ArrayCollection;
            import mx.rpc.events.ResultEvent;
                        
            // veriler
            [Bindable]
            private var employes : ArrayCollection;
    
            private function init():void{
                // mesaj alanının koordinatları kaydediliyor
                msgHeight=msg.height;
                msgWidth=msg.width;
                // mesaj alanı gizlenir
                hideMsg();
                // çalışanların basitleştirilmiş listesini almak için uzak web hizmetine istek gönderilir
                pam.GetAllIdentitesEmployes.send();
            }
            
            private function wsFault(event:Event):void{
                    // hata bildirilir
                    msg.text="Service distant indisponible";
                    showMsg();
            }
            
            private function loadEmployesCompleted(event:ResultEvent):void{
                // çalışanlar için açılır menü doldurulur
                employes=event.result as ArrayCollection;
            }
            
            private function displayEmploye(employe:Object):String{
                // bir çalışanın kimliği
                return employe.Prenom + " " + employe.Nom;
            }
            
            private function loadEmployesFault(event:FaultEvent):void{
                // hata mesajının görüntülenmesi
                msg.text=event.fault.message;
                // form
                showMsg();
            }

    // blok yönetimi
        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>

• 11. satır: Uygulama başlatıldığında init yöntemi yürütülür, çünkü şu kod yazılmıştır:

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

• 13-14. satırlar: Mesaj alanının yüksekliği ve genişliği kaydedilir. Hata olup olmadığına göre mesaj alanını gizlemek / göstermek için sırasıyla hideMsg (satır 48-51) ve showMsg (satır 53-56) yöntemleri kullanılır. hideMsg yöntemi, mesaj alanının yüksekliğini ve genişliğini 0 olarak ayarlayarak alanı gizler. showMsg yöntemi ise, init yönteminde kaydedilen yüksekliği ve genişliği geri yükleyerek mesaj alanını görüntüler.
• 16. satır: Mesaj alanı gizlenir. Başlangıçta herhangi bir hata yoktur.
• 18. satır: pam web hizmetinin (web hizmetinin 1. satırı) GetAllIdentitesEmploye yöntemi (web hizmetinin 6. satırı) çağrılır. Çağrı asenkron olarak yapılır. Web hizmetinin 7. satırı, bu asenkron çağrının başarılı bir şekilde sonuçlanması durumunda loadEmployesCompleted yönteminin yürütüleceğini belirtir. Web hizmetinin 8. satırı, bu asenkron çağrının başarısız olması durumunda loadEmployesFault yönteminin yürütüleceğini belirtir.
• 27. satır: 18. satırdaki web hizmeti çağrısı başarılı olursa yürütülen loadEmployesCompleted yöntemi.
• 29. satır: Web hizmetinin XML yanıtını döndürdüğü bilinmektedir. ActionScript kodunu anlamak için bu yanıtı tekrar incelemek faydalı olacaktır:

• [1]'e, [Service.asmx] web hizmeti sayfasına
• [2]'e, [GetAllIdentitesEmployes] yönteminin test sayfasına bağlantı
• [3]'e, test tamamlandı. Herhangi bir parametre beklenmiyor.
• [4]: XML yanıtı bir çalışan tablosu içerir. Her biri için <Id>, <Version>, <SS>, <Nom>, <Prenom> etiketleri içinde kapsüllenmiş beş bilgi bulunmaktadır. XML yanıtı, ArrayCollection türündeki employes tablosuna eklenirse:
  • employes.getItemAt(i): dizinin i numaralı elemanıdır
  • employes.getItemAt(i).SS: bu çalışanın sosyal güvenlik numarasıdır.
  • employes.getItemAt(i).Ad: bu çalışanın adıdır
  • ...

ActionScript koduna geri dönelim:

• 29. satır: event.result, web hizmetinin XML yanıtını temsil eder. GetAllIdentitesEmployes yöntemi, bir çalışan dizisi döndürür. event.result, bu çalışan dizisini temsil eder. Bu dizi, genel olarak bir nesne koleksiyonunu temsil eden ArrayCollection türünde bir değişkene yerleştirilir. employes adlı bu değişken 9. satırda tanımlanmıştır. Bu değişkenin, çalışanlar açılır menüsünün veri kaynağı olduğunu hatırlayalım:

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

Veri kaynağındaki her çalışan için, açılır menü, çalışanı görüntülemek üzere displayEmploye yöntemini (labelFunction özniteliği) çağıracaktır. 32-34. satırlarda, bu yöntemin çalışanın soyadını ve adını görüntülediği görülmektedir.

• 37. satır: 18. satırdaki web hizmeti çağrısı başarısız olursa çalıştırılan loadEmployesFault yöntemi. event.fault.message, web hizmeti tarafından geri gönderilen hata mesajıdır.
• 39. satır: Bu hata mesajı mesaj alanına yerleştirilir
• 41. satır: Mesaj alanı görüntülenir.

Uygulama derlendiğinde, yürütülebilir kodu Flex projesinin [bin-debug] klasöründe bulunur:

Yukarıda,

• [main.html] dosyası, Flex istemcisini almak için tarayıcı tarafından web sunucusundan istenecek olan HTML dosyasını temsil eder
• [main.swf] dosyası ise, tarayıcıya gönderilen HTML sayfası içine kapsüllenecek ve ardından tarayıcının Flash Player eklentisi tarafından çalıştırılacak olan Flex istemcisinin ikili dosyasıdır.

Flex istemcisini çalıştırmaya hazırız. Öncelikle bunun için gerekli olan çalışma ortamını kurmamız gerekiyor. Test ettiğimiz istemci/sunucu mimarisine geri dönelim:

Sunucu tarafında:

• ASP.NET web hizmetini başlatın [S]

İstemci tarafında:

• Flex uygulamasının çağrılacağı Apache sunucusunu başlatın.

Burada Wamp aracını kullanıyoruz. Bu araçla, Flex projesindeki [bin-debug] klasörüne bir takma ad atayabiliriz.

• Wamp simgesi ekranın alt kısmında yer alır [1]
• Wamp simgesine sol tıklayarak Apache seçeneğini seçin [2] / Alias Directories [3, 4]
• [5] seçeneğini seçin: Takma ad ekle

• [6]'te, çalıştırılacak web uygulamasına bir takma ad (istediğiniz herhangi bir ad) verin
• [7]'te bu takma adı taşıyacak web uygulamasının kök dizinini belirtin: bu, az önce oluşturduğumuz Flex projesinin [bin-debug] klasörüdür.

Flex projesinin [bin-debug] klasörünün yapısını hatırlayalım:

[main.html] dosyası, Flex uygulamasının HTML dosyasıdır. [bin-debug] klasörü üzerinde az önce oluşturduğumuz takma ad sayesinde, bu dosyaya URL ve [http://localhost/pam-v10-flex-client-webservice/main.html] üzerinden erişilebilir. Bu dosyayı, Flash Player sürüm 9 veya üstü eklentisine sahip bir tarayıcıda açıyoruz:

• [1] dosyasında, Flex uygulamasının URL dosyası
• [2]'e, her şey yolunda olduğunda çalışanların açılır menüsü
• [3], web hizmeti durdurulduğunda elde edilen sonuç

Alınan HTML sayfasının kaynak kodunu görüntülemek isteyebilirsiniz:

<!-- url=(0014)about:internet adresinden kaydedildi -->
<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 Tarayıcı Geçmişi gerekli bölüm -->
<link rel="stylesheet" type="text/css" href="history/history.css" />
<!--   END Tarayıcı Geçmişi gerekli bölüm -->

<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>

• Sayfanın gövdesi 25. satırda başlar. İçinde klasik HTML değil, "application/x-shockwave-flash" türünde (41. satır) bir nesne (28. satır) bulunur. Bu, Flex projesinin [bin-debug] klasöründe görülebilen [main.swf] dosyasıdır (31. satır). Bu, oldukça büyük bir dosyadır: bu basit örnek için yaklaşık 600 K boyutundadır.

14.4. 2 numaralı görünüm

Mevcut görünüme VBox türünde yeni bir kapsayıcı ekleyeceğiz:

• [4,5]'te, [main2.mxml]'i yeni varsayılan uygulama olarak belirleyeceğiz. Bundan sonra derlenecek olan bu uygulama olacaktır.
• [6]'te, varsayılan uygulama mavi bir nokta ile gösterilir.

[1] konteyneri, [2] açılır menüsünden seçilen çalışana ait bilgileri gösterecektir. Yeni görünümü oluşturmak için [main.xml]'i [main2.xml] ve [3] olarak çoğaltıyoruz. Bundan sonra [main2.xml] ile çalışacağız.

Önceki projede yapılan değişiklik, yukarıdaki 26. satırdaki konteynerin eklenmesidir; bu konteyner, görünümün [1] konteynerinden alınan MXML kodunu içerir. Kodla üzerinde işlem yapabilmek için bu konteynere employe kimliğini veriyoruz. Zira bu konteyner, daha önce mesaj alanı için kullanılan teknikle gizlenebilmeli ve gösterilebilmelidir.

Görünümün arayüzüne geri dönelim:

Görüntülenen yeni bilgilerin farklı konteynerlerini belirleyelim:

• V1: Tüm bileşenleri içeren dikey konteyner: Employé, [1] etiketleri ve [H1] ile [H2] yatay konteynerleri
• H1: Nom, Prénom ve Adresse bilgileri için yatay konteyner
• V2: Nom başlığı ve çalışan adının görüntülenmesi için dikey konteyner.
• H2: Ville bilgileri, Posta Kodu ve Indice için yatay konteyner

"employe" konteynerinin tam kodu şöyledir:

<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>

Kod kendiliğinden anlaşılır. Örneğin, çalışanın adını gösteren dikey konteyneri kısaca açıklayalım:

• 4-9. satırlar: dikey konteyner
• 5. satır: Nom etiketi
• 6-8. satırlar: Çalışanın adını (7. satır) gösterecek dikey bir konteyner. Çalışanla ilgili bilgileri gösteren alanlara farklı bir arka plan rengi vermek istiyoruz. Text bileşeni bu imkanı sunmuyor (ya da ben doğru yerde aramamışım). Bir konteynerin arka plan rengi ayarlanabilir. Bu nedenle burada bu bileşen kullanılmıştır.
• 7. satır: Çalışanın adını gösterecek olan Text bileşeni. Bu bileşene minimum yükseklik ve genişlik değerleri atanır.

Kullanıcının çalışan listesi açılır menüsünden seçtiği çalışanın bilgilerini görüntülemek için "employe" konteynerini kullanacağız; bu, gerekli tüm bilgiler girildikten sonra maaşı hesaplamakla görevli olacak [Salaire] düğmesinden bağımsız olarak gerçekleştirilecektir.

"employes" açılır menüsündeki seçim değişikliğini yönetmek için, MXML kodunda aşağıdaki değişiklikler yapılır:

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

Kullanıcı seçimini değiştirdiğinde, bu olay açılır menü tarafından yayılır. Bu olayın işleyicisi, displayInfosEmploye yöntemi olacaktır.

Uzak web hizmeti tarafından sunulan yöntemleri hatırlayalım:

    // tüm çalışan kimliklerinin listesi 
    public Employe[] GetAllIdentitesEmployes();
    // ------- maaş hesaplaması 
public FeuilleSalaire GetSalaire(string ss, double heuresTravaillees, int joursTravailles);

Burada, açılır menüden seçilen çalışanın bilgilerini (soyadı, adı, ...) görüntülemek istiyoruz. Web hizmeti, bu bilgileri almak için bir yöntem sunmamaktadır. Bununla birlikte, seçilen çalışanın SS numarasını ve çalışılan saatler ile günler için 0 değerini geçirerek GetSalaire yöntemini kullanabiliriz. Gereksiz bir maaş hesaplaması yapılacaktır, ancak GetSalaire yöntemi bize FeuilleSalaire türünde bir nesne döndürecek ve bu nesnede ihtiyacımız olan bilgileri bulabileceğiz.

Web hizmetinin mevcut beyanı, GetSalaire yönteminin tanımını içerecek şekilde değiştirilir:

<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>

• 11-19. satırlar: web hizmetinin GetSalaire yönteminin tanımı
• 12. satır: GetSalaire yöntemine yapılan çağrı başarılı olduğunda yürütülecek yöntemi tanımlar
• 13. satır: GetSalaire yöntemine yapılan çağrı başarısız olduğunda yürütülecek yöntemi tanımlar
• 14-18. satırlar: GetSalaire yöntemi üç parametre bekler. Bu parametreler, <mx:request> etiketinin içinde <param1>değer1</param1> biçiminde tanımlanır. param1 tanımlayıcısı rastgele bir değer olamaz. Web hizmeti tarafından beklenen adların kullanılması gerekir:

• [1]'te, [http://localhost:1077/Service1.asmx] web hizmeti sayfası
• [2], [GetSalaire] yönteminin test sayfasına bağlantı
• [3]'te, yöntemin beklediği parametreler. <mx:request> etiketinin alt etiketleri olarak bu isimlerin kullanılması gerekir.

Web hizmetinin tanımına geri dönelim:

        <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>

• 5. satır: ss parametresi. Hatırlayacağınız üzere, Flex uygulamasının başlatılması sırasında tüm çalışanların dizisi, ArrayCollection türünde bir employes değişkeninde depolanmıştı.
  • employes.getItemAt(i): dizideki i numaralı çalışandır
  • employes.getItemAt(i).SS: bu çalışanın sosyal güvenlik numarasıdır.
  • cmbEmployes.selectedIndex: cmbemployes çalışan listesindeki açılır menüden seçilen öğenin numarasıdır.

Yukarıda, SS'in bir çalışanın sosyal güvenlik numarası olduğunu nasıl anlarız? Bunun için, GetAllIdentitesEmployes yöntemi tarafından gönderilen cevaba geri dönmemiz gerekir:

• [1]'te, [Service.asmx] web hizmeti sayfası
• [2]'e, [GetAllIdentitesEmployes] yönteminin test sayfasına giden bağlantı
• [3]'e yönlendirilir, test yapılır. Herhangi bir parametre beklenmez.
• [4]'te: XML yanıtı bir çalışan tablosu içerir. employes değişkenine kaydedilen bu tablodur. [5]'te görüldüğü gibi, SS, sosyal güvenlik numarasını içermek için kullanılan etikettir.

Web hizmeti incelememizi sonlandıralım:

        <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>

• 6. satır: Çalışılan saat sayısı, heuresTravaillees değişkeni tarafından sağlanacaktır
• 6. satır: Çalışılan gün sayısı, joursDeTravail değişkeni tarafından sağlanacaktır

Bu değişkenler, mx:Script etiketinde, [Bindable] özniteliği ile tanımlanmalıdır; bu öznitelik, değişkenlerin MXML bileşenleri tarafından referans alınabilmesini sağlar (aşağıdaki 7-10. satırlar).

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

Görünümün olay yönetimi kodu şu şekilde değişir:

<mx:Script>
        <![CDATA[
            import mx.rpc.events.FaultEvent;
            import mx.collections.ArrayCollection;
            import mx.rpc.events.ResultEvent;
                        
            // veriler
            [Bindable]
            private var employes : ArrayCollection;
            [Bindable]
            private var heuresTravaillees:Number;
            [Bindable]
            private var joursDeTravail:int;
    
            private function init():void{
                // # bloklarının yüksekliği / genişliği kaydedilir
                employeHeight=employe.height;
                employeWidth=employe.width;
                // bazı öğeler gizlenir
                hideEmploye();
...
            }
            
            private function displayInfosEmploye():void{
                // form
                hideEmploye();
                // hayali bir maaş hesaplanır
                heuresTravaillees=0;
                joursDeTravail=0;
                pam.GetSalaire.send();
            }
            
            private function getSalaireCompleted(event:ResultEvent):void{
    ...
            }
            
            private function getSalaireFault(event:FaultEvent):void{
    ...
            }

        // kısmi görünümler -------------------------------------------------
        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>

• 15. satır: Flex uygulamasının başlatılması sırasında yürütülen init yöntemi, dikey employe konteynerinin yüksekliğini ve genişliğini hafızaya alır; bu, konteyneri gizledikten (satır 45-48) sonra geri yükleyebilmek içindir (satır 50-53).
• 24. satır: displayInfosEmploye yöntemi, kullanıcı çalışanlar açılır menüsündeki seçimini değiştirdiğinde çalıştırılan yöntemdir.
• 26. satır: employe konteyneri, görünür durumdaysa gizlenir
• satır 30: Web hizmetinin GetSalaire yöntemi asenkron olarak çağrılır. Bu yöntemin üç parametre beklediği bilinmektedir:

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

• 1. satır: ss parametresi, çalışanlar açılır menüsünden seçilen çalışanın SS numarası olacaktır
• 2. satır: displayInfosEmploye yöntemi, heuresTravaillees değişkenine (28. satır) 0 değerini atar
• 3. satır: displayInfosEmploye yöntemi, joursDeTravail değişkenine 0 değerini atar (29. satır)

Web hizmetinin GetSalaire yöntemi başarıyla tamamlanırsa, GetSalaireCompleted yöntemi yürütülür:

private function getSalaireCompleted(event:ResultEvent):void{
                // hata mesajı gizleniyor
                hideMsg();
                // maaş bordrosu alınır
                var feuilleSalaire:Object=event.result;
                // görüntüleme
                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();
            }

• 3. satır: Mesaj alanı görüntülenmişse gizlenir.
• satır 5: GetSalaire yöntemi tarafından geri gönderilen maaş bordrosu alınır

GetSalaire yönteminin tam olarak ne döndürdüğünü öğrenmek için web hizmeti sayfasına geri dönüyoruz:

• [1]'te, [Service.asmx] web hizmeti sayfası
• [2]'e, [GetSalaire] yönteminin test sayfasına yönlendiren bağlantı
• [3]'te parametreler sağlanır
• [4]'te, elde edilen sonuç XML.

getSalaireCompleted yöntemine geri dönelim:

private function getSalaireCompleted(event:ResultEvent):void{
                // hata mesajı gizlenir
                hideMsg();
                // maaş bordrosu alınır
                var feuilleSalaire:Object=event.result;
                // görüntüleme
                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();
}

• 5. satır: feuilleSalaire=event.result, GetSalaire yöntemi tarafından döndürülen XML [4] akışını temsil eder. Bu akışa göre şunu görebiliriz:
  • feuilleSalaire.Employe, bir çalışana ait XML akışıdır
  • feuilleSalaire.Employe.Nom, bu çalışanın adıdır
  • ...
• 7-12. satırlar: XML feuilleSalaire akışı, "employe" konteynerinin çeşitli alanlarını doldurmak için kullanılır.
• 13. satır: "employe" konteyneri görüntülenir.

Web hizmetinin GetSalaire yöntemi başarısızlıkla sonuçlanırsa, getSalaireFault yöntemi yürütülür:

            private function getSalaireFault(event:FaultEvent):void{
                // hata mesajı görüntülenir
                msg.text=event.fault.message;
                // form
                showMsg();            
            }

• 3. satır: event.fault.message hata mesajı mesaj alanına eklenir
• 5. satır: Mesaj alanı görüntülenir

Bu yeni sürüm için gerekli değişiklikler burada sona erer. Dosya kaydedildiğinde ve sözdizimi açısından doğruysa, projenin [bin-debug] klasöründe çalıştırılabilir sürüm oluşturulur:

Yukarıda, [main2.html], Flash Player tarafından çalıştırılacak olan Flex uygulaması [main2.swf]'in ikili dosyasını içeren HTML sayfasıdır.

Bu yeni sürümü test edebiliriz:

• ASP.NET web hizmeti başlatılmalıdır
• Flex istemcisi için Apache sunucusu başlatılmalıdır

Önceki sürümde kullanılan [pam-v10-flex-client-webservice] takma adının hâlâ mevcut olduğunu varsayarsak, bir tarayıcıda Apache sunucusundan URL ve [http://localhost/pam-v10-flex-client-webservice/main2.html] adreslerini çağırırız:

• [1]'e, istenen URL
• [2]'e, çalışanlar açılır menüsü
• [3]'te, change olayını tetiklemek için açılır menüdeki seçimi değiştiriyoruz
• [4]'te elde edilen sonuç: Justine Laverti'nin profili.

14.5. 3 numaralı görünüm

3 numaralı görünüm, formun geçerlilik kontrolünü gerçekleştirir. Burada yalnızca "txtHeuresTravaillees" giriş alanı kontrol edilir. Form hatalı olduğu sürece, "btnSalaire" düğmesi devre dışı kalır.

Bu işlevselliği eklemek için, [main2.mxml]'i [main3.mxml]'te kopyalıyoruz:

Artık [main3.mxml] ile çalışacağız ve bunu varsayılan uygulama olarak ayarlayacağız (bu konseptin 14.4. paragrafına bakınız). Öncelikle, "txtHeuresTravaillees" bileşenine bir öznitelik ekliyoruz:

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

"txtHeuresTravaillees" giriş alanının içeriği her değiştiğinde, validateForm yöntemi çağrılır. Bu, geliştirici tarafından yazılmış yerel bir yöntemdir. Bu yöntemde, "txtHeuresTravaillees" giriş alanının içeriğinin gerçekten pozitif bir tamsayı olup olmadığını kontrol edebiliriz. Ancak biz, bir doğrulama bileşeni kullanarak farklı bir yol izleyeceğiz:

    <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"/>

• 1. satır: <mx:NumberValidator> bileşeni, başka bir bileşenin bir tamsayı veya gerçek sayı içerdiğini doğrulamaya yarar.
• 1. satır: id özniteliği, bileşene bir tanımlayıcı atar.
• 1. satır: source, NumberValidator bileşeni tarafından doğrulanan bileşenin kimliğidir. Burada, "txtHeuresTravaillees" giriş alanı doğrulanmaktadır.
• 1. satır: property, doğrulanacak değeri içeren source bileşeninin özellik adını belirtir. Sonuç olarak, source.property değeri doğrulanır; burada bu değer txtHeuresTravaillees.text'tir.
• 2. satır: precision, izin verilen maksimum ondalık basamak sayısını belirler. precision=0, girilen sayının tam sayı olup olmadığını kontrol eder.
• 2. satır: allowNegative, negatif sayıların izin verilip verilmediğini belirtir
• 7. satır: required, girişin zorunlu olup olmadığını belirtir.

Bir doğrulama koşulu karşılanmadığında, hatalı bileşenin yanında bir balon içinde bir hata mesajı görüntülenir. Varsayılan olarak bu mesajlar İngilizcedir. Bu mesajları kendiniz tanımlayabilirsiniz:

• (devamı)
  • invalidCharError: Metinde bir sayı içinde bulunamayacak bir karakter olduğunda görüntülenen hata mesajı
  • precisionError: precision özniteliğine göre ondalık basamak sayısı yanlış olduğunda görüntülenen hata mesajı
  • negativeError: allowNegative="false" özniteliği varken sayının negatif olması durumunda görüntülenen hata mesajı
  • requiredFieldError: requiredField="true" özniteliği ayarlanmışken herhangi bir giriş yapılmadığında görüntülenen hata mesajı
  • invalidFormatCharsError: Metinde geçersiz karakterler veya biçim varsa görüntülenen hata mesajı?

"txtHeuresTravaillees" bileşenine geri dönelim:

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

<mx:Script> etiketinde validateForm yöntemi şu şekilde olabilir:

        private function validateForm(event:Event):void 
        {                    
            // çalışılan saatler onaylanıyor
            var evt:ValidationResultEvent = heuresTravailleesValidator.validate();
            // onay başarılı mı?
            btnSalaire.enabled=evt.type==ValidationResultEvent.VALID;
}

• 4. satır: "heuresTravailleesValidator" doğrulayıcısı çalıştırılır. ValidationResultEvent türünde bir sonuç döndürür.
• 6. satır: evt.type, String türündedir ve olayın türünü belirtir. evt.type, ValidationResultEvent türü için "invalid" veya "valid" olmak üzere iki olası değere sahiptir; bunlar ValidationResultEvent.INVALID ve ValidationResultEvent.VALID sabitleriyle temsil edilir. 4. satırda, doğrulama başarılı olmuşsa, evt.type'in değeri ValidationResultEvent.VALID olmalıdır. Bu durumda, btnSalaire düğmesi etkinleştirilir; aksi takdirde devre dışı bırakılır.

Çalışılan saatlerin geçerliliğini test etmek için bu kadarı yeterlidir.

Yukarıda, projenin derlenmesi sonucunda [main3.html] ve [main3.swf] dosyaları oluşturulmuştur. Bir tarayıcıda URL ve [http://localhost/pam-v10-flex-client-webservice/main3.html] dosyalarını çağırıyoruz ve çeşitli hata durumlarını kontrol ediyoruz:

• Hatalı bir alanın kenarlığı kırmızıdır ([1, 2, 3]), doğru bir alanın kenarlığı ise mavidir ([4]).
• [4] örneğinde, çalışılan saat sayısı doğru olduğu için [Salaire] düğmesinin aktif olduğu görülür.

14.6. 4. Sayfa

4 numaralı görünüm, maaş hesaplama formunu tamamlar. Bunun için [main3.xml]'i [main4.xml]'e kopyalarız ve bundan sonra varsayılan uygulama olarak ayarladığımız main4 ile çalışırız (bkz. paragraf 14.4).

[main4.xml] ve [1] dosyalarında yapılan değişiklikler şunlardır:

• çalışanın maaş kalemlerini görüntülemek için [2] görünümüne yeni bir dikey konteyner eklenmiştir
• [3]'e para birimlerini biçimlendirmek için bir bileşen eklenmiştir
• Maaş kalemlerinin görüntülenmesi, "btnSalaire" düğmesinin "tıklama" olayına atanan yönetici tarafından gerçekleştirilir.

Görünüm şu şekilde değişir:

Yeni konteyner, bir öncekiyle aynı prensibi izler. Bu, dört adet yatay konteyner (HBox, [Hi]) içeren dikey bir konteynerdir (VBox, [V1]). H1 ile H3 arasındaki yatay konteynerler, iki etiket içeren dikey konteynerlerden oluşur; bu etiketlerden ikincisi, arka plan rengi sağlamak için kendisi de bir dikey konteynerin içindedir.

---

Soru 1: Maaş konteynerini yazınız. Bu konteyner bundan sonra complements. olarak adlandırılacaktır.

---

---

Soru 2: complements konteynerini gizlemek/göstermek için gerekli yöntemleri yazınız. Daha önce employe konteyneri için yapılanlardan yararlanılacaktır.

---

"btnSalaire" düğmesinin "click" olayına bir işleyici atayalım:

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

calculerSalaire yöntemi şu şekildedir:

            private function calculerSalaire():void{
                // form hazırlığı
                affichageSalaire=true;
                msg.text="";                
                // maaş hesaplama parametreleri
                heuresTravaillees=Number(txtHeuresTravaillees.text);
                joursDeTravail=int(joursTravailles.value);
                // web hizmetinden maaş talep ediliyor
                pam.GetSalaire.send();
}

• 3. satır: affichageSalaire boole değeri, maaş kalemlerini gösteren complements konteynerinin görüntülenip görüntülenmeyeceğini belirtmek için kullanılır. getSalaireCompleted yöntemi iki olayda yürütülür:
  • Çalışanlar açılır menüsünde çalışan değiştirildiğinde, maaş hariç bilgileri görüntülemek için. Bu durumda affichageSalaire=false olarak ayarlanır.
  • maaş hesaplaması
• 6. satır: txtHeuresTravaillees giriş alanındaki metin, gerçek sayıya dönüştürülür.
• 7. satır: joursTravailles artıcı değerinin tamsayıya dönüştürülmesi.
• 9. satır: GetSalaire uzaktan yönteminin çağrılması. Bu yöntemin, 6. ve 7. satırlarda başlatılan heuresTravaillees ve joursDeTravail parametreleri dahil olmak üzere üç parametre beklediği hatırlatılmalıdır. Ayrıca, GetSalaire yönteminin asenkron çağrısı:
  • başarılı olursa, getSalaireCompleted yöntemi çağrılır
  • başarısız olursa, getSalaireFault yöntemi çağrılacaktır

---

Soru 3: btnSalaire düğmesine tıklandığında çalışanın maaşını görüntüleyebilmesi için mevcut getSalaireCompleted yöntemini tamamlayın.

---

Şu anda maaş kalemleri euro işareti olmadan görüntülenmektedir. Bu işareti koda ekleyebiliriz ya da bir biçimlendirici kullanabiliriz. Şu anda önerilen çözüm budur. Biçimlendirici şu şekilde olacaktır:

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

• 1. satır: id, biçimlendiricinin kimliğidir; precision ise korunacak ondalık basamak sayısıdır.
• 2. satır: currencySymbol, kullanılacak para birimi sembolüdür. useNegativeSign, negatif değerler için - işareti kullanılıp kullanılmayacağını belirtir.
• 3. satır: alignSymbol, para birimi işaretinin sayıya göre nereye yerleştirileceğini belirtir.

Bu formatlayıcı, komut dosyası kodunda şu şekilde kullanılır:

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

• eurosFormatter, kullanılacak biçimlendiricinin kimliğidir
• format, bir sayıyı biçimlendirmek için çağrılması gereken yöntemdir. Bu yöntem bir karakter dizisi döndürür.
• feuilleSalaire.Indemnites.BaseHeure, biçimlendirilecek sayıdır.
• lblSH, Text türünde bir bileşenin adıdır.

---

Soru 4: getSalaireCompleted yöntemini, para birimi biçimlendiricisini kullanacak şekilde değiştirin.

---