Pencereler oluşturma

Adobe AIR 1.0 ve üstü

AIR, bir uygulama için ilk pencereyi otomatik olarak oluşturur, ancak ihtiyacınız olan ek pencereleri oluşturabilirsiniz. Yerel bir pencere oluşturmak için NativeWindow yapıcı yöntemini kullanın.

HTML penceresi oluşturmak için HTMLLoader createRootWindow() yöntemini kullanın veya bir HTML belgesinden JavaScript window.open() yöntemini çağırın. Oluşturulan pencere, görüntüleme listesi bir HTMLLoader nesnesi içeren bir NativeWindow nesnesidir. HTMLLoader nesnesi pencere için HTML ve JavaScript içeriği yorumlar ve görüntüler. window.nativeWindow özelliğini kullanarak JavaScript öğesinin altındaki NativeWindow nesnesinin özelliklerine erişebilirsiniz. (Bu özellik yalnızca AIR uygulama sanal alanında çalışan kod için erişilebilirdir.)

Bir pencereyi başlattığınızda—ilk uygulama penceresi dahil—pencereyi görünmez durumda oluşturmayı, içeriği yüklemeyi veya her türlü grafik güncellemesini yapmayı ve ardından pencereyi görünür yapmayı düşünmelisiniz. Bu sıralama, herhangi bir uyumsuz görsel değişikliğin kullanıcılarınıza görünmesini önler. Uygulamanızın ilk penceresinin görünmez durumda oluşturulacağını, uygulama açıklayıcısında <visible>false</visible> etiketini belirterek (veya varsayılan değer false olduğundan etiketi bütünüyle dışarıda bırakarak) ifade edebilirsiniz. Yeni NativeWindows varsayılan olarak görünmezdir. HTMLLoader createRootWindow() yöntemiyle bir HTML penceresi oluştururken, visible bağımsız değişkenini false olarak ayarlayabilirsiniz. Bir pencereyi görünür kılmak için NativeWindow activate() yöntemini çağırın veya visible özelliğini true olarak ayarlayın.

Pencere başlatma özelliklerini belirleme

Bir yerel pencerenin başlatma özellikleri, masaüstü penceresi oluşturulduktan sonra değiştirilemez. Bu sabit özellikler ve varsayılan değerleri şunlardır:

Özellik

Varsayılan değer

systemChrome

standard

type

normal

transparent

false

owner

null

maximizable

true

minimizable

true

resizable

true

Uygulama tanımlayıcı dosyasında AIR tarafından oluşturulan ilk pencereye ilişkin özellikleri ayarlayın. AIR uygulamasının ana penceresine ilişkin type özelliği her zaman normal olarak ayarlanır. (Tanımlayıcı dosyada visible, width ve height gibi ek pencere özellikleri belirtilebilir, ancak bu özellikler her zaman değiştirilebilir.)

Uygulamanız tarafından NativeWindowInitOptions sınıfı kullanılarak oluşturulan diğer yerel pencereler ve HTML pencereleri için özellikleri ayarlayın. Bir pencere oluşturduğunuzda, pencere özelliklerini belirten bir NativeWindowInitOptions nesnesini NativeWindow yapıcı işlevine veya HTMLLoader createRootWindow() yöntemine iletmelisiniz.

Aşağıdaki kod, bir hizmet penceresi için NativeWindowInitOptions nesnesi oluşturur:

var options:NativeWindowInitOptions = new NativeWindowInitOptions(); 
options.systemChrome = NativeWindowSystemChrome.STANDARD; 
options.type = NativeWindowType.UTILITY 
options.transparent = false; 
options.resizable = false; 
options.maximizable = false; 

Transparent özelliği true olarak veya type özelliği lightweight olarak ayarlandığında systemChrome özelliğinin standart olarak ayarlanması desteklenmez.

Not: JavaScript window.open() işleviyle oluşturulan bir pencere için başlatma özelliklerini ayarlayamazsınız. Ancak, kendi HTMLHost sınıfınızı uygulayarak bu pencerelerin oluşturulma biçimini geçersiz kılabilirsiniz. Daha fazla bilgi için bkz. window.open() için JavaScript çağrılarını işleme.

Flex mx:Window sınıfıyla bir pencere oluşturduğunuzda, pencere nesnesinin kendisine ait başlatma özelliklerini pencereye ilişkin MXML bildiriminde veya pencereyi oluşturan kodda belirtin. Alttaki NativeWindow nesnesi siz open() yöntemini çağırmadan oluşturulmaz. Pencere açıldığında, bu başlatma özellikleri değiştirilemez.

İlk uygulama penceresini oluşturma

AIR, ilk uygulama penceresini uygulama tanımlayıcıda belirtilen özellikler temelinde oluşturur ve içerik öğesinde başvurulan dosyayı yükler. İçerik öğesi bir SWF veya HTML dosyasına referans vermelidir.

Başlangıç penceresi, uygulamanızın ana penceresi olabilir veya yalnızca bir veya daha çok farklı pencerenin başlatılması için görev yapabilir. Bu pencereyi görünür yapmanız gerekmez.

İlk pencereyi ActionScript ile oluşturma

ActionScript kullanarak bir AIR uygulaması oluşturduğunuzda, uygulamanızın ana sınıfı Sprite sınıfını (veya Sprite öğesinin bir alt sınıfını) genişletmelidir. Bu sınıf, uygulama için ana giriş noktası olarak görev yapar.

Uygulamanız başladığında, AIR bir pencere oluşturur, ana sınıfın bir örneğini oluşturur ve örneği pencere sahnesine ekler. Pencereye erişmek için addedToStage olayını dinleyebilir ve daha sonra NativeWindow nesnesine başvuru almak için Stage nesnesinin nativeWindow özelliğini kullanabilirsiniz.

Aşağıdaki örnek, ActionScript ile oluşturulan AIR uygulamasının ana sınıfına ilişkin temel çatıyı gösterir:

package { 
    import flash.display.NativeWindow; 
    import flash.display.Sprite; 
    import flash.events.Event; 
 
    public class MainClass extends Sprite 
    { 
        private var mainWindow:NativeWindow; 
        public function MainClass(){ 
            this.addEventListener(Event.ADDED_TO_STAGE, initialize); 
        } 
         
        private function initialize(event:Event):void{ 
            mainWindow = this.stage.nativeWindow; 
            //perform initialization... 
            mainWindow.activate(); //show the window 
        } 
    } 
}
Not: Teknik olarak, ana sınıfın yapıcı işlevindeki nativeWindow özelliğine ERİŞEBİLİRSİNİZ. Ancak, bu yalnızca ilk uygulama penceresine uygulanan özel bir durumdur.

Flash Professional'da bir uygulama oluştururken, ayrı bir ActionScript dosyasında kendi belge sınıfınızı oluşturmazsanız, ana belge sınıfı otomatik olarak oluşturulur. Sahne nativeWindow özelliğini kullanarak ilk pencerenin NativeWindow nesnesine erişebilirsiniz. Örneğin, aşağıdaki kod ana pencereyi büyütülmüş durumda etkinleştirir. (zaman çizgisinden):

import flash.display.NativeWindow; 
 
var mainWindow:NativeWindow = this.stage.nativeWindow; 
mainWindow.maximize(); 
mainWindow.activate();

İlk pencereyi Flex ile oluşturma

Flex çatısıyla bir AIR uygulaması oluştururken, ana MXML dosyanızın kök öğesi olarak mx:WindowedApplication öğesini kullanın. (mx:Application bileşenini kullanabilirsiniz, ancak bu, AIR'de bulunan tüm özellikleri desteklemez.) WindowedApplication bileşeni, uygulama için ilk giriş noktası olarak görev yapar.

Uygulamayı başlattığınızda, AIR yerel bir pencere oluşturur, Flex çerçevesini başlatır ve WindowedApplication nesnesini pencere sahnesine ekler. Başlatma sırası tamamlandığında, WindowedApplication bir applicationComplete olayı gönderir. WindowedApplication örneğinin nativeWindow özelliğiyle masaüstü pencere nesnesine erişin.

Aşağıdaki örnek, x ve y koordinatlarını ayarlayan basit bir WindowedApplication bileşeni oluşturur:

<?xml version="1.0" encoding="utf-8"?> 
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"  
    applicationComplete="placeWindow()"> 
    <mx:Script> 
        <![CDATA[ 
            private function placeWindow():void{ 
                this.nativeWindow.x = 300; 
                this.nativeWindow.y = 300; 
            } 
        ]]> 
    </mx:Script> 
    <mx:Label text="Hello World" horizontalCenter="0" verticalCenter="0"/> 
</mx:WindowedApplication>

Bir NativeWindow oluşturma

Bir NativeWindow oluşturmak için, NativeWindowInitOptions nesnesini NativeWindow yapıcısına iletin:

var options:NativeWindowInitOptions = new NativeWindowInitOptions(); 
options.systemChrome = NativeWindowSystemChrome.STANDARD; 
options.transparent = false; 
var newWindow:NativeWindow = new NativeWindow(options); 

Siz visible özelliğini true olarak ayarlayana veya activate() yöntemini çağırana kadar pencere görüntülenmez.

Pencere oluşturulduğunda, özelliklerini başlatabilir ve sahne özelliğiyle Flash görüntü listesi tekniklerini kullanarak pencereye içerik yükleyebilirsiniz.

Neredeyse her durumda, yeni bir yerel pencerenin scaleMode özelliğini noScale olarak ayarlamalısınız. (StageScaleMode.NO_SCALE sabitini kullanın.) Flash ölçek modları, uygulama geliştiricisinin uygulama görüntüsüne ait en boy oranını önceden bilmediği durumlar için tasarlanmıştır. Ölçek modları, geliştiricinin en uygun dengeyi seçmesine olanak verir: içeriği kesme, uzatma veya sıkıştırma, ya da boş alanla doldurma. AIR'de görüntü alanını (pencere karesi) denetleyebildiğiniz için, pencereyi içeriğe veya içeriği pencereye göre ödün vermeden boyutlandırabilirsiniz.

Flex ve HTML için otomatik olarak noScale ölçek modu ayarlanır.

Not: Geçerli işletim sisteminde izin verilen maksimum ve minimum pencere boyutlarını belirlemek için aşağıdaki statik NativeWindow özelliklerini kullanın:
var maxOSSize:Point = NativeWindow.systemMaxSize; 
var minOSSize:Point = NativeWindow.systemMinSize; 

Bir HTML penceresi oluşturma

Bir HTML penceresi oluşturmak için JavaScript Window.open() yöntemini veya AIR HTMLLoader sınıfının createRootWindow() yöntemini çağırabilirsiniz.

Herhangi bir güvenlik sanal alanındaki HTML özelliği JavaScript Window.open() yöntemini kullanabilir. İçerik uygulama sanal alanının dışında çalışıyorsa, open() yöntemi yalnızca fare tıklatması veya tuşa basma gibi bir kullanıcı etkileşimine yanıt olarak çağrılabilir. open() yöntemi çağrıldığında, belirtilen URL'deki içeriği görüntülemek için sistem kromu içeren bir pencere oluşturulur. Örneğin:

newWindow = window.open("xmpl.html", "logWindow", "height=600, width=400, top=10, left=10");
Not: JavaScript window.open() işleviyle oluşturulan pencereyi özelleştirmek için ActionScript'teki HTMLHost sınıfını genişletebilirsiniz. Bkz. HTMLHost sınıfının genişletilmesi hakkında.

Uygulama güvenlik sanal alanındaki içerik, daha güçlü HTMLLoader.createRootWindow() pencere oluşturma yöntemine erişime sahiptir. Bu yöntemle, yeni bir pencereye ilişkin tüm oluşturma seçeneklerini belirleyebilirsiniz. Örneğin, aşağıdaki JavaScript kodu 300x400 boyutunda, sistem kromu içermeyen hafif bir pencere oluşturur:

var options = new air.NativeWindowInitOptions(); 
options.systemChrome = "none"; 
options.type = "lightweight"; 
 
var windowBounds = new air.Rectangle(200,250,300,400); 
newHTMLLoader = air.HTMLLoader.createRootWindow(true, options, true, windowBounds); 
newHTMLLoader.load(new air.URLRequest("xmpl.html"));
Not: Yeni bir pencere tarafından yüklenen içerik uygulama güvenlik sanal alanının dışındaysa, pencere nesnesi AIR özelliklerine sahip değildir: runtime, nativeWindow veya htmlLoader.

Saydam bir pencere oluşturursanız, bu pencereye yüklenen HTML'deki gömülü SWF içeriği her zaman görüntülenmez. SWF dosyasına başvurmak için kullanılan gömme etiketinin veya nesnenin parametresinin wmode öğesini opaque veya transparent olarak ayarlamalısınız. wmode öğesinin varsayılan değeri window öğesidir, bu yüzden varsayılan olarak SWF içeriği saydam pencerelerde görüntülenmez. Hangi wmode ayarlanırsa ayarlansın, PDF içeriği saydam pencerelerde görüntülenemez. (AIR 1.5.2'den önce, SWF içeriği de saydam pencerelerde görüntülenemiyordu.)

createRootWindow() yöntemiyle oluşturulan pencereler, açılan pencereden bağımsız kalırlar. JavaScript Window nesnesinin parent ve opener özellikleri null değerindedir. Açılan pencere, createRootWindow() işlevinin döndürdüğü HTMLLoader başvurusunu kullanarak yeni pencerenin Window nesnesine erişebilir. Önceki örnek bağlamında, newHTMLLoader.window ifadesi oluşturulan pencerenin JavaScript Window nesnesine başvurur.

Not: createRootWindow() işlevi, JavaScript ve ActionScript'ten çağrılabilir.

mx:Window oluşturma

Bir mx:Window başlatmak için, kök etiketi olarak mx:Window kullanarak bir MXML dosyası oluşturabilir veya doğrudan Window sınıf yapıcısını çağırabilirsiniz.

Aşağıdaki örnek, Window yapıcısını çağırarak bir mx:Window oluşturur ve görüntüler:

var newWindow:Window = new Window(); 
newWindow.systemChrome = NativeWindowSystemChrome.NONE; 
newWindow.transparent = true; 
newWindow.title = "New Window"; 
newWindow.width = 200; 
newWindow.height = 200; 
newWindow.open(true);

Bir pencereye içerik ekleme

Bir AIR penceresine nasıl içerik eklediğiniz, pencerenin türüne bağlıdır. Örneğin, MXML ve HTML, pencerenin temel içeriğini tanıtıcı biçimde tanımlamanızı sağlar. Kaynakları uygulama SWF dosyalarına gömebilir veya ayrı uygulama dosyalarından yükleyebilirsiniz. Flex, Flash ve HTML içeriği anında oluşturulabilir ve bir pencereye dinamik olarak eklenebilir.

SWF içeriği veya JavaScript içeren HTML içeriği yüklerken, AIR güvenlik modelini dikkate almalısınız. Uygulama güvenlik sanal alanındaki, yani uygulamanızla yüklenen ve app ile yüklenebilen her içerik: URL şeması, tüm AIR API'lerine erişmek için tüm ayrıcalıklara sahiptir. Bu sanal alanın dışından yüklenen her içerik AIR API'lerine erişemez. Uygulama sanal alanının dışındaki JavaScript içeriği JavaScript Window nesnesinin runtime, nativeWindow veya htmlLoader özelliklerini kullanamaz.

Güvenli çapraz komut dosyası oluşturmayı sağlamak için, uygulama içeriği ve uygulama dışı içerik arasında sınırlı bir arabirim sağlamak üzere sanal alan köprüsünü kullanabilirsiniz. HTML içeriğinde, bu sayfadaki kodun harici içeriğe ilişkin çapraz komut dosyası oluşturmasına izin vermek için uygulamanızın sayfalarını uygulama dışı bir sanal alana eşleyebilirsiniz. Bkz. AIR güvenliği.

SWF dosyası veya resmi yükleme

flash.display.Loader sınıfını kullanarak yerel bir pencerenin görüntü listesine Flash SWF dosyaları veya görüntüler yükleyebilirsiniz:

package { 
    import flash.display.Sprite; 
    import flash.events.Event; 
    import flash.net.URLRequest; 
    import flash.display.Loader; 
 
    public class LoadedSWF extends Sprite 
    { 
        public function LoadedSWF(){ 
            var loader:Loader = new Loader(); 
            loader.load(new URLRequest("visual.swf"));                    
            loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loadFlash); 
        } 
 
        private function loadFlash(event:Event):void{ 
            addChild(event.target.loader);  
        } 
    } 
}
Not: ActionScript 1 veya 2 kullanılarak oluşturulan daha eski SWF dosyaları, aynı pencereye yüklendiklerinde sınıf tanımları, tek ve genel değişkenler gibi genel durumları paylaşırlar. Buna benzer bir SWF dosyası doğru çalışmak için dokunulmamış genel durumlara dayanıyorsa, aynı pencereye bir defadan fazla veya örtüşen sınıf tanımları veya değişkenleri kullanılarak başka bir SWF dosyasıyla aynı pencereye yüklenemez. Bu içerik ayrı pencerelere yüklenebilir.

Bir NativeWindow öğesine HTML içeriği yükleme

Bir NativeWindow'a HTML içeriği yüklemek için HTMLLoader nesnesini pencere sahnesine ekleyip HTML içeriğini HTMLLoader öğesine yükleyebilir veya HTMLLoader.createRootWindow() yöntemini kullanarak önceden bir HTMLLoader nesnesi içeren bir pencere oluşturabilirsiniz. Aşağıdaki örnek, HTML içeriğini yerel pencere sahnesinde 300x500 piksel boyutundaki görüntü alanında görüntüler:

//newWindow is a NativeWindow instance 
var htmlView:HTMLLoader = new HTMLLoader(); 
htmlView.width = 300; 
htmlView.height = 500; 
 
//set the stage so display objects are added to the top-left and not scaled 
newWindow.stage.align = "TL"; 
newWindow.stage.scaleMode = "noScale"; 
newWindow.stage.addChild( htmlView ); 
 
//urlString is the URL of the HTML page to load 
htmlView.load( new URLRequest(urlString) );

Bir Flex uygulamasına HTML sayfası yüklemek için Flex HTML bileşenini kullanabilirsiniz.

SWF dosyasına başvurmak içi kullanılan gömme etiketinin veya nesnenin wmode parametresi opaque veya transparent olarak ayarlanmadığı sürece, pencere saydamlık kullanıyorsa (yani pencerenin transparent özelliği true ise) HTML dosyasındaki SWF içeriği görüntülenmez. Varsayılan wmode değeri window olduğundan, varsayılan olarak SWF içeriği saydam dosyada görüntülenmez. Hangi wmode değeri kullanılırsa kullanılsın, PDF içeriği saydam pencerede görüntülenmez.

Ayrıca, HTMLLoader denetimi ölçeklenirse, döndürülürse veya HTMLLoader alphaözelliği 1.0.'dan farklı bir değere ayarlanırsa SWF içeriği de PDF içeriği de görüntülenmez.

SWF içeriğini HTML penceresine bir kaplama olarak ekleme

HTML pencereleri bir NativeWindow örneğinin içinde bulunduğundan, Flash görüntü nesnelerini görüntü listesindeki HTML katmanının üstüne ve altına ekleyebilirsiniz.

Bir görüntü nesnesini HTML katmanının üstüne eklemek için window.nativeWindow.stage özelliğinin addChild() yöntemini kullanın. addChild() yöntemi, katmanlı içeriği pencerede bulunan tüm içeriğin üzerine ekler.

HTML katmanının altına bir görüntü nesnesi eklemek için, index parametresine ilişkin sıfır değerini ileterek, window.nativeWindow.stage özelliğinin addChildAt() yöntemini kullanın. Bir nesnenin sıfır dizinine yerleştirilmesi, HTML görüntüsü de dahil varolan içeriği bir katman yukarı taşır ve yeni içeriği bunun altına ekler. HTML sayfasının altındaki katmanlı içeriğin görünür olması için HTMLlLoader nesnesinin paintsDefaultBackground özelliğini false olarak ayarlamalısınız. Ayrıca, bir arka plan rengi ayarlayan sayfanın her öğesi şeffaf olmayacaktır. Örneğin sayfanın gövde öğesi için bir arka plan rengi ayarladığınızda, sayfanın hiçbir yeri şeffaf olmaz.

Aşağıdaki örnek, Flash görüntü nesnelerinin bir HTML sayfasına kaplama ve altlık olarak nasıl ekleneceğini gösterir. Örnek, iki basit şekil nesnesi oluşturarak bunlardan birini HTML içeriğinin altına, diğerini üstüne ekler. Örnek, enterFrame olayını temel alan şekil konumunu da günceller.

<html> 
<head> 
<title>Bouncers</title> 
<script src="AIRAliases.js" type="text/javascript"></script> 
<script language="JavaScript" type="text/javascript"> 
air.Shape = window.runtime.flash.display.Shape; 
 
function Bouncer(radius, color){ 
    this.radius = radius; 
    this.color = color; 
 
    //velocity  
    this.vX = -1.3; 
    this.vY = -1; 
 
    //Create a Shape object and draw a circle with its graphics property 
    this.shape = new air.Shape();     
    this.shape.graphics.lineStyle(1,0); 
    this.shape.graphics.beginFill(this.color,.9); 
    this.shape.graphics.drawCircle(0,0,this.radius); 
    this.shape.graphics.endFill(); 
     
    //Set the starting position 
    this.shape.x = 100; 
    this.shape.y = 100; 
 
 
    //Moves the sprite by adding (vX,vY) to the current position 
    this.update = function(){ 
        this.shape.x += this.vX; 
        this.shape.y += this.vY; 
         
        //Keep the sprite within the window 
        if( this.shape.x - this.radius < 0){  
            this.vX = -this.vX; 
        } 
        if( this.shape.y - this.radius < 0){ 
            this.vY = -this.vY; 
        } 
        if( this.shape.x  + this.radius > window.nativeWindow.stage.stageWidth){ 
            this.vX = -this.vX; 
        } 
        if( this.shape.y  + this.radius > window.nativeWindow.stage.stageHeight){ 
            this.vY = -this.vY; 
        } 
         
    }; 
} 
 
function init(){ 
    //turn off the default HTML background 
    window.htmlLoader.paintsDefaultBackground = false; 
    var bottom = new Bouncer(60,0xff2233); 
    var top = new Bouncer(30,0x2441ff); 
 
    //listen for the enterFrame event 
    window.htmlLoader.addEventListener("enterFrame",function(evt){ 
        bottom.update(); 
        top.update(); 
    }); 
     
    //add the bouncing shapes to the window stage 
    window.nativeWindow.stage.addChildAt(bottom.shape,0); 
    window.nativeWindow.stage.addChild(top.shape); 
} 
</script> 
<body onload="init();"> 
<h1>de Finibus Bonorum et Malorum</h1> 
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium 
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis 
et quasi architecto beatae vitae dicta sunt explicabo.</p> 
<p style="background-color:#FFFF00; color:#660000;">This paragraph has a background color.</p> 
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis 
praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias 
excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui 
officia deserunt mollitia animi, id est laborum et dolorum fuga.</p> 
</body> 
</html>

Bu örnek, AIR'de ActionScript ve JavaScript arasındaki sınırları aşan bazı gelişmiş tekniklere temel bir giriş sağlar. ActionScript görüntüleme nesnelerini iyi bilmiyorsanız, ActionScript 3.0 Geliştirici Rehberi içindeki Görüntü programlama bölümüne bakın.

Örnek: Yerel bir pencere oluşturma

Aşağıdaki örnek, yerel bir pencerenin nasıl oluşturulacağını gösterir:

public function createNativeWindow():void { 
    //create the init options 
    var options:NativeWindowInitOptions = new NativeWindowInitOptions(); 
    options.transparent = false; 
    options.systemChrome = NativeWindowSystemChrome.STANDARD; 
    options.type = NativeWindowType.NORMAL; 
     
    //create the window 
    var newWindow:NativeWindow = new NativeWindow(options); 
    newWindow.title = "A title"; 
    newWindow.width = 600; 
    newWindow.height = 400; 
     
    newWindow.stage.align = StageAlign.TOP_LEFT; 
    newWindow.stage.scaleMode = StageScaleMode.NO_SCALE; 
 
    //activate and show the new window 
    newWindow.activate(); 
}