Adobe Flex 2 İle Sözlük - 1

Yazan: Abdullah Dağlı | Tarih 7 Şubat 2008 | Yorum  2 Yorum
BerbatKötüOrtaGüzelHarika 4 kez puan verildi, Ortalama: 4.5 (5 üzerinden)
Loading ... Loading ...

Şuanda aktif olarak hizmet veren bir çok sözlük sitesi mevcut. Ayrıca çok ciddi veritabanlarının olduğunu da inkar etmemek lazım. Bizim burada yapacağımız ise aslında Flex ile neler yapabileceğimizi görmek. Bu uygulamada Flex ile dosyaları arasında iletişime geçecek, ‘den gelen veriler doğrultusunda Flex dosyamızı yönlendireceğiz. Bu projeyi bir yazı dizisinde anlatmayı planlıyorum. Her yazıda elimizde çalışan bir örnek ve her bitmiş örnek bir önceki örnekten daha gelişmiş bir halde olacak.

Bu uygulamada kullanacağımız teknolojileri şu şekilde sıralayalım:

  1. Adobe Flex Builder 2 - ActionScript 3.0
  3. CSS
  4. MySQL

1- Projenin Oluşturulması
İlk olarak Flex Builder üzerinde bir proje tanımlamalıyız. Bunun için File>New>Flex Project kombinasyonunu kullanacağız.

Karşınıza gelen New Flex Project penceresinde Basic seçeneğini seçiyoruz ve Next (ileri) butonu ile devam ediyoruz. Diğer seçeneklerin izahını daha sonra yeri gelirse eğer yaparız.

Karşımıza gelen pencerede proje adı olarak sozluk yazıyoruz ve direk Finish butonuna basıyoruz. Ben bu ismi tercih ettim çünkü projemiz bir sözlük projesi :)

Ve artık sozluk adında bir Flex projemiz var! Projemizin içerisinde bir sozluk.mxml dosyası mevcut. İşte bu dosya bizim ana dosyamızdır. Bu ve diğer dosyaları sol tarafta bulunan Navigator aracılığıyla takip edebilirsiniz.

2- Flex Sahnesinin Hazırlanması
Evet işin eğlenceli kısımlarından biri ise arayüzün hazırlanmasıdır. Bunu iki yol ile yapabiliriz. Biri Flex Builder 2′nin bize vermiş olduğu Visual - Sürükle Bırak - yöntemidir. Diğeri ise anam babam yöntemi olan her işi kod ile halletmektir. Ben ikinci yöntemi tercih ediyorum. Çünkü bu sürükle bırak her zaman bende sanki birşeyler eksikmiş gibi bir izlenim bırakıyor. Ama tabiki siz istediğiniz yöntemi kullanabilirsiniz.

Sahnemizde olacak şeyleri şöyle bir düşünürsek:

  • Arama İçin Input Text Elemanı
  • Arama İçin Button Elemanı
  • Verileri Listeleyecek Bir DataGrid Elemanı

İleriki yazılarda bu eleman sayıları şüphesiz artacak, sistemimiz daha da güçlenecektir.

sozluk.mxml dosyamızın içerisinde varsayılan olarak gelen kod:

<? version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www..com/2006/mxml” layout=”absolute”>

</mx:Application>

İlk olarak sahnemizde olması gereken (önceden listelediğim) elemanları yazalım. Elemanlar hakkında bilgi almak için üzerlerine tıklayınız:

<? version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www..com/2006/mxml” layout=”absolute”>

<mx:TextInput id=”aramaGirdisi” x=”10″ y=”10″/>
<mx:Button id=”aramaButonu” label=”ARA” x=”180″ y=”10″/>

<mx:DataGrid id=”veriIzgarasi” x=”10″ y=”40″ width=”210″>
<mx:columns>
<mx:DataGridColumn headerText=”Kelime” />
<mx:DataGridColumn headerText=”Anlamı” />
</mx:columns>
</mx:DataGrid>

</mx:Application>

Şuanda sahnemizde daha önce de dediğimiz gibi bir Text Input, bir button bir de datagrid elemanları var. Evet sanırım sahnemiz hazır. CTRL+F11 tuş kombinasyonu ile projemizi derleyip tarayıcımızda önizleme yapabiliriz. Bendeki görün aşağıdaki gibi. Sizdeki de öyle olmalı:

3- Flex Senaryosunun Hazırlanması
Sıra geldi hikayeyi yazmaya. İşlemimiz şöyle olacak:

  • İlk olarak ziyaretçi gelir aramak istediği kelimeyi yazar ve ara butonuna basar.
    • Ziyaretçi yanlışlıkla aranacak veri girmeden ara butonuna basabilir! Bunun için daha sonraki yazılarda yeni bir senaryo hazırlanacak.
  • Aranacak veri dosyasına iletilir.
  • dosyası gelen veriye göre MYSQL veri tabanında arama yapar ve verileri formatında yazdırır.
    • Aranacak veri eğer veritabanında yoksa veya MYSQL bağlantısında sıkıntı varsa veriler yazdırılamayacaktır. Bir sorun olduğuna dair formatında bilgiler yazılır. Bu bilgileri de Flex dosyamız anlayacaktır. Ama bunu da daha sonraki versiyonlarda yapacağız.
  • Flexprojemiz gelen veriler doğrultusunda işlem yapar.
    • Veriler DataGrid’e yansıtılır. Eğer bir önceki basamaktaki gibi bir sıkıntı varsa Flex projemiz sıkıntı doğrultusunda hareket edecektir. Bunu da üst tarafta dediğim gibi sonraki versiyonlarda yapacağız.

Ziyaretçi geldi ve arayacağı veriyi yazdı. Ardından da ARA butonuna bastı. Flex dostumuz hemen araya girer ve veriyi dosyamıza gönderir. Bu işlem için aşağıdaki kod görev alır. Bu kod <mx:Application></mx:Application> tagları arasında herhangi bir yerde olabilir.

<mx:HTTPService id=”veriler” method=”POST” url=”http://localhost/sozluk/index.” useProxy=”false” showBusyCursor=”true”>
<mx:request xmlns=”">
<ara>{aramaGirdisi.text}</ara>
</mx:request>
</mx:HTTPService>

Şimdi ise butonumuza tıklanınca bu HTTPService elemanını aktif hale getirmesini söyleyelim.

<mx:Button id=”aramaButonu” click=”{veriler.send()}” label=”ARA” x=”180″ y=”10″/>

İşte burada POST yöntemiyle ara parametresine aramaGirdisi elemanın text değerini atadık ve yolladık. Yolladığımız adres ise url kısmındabelirtilmiştir. Şimdi local bir sunucuda çalıştığımız için adresimiz bu şekildedir.

Şimdi hemen safına geçiyoruz ve 3. maddedeki ‘nin görevlerini yerine getiriyoruz. Bu işlem için çok basit şeyler yapacağız. Yani çok güvenlikli, çok mantıklı şeyler olmayacaklar. En azından bu versiyonda olmayacak. dosyamız <ara>{aramaGirdisi.text}</ara> şeklinde yolladığımız ara değerini alıp basşt bşr SQL araştırmasından sonra sonuçları yazacak. Hepsi bu! İşin kısmının tefferruatı hakkında pek bilgi vermeyeceğim. Ayrıca veritabanını ise aşağıdaki linkten indirebilirsiniz. Bu versiyonumuz sadece ingilizce kelimelerin türkçe karşılıklarını bulabiliyor.

<?
$ara= $_REQUEST[”ara”];

mysql_connect (”localhost”,”root”,”");
mysql_select_db(”sozluk”);

$sonuc = mysql_query(”SELECT * FROM dictionary_en2tr WHERE dictionary_en2tr_kelime LIKE ‘%”. $ara .”%’ ORDER BY dictionary_en2tr_kelime ASC”);
echo “<kayitlar>”;
while($row = mysql_fetch_row($sonuc)) {
echo “<kayit>”;
echo “<kelime>”. $row[1] .”</kelime>”;
echo “<anlam>”. $row[2] .”</anlam>”;
echo “</kayit>”;
}
echo “</kayitlar>”;
?>

Burada <kayitlar></kayitlar> ana tagımız. Bunun altında ise her bir <kayit></kayit> tagları arasına kelime ve anlam değerleri giriliyor. Ve tüm bunlar bildiğimiz echo komutuyla yazdırılıyor. Hepsi bu. Bu yazdırılma işlemini Flex otomatik olarak okuyor ve her bir tagı yeni bir değişken, ve her bir değişkenin içerisindeki veriyi de o değişkenin değeri olarak algılıyor.

Önceden de dediğim gibi bu konusuna fazla yer ayırmak istemiyorum. Çünkü olayı daha fazla uzatmak istemiyorum. Ama ille de fikir almak istiyorsanız abdagli@gmail.com adresine e-posta atabilir ya da buraya yoruma sorularınızı bırakabilirsiniz.

Şimdi sıra dördüncü maddede. Flex dosyamızın yazdığı verileri alır ve ona göre işlem yapar. Bu işlem için sadece DataGrid elemanımıza yeni eklemeler yapacağız o kadar. DataGrid’e verileri nereden alacağını söyleyeceğiz ve hangi sütunda hangi verilerin olacağını söyleyeceğiz hepsi bu. Aslındaişin en kolay yeri diyebilirim.

<mx:DataGrid id=”veriIzgarasi” x=”10″ y=”40″ width=”210″ dataProvider=”{veriler.lastResult.kayitlar.kayit}”>
<mx:columns>
<mx:DataGridColumn headerText=”Kelime” dataField=”kelime” />
<mx:DataGridColumn headerText=”Anlamı” dataField=”anlam” />
</mx:columns>
</mx:DataGrid>

dataProvider: Verileri veriler id’li HTTPService elemanı ile almıştık. Ve veriler HTTPService’in bir sonucu idi. Ayrıca veriler kayitlar anatagının altında her biri farklı kayit tagı içerisinde idi. O halde verilerimize veriler.lastResult.kayitlar.kayit ile ulaşacağız.

dataField: kayit tagı içerisinde iki tane tag daha vardı. İşte bunların her biri, bir değer taşıyor. Herbir süruna bu tagların adını dataField ile atıyoruz ve her bir kayit tagı içerisindeki taglar bu sütunlarda yer alıyor.

Evet! İşte hepsi bu kadar :). Aslında anlatılması gereken, detaya inilmesi gereken çok şey var, ama inşallah onları sonraki yazılarımızda ele alırız.

Tüm .mxml kodu:

<? version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www..com/2006/mxml” layout=”absolute”>

<mx:HTTPService id=”veriler” method=”POST” url=”http://localhost/sozluk/index.” useProxy=”false” showBusyCursor=”true”>
<mx:request xmlns=”">
<ara>{aramaGirdisi.text}</ara>
</mx:request>
</mx:HTTPService>

<mx:TextInput id=”aramaGirdisi” x=”10″ y=”10″/>
<mx:Button id=”aramaButonu” click=”{veriler.send()}” label=”ARA” x=”180″ y=”10″/>

<mx:DataGrid id=”veriIzgarasi” x=”10″ y=”40″ width=”210″ dataProvider=”{veriler.lastResult.kayitlar.kayit}”>
<mx:columns>
<mx:DataGridColumn headerText=”Kelime” dataField=”kelime” />
<mx:DataGridColumn headerText=”Anlamı” dataField=”anlam” />
</mx:columns>
</mx:DataGrid>

</mx:Application>

flex-sozluk.zip

Veritabanı

Yazdır Yazdır | 1,154 Görüntülenme | Kategori: Diğer Diller, HTML & Javascript & Ajax, PHP, Programlama | Trackback  Geri İzleme
Etiketler  Etiketler: , , , ,

Benzer Yazılar


Yorum Yap


(gerekli)

(gerekli,yayınlanmaz)




XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>