Örnek: Temel bir uygulama oluşturma

Flex'te HelloWorld projesini ve Greeter sınıfını oluşturmak için:

1. Flash Builder'da, Dosya > Yeni> Flex Projesi seçeneklerini belirleyin,

2. Proje Adı olarak Hello World yazın. Uygulama türünün "Web (Adobe Flash Player'da çalışır)"' olarak ayarlandığından emin olun ve Bitir'i tıklatın.

   Flash Builder projenizi oluşturur ve Package Explorer'da görüntüler. Proje varsayılan olarak, HelloWorld.mxml adında bir dosyayı zaten içerir ve bu dosya Düzenleyici panelinde açılır.

3. Şimdi Flash Builder aracında özel bir ActionScript sınıf dosyası oluşturmak için, Dosya > Yeni > ActionScript Sınıfı seçeneğini belirleyin.

4. Yeni ActionScript Sınıfı iletişim kutusunda, Ad alanına sınıf adı olarak Greeter yazın ve ardından Bitir'i tıklatın.

   Yeni bir ActionScript düzenleme penceresi görüntülenir.

   Greeter sınıfına kod ekleme bölümünden devam edin.

Flash Professional'da Greeter sınıfını oluşturmak için:

1. Flash Professional'da, Dosya >Yeni seçeneklerini belirleyin.

2. Yeni Belge iletişim kutusunda ActionScript dosyasını seçip Tamam'ı tıklatın.

   Yeni bir ActionScript düzenleme penceresi görüntülenir.

3. Dosya > Kaydet seçeneklerini belirleyin. Uygulamanızı içerecek bir klasörü seçin, ActionScript dosyasına Greeter.as adını verin ve Tamam'ı tıklatın.

   Greeter sınıfına kod ekleme bölümünden devam edin.

Greeter sınıfına kod eklemek için:

1. Yeni dosyaya aşağıdaki kodu yazın (kodun bir kısmı sizin için eklenmiş olabilir)

   package 
   { 
       public class Greeter 
       { 
           public function sayHello():String 
           { 
               var greeting:String; 
               greeting = "Hello World!"; 
               return greeting; 
           } 
       } 
   }

   Greeter sınıfı, “Hello World!” dizesini döndüren tek bir sayHello() yöntemini içerir.

2. Bu ActionScript dosyasını kaydetmek için Dosya > Kaydet seçeneklerini belirleyin.

Greeter sınıfı şimdi bir uygulamada kullanılmaya hazırdır.

Flash Professional'ı kullanarak bir ActionScript uygulaması oluşturmak için:

1. Dosya > Yeni seçeneklerini belirleyin.

2. Yeni Belge iletişim kutusunda Flash Dosyası (ActionScript 3.0) öğesini seçip Tamam'ı tıklatın.

   Yeni bir belge penceresi görüntülenir.

3. Dosya > Kaydet seçeneklerini belirleyin. Greeter.as sınıf dosyasını içeren aynı klasörü seçin, Flash belgesine HelloWorld.fla adını verin ve Tamam'ı tıklatın.

4. Flash Professional araç paletinde, Metin aracını seçin. Yaklaşık 300 piksel genişliğinde ve 100 piksel yüksekliğinde yeni bir metin alanı tanımlamak için Sahne Alanı boyunca sürükleyin.

5. Özellikler panelinde, metin alanı Sahne Alanı'nda hala seçiliyken, metin türünü “Dinamik Metin” olarak ayarlayın ve metin alanının örnek adı olarak mainText yazın.

6. Ana zaman çizelgesinin birinci karesini tıklatın. Pencere > Eylemler'i seçerek Eylemler panelini açın.

7. Eylemler paneline şu komut dosyasını yazın:

   var myGreeter:Greeter = new Greeter(); 
   mainText.text = myGreeter.sayHello();

8. Dosyayı kaydedin.

ActionScript uygulamanızı yayınlama ve test etme bölümünden devam edin.

Flash Builder'ı kullanarak bir ActionScript uygulaması oluşturmak için:

1. HelloWorld.mxml dosyasını açın ve aşağıdaki listelemeyle eşleşmesi için kod ekleyin:

   <?xml version="1.0" encoding="utf-8"?> 
   <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/halo" 
       minWidth="1024" 
       minHeight="768"" 
       creationComplete="initApp()"> 
        
       <fx:Script> 
           <![CDATA[ 
               private var myGreeter:Greeter = new Greeter(); 
                
               public function initApp():void 
               { 
                   // says hello at the start, and asks for the user's name 
                   mainTxt.text = myGreeter.sayHello(); 
               } 
           ]]> 
       </fx:Script> 
        
       <s:layout> 
           <s:VerticalLayout/> 
       </s:layout> 
        
       <s:TextArea id="mainTxt" width="400"/>         
        
   </s:Application>

   Bu Flex projesi dört MXML etiketi içerir:

   • Uygulama kabını tanımlayan bir <mx:Application> etiketi

   • Uygulama etiketi için mizanpaj stilini (dikey mizanpaj) tanımlayan <s:layout> etiketi

   • ActionScript kodu içeren bir <fx:Script> etiketi

   • Metin mesajlarını kullanıcıya görüntülemek için bir alanı tanımlayan <s:TextArea> etiketi

   <fx:Script> etiketindeki kod, uygulama yüklendiğinde çağrılan bir initApp() yöntemini tanımlar. initApp() yöntemi, mainTxt TextArea öğesinin metin değerini, henüz yazdığınız Greeter özel sınıfının sayHello() yöntemi tarafından döndürülen “Hello World!” dizesine ayarlar.

2. Uygulamayı kaydetmek için Dosya > Kaydet seçeneğini belirleyin.

ActionScript uygulamanızı yayınlama ve test etme bölümünden devam edin.

Flash Builder'ı kullanarak bir ActionScript uygulamasını yayınlamak ve test etmek için:

1. Uygulamanızı yayınlayın ve derleme hatası olup olmadığına bakın. Flash Professional'da, ActionScript kodunuzu derlemek ve HelloWorld uygulamasını çalıştırmak için, Kontrol Et > Filmi Test Et seçeneklerini belirleyin.

2. Uygulamayı test ettiğinizde Çıktı penceresinde hatalar veya uyarılar görüntülenirse, hataları HelloWorld.fla veya HelloWorld.as dosyalarında düzeltin. Bundan sonra uygulamayı test etmeyi tekrar deneyin.

3. Herhangi bir derleme hatası yoksa, Hello World uygulamasını gösteren bir Flash Player penceresi görüntülenir.

ActionScript 3.0'ı kullanan basit ancak tam bir nesne tabanlı uygulama oluşturdunuz. HelloWorld uygulamasını geliştirme bölümünden devam edin.

Flash Builder'ı kullanarak bir ActionScript uygulamasını yayınlamak ve test etmek için:

1. Çalıştır > HelloWorld'ü Çalıştır öğesini seçin.

2. HelloWorld uygulaması başlatılır.

   • Uygulamayı test ettiğinizde Çıktı penceresinde hatalar veya uyarılar görüntülenirse, HelloWorld.mxml veya Greeter.as dosyalarındaki hataları düzeltin. Bundan sonra uygulamayı test etmeyi tekrar deneyin.

   • Herhangi bir derleme hatası yoksa, Hello World uygulamasını gösteren bir tarayıcı penceresi açılır. “Hello World!” metninin olduğu bir ekran görüntülenir.

   ActionScript 3.0'ı kullanan basit ancak tam bir nesne tabanlı uygulama oluşturdunuz. HelloWorld uygulamasını geliştirme bölümünden devam edin.

Greeter.as dosyasını güncellemek için:

1. Greeter.as dosyasını açın.

2. Dosyanın içeriklerini şunlarla değiştirin (yeni ve değiştirilen satırlar kalın yazı tipiyle gösterilmektedir):

   package 
   { 
       public class Greeter 
       { 
           /** 
            * Defines the names that receive a proper greeting. 
            */ 
           public static var validNames:Array = ["Sammy", "Frank", "Dean"]; 
    
           /** 
            * Builds a greeting string using the given name. 
            */ 
           public function sayHello(userName:String = ""):String 
           { 
               var greeting:String; 
               if (userName == "")  
               { 
                   greeting = "Hello. Please type your user name, and then press " 
                               + "the Enter key."; 
               }  
               else if (validName(userName))  
               { 
                   greeting = "Hello, " + userName + "."; 
               }  
               else  
               { 
                   greeting = "Sorry " + userName + ", you are not on the list."; 
               } 
               return greeting; 
           } 
            
           /** 
            * Checks whether a name is in the validNames list. 
            */ 
           public static function validName(inputName:String = ""):Boolean  
           { 
               if (validNames.indexOf(inputName) > -1)  
               { 
                   return true; 
               }  
               else  
               { 
                   return false; 
               } 
           } 
       } 
   }

Greeter sınıfı şimdi birkaç yeni özelliğe sahiptir:

• validNames dizisi geçerli kullanıcı adlarını listeler. Greeter sınıfı yüklendiğinde bu dizi üç addan oluşan bir liste şeklinde başlatılır.

• sayHello() yöntemi şimdi bir kullanıcı adını kabul eder ve bazı koşulları esas alarak selamlamayı değiştirir. userName boş bir dize ( "" ) olursa, greeting özelliği, kullanıcıdan bir ad isteyecek şekilde ayarlanır. Kullanıcı adı geçerliyse, selamlama şöyle olur: "Hello, userName ." Son olarak, bu iki koşuldan herhangi biri karşılanmazsa, greeting değişkeni "Sorry userName , you are not on the list." olarak ayarlanır.

• inputName öğesi validNames dizisinde bulunuyorsa, validName() yöntemi true değerini döndürür, bulunmuyorsa, false değerini döndürür. validNames.indexOf(inputName) deyimi, validNames dizisindeki dizelerin her birini inputName dizesinde kontrol eder. Array.indexOf() yöntemi bir dizideki nesnenin ilk örneğinin dizin konumunu döndürür. Nesne dizede bulunamazsa -1 değerini döndürür.

Daha sonra bu ActionScript sınıfına başvuran uygulama dosyasını düzenlersiniz.

Uygulamayı Flash Professional kullanarak değiştirmek için:

1. HelloWorld.fla dosyasını açın.

2. Greeter sınıfının sayHello() yöntemine boş bir dize ( "" ) iletilecek şekilde Kare 1'de komut dosyasını değiştirin:

   var myGreeter:Greeter = new Greeter(); 
   mainText.text = myGreeter.sayHello("");

3. Araçlar paletinden Metin aracını seçin. Sahne Alanı'nda iki yeni metin alanı oluşturun. Bunları doğrudan varolan mainText metin alanının altında yan yana yerleştirin.

4. Etiket olan ilk yeni metin alanında User Name: metnini yazın.

5. Diğer yeni metin alanını seçin ve Özellik denetçisinde metin alanı türü olarak Input Text seçeneğini belirleyin. Satır türü olarak Tek satır seçin. Örnek adı olarak textIn yazın.

6. Ana zaman çizelgesinin birinci karesini tıklatın.

7. Eylemler panelinde, varolan komut dosyasının sonuna şu satırları ekleyin:

   mainText.border = true; 
   textIn.border = true; 
    
   textIn.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed); 
    
   function keyPressed(event:KeyboardEvent):void 
   { 
       if (event.keyCode == Keyboard.ENTER) 
       { 
           mainText.text = myGreeter.sayHello(textIn.text); 
       } 
   }

   Yeni kod şu işlevselliği ekler:

   • İlk iki satır, iki metin alanının kenarlıklarını tanımlar.

   • textIn alanı gibi bir girdi metni alanı, gönderebileceği olayların bir kümesini içerir. addEventListener() yöntemi, bir olay türü gerçekleştiğinde çalıştırılan bir işlevi tanımlamanıza olanak sağlar. Bu durumda, söz konusu olay klavyedeki bir tuşa basılmasıdır.

   • keyPressed() özel işlevi, basılan tuşun Enter tuşu olup olmadığını kontrol eder. Basılan tuş Enter ise, myGreeter nesnesinin sayHello() yöntemini çağırarak textIn metin alanındaki metni parametre olarak iletir. Bu yöntem iletilen değere dayanarak bir karşılama dizesi döndürür. Dönen dize mainText metin alanının text özelliğine atanır.

   Kare 1'in tam komut dosyası şudur:

   var myGreeter:Greeter = new Greeter(); 
   mainText.text = myGreeter.sayHello(""); 
    
   mainText.border = true; 
   textIn.border = true; 
    
   textIn.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed); 
    
   function keyPressed(event:KeyboardEvent):void 
   { 
       if (event.keyCode == Keyboard.ENTER) 
       { 
           mainText.text = myGreeter.sayHello(textIn.text); 
       } 
   }

8. Dosyayı kaydedin.

9. Uygulamayı çalıştırmak için Kontrol Et > Filmi Test Et seçeneklerini belirleyin.

   Uygulamayı çalıştırdığınızda, bir kullanıcı adı girmenizi ister. Kullanıcı adı geçerliyse (Sami, Ferdi veya Deniz), uygulama "hello" onaylama mesajını görüntüler.

Uygulamayı Flash Builder kullanarak değiştirmek için:

1. HelloWorld.mxml dosyasını açın.

2. Daha sonra, kullanıcıya yalnızca görüntülenmeye ilişkin olduğunu bildirmek için :<mx:TextArea> etiketini değiştirin. Arka plan rengini açık griye dönüştürün ve editable niteliğini false olarak ayarlayın:

       <s:TextArea id="mainTxt" width="400" backgroundColor="#DDDDDD" editable="false" />

3. Şimdi, <s:TextArea> kapatma etiketinden hemen sonra şu satırları ekleyin. Bu satırlar, kullanıcının bir kullanıcı adı değeri girmesine olanak tanıyan yeni bir TextInput bileşeni oluşturur:

       <s:HGroup width="400"> 
           <mx:Label text="User Name:"/>     
           <s:TextInput id="userNameTxt" width="100%" enter="mainTxt.text = myGreeter.sayHello(userNameTxt.text);" /> 
       </s:HGroup>

   enter niteliği, kullanıcı userNameTxt alanında Enter tuşuna bastığında gerçekleşen eylemleri tanımlar. Bu örnekte, kod alandaki metni Greeter.sayHello() yöntemine iletir. mainTxt alanındaki karşılama buna göre değişir.

   HelloWorld.mxml dosyası aşağıdaki gibi görünür:

   <?xml version="1.0" encoding="utf-8"?> 
   <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/halo" 
       minWidth="1024" 
       minHeight="768"" 
       creationComplete="initApp()"> 
        
       <fx:Script> 
           <![CDATA[ 
               private var myGreeter:Greeter = new Greeter(); 
                
               public function initApp():void 
               { 
                   // says hello at the start, and asks for the user's name 
                   mainTxt.text = myGreeter.sayHello(); 
               } 
           ]]> 
       </fx:Script> 
        
       <s:layout> 
           <s:VerticalLayout/> 
       </s:layout> 
        
       <s:TextArea id="mainTxt" width="400" backgroundColor="#DDDDDD" editable="false"/>     
    
       <s:HGroup width="400">     
           <mx:Label text="User Name:"/>     
           <s:TextInput id="userNameTxt" width="100%" enter="mainTxt.text = myGreeter.sayHello(userNameTxt.text);" /> 
       </s:HGroup> 
        
   </s:Application>

4. Düzenlenen HelloWorld.mxml dosyasını kaydedin. Uygulamayı çalıştırmak için Çalıştır > HelloWorld'ü Çalıştır öğesini seçin.

   Uygulamayı çalıştırdığınızda, uygulama bir kullanıcı adı girmenizi ister. Kullanıcı adı geçerliyse (Sami, Ferdi veya Deniz), uygulama " Hello , userName " onaylama mesajını görüntüler.