Adobe AIR Nedir, Nasıl Uygulama Geliştirilir?

22 Şubat 2010 – 01:51

Adobe AIR (Adobe Integrated Runtime) bir platform ve aslında web geliştiricilerinin işine çok yarayacak bir teknoloji. Çünkü bu platform HTML, JavaScript, AJAX, ActionScript, XML, Flash, Flex ve Dreamweaver gibi çok kullanılan web yazılım ve geliştirme araçlarını kullanarak masaüstü uygulamalar geliştirebilmenizi sağlıyor. Yani bir AIR uygulaması geliştirebilmek için Adobe Flash, Flex veya Dreamweaver programlarından birini kullanıyor olmanız yeterli. Bununla ilgili biraz daha bilgi verdikten sonra, Flash üzerine kurup bir AIR projesi nasıl açılır göstereceğim, sizler projenize göre Flex veya Dreamweaver üzerinde de deneyebilirsiniz bir farkı yok.

 

Adobe AIR in bir diğer özelliği de platform bağımsız çalışabilmesi. Şu anki AIR 2.0 sürümüyle uygulamanızı Windows, Linux ve Mac OS işletim sistemlerinde kullanabilirsiniz. Aslında AIR bir anlamda büyük bir değişiklik olarak nitelendirilebilir, web ve masaüstü uygulamalara farklı bir bakış açısı getirerek web uygulamanızı birden masaüstü uygulamasına dönüştürülebilir hale getiriyor. Yani bi bakıma “klasik web uygulamanız bir anda gerçek zamanlı çalışabilen bir exe ye dönüşüyor” diye düşünebilirsiniz. Bu özellik web geliştiricileri için çok büyük kolaylık olmuş. Çünkü masaüstü bir uygulama yapmak için C++ gibi başka bir dil öğrenmelerine gerek kalmıyor.

 

Şimdi Adobe Flash CS3 kullanarak bir AIR uygulaması nasıl geliştirilir adım adım buna bi bakalım.

Öncelikle http://labs.adobe.com/ adresinden kullandığınız Flash sürümüne (CS3 veya CS4) ve işletim sistemine uygun AIR update i indirin. İndirdikten sonra Flashı açtığınızda karşılama ekranında artık bir air uygulaması geliştirme kısayolu göreceksiniz.

 

Buradaki air kısayolundan veya yukardaki file/new seçeneğinden air uygulamamızı açalım. Açılan sayfanın altındaki pencereden de görebileceğiniz gibi uygulamamızı çalıştıracağımız player artık Flash player 9 veya 10 değil de indirdiğiniz sürüme göre Adobe Air 1.0/2.0 olarak görünecektir. Şimdi basit bir video uygulaması yapalım. Şu anda açık olan sayfaya ben “video” ismini veriyorum ve kaydediyorum. Kaydedilen dosyanın henüz .fla uzantılı olduğuna dikkat edin. Dikkat etmenizi istediğim bir nokta daha yukarıdaki Command menüsü altında çıkan AIR- Application and Package Settings ve AIR- Package AIR File seçenekleridir. AIR- Application and Package Settings kısmından uygulamanızın bütün özelliklerini görebilirsiniz.

 

 

Ben buradaki window style kısmından uygulamada açılan penceremi transparent olarak ayarladım. Çünkü videomu açtığımda dışında ayrıca bir pencere görünsün istemiyorum sadece videonun kendisi olsun.

 

Daha sonra kullanacağımız videoyu seçelim. File/Import/Import Video seçeneklerinden bilgisayarımızda bulunan herhangi bir videoyu seçelim. Karşınıza çıkan wizardın en son adımında skin kısmından istediğiniz tipteki video playerı seçip ekledikten sonra sayfanızda video playerı göreceksiniz. İsterseniz gene propertiesten eklediğiniz bu frame ile ilgili değişiklikler yapabilirsiniz.

 

Uygulamamızı çalıştıralım. Video penceresinin ekranın bir yerinde sabit durduğunu göreceksiniz. Bütün masaüstü uygulamalarında olduğu gibi biz de video penceremizi ekranda istediğimiz yere taşıyabilme özelliğini kazandıralım. Bunun için videoya instance name olarak da video ismini verelim ve actions panelini açalım. Yani actionscript kullanarak video componentimize mousela sürükleme eventı özelliğini vereceğiz. Açılan panele şu kodları yazalım:

 

video.addEventListener(MouseEvent.MOUSE_DOWN, dragMe); function dragMe(e:MouseEvent):void {      stage.window.startMove(); }

 

 

Burada video componentımıza bir Mouse tıklama (MOUSE_DOWN) event özelliği ekledik ve tıkladıktan sonra hareket ettirebilmek için bir sürükleme fonksiyonu yazdık. Fonksiyonun içindeki stage.window ana uygulama penceremizi ifade ediyor. Şimdi uygulamamızı çalıştırdığımızda video pencersini ekranda istediğiniz yere sürükleyebildiğinizi göreceksiniz.

 

Uygulamamıza eklememiz gereken bir özellik daha var. Uygulamanın en başında hatırlarsanız pencereyi transparent yapmıştık sadece video ekran olarak görünsün diye. Fakat böyle yapınca kullanıcı videoyu kapatmak istediğinde aşağıdaki sekmesnden sağ tıklayıp kapat demek zorunda kalıyor. Bunun için video ekranının sağ üst köşesine kapatmak için kullanılan klasik “x” sembolünü koyalım. Soldaki menüden text toolu kullanarak x harfini videonun sağ üst köşesine yazalım. Aşağıdaki text özellik penceresinden çarpı işaretinizin rengini ve yazı tipini istediğiniz gibi değiştirebilirsiniz. Daha sonra “x”in üzerine sağ tıklayıp break apart diyin ve text yerine bir sembole dönüştürmek için gene sağ tıklayıp convert to symbol diyin. Böyle yaparak başta text olarak oluşturduğumuz bir ifadeyi video penceresini kapatmak için kullanacağımız bir butona dönüştürüyoruz. Oluşturduğumuz bu movie clipin ismine ben “kapat” adını verdim ve aşagıdaki properties penceresinden de instance name ine kapat yazdım. Şimdi actions panelini açalım ve x butonumuza tıklandığında video penceresinin kapanmasını sağlayalım. Actions paneline daha önce pencereyi sürükleyebilmek için kod yazmıştık şimdi buna bir de pencereyi kapatmak için ek yapacağız.

 

video.addEventListener(MouseEvent.MOUSE_DOWN, dragMe); kapat.addEventListener(MouseEvent.MOUSE_DOWN, closeMe);   function dragMe(e:MouseEvent):void {      stage.window.startMove(); }   function closeMe(e:MouseEvent):void {      stage.window.close(); }

 

Böylelikle video uygulamamızı asgari özellikleri vererek tamamlamış olduk. Şimdi uygulamamızı paketleyelim ve bir air dosyası haline getirelim. Yukarıdaki menüden Command/ AIR- Application and Package Settings seçeneğini açın. Açılan pencerenin en altında included files kutusunu göreceksiniz. Burada uygulamamız için gereken iki dosyanın adı var, biri video.swf diğeri video-app.xml şeklinde. Bunlar uygulamamızın çalışması için gereken iki dosya. Paketlememizi yapmadan bunların arasına bir de video için kullandığımız playerın arayüzünü de eklemeyi unutmamalıyız. Kutunun üzerindeki artı sembolüne tıklayın ve uygulamanızı en başta bilgisayarınızda nereye kaydettiyseniz orada kullandığınız skinin adını taşıyan .swf uzantılı bir dosya göreceksiniz onu ekleyin. Paketlenmeye hazır dosyalarınız şöyle olacak:

 

 

 

Artık package diyerek air uygulamamızı yaratmış oluyoruz. Uygulamayı kaydettiğiniz yerde video.air isminde .air uzantılı uygulamanızı görebilirsiniz. İlk AIR uygulamamızı da böylelikle tamamlamış olduk. İsterseniz farklı air uygulamalarına bakıp kodlarını görmek isterseniz http://www.webresourcesdepot.com/10-adobe-air-must-see-applications/  adresinde 10 tane air uygulaması geliştirip koymuşlar fikir olması açısından bakmanızı tavsiye ederim. Herkese kolay gelsin.