Flex - Hareketli Metin Komponent Örneği

Hareketli Metin Komponenti:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400"
    horizontalScrollPolicy="off" verticalScrollPolicy="off"
    creationComplete="init()">
    
    <mx:Script>
        <![CDATA[
            private var myTimer:Timer = new Timer(10);
            
            [Bindable]
            public var text:String;
            
            public function start():void
            {
                myTimer.start();
            }
            
            public function stop():void
            {
                myTimer.stop();
            }
            private function init():void
            {    
                myTimer.addEventListener(TimerEvent.TIMER, moveLabel);
            }
            
            private function moveLabel(event:TimerEvent):void
            {
                if (scrollingLabel.x < (0-scrollingLabel.width))
                {
                    scrollingLabel.x = this.width;
                }
                else
                { 
                    scrollingLabel.x --;
                }
            }
        ]]>
    </mx:Script>

    <mx:Label id="scrollingLabel" x="{this.width}" text="{text}"/>
</mx:Canvas>

Komponenti çağırıp fonksiyonlarını tetikleme:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:components="components.*">
    <components:ScrollingText id="myScrollingText" text="Basit bir mesaj"
         fontSize="18"/>
<mx:Button label="Başla" click="myScrollingText.start()"/>
<mx:Button label="Dur" click="myScrollingText.stop()"/>
</mx:Application>

Devamını Oku...

Flex - Komponent Özellikleri

Kendi oluşturduğumuz komponent özelliği ile oynayarak ana uygulamada değişiklikleri görmek:

Komponent Kodu:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" borderStyle="solid" paddingBottom="5"
     paddingLeft="5" paddingRight="5" paddingTop="5"
       verticalAlign="middle" backgroundColor="#000000" borderColor="#ffffff" borderThickness="2">
    <mx:Script>
        <![CDATA[
        [Bindable]
            public var degisken:String;
        ]]>
    </mx:Script>
    <mx:Label text="{degisken}" fontSize="12" fontWeight="bold" color="#0000FF"/>
</mx:VBox>

Ana Uygulamada komponentin kullanılması:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="components.*">
    <ns1:cizgili x="435" y="120" degisken="Volkan">
    </ns1:cizgili>
    <ns1:cizgili x="454" y="296" degisken="Çelebi">
    </ns1:cizgili>
    
</mx:Application>

Devamını Oku...

Flex 3 - Kendi Komponentini Kullanmak

Flex in en önemli özelliği çok fazla hazır komponenti bulunması ve kolay kullanılmasıdır. Kendi oluşturacağımız özel komponentleri de kullanmamıza izin veriyor.

Yeni bir komponent oluşturmak için, Projenizde istediğiniz bir bölümde (genelde src altında) bir klasör açın. Ben adına components dedim. Bu klasör üzerine Sağ Tuş -- New -- MXML Component diyoruz, Componente bir isim veriyoruz, alt bölümde hangi hazır komponenti örnek alacağını seçiyoruz ve bildiğiniz MXML belgesi oluşturuyor aslında.

Bu MXML belgesine istediğiniz özellikte bileşenler ekleyerek (örneğin bir hesap makinesi) kullanmak için kaydedebilirsiniz. Ben şimdilik basit bir VBox kullandım.

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
   backgroundColor="#FF0000">
  <mx:Label text="bu benim komponentim"/>
  <mx:TextInput id="giris"/>
  <mx:Button label="Tıkla"/>
</mx:VBox>

Şimdi bunu nasıl kullanacağımıza gelelim. Normal bir MXML Application oluşturuyoruz. İçerisinde components: diye başladığınızda komponentinizin adını görmeniz gerekiyor. Ben ismini yeni verdiğim için components:yeni diye çıktı.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:components="components.*">
  <components:yeni x="10" y="10"/>
  <components:yeni x="205" y="10">
  </components:yeni>
</mx:Application>

Design modunda View -- Components diyerek sol tarafta Components Panelini ve içinde Custom bölümünü açtığınızda da kendi komponentinizi görebilir ve sahneye sürükleyebilirsiniz. Bir çalışmada bir komponenti istediğimiz kadar kullanabiliriz. Yukarıda ben 2 adet kullandım.

Devamını Oku...

Flex 3 - Dolar / TL Çevirici Uygulaması

Flex 3 deki ilk uygulamam: Dolar TL Çeviricisi



Bu kısımda dikkat edilecek uygulamalar:
mx:Number Tagı ile hesaplama işlemleri.
CurrencyFormatter ile para birimi işlemleri.
NumericStepper ile basamaklı artış işlemleri.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="300" height="300" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#913EE6, #DAD0E0]">
   <mx:Number id="hesap">{Number(girilen.text) * Number(adim.value)}</mx:Number>
   <mx:CurrencyFormatter id="cf" precision="2" currencySymbol="TL"
         alignSymbol="right" decimalSeparatorTo="," thousandsSeparatorTo="."/>
   <mx:Panel width="254" height="228" x="23" y="40" title="Dolar / TL Çevirici" borderColor="#240606" color="#000506" layout="absolute">
       <mx:Label text="Dolar:" x="10" y="21"/>
       <mx:TextInput x="57" y="19" width="116" restrict="0-9" id="girilen" text="100"/>
       <mx:Label x="26" y="62" text="TL:"/>
       <mx:Label x="57" y="62" text="{cf.format(hesap)}" width="95"/>
       <mx:ControlBar height="52" y="146">
           <mx:Label text="1 $ =" fontSize="15" fontWeight="bold"/>
           <mx:NumericStepper fontSize="14" value="1.51" stepSize=".01" minimum="0" id="adim"/>
           <mx:Label text="TL" fontSize="15" fontWeight="bold"/>
       </mx:ControlBar>       
   </mx:Panel>
</mx:Application>

Devamını Oku...

Flex 3 - Bind / Bindable Olayı

Bu bölümde 3 farklı Bind yöntemine bakacağız:

1. Yöntemde bir text kutusuna verdiğimiz ID ile direkt label içine yazdıralım.

<mx:TextInput id="giris"/>
    <mx:Label text="{giris.text}" width="148"/>

2. Yöntemde aynı işlemi TAG kullanarak yapalım (Bunun ayrı avantajları var uzun diye küçümsemeyin:)

    <mx:TextInput id="giris2"/>
    <mx:Label id="etiket2"/>
    <mx:Binding source="giris2.text" destination="etiket2.text"/>

3. Yöntemde ise AS3 de tanımladığımız bir değişken aracılığıyla Bind yapalım:

<mx:Script>
        <![CDATA[
            [Bindable]
            private var isim:String;
        ]]>
    </mx:Script>
    <mx:TextInput id="giris3"/>
    <mx:Label text="{isim}"/>
    <mx:Binding source="giris3.text" destination="isim"/>

* Normalde AS3 tarafında yazdıklarımız Bind edilemez. Baş tarafına Bindable yazarak altında kalan öğeleri Bind yapılabilir konuma getiriyoruz.

Devamını Oku...

Flex 3 - TextInput, TextArea, RichTextEditor

TextInput Özellikleri:
id: Başka bir alana Bind edilebilmesi için verilen isim.
width: Genişliği
maxChars: İçine girilecek maximum karakter sayısı
restrict: İçine girilecek karakter filtresi A-Z (sadece büyük harfler), 0-9 Sadece sayılar gibi
displayAsPassword: Şifreli görünmesi için

TextArea: Daha çok satırlı yazılar girmek için
RichTextEditor: hazır yazı sitilli text giriş ekranı

Bu kod bölümünde TextArea ya RichTextEditor den girilen yazıların HTML kodlu hali aktarılıyor. Bind örneğinden biri.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    backgroundColor="#eeeeee">
    <mx:Label text="TC Kimlik No:" x="58" y="34"/>
    <mx:TextInput x="166" y="32" id="deger" width="200"
         maxChars="11" restrict="0-9" displayAsPassword="true"/>
    <mx:TextArea x="166" y="62" width="231" height="107" id="giris" text="{zengin.htmlText}"/>
    <mx:RichTextEditor x="459" y="47" title="Title" id="zengin">
    </mx:RichTextEditor>
</mx:Application>

Devamını Oku...

AS3 - İki sayı arasında rasgele sayı ürettirmek

Math.random() * 10;
tarzında bir komut 0 ile 10 arasında sayı üretecektir.

Bazen ihtiyacımız başlangıç değerini de kendiniz verdiğiniz bir fonksiyon olabilir. Yani sayı 5 ile 15 arasında rasgele üretsin demek isteyebilirsiniz. Bunun çözümü:

var sayi1:Number=5;
var sayi2:Number =15;

var rasgeleSayi:Number = Math.random() * (sayi2 - sayi1 + 1) + sayi1;

Tabi rasgele değeri ondalıklı olacağından Math.floor(rasgeleSayi); diyerek ondalık kısmından kurtulabilirsiniz.

Devamını Oku...