Adobe’ nin CS^ile beraber getirdiği bir yenilik olan Spry kavramı site tasarımda bize hazır javascript kodlarının kolayca kullanılmasın sağlıyor. Örneğin Jacascript menüler , akordiyon menüler , tablı sayfalar gibi …  DAha önceden bildiğimiz  dinamik web tasarımında önemli bir yeri olan form elemanlarına spry elemanlarda eklenmiş. Aşağıdaki resimde de görebileceğiniz üzere bunlar 4 adet. 

    

  (Alternatif yol : Select Insert > Spry )

   Hepsinde de ""validation" ifedesi geçiyor. Bunun anlamı üyelerin formları doldururken yanlış yazımlarıını önlemek , eksik kısımları doldurtmak için kod yazımı gerektiren kontrol yapısının  kolayca forma eklenebilmesidir.
 

   Bir uygulama yaparak daha iyi anlamaya çalışalım .  Formumuzda üyelerimizden aşağıdaki bilgileri eksiksiz ve doğru olarak doldurmalarını istecez.
  

 

Hiçbir bilgi girilmeden "Gönder" işlemi uygulandığında kullanıcıya aşağıdaki görüntü gidecektir. 

 

Bu şekilde eksiksiz doldurulmasını sağlamış olacağız.  Örneğin Ad Soyad alanı için aşağıdaki işlemleri yapmamız gerekir.

   1. Insert –> Form – > Spry Validation Text Field eklenir.

   2. Hiç bir ayar yapmadan kullanabilirsiniz. Bu haliyle alanın boş bırakılmasına izin verilmeyecek.

   3. İsterseniz  form nesnesinin "Windows–>Properties"  penceresinde birkaç ayar yapabilirsiz. Örneğin , karakter sınırlaması için ben 25 ayarını verdim.

  

E-mail alanı için yapacağımız ayar ise biraz farklı olmalı.

 

Bu şekilde üye aşağıdaki ifadelerle karşılaşır.

 

>>  Uygulamanın tamanının nasıl  çalıştığını görmek için tıklayınız .

>> Uyarı yazılarını kolayca DW tasarım kısmından özelleştirebilirsiz.

>> Uygulamanın kod kısmı aşağıdaki gibidir. Kod kısmı tamamiyle Dw tarafından oluşturulacağı sayfamızın arka planına neler eklendiğini görebilirsiniz.

[code]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<script src="SpryAssets/SpryValidationTextarea.js" type="text/javascript"></script>
<script src="SpryAssets/SpryValidationCheckbox.js" type="text/javascript"></script>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryValidationTextarea.css" rel="stylesheet" type="text/css" />

<link href="SpryAssets/SpryValidationCheckbox.css" rel="stylesheet" type="text/css" />
</head>

<body>
<h2> Üye Genel Bilgileri </h2>
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
  <table width="556" border="0">
    <tr>
      <td width="99">Ad Soyad : </td>
      <td width="472"><span id="sprytextfield1">
      <label>
      <input type="text" name="text1" id="text1" />
      </label>
      <span class="textfieldRequiredMsg">*gerekli</span><span class="textfieldMaxCharsMsg">Max.25 karakter</span></span></td>
    </tr>
    <tr>
      <td>Email :</td>
      <td><span id="sprytextfield2">
      <label>
      <input type="text" name="text2" id="text2" />
      </label>
      <span class="textfieldRequiredMsg">*gerekli</span><span class="textfieldInvalidFormatMsg">hatalı giriş</span></span></td>
    </tr>
    <tr>
      <td>Doğum Tarihi:</td>
      <td><span id="sprytextfield3">
      <label>
      <input type="text" name="text3" id="text3" />
      </label>
      <span class="textfieldRequiredMsg">*gerekli</span><span class="textfieldInvalidFormatMsg">gun/ay/yil</span></span></td>
    </tr>
    <tr>
      <td>Adres:</td>
      <td><span id="sprytextarea1">
        <textarea name="textarea1" id="textarea1" cols="45" rows="5"></textarea>
        <span class="textareaRequiredMsg">*gerekli.</span></span></td>
    </tr>
    <tr>
      <td>Cinsiyet :</td>
      <td><label>
        <select name="select" id="select">
          <option>Bay</option>
          <option>Bayan</option>
                </select>
      </label></td>
    </tr>
    <tr>
      <td height="51">Hobiler :</td>
      <td><p>
        <label><span id="sprycheckbox1">
<input type="checkbox" name="checkbox1" id="checkbox1"  value="1"/>Sinema
<input type="checkbox" name="checkbox2" id="checkbox1"   value="2"/>Tiyatro
<input type="checkbox" name="checkbox3" id="checkbox1"   value="3"/>Müzik
<input type="checkbox" name="checkbox4" id="checkbox1"   value="4"/>Spor
<span class="checkboxMinSelectionsMsg">En az biri seçilmeli.</span></span></label>
      </p>
      </td>
    </tr>
    <tr>
      <td>Eğitim Durumu:</td>
      <td><label>
        <input type="radio" name="radio" id="radio" value="radio" />
      </label>
        İlkokul
        <label>
<input type="radio" name="radio6" id="radio6" value="radio6" />İlkÖğretim
<input type="radio" name="radio2" id="radio2" value="radio2" /> Lise
 <input type="radio" name="radio3" id="radio3" value="radio3" />Önlisans 
 <input type="radio" name="radio4" id="radio4" value="radio4" />Lisans
<input type="radio" name="radio5" id="radio5" value="radio5" />Y.Lisans        </label></td>
    </tr>
    <tr>
      <td height="45"><label>
        <div align="center"><input type="reset" name="button2" id="button2" value="Temizle" /></div>
      </label></td><td><label>
        <div align="center"><input type="submit" name="button" id="button" value="Gönder" /></div></label></td>
    </tr>
  </table>
</form>
<script type="text/javascript">
<!–
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "none", {validateOn:["change"], maxChars:25});
var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2", "email");
var sprytextfield3 = new Spry.Widget.ValidationTextField("sprytextfield3", "date", {format:"dd/mm/yyyy"});
var sprytextarea1 = new Spry.Widget.ValidationTextarea("sprytextarea1");
var sprycheckbox1 = new Spry.Widget.ValidationCheckbox("sprycheckbox1", {isRequired:false, minSelections:1});
//–>
</script>
</body>
</html>
[/code]