Flash(Flex) Builder 4′e Giriş

Flash Builder 4(eski adıyla Flex)  2010 yılının başında yayınlanacak. Şu anda hala beta testleri devam ediyor, ama en son beta yayınından sonra kodlama yapısında herhangi bir değişiklik yapmayacaklardır. Yani şu anda Flash Builder takımının tek yaptığı yapıdaki sorunları(bug) gidermek. Eee hal böyle olunca bana da yazmak düşüyor.

Flash Builder 4’ün Yüklenmesi

Flash Builder, açık kaynak olan Eclipse yazılımının üzerine kurulmuştur. Eclipse 2001 yılında IBM tarafından başlatılan bir proje, Eclipse yazılımının açık kaynak ve güçlü bir yazılım olması nedeni ile Eclipse yazılımında bir çok farklı programlama dili (Java,C/C++,Actionscript/MXML, PHP…) ile programlama yapabilirsiniz.

Flash Builder 4’ü yüklemek için iki seçeneğiniz var, birincisi Flash Builder 4 Standalone versiyonunu ikincisi ise Eclipse Plug-in indirip yüklemek. Eğer daha önceden Eclipse kullanıyorsanız Flash Builder Plug-in’i indirerek kullandığınız Eclipse versiyonuna yükleyebilirsiniz. Eğer kullanmıyorsanız Flash Builder Standalone versiyonunu yüklemeniz daha mantıklı, bu sayede işleri basitleştirmiş olursunuz.

Diğer taraftan ilerde yine bir Eclipse Plug-in’ine ihtiyaç duyduğunuzda, mesela Java ile kodlama yapmanız gerektiğinde, yeniden Eclipse yazılımını yüklemenize gerek kalmadan Flash Builder 4 yazılımına gerekli eklemeleri yaparak Flash Builder 4 içerisinde Java dili ile kodlama yapabilirsiniz.

Aşağıdaki linklerden Flash Builder veya Eclipse yazılımını indirip yükleyebilirsiniz.

Flash Builder 4

http://labs.adobe.com/technologies/flashbuilder4/

Eclipse

http://www.eclipse.org/

Flash Builder veya Eclipse(Flex SDK ile) yazılımını yükledikten sonra uygulama çalıştığında karşınıza şu şekilde bir ara yüz çıkacaktır.

Proje Oluşturmak

Flash Builder içerisinde herhangi bir uygulama geliştirmek için proje oluşturmanız gerekiyor, oluşturduğunuz uygulama internet tabanlı veya masaüstü için geliştiriliyor olabilir, her halükarda proje oluşturmanız gerekiyor. Yeni bir proje oluşturmak için File>New>Flex Project seçeneğini seçin.

Karşınıza çıkan ilk pencerede projenin temel ayarları yer alıyor, projenin adı, ne tür bir proje olduğu, kayıt edileceği yer, kullandığı yazılım geliştirme paketini(SDK), eğer ihtiyacınız varsa kullanacağınız sunucu türü gibi ayarlar burada yapıyorsunuz. Bu projeye TestProject adını verip devam ediyoruz.

Daha sonraki pencerede uygulama çalıştığı anda derlenen dosyaların nerede saklanacağını tanımlıyorsunuz, varsayılan olarak bu değer bin-debug olarak ayarlanmıştır. Bu şekilde kalmasının herhangi bir sakıncası yok  tabiî ki.

Bir sonraki pencerede varsa eğer uygulamaya eklenecek kütüphaneleri, uygulamanın kaynak kodlarının alacağı dosya adını ki bu varsayılan olarak src olarak düzenlenmiştir. Yani uygulamaya ait tüm materyaller bu dosyada yer alacaktır. Ayrıca burada ana uygulama dosyasının alacağı isimde düzenlenebiliyor. Pencerede ki diğer bilgilere daha sonraki makalelerde değineceğim. Eğer herhangi bir değişiklik yapmayacaksınız devam deyip ilerleyebilirsiniz.

Proje oluşturmayı tamamladığınız anda projenin ana uygulama dosyası kod editörünü olduğu yerde açılacaktır. Sol taraftaki Package Explorer bölümünde ise projenin içeriğini görebilirsiniz. Pacakge Explorer bölümünde yer alan src dosyası uygulama içerisinde kullanılan materyallerin dosyasıdır. Flex 4.0 adlı düğüm ise Flex 4.0 framework içerisindeki sınıfları görüntüler. Bin-debug daha öncede değindiğim gibi uygulamayı oluştururken derlenen dosyaların tutulduğu bölümdür, yani uygulamayı test ederken swf ve html dosyaları bu klasöre kayıt edilir. Html-templta klasörü ise swf dosyasını taşıyacak olan html sayfasının şablonu ve javascript dosyası bulunmaktadır. Libs klasöründe de harici olarak kullanacağınız kütüphanalerin yer alacağı klasördür.

Kod editörüne dönersek. Kod editöründe xml  benzeri bir kodlama ile yer alıyor, bu dilin adı MXML. XML ile aynı yapılandırma ve kurallara sahip, mesela XML dökümanların da olduğu gibi etiketlerin her biri düzgün bir şekilde açılıp kapatılması gerekiyor. MXML’in ne olduğuna bir sonraki makalede değineceğim. Kod editürünün üst kısmında Source ve Design adlı iki tane buton yer almakta, Source uygulama dosyasının kodunu görüntülemek için kullanılıyor. Design ise uygulama dosyasının nasıl görüntülendiğini gösteriyor. Tabi Design bölümünde uygulamaya Button, Combobox, Datagirdi gibi compoenentler ekleyip bunların özelliklerinide belirleyebiliryorsunuz.

Design bölümüne tıkladığınızda karşınıza boş beyaz bir sayfa çıkacaktır. Design bölümüne geçer geçmez, Package Explorer panelinin altında bulunan Outline panelinin yanına Component paneli eklenir. Burada uygulamaya eklemek istediğiniz compoenentleri sürükleyip bırakarak, uygulamaya ekleyebilirsiniz.

Örnek olarak component panelinden sahneye bir buton sürükleyip bırakabilirsiniz. Butonu sahneye ekledikten sonra butona tıkladığınızda sağ tarafta Properties panelinde butona dair bilgileri görüp bu bilgileri düzenleyebilirsiniz. Bu bölümde butonun ismini, tıkladığında çalışacak olan fonksiyonu, butonun görsel görünümünü ayarlayabilirsiniz.

Geriye bir tek uygulamayı çalıştırmak kalıyor, uygulamayı çalıştırmak için üst menüdeki Debug butonuna tıklamanız yeterli. Uygulama varsayılan internet tarayıcınızda açılacaktır.

Kapanış
Bir sonraki makalede MXML dilinin yapısına ve nasıl çalıştığına değineceğim.

Kolay Gelsin
Engin Yöyen!