Oluşturulan uygulamalar içerisinde birden fazla pencere ile çalışmak mümkün. Bu bölümde sadece ana penceresi üzerinde çalışacağız. Ana uygulama penceresi üzerinde ilk etapta en fazla ihtiyacınız olacak şeyler, bu pencereyi sürüklemek, minimize ve maksimize etmek olacaktır. AIR uygulamalarında ana pencereyi NativeApplication objesi temsil eder ve her uygulama için sadece bir tane NativeApplication objesi tanımlanabilir. Uygulama oluşturululduğuna bu objede otomatik olarak oluşturulur. Sonrasında bu objeyi silme şansınız yoktur.
Uygulamaya başlayabilmek için yeni bir Adobe AIR belgesi oluşturun ve belgeyi NativeApplication ismi ile kaydedin. Properties panelinde bulunan Adobe AIR Settings sekmesinin karşısındaki Edit butonuna tıklayın ve açılan pencerede General sekmesinde bulunan Window Style seçeneğini Custom Chrome (opaque) olarak değiştirin.
Sahne üzerinde sahne genişliğinde ve yüksekliği 20 piksel olan bir dikdörtgen çizin ve MovieClip olarak sembole dönüştürün. Convert To Symbol panelinde Advanced ikonuna tıklayın ve açılan pencerede Export for ActionScript onay kutusunu işaretleyin. Class sekmesine de DragBar yazarak pencereyi kapatın. Daha sonra uygulama penceresini minimize, maksimize etmek ve uygulamayı kapatmak için kullanacağınız üç tane MovieClip hazırlayın. Yine Convert to Symbol panelinde Export for ActionScript onay kutusunu işaretleyin ve Class sekmelerine pencereyi minimize etmek için kullanacağınız sembol için MinimizeButton, maksimize etmek için kullanacağınız MovieClip için MaksimizeButton, uygulamayı kapatmak için kullanacağınız MovieClip içinse CloseButton yazın.Bu sembollere örnek teşkil etmesi için herhangi bir uygulama üzerinde kullanılan ikonlara bakabilirsiniz. Son olarakta Timeline üzerindeki layerın ismini Actions olarak değiştirin ve eğer sahne üzerinde herhangi bir sembol varsa bu sembolleri silin.
İlk olarak kullanılacak sınıfları import edilmesi gerekiyor. AIR uygulamalarında pencereler ile çalışabilmek için NativeWindow sınıfını kullanmanız gerekmektedir.Sınıfları import ettikten sonra NativeApplication ve NativeWindow sınıflarına ait yeni birer nesne tanımlıyoruz. NativeApplication nesnesinin ismi anaUygulama NativeWindow nesnesinin ismide anaPencere olsun. (Eğer standart sistem kromlarını kullanıyorsanız title özelliği ile pencerelerin sol üst köşesinde istediğiniz bilgileri görüntüleyebilirsiniz. Standart sistem kromlarını kullanmıyorsanız da yeni bir pencere açtığınızda TaskBar da ya da uygulamalar arasında geçiş yapmak istediğinizde bu özelliğe verdiğiniz değer görüntülenecektir.) Uygulamanın çalıştırıldığı ekran çözünürlüğü ile ilgili bilgileri alabilmek içinse Capabilities sınıfını kullanılması gerekmektedir. Son olarakta oluşturduğumuz MovieClip’leri kod ile çağırarak sahne üzerine ekliyoruz ve bu sembollerinin buttonMode özelliklerinin değerini true olarak değiştiriyoruz. Sembolleri anaPencere isimli pencereye ekleyeceğiz. Web uygulamalarında sahne üzerine sembol ekleyebilmek için addChild() metodunu kullanıyoruz. AIR uygulamalarında pencereye nesne ekleyebilmek için addChild() metodunun kullanımı biraz farklıdır. Pencereye içerik ekleyebilmek için ilk once pencere ismini, sonra da stage ifadesinin kullanılması gerekir.
import flash.display.NativeWindow;
import flash.system.Capabilities;
var anaUygulama:NativeApplication = NativeApplication.nativeApplication;
var anaPencere:NativeWindow = stage.nativeWindow;
anaPencere.title = "First Application";
var dragBar_mc:DragBar = new DragBar();
var minimize_mc:MinimizeButton=new MinimizeButton();
var maksimize_mc:MaksimizeButton=new MaksimizeButton();
var close_mc:CloseButton=new CloseButton();
anaPencere.stage.addChild(dragBar_mc);
anaPencere.stage.addChild(minimize_mc);
anaPencere.stage.addChild(maksimize_mc);
anaPencere.stage.addChild(close_mc);
minimize_mc.buttonMode=true;
maksimize_mc_buttonMode=true;
close_mc.buttonMode=true;
Şimdi de sahnenin scaleMode ve align özelliklerinin değerlerini değiştirmemiz gerekiyor ki uygulama resize edildiğinde pencere üzerindeki sembollerin görünümleri değişmesin. Sembollerin boyutlarının değişmemesi için scaleMode özelliğinin değerini NO_SCALE olarak değiştirmemiz gerekmektedir.Pencere üzerindeki sembollerin hangi konuma gore hizalanacaklarını belirlemek içinde align özelliği kullanılır. Bu uygulamada nesnelerin pencerenin sol üst köşesine gore hizalanması gerekmektedir.Bunun için align için özelliğin değerini TOP_LEFT olarak değiştiriyoruz. Böylece pencere üzerine eklenen nesneler sol üst köşeye göre hizalanacaktır. Ana pencerenin maksimize edilip edilmediğini kontrol etmek için Boolean veri türüne ait bir değişken tanımlıyoruz. Bu değişkenin ismi de maksimize olsun. Pencere resize edildiğinde pencere üzerinde bulunan sembollerin konumlarını belirleyebilmek içinde anaPencere isimli nesneye Event.RESIZE olayını dinleyen bir olay dinleyici ekliyoruz. Bu olay dinleyici sayesinde pencerenin boyutu değiştiğinde pencere üzerindeki sembollerin konumları ile anaPencerenin x ve y konumlarını ayarlayacağız. Pencerelerin x ve y konumlarını belirleyebilmek için bildiğimiz klasik değer atama yöntemini kullanabiliriz. Fakat pencerenin ekranın tam ortasında açılmasını için Capabilities sınıfını kullanılması gerekir. Sınıf içerisinde bulunan screenResolutionX ve screenResolutionY özellikleri ile ekranın genişlik ve yükseklik değerleri alınabilir. Uygulama ilk çalıştırıldığında pencere üzerinde herhangi bir ölçekleme işlemi olmayacağı için tanımladığımız olay dinleyici çalışmayacaktır. Küçük bir trick ile bu fonksiyonun çalışmasını sağlayabiliriz. Bunun için anaPencere nesnesinin dispatchEvent metodunu kullanacağız. dispatchEvent metodu ile olay meydana gelmiş gibi olay dinleyiciyi tetikleyerek fonksiyonun çalışmasını sağlayacaktır.
stage.align = "TL";
var maksimize:Boolean;
anaPencere.addEventListener(Event.RESIZE, resized);
function resized(e:Event)
{
dragBar_mc.x = dragBar_mc.y = 0;
dragBar_mc.width = anaPencere.width;
minimize_mc.x = anaPencere.width - 70;
minimize_mc.y = 0;
maksimize_mc.x = anaPencere.width - 45;
maksimize_mc.y = 0;
close_mc.x = anaPencere.width - 20;
close_mc.y = 0;
anaPencere.x =(Capabilities.screenResolutionX-anaPencere.width)/2;
anaPencere.y=(Capabilities.screenResolutionY-anaPencere.height)/2;
}
anaPencere.dispatchEvent(new Event(Event.RESIZE));
Uygulamayı test ettiğinizde görüntünün aşağıdaki gibi olması gerekiyor.
Şimdi de pencereyi sürükleme işlemini gerçekleştireceğiz. Web uygulamalarında nesneleri sürüklemek için startDrag(), sürükleme işlemini sonlandırmak içinse stopDrag() metodu kullanılır. AIR uygulamalarında ise pencereyi sürükleyebilmek için NativeWindow sınıfının startMove() metodunu kullanmanız yeterlidir. Bırakma işlemi için ekstra koda ihtiyaç yoktur. Sürükleme işlemi için dragBar_mc isimli sembole MOUSE_DOWN olayını dinleyen biro lay dinleyici ekleyerek ve fonksiyonu oluşturuyoruz.
function pencereyiSurukle(e:MouseEvent)
{
anaPencere.startMove();
}
Uygulamayı minimize edebilmek için NativeWindow sınıfının minimize() metodunu kullanacağız. Pencere üzerindeki minimize_mc isimli sembole oaly dinleyici ekleyerek fonksiyonu oluşturuyoruz.
function minimizeEt(e:MouseEvent)
{
anaPencere.minimize();
}
Sıra geldi pencereyi maksimize etmeye. Pencereyi maksimize edebilmek için NativeWindow sınıfının maximize() metodunu kullanacağız. maksimize_mc isimli sembole ilk tıklandığında uygulama penceresi maksimize edilecek, ikinci kez tıklandığında ise pencere eski boyutuna geri dönecektir. Hangi işlemin yapılacağını belirlemek için tanımlamış olduğumuz maksimize isimli değişkeni kullanacağız. Boolean veri türündeki değişkenler default olarak false değerini alırlar. Eğer değişkenin değeri false ise pencereyi maksimize edecek ve değişkenin değeri true olarak değiştireceğiz. Eğer değişkenin değeri true ise pencereyi eski boyutuna geri döndürecek ve değişkenin değerini false olarak değiştireceğiz. Bu kontrolleri yapabilmek içinde if..else if koşullu ifadesini kullanacağız.
function maksimizeEt(e:MouseEvent)
{
if (! maksimize)
{
anaPencere.maximize();
maksimize = true;
}
else if (maksimize)
{
anaPencere.width = 625;
anaPencere.height = 400;
maksimize=false;
}
}
Geriye uygulamanın kapatılma işlemi kalıyor. Bu işlemi gerçekleştirebilmek için NativeApplication sınıfının exit() metodu kullanacağız.
function uygulamayiKapat(e:MouseEvent)
{
anaUygulama.exit();
}
Bu uygulama için gerekli kodların tamamı şu şekildedir.
import flash.display.NativeWindow;
import flash.system.Capabilities;
import flash.events.Event;
import flash.events.MouseEvent;
var anaUygulama:NativeApplication = NativeApplication.nativeApplication;
var anaPencere:NativeWindow = stage.nativeWindow;
anaPencere.title = "First Application";
var dragBar_mc:DragBar = new DragBar();
var minimize_mc:MinimizeButton=new MinimizeButton();
var maksimize_mc:MaksimizeButton=new MaksimizeButton();
var close_mc:CloseButton=new CloseButton();
anaPencere.stage.addChild(dragBar_mc);
anaPencere.stage.addChild(minimize_mc);
anaPencere.stage.addChild(maksimize_mc);
anaPencere.stage.addChild(close_mc);
minimize_mc.buttonMode = true;
maksimize_mc.buttonMode = true;
close_mc.buttonMode = true;
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
var maksimize:Boolean;
anaPencere.addEventListener(Event.RESIZE, resized);
function resized(e:Event)
{
dragBar_mc.x = dragBar_mc.y = 0;
dragBar_mc.width = anaPencere.width;
minimize_mc.x = anaPencere.width - 70;
minimize_mc.y = 0;
maksimize_mc.x = anaPencere.width - 45;
maksimize_mc.y = 0;
close_mc.x = anaPencere.width - 20;
close_mc.y = 0;
anaPencere.x =(Capabilities.screenResolutionX-anaPencere.width)/2;
anaPencere.y=(Capabilities.screenResolutionY-anaPencere.height)/2;
}
anaPencere.dispatchEvent(new Event(Event.RESIZE));
dragBar_mc.addEventListener(MouseEvent.MOUSE_DOWN, pencereyiSurukle);
function pencereyiSurukle(e:MouseEvent)
{
anaPencere.startMove();
}
minimize_mc.addEventListener(MouseEvent.CLICK, minimizeEt);
function minimizeEt(e:MouseEvent)
{
anaPencere.minimize();
}
maksimize_mc.addEventListener(MouseEvent.CLICK, maksimizeEt);
function maksimizeEt(e:MouseEvent)
{
if (! maksimize)
{
anaPencere.maximize();
maksimize = true;
}
else if (maksimize)
{
anaPencere.width = 625;
anaPencere.height = 400;
maksimize = false;
}
}
close_mc.addEventListener(MouseEvent.CLICK, uygulamayiKapat);
function uygulamayiKapat(e:MouseEvent)
{
anaUygulama.exit();
}
AIR uygulamarı oluştururken yeni pencereler açmak ve bu pencereler ile çalışmayı bir sonraki yazımda anlatacağım.
Örnek çalışma dosyasını indirebilmek için siteye üye olmanız gerekmektedir. Siteye üye olmak için tıklayın.
teşekkürler
#1 by demiralkanlar on 23 Ocak 2011 - 23:34
Selamlar,
Ders için teşekkürler henüz incelemedim bugünlerde inceleyeceğim.Bir sorum olacaktı; üzerinde çalıştığım bir konu var, dil eğitim seti hazırlıyorum (flash as3) yani içerisinde quizler, videolar, photogalerileri bulunacak bunları MDM Zinc ile yapılabileceğini duydum. Fakat air ile de böyle bir çalışma yapılabileceğini duydum.
Böyle bir çalışmayı nasıl yapabilirim? (paketleme kısmı yani diğerlerini as3 de yapıyorum) Bildiğiniz bir yerde bu konuda tutorial var mı veya sizin böyle bir ders yapmayı düşünebilirmisiniz?
Şimdiden teşekkürler
demiralkanlar@gmail.com
#2 by Erol Demirer on 24 Ocak 2011 - 07:44
http://actionscript.gen.tr/index.php/adobe-air-ile-ilk-uygulama/ ve http://actionscript.gen.tr/index.php/xml-dosyasini-kullanarak-air-uygulamalarini-yapilandirmak/ adreslerindeki yazıları okumanı tavsiye ederim.