Merhabalar,

Bu yazımızda Adobe Flex ve Adobe AIR ile geliştirdiğimiz uygulamaların kullanıcı arabirimini nasıl istediğimiz gibi özelleştirebiliriz, bunu inceleyeceğiz. Adobe Flex geliştirme ortamında geliştirilen uygulamalar, herbiri kendi alanında oldukça yetenekli olan ActionScript 3 Flex bileşenleri ile oluşturulmaktadır. Daha öncede bahsettiğimiz gibi bu bileşenler uygulamanın iskelet yapısını oluşturmakta ve genel olarak uygulamaya görünümünü bu bileşenler vermektedir. Bu yüzden Flex ve AIR ile geliştirilen farklı uygulamalar, arabirim yönüden birbirlerine oldukça benzemektedirler.

NOT: Bu yazıda arabirim özelleştirmelerini Adobe Flex üzerinden anlatacağız. Ancak Flex geliştirme ortamında (Flex IDE’de) geliştirilen Flex ve AIR uygulamaları, arabirim özelleştirme için aynı yöntemleri kullanıyorlar. Yani AIR uygulamalarınızda da anlatacağımız işlemleri sorunsuz olarak uygulayabilirsiniz.

Flex ve AIR ile geliştirilen uygulamalar da görselliğinin belli bir seviye ile sınırlı olarak kaldığını biliyoruz. Bu durumu değiştirmenin çeşitli yolları mevcut. Bunların en başında CSS (Cascading Style Sheets) ler gelmektedir. Web programlama ile ilgilenen herkes mutlaka CSS ismini duymuştur ve ne işe yaradığı konusunda ufak ta olsa bir fikri vardır diye düşünüyorum. Ancak genel olarak bir tanımlama yapacak olursak CSS (Cascading Style Sheets-Basamaklı Stil Sayfaları), web sayfalarının arayüzünü dışardan bir dosya ile değiştirebilen bir programlama tekniğidir. CSS dosyaları kullanarak, hazırladığınız web sayfalarında kullanılan tüm elemanların görünüm özelliklerini değiştirebilirsiniz.

Flex’te CSS kullanımı normalden çok farklı değildir. Flex’te projemizi oluşturduğumuz klasör içerisine hazırladığımız CSS dosyamızı yerleştiririz ve uygulama içerisinde

<mx:Style source="style.css"/>

kodu ile uygulamamıza CSS dosyamızı tanıtırız. CSS dosyası içerisinde bir bileşen için stil hazırlayacağımız zaman buna bir isim vermek zorundayız. Bu isim uygulamaya eklediğimiz bileşenin styleName özelliğine aktarılmalıdır. Uygulamanın Design sekmesinde iken Refresh butonuna basarsanız, CSS dosyanızda herhangi bir problem yok ise değişen arabirimi, uygulamayı derlemeden de görebilirsiniz.

Uygulamayı derlediğiniz de artık dışardaki CSS dosyasına ihtiyaç duymadan *.swf dosyanızı kullanabilirsiniz. CSS dosyalarımızı uygulamamıza dışarıdan tanıtabileceğimiz gibi uygulama içerisinde de CSS oluşturabiliriz. Eğer uygulamanızda sadece küçük bir kısım için CSS kullanmayı düşünüyorsanız bu küçük CSS kodunu ayrı bir dosya yerine uygulama içerisinde tagları arasında oluşturabilirsiniz. Aşağıdaki kodlar uygulama içerisinde oluşturulan CSS’ e bir örnektir.

<mx:Style>
    Button {
             cornerRadius: 3;
             highlightAlphas: 0.5, 0.26;
                 fillAlphas: 1, 1, 0, 0;
             fillColors: #4a6f81, #bdd6e2, #456f84, #bdd6e2;
             themeColor: #336699;
        }
</mx:Style>

CSS’in Flex IDE’de bir kaç farklı kullanımı var. Bunlardan ilki ve kolay olanı yukarıda anlatmış olduğumuz harici veya Flex içerisinde yazılan CSS kullanımıdır. Kullanımı gayet kolay olan bu ilk yöntem ile verdiğiniz görünüm sizin için yeterli olmayabilir. Uygulamanızın arabirimini tamamen kendiniz tasarlamak isteyebilirsiniz. İşte budurumda CSS’in bir farklı kullanımına ihtiyaç duyarsınız. Öncelikle bileşenler için kullanacağınız resim dosyalarını bir resim editörü ile hazırladıktan sonra CSS ile bu resimleri uygulama içerisinde bileşenlere atayarak uygulama arabirimini özelleştirebilirsiniz.

Flex IDE’ sinde diğer bir CSS kullanım şekli ise Flash yardımıyla yapılan arayüz değiştirme işlemidir. Flash içerisinde ActionScript 3 bileşenlerinin görünümü değiştirildikten sonra, bileşenlerin sembollere dönüştürülmesi ile elde edilen swf dosyası ile birlikte CSS kullanılabilir. CSS dosyasında bu swf içerisindeki sembol isimlerini Flex bileşenlerine atayarak uygulama arabirimini değiştirebilirsiniz.

Tabi uygulama arayüzünü CSS olmadan da değiştirebilmenin yolları mevcut. Adobe, Flex IDE’si içerisine birebir arayüz tasarımı yapabilme imkanını dahil etmemiş, ancak uygulamalarımızın arabirimini değiştirebilmemiz için bize çok farklı seçenekler sunmuştur. CSS olmadan Flex IDE’sinde geliştirilen uygulamaların arabirimlerini Adobe Photoshop, Adobe Fireworks ve Adobe Illustrator programları ile özelleştirebilirsiniz. Bunun konuda detaylı bilgi ve referans dosyaları için http://www.adobe.com/devnet/flex/articles/flex_skins.html adresini incelemenizi tavsiye ederim.

Peki CSS bilmeden nasıl CSS kullanarak uygulamarımın arabirimini değiştireceğim? Geliştiriciler CSS bilmeyenlerinde CSS kullanarak uygulamalarını özelleştirebilmeleri için Flex2 Style Explorer isminde online bir yazılım geliştirmişler. Flex Style Explorer, kullanıcının Flex bileşenlerinin görünümlerini değiştirmesiyle, o görünümü veren CSS kodlarını oluşturuyor. Kullanıcı da Flex Style Explorer’ın oluşturduğu CSS kodları uygulamasında rahatlıkla kullanabiliyor. Flex Style Explorer’a buradan ulaşabilirsiniz.

Evet genel olarak Flex geliştirme ortamında (Flex IDE-Integrated Development Enviroment) geliştirilen Flex ve AIR uygulamalarının arabirimlerinin nasıl özelleştirildiğinden bahsettik. Şimdi küçük bir uygulama ile Flex Style Explorer’da CSS dosyamızı oluşturalım ve uygulamamızda bu CSS dosyamızı kullanalım.

Flex Style Explorer’ı açalım ve buton bileşeninin görünümünü verilen ayarları değiştirerek özelleştirelim ve sağ kısımda bulunan CSS bölümündeki CSS kodlarını alalım (Bkz. Resim).

Daha sonra Flex’i açalım ve yeni bir Flex projesi oluşturalım. Uygulamız içerisinde style.css isminde bir dosya oluşturalım ve içerisine, Flex Style Explorer’dan aldığımız aşağıdaki kodları yazarak kaydedelim.

<mx:Style>
    Button {
             cornerRadius: 3;
             highlightAlphas: 0.5, 0.26;
                 fillAlphas: 1, 1, 0, 0;
             fillColors: #4a6f81, #bdd6e2, #456f84, #bdd6e2;
             themeColor: #336699;
        }
</mx:Style>

Şimdi Flex uygulamamız içerisine aşağıdaki kodları yazalım ve uygulamamızı kaydettikten sonra derleyelim.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
                backgroundGradientColors="[#FFFFFF, #CCCCCC]" width="300" height="200">

    <mx:Style source="style.css"/>

    <mx:Button label="Style Deneme" styleName="Button" x="97" y="94"/>

</mx:Application>

Uygulamamızı derlediğimizde Button bileşeninin görünümünün Flex Style Explorer’daki gibi olduğunu görüyoruz. Artık sizde CSS kullanarak Flex ve AIR uygulamalarınızın arabirimlerini CSS bilmeseniz bile istediğiniz gibi değiştirebilirsiniz. Görüşmek üzere. Kolay gelsin!