Merhabalar,

Bu yazımızda Flex uygulamalarda form kontrollerinden bahsedeceğiz. Form kontrollerinin uygulamasını ise daha önceki bir yazımızda hazırladığımız EmailFormu üzerinden yapacağız. Bir email formu veya herhangi bir form üzerinde kullanıcının bilgiler girdiği text alanlarının varlığı kaçınılmazdır. Flash ile hazırladığımız formlarda bu alanlara kullanıcının girdiği değerlerin doğruluğunu yazmış olduğumuz fonksiyonlar sayesinde kontrol edebiliyor ve bunun sonucunda kullanıcıya çeşitli yollarla uyarı mesajları gönderebiliyorduk.

Flex içerisinde ise bu form alanlarının kontrolleri için farklı farklı fonksiyonlar yazmamıza gerek kalmıyor. Kullanıcının text alanına girmiş olduğu bilgileri belirli formatlarda kontrol eden ve kullanıcıya uyarı mesajını otomatik olarak veren hazır bileşenler mevcut Flex’te. Validator adı verilen bu sınıfın bazı bileşenleri; StringValidator, NumberValidator, DateValidator, EmailValidator, CurrencyValidator, CreditCardValidator vb. şeklinde. Hazır Validator bileşenlerinin yanısıra form alanlarınızı RegularExpressions sayesinde kendi belirlediğiniz formatlara görede kontrol edebilirsiniz.

Validator’ların kullanımı oldukça basit. Bileşeni MXML kodlarımıza ekliyoruz source özelliğine kullanacağımız form bileşeninin id ismini giriyoruz ve bileşenin hata mesajlarını (ErrorMessages) ekliyoruz. Hata mesajlarının Flex programı dilinde varsayılan değerleri mevcut halde. Bizler kullandığımız Validator içerisinde bu mesajların varsayılan değerlerini kendi istediğimiz mesajlar ile değiştirebiliyoruz. Şimdi uygulamaya başlayalım.

Daha önce hazırlamış olduğumuz EmailFormu çalışmamızda üç text alanımız bulunuyordu. İsim, E-posta ve Mesaj. İsim ve Mesaj text alanları için StringValidator , E-posta text alanı için ise EmailValidator kullanacağız. İlk olarak isim alanımız için bir StringValidator ekleyelim kodlarımıza.

<mx:StringValidator id="isimValidator"
      source="{senderName}" property="text"
          requiredFieldError="Bu alan boş bırakılamaz!"
          minLength="3" maxLength="14"
      tooShortError="Geçersiz İsim! (çok kısa)"
      tooLongError="Geçersiz İsim! (çok uzun)"
      triggerEvent=""/>

Buradaki hata mesajlarının açıklaması;

source : Text alanımızın id ismini parametre olarak alıyor çünkü isim alanının kontrolünü yapacak. requiredFieldError : Text alanımızın boş bırakılması durumunda belirecek olan mesaj. minLength: Text alanına girilebilecek en az karakter sayısı maxLength: Text alanına girilebilecek en fazla karakter sayısı tooShortError: minLength değerinden az karakter girildiğinde belirecek mesaj. tooLongError: maxLength değerinden fazlakarakter girildiğinde belirecek mesaj.

Şimdide e-posta alanımız için EmailValidator bileşenimizi ekleyelim ve aldığı parametreleri inceleyelim.

<mx:EmailValidator id="epostaValidator"
     source="{senderEmail}" property="text"
     requiredFieldError="Bu alan boş bırakılamaz!"
     invalidCharError="E-posta adresiniz geçersiz karakterler içeriyor!"
     invalidDomainError="Geçersiz Domain adı!"
     invalidPeriodsInDomainError="Geçersiz Domain!"
         missingAtSignError="E-posta adresiniz '@' içermelidir!"
     missingPeriodInDomainError="E-posta adresiniz Domain adı içermelidir!"
     missingUsernameError="E-posta adresiniz kullanıcı adı içermelidir!"
     tooManyAtSignsError="E-posta adresiniz bir adet '@' içerebilir"
     triggerEvent="" />

Buradaki hata mesajlarının açıklaması;

invalidCharError: Email adresinin içeremeyeceği karakterler girildiğinde belirecek mesaj. invalidDomainError: Email adresinin domain kısmı hatalı girildiğinde belirecek mesaj. invalidPeriodsInDomainError: Emailin domain kısmı eksik girildiğinde belirecek mesaj. missingAtSignError: ‘@’ karakteri girilmediğinde belirecek mesaj. missingPeriodInDomainError: Email adresinin domain kısmı girilmediğinde belirecek mesaj. missingUsernameError: Email adresinin kullanıcı adı kısmı girilmediğinde belirecek mesaj. tooManyAtSignsError: Birden fazla ‘@’ karakteri girildiğinde belirecek mesaj.

Son olarak ta mesaj kısmı için StringValidator bileşenini eklememiz gerekiyor.

<mx:StringValidator id="mesajValidator"
      source="{emailMessage}" property="text"
      requiredFieldError="Bu alan boş bırakılamaz!"
      tooShortError="Geçersiz Mesaj! (çok kısa)"
      minLength="30" triggerEvent="" /> 

Bizim formumuzda mesaj kısmının kontrol edilmesi gereken iki durumu mevcut. Bunlardan biri boş olması durumu, diğeri ise belirli bir sınırın altında karakter girilmesi durumu. Ben otuz karakter sınırı belirledim, web sitesi üzerinden firmanıza gönderilen bir e-posta içeriği otuz karakterden düşük olmaz sanırım.

Form kontrollerimizi yapacak olan Validator bileşenlerimizi uygulamamıza ekledik. Şimdi son olarak kontrolleri yapacak olan Actionscript fonksiyonumuzu yazmamız gerekiyor. Validator kullanarak kontrol işlemini herhangi bir fonksiyon yazmadan da yazpmamız mümkün. Mesela gönder butonuna basıldığında kontroller fonksiyon olmadan da yapılabilir.

Yukarıdaki çalışmamıza eklemiş olduğumuz Validator bileşenlerinin triggerEvent="" kısımlarını kaldırırsanız, ilgili text alanına bir defa tıkladıktan sonra başka bir yere tıklarsanız (Flashtaki onKillFocus olayı) kontrol işlemi yapılır ve hatalar varsa uyarı mesajı tooltipi görüntülenir.

Biz yazacağımız ActionScript fonksiyonu ile Validator bileşenlerimizin kontrolünü yapacağız. Bu kontrolleri yaparken bu Validator bileşenlerimizin id isimlerini kullanacağız. Öncelikle uygulama kodlarımız içerisindeki Script bloğumuza gidelim. Burada daha önce email gönderme işlemi için yazmış olduğumuz fonksiyonumuz bulunuyor. Yeni bir fonksiyon oluşturmadan önce Validatorler için kullanacağımız ValidationResultEvent sınıfını import edelim. Daha sonra validateForm isimli fonksiyonumuzu oluşturalım. Fonksiyonumuz void dönüş tipine sahip olacak, yani herhangi bir değer döndürmeyecek.

Uygulama içerisinde kullandığımız her bir Validator için, kontrolleri yapan fonksiyonumuz içersinde ValidationResultEvent tipinde olay dinleyici tanımlayacağız. Bu olay dinleyiciler ilgili Validator’ın validate() fonksiyonunu kullanacak ve Boolean (true-false) tipinde bir değer alacak. Olay dinleyicilerin almış olduğu bu değerler fonksiyonda bir if-else yapısı ile sorgulanacak. Eğer if-else şart yapısınında yapılan sorgu sonucunda geçerli bir değer dönmüş ise if kısmında belirteceğimiz işlem, geçerli olmayan bir değer dönerse else kısmındaki işlem yürütülecek.

Script bloğumuza aşağıdaki form kontrollerini gerçekleştiren fonksiyonu ekleyelim.

private function validateForm():void
{
var validIsimEvent:ValidationResultEvent = isimValidator.validate();
var validEpostaEvent:ValidationResultEvent = epostaValidator.validate();
var validMesajEvent:ValidationResultEvent = mesajValidator.validate();

if (validIsimEvent.type == ValidationResultEvent.VALID &&
validEpostaEvent.type == ValidationResultEvent.VALID &&
validMesajEvent.type == ValidationResultEvent.VALID )
{
sendEmail();
}
else
{
Alert.show("Girdiğiniz Bilgilerde Hatalar Tespit Edildi! Lütfen Hataları Düzeltip Tekrar Deneyiniz.", "Form Hataları");
}
}

If-else şart yapımızdaki sorgulama sonucunda dönen değere göre geçerli bilgiler girilmiş ise if bloğu içerisindeki işlem yapılacak, yani sendEmail() fonksiyonu çağırılacak. Geçerli bilgiler girilmemiş ise else bloğu içerisindeki işlem yapılacak, yani uygulama içerisinde kullanıcıya bir hata mesajı veren pencere açılacak.

Evet validateForm fonksiyonumuz ile form kontrollerini gerçekleştirdikten sonra , eğer kullanıcı formu doldururken e-posta göndermekten vazgeçerse formu temizleyeceği bir fonksiyon yazalım. Bu fonksiyon yine void dönüş tipine sahip olacak ve sadece formumuzda bulunan text alanlarını boşaltacak. Aşağıdaki cleanForm() fonksiyonunu da Script bloğumuz içerisine ekleyelim.

private function cleanForm():void
{
senderName.text = "";
senderEmail.text = "";
emailMessage.text = "";
}

Böylece form kontrollerimizi,Flex Validator larını kullanarak tamamlamış olduk. Uygulamamızın kodları son hali ile aşağıdaki gibi olmalıdır.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" backgroundColor="haloSilver" themeColor="haloSilver"
        width="500" height="380"> 

<!--<mx:Style source="stil/stil.css"/>-->

<mx:Script>
<![CDATA[
    import mx.controls.Alert;
    import mx.rpc.events.ResultEvent;
    import mx.events.ValidationResultEvent; 

    private function validateForm():void
    {
        var validIsimEvent:ValidationResultEvent = isimValidator.validate();
        var validEpostaEvent:ValidationResultEvent = epostaValidator.validate();
        var validMesajEvent:ValidationResultEvent = mesajValidator.validate();

        if (validIsimEvent.type == ValidationResultEvent.VALID &&
            validEpostaEvent.type == ValidationResultEvent.VALID &&
            validMesajEvent.type == ValidationResultEvent.VALID )
        {
            sendEmail();
        }
        else
        {
            Alert.show("Girdiğiniz Bilgilerde Hatalar Tespit Edildi! Lütfen Hataları Düzeltip Tekrar Deneyiniz.", "Form Hataları");
        }
    }

    private function cleanForm():void
    {
        senderName.text = "";
        senderEmail.text = "";
        emailMessage.text = "";
    }

    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("Mesajınız Başarı ile Yollanmıştır İlginiz için Teşekkürler");
        this.submitBtn.enabled = false;
    }


]]>

</mx:Script> 

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

<mx:StringValidator id="isimValidator"
                source="{senderName}" property="text"
                requiredFieldError="Bu alan boş bırakılamaz!"
                minLength="3" maxLength="14"
                tooShortError="Geçersiz İsim! (çok kısa)"
                tooLongError="Geçersiz İsim! (çok uzun)"
                triggerEvent=""/>

<mx:EmailValidator id="epostaValidator"
               source="{senderEmail}" property="text"
               requiredFieldError="Bu alan boş bırakılamaz!"
               invalidCharError="E-posta adresiniz geçersiz karakterler içeriyor!"
               invalidDomainError="Geçersiz Domain adı!"
               invalidPeriodsInDomainError="Geçersiz Domain!"
               missingAtSignError="E-posta adresiniz '@' içermelidir!"
               missingPeriodInDomainError="E-posta adresiniz Domain adı içermelidir!"
               missingUsernameError="E-posta adresiniz kullanıcı adı içermelidir!"
               tooManyAtSignsError="E-posta adresiniz bir adet '@' içerebilir"
               triggerEvent="" />

<mx:StringValidator id="mesajValidator"
                source="{emailMessage}" property="text"
                requiredFieldError="Bu alan boş bırakılamaz!"
                tooShortError="Geçersiz Mesaj! (çok kısa)"
                minLength="30" triggerEvent="" /> 

<mx:Panel width="100%" height="286" title="İletişim Formu">
<mx:Form id="emailForm" width="100%" >
    <mx:FormItem label="İsim - 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="Mesajınız:" horizontalAlign="left" width="100%">
        <mx:TextArea id="emailMessage" width="100%" height="100"/>
    </mx:FormItem>

    <mx:ControlBar>
        <mx:Spacer width="220"/>
        <mx:Button id="cleanBtn" label="Temizle" click="this.cleanForm()"/>
        <mx:Button id="submitBtn" label="Gönder" click="this.validateForm()"/>
    </mx:ControlBar>
</mx:Form>
</mx:Panel>


</mx:Application> 

Yukarıdaki işlemleri eksiksiz tamamlamış iseniz artık email formunuz belirttiğimiz kontrolleri yapmadan email gönderilmesine izin vermeyecektir. Uygulamanın çalışan örneği aşağıdadır. 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.