Merhabalar,

Bu yazımızda Adobe Flex ile ilk uygulamamızı yazarak Flex ile uygulama geliştirmeye giriş yapacağız. Flex ile ele alacağımız bu ilk örneğimizde Flex bileşenlerini kullanarak bir email formu oluşturacak ve email gönderme işlemini PHP ile gerçekleştireceğiz.

İlk olarak Adobe Flex programımızı çalıştırıyoruz. Flex’i ilk açtığımızda orta kısımda Flex Başlangıç Sayfasını görüyoruz. Bu sayfada Flex yardım dosyalarına ve altı adet Flex örnek uygulamasına ulaşabilirsiniz. Sol kısımda Navigator panelini görüyoruz. Navigator paneli Flex’te oluşturduğumuz projelerin yönetimini sağlayan bir panel. Birazdan oluşturacağımız projemizi de bu panelde göreceğiz.

Adobe Flex 2 ilk kurulduğunda Flex ile geliştireceğiniz projelerinizi kaydetmek için bilgisayarınızdan varsayılan bir dizin seçilmiş durumdadır. Bu genel olarak Belgelerim’deki Flex Builder 2 klasörüdür. Bunu değiştirmek ve istediğiniz bir klasörde projeleriniz tutmak istiyorsanız ufak bir ayarlama yapmanız gerekiyor. File menüsünden Switch Workspace seçeneğini seçin ve açılan pencerede istediğiniz dizini varsayılan konum olarak ayarlayın. Ben bu dizini değiştirmedim. Artık projemizi oluşturmaya başlayabiliriz. File menusunden New ‐> Flex Project komutunu vererek projemizi oluşturmaya başlıyoruz. [Bkz. Resim‐1].

Karşımıza çıkan pencerede ilk seçenek olan Basic’i seçiyoruz ve Next’i tıklıyoruz [Bkz. Resim‐2].

Açılan bu pencere de ise projemizin ismini belirliyoruz [Bkz. Resim‐3] ve Use default location seçeneği ile projemizin az önce belirlediğimiz varsayılan dizinde oluşturulmasını sağlıyoruz. Finish’i tıklayarak projemizi oluşturuyoruz.

NOT: Bu işlemlerden sonra Flex, proje isminiz ile aynı isimde ana dosyayı oluşturacaktır. Eğer bu dosyanın ismini değiştirmek istiyorsanız Next’i tıklayın ve ana dosyanın ismini değiştirdikten sonra Finish seçeneğini tıklayarak proje oluşturma işlemini tamamlayın.

Evet artık Flex, projemizi belirttiğimiz isim ile ve belirttiğimiz dizinde oluşturdu ve açtı [Bkz. Resim‐4]. Ekrana gelen bu yeni ekranda Navigator panelinde açılan projelerin sıralandığını görüyoruz. Ana sahnede ise Flex’in bizim için oluşturduğu EmailFormu.mxml dosyasının Source (kaynak) sekmesiniz görüyoruz şu anda. Biz projemizi geliştirirken kodlarımızı bu alanda yazacağız. Yazdığınız kodlarda eklediğiniz kontrollerin nasıl bir görünümde olduğunu görmek için ise ihtiyaç hissettiğinizde Design sekmesine geçerek uygulamanızın arayüzünü görebilir ve burdan da gerekli tüm ayarlama ve değişikleri yapabilirsiniz.

Design sekmesine geçtiğimizde Navigator panelinin altında Components panelini görüyoruz. Kullanacağımız bileşenleri buradan sahneye sürükleyerek de kullanabiliriz. Design sekmesi ile Source sekmesi arasındaki basit ilişkiyi daha önce Dreamweaver programını kullanmış olanlar bilirler ama biz yine de tekrar edelim. Design sekmesinde Component panelinden sahneye bir bileşen sürükleyin, mesela Buton. Butonu ekledikten sonra sağ kısımdaki Flex Properties panelinden eklediğiniz bileşen için, ID, etiket, ikon ve tıklama olayı gibi bir çok ayarı yapabilirsiniz. Source sekmesi geçtiğinizde, eklediğiniz bu bişeleşen ve yaptığınız ayarlamaların sonucunda aşağıdakine benzer bir kod görürsünüz:

<mx:Button x="204" y="223" label="Giris" id="my_buton" click="clickMe()"/>

Artık Flex arayüzünü tanıdığımıza göre uygulamamıza geçebiliriz. Öncelikle Flex ile email gönderme işlemini nasıl yapacağımızı anlatarak başlayayım. Flash ile PHP yada ASP bağlantılı bir proje hazırlamış olan varsa nasıl yapıldığını bilirler. Mesela Flash içinden email göndermek için ben PHP kullanıyorum. Öncelikle form alanlarını input textlerle oluşturuyoruz, sonra bunlara örnek isimleri (instance_name) atıyoruz ve ActionScript ile bu bilgileri PHP scriptimize gönderiyoruz. PHP scriptimizde email gönderme işlemini gerçekleştiriyor. Flex ile de buna çok benzeyen bir yöntem kullanacağız. Öncelikle Form için gereken bileşenleri oluşturuyoruz. Bunun için önce bir Panel bileşeni oluşturacağız ve içine de form elemanlarımızı (Form, FormItem, Spacer, TexInput, TextArea, Buton) yerleştireceğiz. Aşağıdaki kod sayesinde email formumuz oluşturulacaktır:

<mx:Panel width="460" height="280" title="Lütfen Bilgileri Eksiksiz Giriniz!" >
    <mx:Form id="emailForm" width="100%" >
        <mx:FormItem label="Isim Soyisim:" horizontalAlign="left" width="100%" >
            <mx:TextInput id="senderName" width="100%" />
        </mx:FormItem>
        <mx:FormItem label="Email Adresiniz:" width="100%">
            <mx:TextInput id="senderEmail" width="100%"/>
        </mx:FormItem>
        <mx:FormItem label="Mesajiniz:" horizontalAlign="left" width="100%">
            <mx:TextArea id="emailMessage" width="100%" height="100"/>
        </mx:FormItem>
        <mx:HBox>
            <mx:Spacer width="330"/>
            <mx:Button id="submitBtn" label="Gönder" click="this.sendEmail();"/>
        </mx:HBox>
    </mx:Form>
</mx:Panel>

Evet, sıra geldi ActionScript ile gönderme işlemimizi gerçekleştirmeye. Flex içinde ActionScript kodları yazmak için <mx:Script> </mx:Script> taglarını kullanıyoruz. Flex’te <mx:Script> kodunu yazdığınız anda içine CDATA fonksiyonu dahil edilmiş olarak satırlar eklenir ve sizde CDATA içine ActionScript kodlarınızı yazarsınız. Dikkat ettiyeseniz yukarıdaki form kodlarında Buton un click olayına sendEmail() isminde bir fonksiyon eklemiştim. Bu fonsiyon email gönderme işlemini yapacak ve biz bu fonksiyonu ActionScript ile yazacağız. Fonksiyon void dönüş tipinde ve email ile gönderilecek üç parametreden oluşuyor (isim, email, mesaj). Bir diğer fonksiyonumuz ise mesaj gönderildikten sonra bir uyarı görüntüleyecek olan fonksiyon olacak. Aşağıdaki kodları ekleyin.

<mx:Script>
    <![CDATA[
        import mx.controls.Alert;
        import mx.rpc.events.ResultEvent
        public function sendEmail( ):void
        {
            var senderName:String = senderName.text;
            var senderEmail:String = senderEmail.text;
            var emailMessage:String = emailMessage.text;
            this.emailService.send({senderName: senderName, senderEmail:senderEmail,
            emailMessage: emailMessage});
        }
        public function emailResult():void
        {
            Alert.show("Mesajiniz Basari ile Yollanmistir.Tesekkürler");
            this.submitBtn.enabled = false;
        }
    ]]>
</mx:Script>

İki fonksiyonumuzu da tamamladıktan sonra geriye kullanıcının girdiği bilgileri PHP scriptimize gönderecek olan HTTPService komutunu eklemek kalıyor. HTTPService içinde dikkat etmemiz gereken bazı parametreler var. Bunlar id, url, method, resultFormat, result ve useProxy parametreleri. Burada ‘url’ kısmına gireceğimiz yol, php scriptimizin serverda yer alacağı dizin olmalıdır. ‘result ‘ ise işlem tamamlandığında geri dönecek olan sonuçtur. Eğer işlem başarılı olmuş ise emailResult() fonksiyonumuz işleyecektir.

<mx:HTTPService id="emailService" url="php/email.php"
                method="POST" resultFormat="xml" result="emailResult()" useProxy="false"/>

Artık projemizin Flex ile programlanacak kısmını bitirdik. Uygulama kodlarımızın son hali aşağıdaki gibi olmalıdır.

<?xml version="1.0" encoding="utf8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundGradientColors="[#FFFFFF, #CCCCCC]" width="550" height="350">
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.rpc.events.ResultEvent
            public function sendEmail( ):void
            {
                var senderName:String = senderName.text;
                var senderEmail:String = senderEmail.text;
                var emailMessage:String = emailMessage.text;
                this.emailService.send({senderName: senderName, senderEmail:senderEmail,
                emailMessage: emailMessage});
            }
            public function emailResult():void
            {
                Alert.show("Mesajiniz Basari ile Yollanmistir.Tesekkürler");
                this.submitBtn.enabled = false;
            }
        ]]>
    </mx:Script>

    <mx:HTTPService id="emailService" url="php/email.php"
                    method="POST" resultFormat="xml" result="emailResult()" useProxy="false"/>
    <mx:Panel width="460" height="280" title="Lütfen Bilgileri Eksiksiz Giriniz!" >
        <mx:Form id="emailForm" width="100%" >
            <mx:FormItem label="Isim Soyisim:" horizontalAlign="left" width="100%" >
                <mx:TextInput id="senderName" width="100%" />
            </mx:FormItem>
            <mx:FormItem label="Email Adresiniz:" width="100%">
                <mx:TextInput id="senderEmail" width="100%"/>
            </mx:FormItem>
            <mx:FormItem label="Mesajiniz:" horizontalAlign="left" width="100%">
                <mx:TextArea id="emailMessage" width="100%" height="100"/>
            </mx:FormItem>
            <mx:HBox>
                <mx:Spacer width="330"/>
                <mx:Button id="submitBtn" label="Gönder" click="this.sendEmail();"/>
            </mx:HBox>
        </mx:Form>
    </mx:Panel>
</mx:Application>

Şimdi PHP dosyamızı oluşturalım ve projemizi tamamlayalım. Navigator panelinde projemizin başlığı üzerine sağ tıklayarak önce New ‐> Folder komutunu vererek projemiz içerisinde php isimli bir klasör oluşturalım [Bkz. Resim‐5] ve ardından New ‐> File komutunu verelim ve email.php dosyamızı oluşturalım [Bkz. Resim‐6].

Ve son olarak ‘email.php’ dosyamızın içine ise aşağıdaki kodları yazalım ve kaydedelim.

<?php
    $senderName = $_POST['senderName'];
    $senderEmail = $_POST['senderEmail'];
    $emailMessage = $_POST['emailMessage'];
    $recipient = "ilyasdogruer@gmail.com";
    $subject = "Mesaj Konusu";
    $headers = "From: $senderEmail ";
    $message = "Kimden: $senderName\nEposta
    Adresi: $senderEmail\n\n Mesaj: $emailMessage";
    $message = StripSlashes($message);
    mail($recipient, $subject, $message, $headers)
?>

Yukarıdaki işlemleri eksiksiz tamamlamış iseniz artık projeniz tamamlandı demektir. Uygulamanızı kaydedin ve Run ‐> Run EmailFormu komutunu vererek derleyin. PHP destekli bir serverda artık dosyalarınızı test edebilirsiniz. Uygulamamızın derlendikten sonraki hali aşağıdadır. Hepinize Kolay gelsin ..

NOT: Sayfada bazan SWF dosyaları çalışmıyor (tarayıcıya göre) yada bağlantılara izin verilmiyor. Eğer kaynağı görüntüle butonlarını çalıştıramıyorsanız, uygulamanın kaynağına buradan ulaşabilirsiniz.