Merhabalar, Bu yazımızda kısa olarak Adobe Integrated Runtime (AIR)’dan bahsedeceğiz ve AIR ile ilk uygulamamızı hazırlayacağız. AIR, Adobe’nin Flex 3.0 Beta ile birlikte beta sürümünü duyurduğu yeni bir teknolojidir. AIR’ ı şimdiye kadar Adobe Labs’ta geliştirme sürecindeki kod adı olan Apollo ile duyuyorduk ancak beta sürümü ile birlikte asıl adı olan AIR duyuruldu. AIR’ ı, MXML ve ActionScript dillerini kullanarak Flex geliştirme ortamında yüksek performanslı masaüstü uygulamaları geliştirmeyi sağlayan, Adobe Flex 3’e entegre bir program olarak tanımlayabiliriz. Yani AIR, geliştiricilere zengin internet uygulamalarını (RIA) tarayıcı ve platform bağımlılıktan kurtarıp masaüstü özgür yazılımlara dönüştürme imkanı sunan bir programdır.

AIR, Flex gibi ücretsiz bir SDK’ ine sahip. Yani bu SDK ile ücretsiz olarak AIR uygulamaları geliştirebilirsiniz. Ancak AIR uygulamalarını Flex geliştirme ortamında geliştirmenin bir çok ayrıcalığı var. Flex 3, önceki sürümünden farklı olarak AIR projeleri geliştirmeyi ve yayınlamayı File menusundeki Create AIR Project seceneği ile destekliyor. Flex 3.0 içinde AIR uygulamaları için kullanılabilecek küçük bir component paketi de bulunuyor. AIR uygulamaları yine Flex uygulamalar gibi MXML ve ActionScript 3.0 ile programlanıyor ve gerekli ayarlar bir xml dosyası üzerinden yapıldıktan sonra AIR paketi olarak çıktı alınabiliyor.

AIR paketinde tüm bilgisayarlara kurulabilecek özellikte bir setup dosyası bulunuyor. Bu setup dosyasının çalıştırılabilmesi için kullanıcının bilgisayarında Adobe Çalışma Ortamı (Adobe Integrated Runtime) kurulu olması gerekiyor.

Şimdi Adobe AIR ile ilk uygulamamızı geliştirmeye başlayalım. İlk uygulamamızda bir HTML Editör oluşturacağız. Yani uygulamamızı küçük bir Dreamweaver gibi düşünebiliriz. Dreamweaver’daki Design ve Code sekmeleri gibi iki tane alanımız olacak. Kod kısmına HTML kodlarımızı yazdığımızda Design kısmında HTML sayfamız gözükecek ve uygulama, kodları yazılan HTML sayfasını kaydedebilecek. AIR ile projemizi oluşturmaya başlamak için Adobe Flex3 Beta’yı çalıştıralım. İzleyeceğimiz adımlar Flex ile proje oluşturma ile aynı ama yinede kısaca anlatalım.

Flex menüsünden File -> New -> AIR Project komutunu verelim. (Bkz. Resim-1)

Açılan pencerede Project name kısmına projemizin ismini girelim ve Next’i tıklayalım (Bkz. Resim-2)

Bu işlemden sonra açılan pencerede ise projemizin kaydedileceği konumu belirliyelim ve Finish’i tıklayalım. Flex3 belirttiğimiz dizinde belirttiğimiz isim ile AIR projemizi oluşturdu. Artık projemiz Flex3 Navigator panelinde projeler arasında görünmektedir. Dikkat ederseniz burada HTMLEditor.mxml dosyası yanı sıra bir de HTMLEditor-app.xml adında bir dosya oluştu. Bu XML dosyası AIR projemizin gerekli ayarları için oluşturuldu. Uygulamamızı AIR Package olarak export etmeden önce gerekli ayarlamaları bu dosyayı üzerinden yapacağız.

Şimdi HTMLEditor.mxml dosyamıza kısaca bir göz atalım ve uygulamamızı yazmaya başlayalım. MXML dosyasının bir kaç farklı yazımı var. Bunlardan birincisi normal bir Flex projesinin ana dosyası olan MXML’dir. Bu dosya <mx:Application> </mx:Application> tagları arasında konumlanmıştır.

İkincisi, Flex Component (Bileşen) dosyasıdır ve bir Flex bileşeninin tagları ile başlar.

Üçüncüsü ise <mx:WindowedApplication></mx:WindowedApplication> tagları arasında konumlanmış olan AIR dosyasıdır.

Bunları bilmek bize Flex IDE’ sini kullanmadan bu uygulamaları gerekli SDK ler ile geliştirirken oldukça fayda sağlayacaktır. Sonuçta Flex’te de AIR’ da da kodlama hemen hemen aynı şekilde yapılıyor. Uygulamanın başlangıç tagları da, aralarındaki küçük bir fark oluyor.

Artık <mx:WindowedApplication> ile başlayan MXML dosyamızda uygulamamızı yazmaya başlayabiliriz. AIR projelerimizi de Flex’te olduğu gibi Design sekmesinde bileşenleri sahneye sürükleyerek oluşturabiliriz. Ancak biz yine Source sekmesinde çalışacağız. Yukarıda da bahsettiğimiz gibi uygulamamız iki kısımdan oluşacak. Bu kısımlardan ilki olan kod yazılacak kısım için bir adet TextArea bileşenine, ikinci kısım olan design kısmı için ise bir adet HTML bileşenine ihtiyacımız var. (HTML bileşeni Flex3 içerisinde yer alan birkaç tane AIR bileşeninden biridir)

Bu bileşenleri sahneye sürükleyerek birini sahnenin üst yarısına diğerini ise alt yarısına yerleştirebiliriz ancak daha farklı bir görünüm verelim ve kullanım alanımızı genişletelim. Uygulamamızı Accordion bileşeni içerisine yerleştirelim ve gerekli bileşenleri Accordion bileşeni içerisine ekleyelim. Aşağıdaki kodlar uygulamamızda Accordion bileşeni içine istediğimiz alanları oluşturacaktır.

 <mx:Accordion left="0" right="0" top="0" bottom="62">
<mx:Canvas label="Kodlar - HTML Kodlarını Buraya Yazın" width="100%" height="100%" id="src">
<mx:TextArea id="inputField" textInput="onTextInput()" left="0" right="-2" top="10" bottom="10"/>
</mx:Canvas>

<mx:Canvas label="Görünüm - HTML Sayfasının Önizlemesi" width="100%" height="509" id="dsgn">
<mx:HTML right="0" id="html" left="0" top="10" bottom="10"/>
</mx:Canvas>
</mx:Accordion>

Bu işlemden sonra hazırlanan HTML sayfasının kaydedilmesi için gerekli bileşenleri oluşturalım. Kayıt işlemi için bir tane TextInput ve bir tane de Buton bileşenine ihtiyacımız var. Aşağıdaki kodları çalışmamıza ekleyelim.

 <mx:ApplicationControlBar width="264" height="36" right="19" bottom="9">
<mx:HBox>
<mx:Spacer width="5"/>
<mx:TextInput id="fileName" text=".html" width="161" height="22" x="555" y="593"/>
<mx:Button label="Kaydet" id="saveButton" click=">
</mx:HBox>
</mx:ApplicationControlBar>

Artık uygulamamızın MXML ile programlanacak kısmını bitirdik. Sırada ActionScript ile programlayacağımız kısım var. Uygulamamızın istediğimiz işlemleri yapabilmesi için gerekli olan üç adet fonksiyonumuzu ActionScript ile yazacağız. Bunlardan ilki uygulama başladığında tam ekran olmasını sağlayan init() isimli fonksiyon. İkincisi HTML dosyamızın kaydedilmesini sağlayan isimli fonksiyon ve üçüncüsü ise HTML kodlarken, görünüm kısmında HTML sayfasının görünmesini sağlayan onTextInput() isimli fonksiyon. Aşağıdaki kodları çalışmamıza ekleyelim ve uygulamamızın kodlamasını tamamlayalım.

 <mx:Script>
<![CDATA[
import flash.filesystem.FileMode;
import flash.filesystem.FileStream;
import flash.filesystem.File;
import flash.html.JavaScriptObject;

private function init(event):void
{
stage.window.maximize();
}

private function  desktop:File = File.desktopDirectory;
var saveFile:File = desktop.resolve(fileName.text);
var fs:FileStream = new FileStream();
fs.open(saveFile, FileMode.WRITE);
fs.writeUTFBytes(inputField.text);
fs.close();
}

private function onTextInput():void
{
html.htmlText = inputField.text;
}
]]>
</mx:Script>

Yukarıdaki fonksiyonlarmızı da uygulamamıza ekledikten sonra artık kodlama işlemimiz tamamlanmış oldu. Uygulama kodlarımız son hali ile aşağıdaki gibi olmalıdır.

 <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="init(event)" backgroundGradientColors="[#FFFFFF,#CCCCCC]">
<mx:Script>
<![CDATA[
import flash.filesystem.FileMode;
import flash.filesystem.FileStream;
import flash.filesystem.File;
import flash.html.JavaScriptObject;

private function init(event):void
{
stage.window.maximize();
}

private function  desktop:File = File.desktopDirectory;
var saveFile:File = desktop.resolve(fileName.text);
var fs:FileStream = new FileStream();
fs.open(saveFile, FileMode.WRITE);
fs.writeUTFBytes(inputField.text);
fs.close();
}

private function onTextInput():void
{
html.htmlText = inputField.text;
}
]]>
</mx:Script>
<mx:Accordion left="0" right="0" top="0" bottom="62">
<mx:Canvas label="Kodlar - HTML Kodlarını Buraya Yazın" width="100%" height="100%" id="src">
<mx:TextArea id="inputField" textInput="onTextInput()" left="0" right="-2" top="10" bottom="10"/>
</mx:Canvas>

<mx:Canvas label="Görünüm - HTML Sayfasının Önizlemesi" width="100%" height="509" id="dsgn">
<mx:HTML right="0" id="html" left="0" top="10" bottom="10"/>
</mx:Canvas>
</mx:Accordion>

<mx:ApplicationControlBar width="264" height="36" right="19" bottom="9">
<mx:HBox>
<mx:Spacer width="5"/>
<mx:TextInput id="fileName" text=".html" width="161" height="22" x="555" y="593"/>
<mx:Button label="Kaydet" id="saveButton" click=">
</mx:HBox>
</mx:ApplicationControlBar>

</mx:WindowedApplication>

Yukarıda belirtmiş olduğum HTMLEditor-app.xml dosyasının ne işe yaradığından kısaca bahsedelim ve çalışmamızı export edelim. Adobe AIR derlendiğinde bir *.air uzantılı kurulum dosyası üretir. Bu kurulum dosyasının kullanıcının veya bizim bilgisayarımızda çalışabilmesi için Adobe Integrated Runtime Enviroment (Adobe Çalışma Zamanı Ortamı) nın sistemde kurulu olması gerekiyor. Bu çalışma ortamı yüklü olan bilgisayarlarda uygulamamız, sahip olduğu bir takım niteliklerle birlikte kurulacaktır. Adobe AIR Paketi export etmeden önce HTMLEditor-app.xml dosyası içerisinde uygulamanın bazı özelliklerini değiştirebiliriz. Böylece uygulamamızı daha da özelleştirmiş oluruz. Bu ayarlarının tamamını ayrıntılı olarak anlatmayacağım ama bir kaçını sıralayacak olursak; uygulama ismi, uygulama açıklaması, copyright bilgileri, uygulama ikonu v.b. şeklindedir. Zaten Adobe bu XML dosyası içerisine değiştirebileceğiniz özellikleri ve ne işe yaradıklarını detaylı bir biçimde not etmiş.

Artık çalışmamızı export edelim.

Bunun için Flex menüsünden Project -> Export AIR Package komutunu verelim (Bkz. Resim-3).

Açılan pencerede gerekli ayarlamaları yaparak finish seçeneğini tıklayalım ve işlemimizi tamamlayalım (Bkz. Resim-4).

Artık HTML Editör isimli AIR projemiz kullanıma hazır halde. Kaynak dosyalarımızın bulunduğu dizinde *.air uzantılı kurulum dosyamızı çalıştırarak HTML Editörü bilgisayarımıza kurabilir ve test edebiliriz.

Yukarıdaki adımları eksiksiz uygulamış iseniz ilk AIR projenizi tamamlamış bulunuyorsunuz. Uygulama dosyalarını buradan indirebilrsiniz. Görüşmek üzere. Kolay gelsin ..

NOT: Yukarıda anlatmış olduğum HTML Editor uygulaması, Lynda.com – Adobe Apollo Alpha Preview isimli Video Eğitim Setinden faydalanılarak hazırlanmıştır.