Pencereler oluşturma

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:

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.

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.

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.

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.

var maxOSSize:Point = NativeWindow.systemMaxSize; 
var minOSSize:Point = NativeWindow.systemMinSize; 

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");

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"));

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.

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 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.

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);  
        } 
    } 
}

//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) );

<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>

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(); 
}