FLEX ANLATIMI

4 Ekim 2008

FLEX ANLATIMI

Buradaki açıklamalar http://www.sitepoint.com/article/beginners-tutorial-flex-3/ adresindedir.

Neden Flex Kullanılmalı

Eğer RIA geliştirecekseniz teknolojik olarak birkaç seçeneğiniz var. Bunlar Flex, Ajax ve Microsoft Silverlight olabilir. Bu seçenekleri tarafsız bir gözle incelerseniz geliştirme süresi ve emeği hepsinde aynı gibidir. Flex yararı milyarlarca bilgisayarda Flash Player 9 sürümünün yüklü olmasıdır.

Tabi ki Ajax teknikleri de Dünya üzerindeki bilgisayarlarda yaygındır. Javascript, XHTML ve CSS gibi. Ancak tarayıcıların uyum sorunu Ajax için oldukça zorluklar çıkartabilir. Burada sorun kullanılan araçlarda (CSS ve Javascript gibi) tarayıcı uyumsuzluklarından kaynaklanmaktadır. Örneğin Firefox ile çalışan Internet Explorer ile çalışmayabilir.

Microsoft Silverlight, Flex gibi tarayıcı ekleme programıyla kullanılır. Flash Player kullanım tabanına erişmek üzeredir.

Eğer yeni başlıyorsanız hepsini de denemeli, hangisini daha kolay kullandığınızı kendiniz belirlemelisiniz. Burada Flex olanakları anlatılacaktır.

Flex İskeleti Hakkında Genel Bilgi

Pekçok insan Flex ortamından zor olduğunu düşünerek uzak durmak ister. Ama iskelet yalnız kullanılabilir sınıf tanımlarından oluşur. Bunları bir araya getirerek uygulama yapılır.

Benzetmek için bir ev düşünelim. Dünyadaki her evin bir iskeleti vardır. Her evin temeli ve duvarları vardır ve o duvarlar temel olmasa ayakta kalamaz. Bir kez temel atılıp duvarlar yükselince, üzerine bir çatı yapılabilir. Daha sonra iç tasarım ve uygulaması gerçekleştirilir.

Eğer bu benzetmeyi Flex iskeletine uygularsak, burada mantık sinsilesi bulunur (kontrol mantığı biçiminde). Bu mantık dizisi güvenlik ve veri tabanı işlemleriyle kullanılır. Ayrıca kullanıcı arayüzü öğeleri de vardır (düğmeler, ekranlar, açılan listeler ve bunu gibiler). Bunların hepsi Flex uygulamalarının temelini oluşturur.

Flex web tasarımcılarının öğrenimi için çok kolaydır. Kökeninde (X)HTML, CSS ve Javascript ile çok ortak noktası vardır. Örneğin giriş alanı düğmelerinden oluşan basit bir web sayfası yapmak isterseniz XHTML'de aşağıdaki gibi kodlama yaparsınız:

<!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>Button Example</title>
 </head>

 <body>
   <form method="post" id="example" action="http://www.example.com/">
     <input type="button" name="newButton" id="newButton" value="Bu bir düğmedir" onclick="checkForm()" />
   </form>
 </body>
</html>

Bu kodlamayı web tarayıcıda görüntüleyince ekranda "Bu bir düğmedir" yazan düğme görürsünüz.

XHTML düğmesi

Buna benzer birşeyi Flex ile görüntüleyebilmek için MXML türü bir kodlama kullanmak gerekir. Önceki örnek yeniden kodlanınca:

<?xml version="1.0" encoding="utf-8"?<
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
   layout="absolute"<
 <mx:Button x="10" y="10" label="This is a button"
id="newButton"
     click="checkForm()"/<

</mx:Application<

biçiminde olur.

Bu uygulamayı çalıştırmak için MXML kodunun Flex SDK ile derlenmesi gerekir.

Flex düğmesi

Bilinmesi gereken ilk şey MXML kodunun XML kalıbında olduğudur. Flex derleyicisine kodun bir uygulama olduğunu belirtmek için <mx:Application/> öğesi kullanılır. Daha sonra diğer biçimler bu biçimin içine yazılır. Yukarıdaki örnekte <mx:Button/> biçimi düğme yaratmak için kullanılır.

Görüldüğü gibi bunların hepsi geleneksel Web sayfası yapımına benzer ve iskelet XHTML için gerekenleri size sunar (düğmeler, listeler gibi). Bilmeniz gereken özellikler, yöntemler ve iskelet içindeki adlardır. Bunların hepsi Flex 3 dili açıklamasında vardır.

Tabi ki Flex iskeleti yalnız kullanıcı arayüzlerinden oluşmaz. Uygulamanızın gerek duyacağı başka işlemleri de içerir. Örneğin HTTPRequest bu tür parçalardan biridir. Bu işlem sunucu tarafındaki (PHP, ASP.NET gibi) uygulamalara bilgi gönderip alır. Uygulamayı çalıştırırken onu fark etmezsiniz. O işini geriden yürütür.

Tüm bu işlemler Adobe tarafından iskelet olacak biçimde birleştirilmiştir. Bu nedenle işlemleri yeni baştan yazmanız gerekmez.

Flex ile deneyim kazandıkça kendi parçalarınızı yazmak ve kullanmak istersiniz. Daha sonra kendi kitaplığınız bile olur.

Başlamak için Ne Gerekir?

Açık kaynak Flex 3 ile RIA'ları yaratmak şimdi çok daha kolaydır. Bunun için aşağıdaki seçeneklerden birini kullanabilirsiniz:

Ciddi Flex geliştiricileri için araçlar Flex Builder 3 altındadır. Adobe tarafından hazırlanan Flex IDE sistemidir. Flex Builder profosyoneller için de vardır. Bu sürümde Flex grafik hazırlama parçaları bile kullanıma açıktır. Flex Builder yaklaşık $376 ABD doları kadardır ve profesyonel olanı ise $900 ABD Doları kadardır.
Kendi program düzenleme ortamınızın Flex 3 SDK ile kullanılmasını isteyebilirsiniz. Bu da zaten ücretsizdir.

MXML Kolaydır!

Flex'in parçaları nerede bulacağının ad alanı (namespace) tanımı yapılır.
Parçaların sınıfını yaparken bu ad alanındakinin kullanmını istersiniz.
Var olan özellikleri ve yöntemleri değiştirebilirsiniz.

MXML parçasının kodlanması

 <mx:Canvas x="53" y="64" width="192" height="94"
     cornerRadius="20" borderStyle="solid"
     backgroundColor="#A9A9A9" id="mainCanvas">
 
   <mx:Button x="10" y="10" id="newButton"
       label="Bu bir düğmedir"/>
         
   <mx:Label x="10" y="57" id="newLabel"
       text="Bu bir etikettir"/>
 </mx:Canvas>

MXML web sayfası

İşleri biraz daha ilerletmek: ActionScript 3

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  
   layout="absolute" creationComplete="init()">
 <mx:Button label="Bu MXML ile yapıldı" x="10" y="10" />  <mx:Script>
   <![CDATA[
   import mx.controls.Button;
   //Init işlevi ilk başladığında çalıştırılır.
   private function init():void {
     //Yeni düğme yaratma
     var newButton:Button = new Button();
     //Özellikleri Değiştirme
     newButton.label = "Bu ActionScript tarafından yaratıldı";
     newButton.x = 10;
     newButton.y = 40;
     //Düğmeyi yeni ekrana ekle
     this.addChild(newButton);
   }
   ]]>
 </mx:Script>      
</mx:Application>

Tanımlar

Eğitim

Gelişmiş

FLEX ANLATIMI

FLEX ANLATIMI

Neden Flex Kullanılmalı

Flex İskeleti Hakkında Genel Bilgi

XHTML düğmesi

Flex düğmesi

Başlamak için Ne Gerekir?

MXML Kolaydır!

MXML parçasının kodlanması

MXML web sayfası

İşleri biraz daha ilerletmek: ActionScript 3

MXML ve ActionScript 3.0 düğmeleri

Kaynaklar

Özet