Bu yazı dizimizde Adobe tarafından ücretsiz dağıtılan Flex 2 SDK’sını (Yazılım Geliştirme Kiti) kullanarak Windows ve Linux platformlarında nasıl Flex 2 ve AS3 tabanlı programlar geliştirebileceğimizi inceleyeceğiz.
Mac (OSX) severler için hemen belirtelim, bu platformda deneme yapma şansım olmadı ancak izleyeceğimiz yollar Linux ile hemen hemen aynı.

Flex 2 programlama için asıl geliştirme ortamı kapsamlı bir IDE olan Adobe Flex Builder 2’dir. Ancak bazen geniş özellik yelpazesine sahip bir IDE hem öğrenme sürecini ağırlaştırabilmekte hem de $749 lık (ABD fiyatı) ile el yakabilmekte. Linux platformunun desteklenmemesi de bazılarımız için ek bir problem.

Alternatifimiz Adobe Flex 2 SDK. Peki en basit anlamda nelere ihtiyacımız olacak:

• 1. Terminal / Komut Satırı
• 2. Java 1.4 ya da 1.5 (Sun)
• 3. Ücretsiz Adobe Flex2 SDK v2.0.1 (38MB) Adobe sitesine üye değilseniz üyelik formunu doldurup göndermeniz gerekecek.
• 4. fcsh (76 KB)

Bu kadar! Peki bu indirdiklerimiz nedir ve neden terminal? Kısaca açıklayalım:

Terminal Şimdilik konunun özüne inelim ve en basit haliyle görelim. Kesinlikle çekinceler yaratmasın! Birbirinden basit 3 komut (fcsh, mxmlc, compile) yazacağız. Zaten çok yakında terminalden bizi bağımsız kılacak mevcut IDE’leri de inceleyeceğiz.

Adobe Flex 2 SDK Flash Player için SWF dosyası üretmemizi sağlayacak olan Java tabanlı derleyici ve kütüphaneleri içeren Program Geliştirme Kiti. Flex programlama yaparken Javayla hiç bir ilgimiz olmayacak. SDK içinde gelen derleyici (mxmlc) yazdığımız Actionscript ve XML kodlarını SWF’ye dönüştürecek.

FCSH Küçücük bir Adobe programı. Derleme hızımızı büyük oranda arttıracak.

Windows’ta Flex Kurulum

1- İstediğiniz adreste bir klasör yaratın ve flexsdk2.zip dosyasını bu klasör içine açalım. Örneğin: C:flex_dizini

2-fcsh.zip dosyasını açalım ve C:flex_dizini ne yerleştirelim.

3-Şimdi de fcsh.jar dosyasını C:flex_dizinilib e yerleştirelim.

4-C:flex_diziniinjvm.config ayar dosyasında java.args= bölümüne

• Duser.language=en
• Duser.location=us

ekleyin.

5- Denetim Masasından (Control Panel) —> Bölge ve Dil Seçenekleri — > Gelişmiş‘i tıklayalım ve hemen aşağısındaki Unicode Olmayan Programların Dili bölümünde İngilizce (ABD) yi seçelim.

6- Bu basamak gerekli olmayabilir ama siz yine de deneyebilirsiniz. Özellikle Apollo uygulamaları için gerekli olabilir. Bilgisayarım üzerine gelin, farenin sağ tuşuna basın ve çıkan menüde,

Özellikler —> Gelişmiş —> Ortam Değişkenleri —> Kullanıcı Değişkenleri bölümünde TEMPi tıklayın. Aşağıdan Değiştir’e basın.

Yeni çıkan kutuda bir dizin göreceksiniz. Burada Ingilizce’de olmayan bir harfin kullanılmaması gerekiyor. Eğer varsa dizini mesela C:TEMP yapın. Sistem için bir zararı olmayacaktır.

7- Kurulumu test edelim! Terminali açağız ilk olarak:

Başlat —> Donatılar (Accessories) —> Komut Satırı İstemi

8- Satıra C:flex_dizini/fcsh yazalım. ENTER’a basalım:

9- Derleme işlemlerimizi bu oluşturulan (fcsh) satırı içinden yapacağız. Satıra mxmlc -help yazın:

Yukardaki ekrandaki yazıları görüyorsanız Windows kurulumunuz bitmiştir!

Linux’te Kurulum

1- İstediğiniz yerde bir klasör yaratın. Örneğin: /home/sizinisminiz/flex2sdk. flexsdk2.zip dosyasını yarattığınız klasör içinde açın.

2- fcsh.zip dosyasını /home/sizinisminiz/flex2sdk/bin dizini içinde açalım veya file-roller gibi bir araçla zip dosyasını otomatikman açtıysanız yukardaki dizine çıkarma işlemini gerçekleştirin.

3- /home/sizinisminiz/flex2sdk/bin/jvm.config ayar dosyasında java.args= bölümüne

• Duser.language=en
• Duser.location=us

4- Terminali açalım. Ana menüden Sistem Araçları, Utilities veya benzeri isimler altında Terminal’i her Linux dağıtımında bulabilirsiniz.

Terminalde /home/sizinisminiz/flex2sdk/bin/fcsh yazalım ENTER’a basalım. Aşağıdaki görüntüyü elde etmiş olmamız gerekli:

5- Şimdi de fcsh ile oluşturulan yeni komut satırına mxmlc -help yazalım:

Kurulumumuz bitmiştir!

Uygulama Örneği

Çok çok basit bir panel örneği ile artık Flex2 Programlamaya başlayalım. Tipik bir Flex2 programının 3 yapıtaşı vardır:

• MXML dosyası: Grafik ( örn. form elementleri) ve bazı programlama öğelerinin XML ile tanımlanması. MXML’in en belirgin özelliği mx: önekiyle Flex için tanımlanmış bir XML namespace kullanılması kanımca!
• Actionscript 3.0 dosyaları: MXML ile yaratılmış görsel sunuma Actionscript 3 kodu ile mantık kazandırmak
• CSS tema ve stil dosyaları. Renk ve biçim bilgisi içeren stil dosyaları.

Tanıdık geldi değil mi? Bildiğimiz HTML, CSS, JS üçlüsünün farklı bir hali aslında Flex!! XML tabanlı Java grafik arayüz programlamayla tanışmış arkadaşlar kendilerini Flex’e daha da yakın hissedebilirler.

Aşağıda kodlarımızı görelim şimdi:

MXML (test.mxml)

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
        layout="absolute" width="400" height="300"
        creationComplete="uygulama_basla()">
    <mx:Script source="Test.as"></mx:Script>
    <mx:Style source="FlexTema.css"></mx:Style>

    <mx:Panel title="Panel Başlığı!" height="100%" width="100%" >
        <mx:Label text="Flex2 SDK ile Flex Programlama!" 
                            textDecoration="underline"/>
    </mx:Panel>
</mx:Application>

ActionScript 3.0 (Test.as)

import mx.controls.Alert;

/* 
    Flex'in tanımladığı sınıflarınin dışında 
    baska siniflar kullanmak istersek:  
*/
import Test2;

private var degisken:Test2;

public function uygulama_basla():void {
    degisken = new Test2();
    Alert.show("Flex2 çalışıyor!");
}

(Test2.as)

/*
    Bu sınıf mxml tarafından kullanılan Test.as dosyası içinden 
    'import' edilmekte. 
*/

// import ...
package  {
    // Sinif degiskenleri... 

    public class Test2 {  
        //...
    }
}

CSS (FlexTema.css)

Application {
    backgroundColor:#000000;
    backgroundGradientAlphas:0,0;
    color: #dd0000;
    fontFamily: Verdana;
    fontSize: 14;
}

Panel {
   titleStyleName: "mypanelTitle";
}

.mypanelTitle {
     fontFamily: Trebuchet MS;
     fontSize: 16;
     fontWeight: bold;
}

Ve işte sonuç..

Uygulamayı gördügünüzde Alert kutusundaki OK’e basın!

Windows’ta Derleme İşlemi

Daha önce kurulumu yaptığımız gibi terminali açalım ve şu işlemleri yapalım:

1- C:flex_diziniinfcsh yazalım ENTER’a basalım. (Flex2 SDK yı kurduğunuz dizinin adresini yazın!)

2- şimdi (fcsh) satırına mxmlc C:flextest est.mxml -o C:flextest est.swf yazın ve ENTERlayın! Ekran görüntüleri:

Önemli Not: Eğer derleme yaparken Could not resolve mx:Script to a component implementation hatası alırsanız yukarıda bahsettiğimiz sistem dili ayarlarında bir hata yaptınız demektir.

3- Derleme işleminin uzun sürdüğünü farkettiniz mi? İşte fcsh burada devreye giriyor. Şimdi diyelim test.mxml veya Test.as dosyasında bir değişiklik yaptınız. Tekrardan derleme yaptığımız Terminaldeki (fcsh) satırına gelelim ve compile 1 yazalım:

Şip şak. Hemen bitti. İlk derlememizi mxmlc ile yaptık ve fcsh bize (1) nolu kimlik numarasını atadı.

Eğer başka bir dosya derlemek isterseniz tekrardan (fcsh) satırında mxmlc ile derleme yapacaksınız, ve bu sefer fcsh size (2) nolu kimlik numarasını atayacak. Bu ikinci yaptığınız derlemeyi compile 2 olarak daha sonra tekrar gerçekleştirebilirsiniz.

Linux’te Derleme İşlemi

Daha önce kurulumu yaptığımız gibi terminali açalım ve:

1- /home/sizin_klasorunuz/Flex2/SDK/bin/fcsh yazalım ENTER’a basalım. (Flex2 SDK yı kurduğunuz dizinin adresini yazın!)

2- Şimdi (fcsh) satırına mxmlc /home/sizinklasorunuz/MXMLKLASORU/test.mxml -o /home/sizinklasorunuz/MXMLKLASORU/test.swf yazın ve ENTERlayın! İşte ekran görüntüleri:

3- Derleme işleminin uzun sürdüğünü farkettiniz mi? İşte fcsh burda devreye giriyor. Şimdi diyelim test.mxml veya Test.as dosyasında bir değişiklik yaptınız. Tekrardan derleme yaptığımız Terminaldeki (fcsh) satırına gelelim ve compile 1 yazalım:

Şip şak. Hemen bitti. İlk derlememizi mxmlc ile yaptık ve fcsh bize (1) nolu kimlik numarasını atadı.

Eğer başka bir dosya derlemek isterseniz tekrardan (fcsh) satırında mxmlc ile derleme yapacaksınız, ve bu sefer fcsh size (2) nolu kimlik numarasını atayacak. Bu ikinci yaptığınız derlemeyi compile 2 olarak daha sonra tekrar gerçekleştirebilirsiniz.

Açıklama

Bu örnekte XML, Actionscript ve CSS’nin birlikte nasıl kullanılabildiğini göstermek istedim.

test.mxml içinde gördüğünüz , , creationComplete yapıları hakikaten bildiğimiz HTML, JS, CSS etkileşimini çağrıştırıyor. Uygulama Flash Player’a yüklendiğinde creationComplete ile belirlediğimiz uygulama_basla() fonksiyonu çağrılıyor. Bu fonksiyon yine test.mxml içinde belirttiğimiz Test.as dosyasında tanımlanmıştı.

Test.as’deki koda dikkatlice bakalım. Bir şeyler eksik gibi. Normalde bir Actionscript 3 programı ‘package’ içinde belirtilen bir ‘class’ ile tanımlanır. Flex Proglamada ise MXML içinden belirttiğimiz Actionscript sınıfına, MXML derleyicisi (mxmlc) bizim için bir package ve içinde sınıfını (class Test olarak) ekliyor.

Flex CSS Grameri Üzerine

Ne biçim CSS bu değil mi? Evet CSS kullanımı Flex’de biraz farklılık gösteriyor. Ama en azından yazdıklarımız her browserda aynı sonucu vermekte!! Flex CSS Stilleme konusunda Adobe Consulting’in hazırladığı mükemmel bir Flex programı var ki sayesinde Flex CSS’ye aşina olmamız çok kolaylaşıyor: Flex Style Explorer

SONUÇ

Bu çalışmamızda ücretsiz kullanılabilen Adobe Flex2 SDK kurulumunu gerçekleştirdik ve çok basit bir uygulama geliştirdik. Özellikle üzerinde durmak istediğim 3 konu şöyleydi:

• Windows, Mac ve Linux’te hiç bir ücret ödemeden Flex Programlama yapabiliriz.
• MXML, Actionscript ve CSS’nin birlikte kullanımı.
• Genel Kurulum bilgisi.

Bu yazıyı yazarken bana fikir veren ve yardımcı olan Cihan Topçu ve Murat Küçükgirgin’e çok teşekkür ediyorum.

Gelecek haftalarda Flex2 yazı dizimize devam ederek sık sık karşınızda olacağım. Şimdilik hoşçakalın!

Kaynaklar

• AdobeTurk Forum – mx:Script hatası
• Adobe, Apollo Forumu – Ingilize olmayan İşletim sistemlerinde Apollo sorunu.
• Adobe Flex 2 API Referans dosyaları.