Adobe Flex 2 SDK ile Windows, Mac ve Linux Ortamında Uygulama Geliştirmek

Adobe Flex 2 SDK ile Windows, Mac ve Linux Ortamında Uygulama Geliştirmek


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ı.

Flex2 programlama için asıl geliştirme ortamı kapsamlı bir IDE olan Adobe Flex2 Builder. 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.
3.
4.

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 flex_sdk_2.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_diziniin e 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_diziniinfcsh 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/sizin_isminiz/flex2_sdk
flex_sdk_2.zip dosyasını yarattığınız klasör içinde açalım.

2. fcsh.zip dosyasını /home/sizin_isminiz/flex2_sdk/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/sizin_isminiz/flex2_sdk/bin/jvm.config ayar dosyasında java.args= bölümüne -Duser.language=en -Duser.location=us ekleyin:



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/sizin_isminiz/flex2_sdk/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 Proglamaya başlayalım. Tipik bir Flex2 programının 3 yapıtaşı vardır:

1. 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!

2. Actionscript 3.0 dosyaları: MXML ile yaratılmış görsel sunuma Actionscript 3 kodu ile mantık kazandırmak

3. 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:
1. MXML - test.mxml

2. ACTIONSCRIPT 3.0 - Test.as

Test2.as

3. CSS (FlexTema.css)


Ve işte sonuç:

alt :

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

Windows'da 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:flex_test est.mxml -o C:flex_test est.swf yazın ve ENTERlayın! Ekran görüntüleri:


Önemli not: Eğer derleme yaparken Could not resolve mxcript 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'ta 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/sizin_klasorunuz/MXML_KLASORU/test.mxml -o /home/sizin_klasorunuz/MXML_KLASORU/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 hazırladığı mükemmel bir Flex programı var ki sayesinde Flex CSS'ye aşina olmamız çok kolaylaşıyor:
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:

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