Flex - ViewStack

SWF Dosyası

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
    backgroundColor="#EEEEEE">
    
    <mx:Style>
        VBox {
            borderColor: #000000;
            borderStyle: outset;
            borderThickness: 2;        
        }
    </mx:Style>
    <mx:TabBar dataProvider="{menu}"/>
    <mx:ViewStack id="menu">
    <mx:VBox id="kirmizi" width="200" label="Kırımızı" height="150" backgroundColor="#FF0000"/>
    <mx:VBox id="yesil" width="200"  label="Yeşil" height="150" backgroundColor="#00FF00"/>
    <mx:VBox  id="mavi" width="200"  label="Mavi" height="150" backgroundColor="#0000FF"/>    
    </mx:ViewStack>
    
    <mx:LinkBar dataProvider="{menu}"/>
    <mx:ButtonBar dataProvider="{menu}"/>
    <mx:ToggleButtonBar dataProvider="{menu}"/>
    
    <mx:HBox>    
    <mx:LinkBar dataProvider="{menu2}" direction="vertical"/>
    <mx:ViewStack id="menu2">
    <mx:VBox id="kirmizi2" width="200" label="Kırımızı" height="150" backgroundColor="#FF0000"/>
    <mx:VBox id="yesil2" width="200"  label="Yeşil" height="150" backgroundColor="#00FF00"/>
    <mx:VBox  id="mavi2" width="200"  label="Mavi" height="150" backgroundColor="#0000FF"/>    
    </mx:ViewStack>
    </mx:HBox>
    
    
</mx:Application>

Bu Makaleyi Tweet'le

Devamını Oku!

Flex - Dahili CSS Teknikleri

Dahili CSS oluşturma
Tag için CSS oluşturma
Özelleştirilmiş CSS
global CSS
oluşturulan CSS leri kullanma

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
    <mx:Style>
    Application{
            background-color:#EEEEEE;
    
    }
        Label {
            font-size:24;
            font-weight:bold;
            text-decoration:underline;
            color:#000000;
        }    
        .kirmizi{
            color:#FF0000;
        }    
        global{
            font-family:"Helvetica","Arial","_sans";
        }
    </mx:Style>
    <mx:Label text="Hello World"/>
    <mx:Label text="Hello World"/>
    <mx:Label text="Hello World" styleName="kirmizi"/>
    <mx:Label text="Hello World"/>
    <mx:Text text="Bu bir css yazısı"/>
</mx:Application>

Bu Makaleyi Tweet'le

Devamını Oku!

Flex - Tile ile resimleri otomatik hizalama

Tile tagı içerisine gömdüğümüz resimlerin otomatik hizalanmasını ve browserda hareket olsa dahi uyum sağlamasını sağlayan güzel bir örnek:

SWF Dosyası

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#76EEEF, #FFFFFF]" horizontalAlign="left">
    <mx:Label text="Gezi Fotolarım" fontSize="18" fontWeight="bold" fontStyle="italic"/>
    <mx:HBox width="100%" height="100%">
        <mx:VBox width="60%" height="100%">
            <mx:Label text="Fotoğraf Kataloğu" fontWeight="bold" fontSize="18"/>
            <mx:Tile width="100%">
                <mx:Image source="@Embed('assets/thumbs/bigben.jpg')"/>
                <mx:Image source="@Embed('assets/thumbs/alcatraz.jpg')"/>
                <mx:Image source="@Embed('assets/thumbs/bourbonstreet.jpg')"/>
                <mx:Image source="@Embed('assets/thumbs/buckinghampalace.jpg')"/>
                <mx:Image source="@Embed('assets/thumbs/cablecars.jpg')"/>
                <mx:Image source="@Embed('assets/thumbs/coittower.jpg')"/>
                <mx:Image source="@Embed('assets/thumbs/crawfish.jpg')"/>
                <mx:Image source="@Embed('assets/thumbs/elcapitan.jpg')"/>
                <mx:Image source="@Embed('assets/thumbs/fishermanswharf.jpg')"/>
                <mx:Image source="@Embed('assets/thumbs/londonbridge.jpg')"/>
                <mx:Image source="@Embed('assets/thumbs/londonunderground.jpg')"/>
                <mx:Image source="@Embed('assets/thumbs/palaceoffinearts.jpg')"/>
                <mx:Image source="@Embed('assets/thumbs/riverboat.jpg')"/>
                <mx:Image source="@Embed('assets/thumbs/saintpauls.jpg')"/>
                <mx:Image source="@Embed('assets/thumbs/towerbridge.jpg')"/>
                <mx:Image source="@Embed('assets/thumbs/toweroflondon.jpg')"/>
                <mx:Image source="@Embed('assets/thumbs/tuolomne.jpg')"/>
                <mx:Image source="@Embed('assets/thumbs/yosemitefalls.jpg')"/>
            </mx:Tile>
        </mx:VBox>
        <mx:Panel width="40%" height="100%" layout="absolute" title="Alışveriş Kartı">
        
        </mx:Panel>
    </mx:HBox>
    
</mx:Application>

Bu Makaleyi Tweet'le

Devamını Oku!

Flex- Boxes

VBox, HBox ve Canvas kullanımı:
3 adet inputText in değişik kutular içinde gösterim örneği
swf dosyası

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" backgroundColor="#EEEEEE" height="368" width="631">
        <mx:VBox borderStyle="solid" borderColor="#000000"  backgroundColor="#ffffff"
             paddingBottom="10" paddingTop="10" paddingRight="10" paddingLeft="10"
              verticalGap="25">
            <mx:TextInput text="VBox Örneği"/>
            <mx:TextInput/>
            <mx:TextInput/>
        </mx:VBox>
        
        <mx:HBox borderStyle="solid" borderColor="#000000"  backgroundColor="#ffffff"
             paddingBottom="10" paddingTop="10" paddingRight="10" paddingLeft="10"
               horizontalGap="25">
            <mx:TextInput text="HBox Örneği"/>
            <mx:TextInput/>
            <mx:TextInput/>
        </mx:HBox>
        
        <mx:Canvas borderStyle="solid" borderColor="#000000"  backgroundColor="#ffffff">
            <mx:TextInput text="Canvas Örneği"/>
            <mx:TextInput x="50" y="50"/>
            <mx:TextInput x="100" y="100"/>
        </mx:Canvas>
</mx:Application>

Bu Makaleyi Tweet'le

Devamını Oku!

Flex - State ler ile çalışma

Flash daki Scene (sahne) kavramına benzer State kavramı flex içinde çok işime yaradı.
Swf dosyası




Kod Bölümü:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="372" height="274">
    <mx:states>
        <mx:State name="Kayit">
            <mx:SetProperty target="{button1}" name="x" value="205"/>
            <mx:SetProperty target="{button1}" name="y" value="138"/>
            <mx:SetProperty target="{panel1}" name="width" value="320"/>
            <mx:AddChild relativeTo="{panel1}" position="lastChild">
                <mx:Label x="43" y="80" text="Adınız"/>
            </mx:AddChild>
            <mx:AddChild relativeTo="{panel1}" position="lastChild">
                <mx:TextInput x="94" y="78"/>
            </mx:AddChild>
            <mx:SetProperty target="{button1}" name="label" value="Kayıt Ol"/>
            <mx:AddChild relativeTo="{panel1}" position="lastChild">
                <mx:TextInput x="94" y="108"/>
            </mx:AddChild>
            <mx:AddChild relativeTo="{panel1}" position="lastChild">
                <mx:Label x="23" y="110" text="Soyadınız"/>
            </mx:AddChild>
            <mx:SetProperty target="{panel1}" name="title" value="Kayıt Ol"/>
            <mx:SetProperty target="{button2}" name="x" value="64"/>
            <mx:SetProperty target="{button2}" name="label" value="Kayıtlı Kullanıcıyım"/>
            <mx:SetProperty target="{button2}" name="y" value="138"/>
            <mx:SetEventHandler target="{button2}" name="click" handler="currentState=''"/>
            <mx:SetProperty target="{panel1}" name="height" value="220"/>
            <mx:SetProperty name="width" value="382"/>
            <mx:SetProperty name="height" value="288"/>
        </mx:State>
    </mx:states>
    <mx:Panel width="304" height="200" layout="absolute" title="Giriş" id="panel1">
        <mx:Label x="10" y="10" text="Kullanıcı Adı:"/>
        <mx:TextInput x="94" y="8"/>
        <mx:Label x="51" y="45" text="Şifre"/>
        <mx:TextInput x="94" y="45"/>
        <mx:Button x="94" y="98" label="Giriş" id="button1"/>
        <mx:Button x="173" y="98" label="Yeni Kullanıcı" click="currentState='Kayit'" id="button2"/>
    </mx:Panel>
</mx:Application>

Bu Makaleyi Tweet'le

Devamını Oku!

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>

Bu Makaleyi Tweet'le

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>

Bu Makaleyi Tweet'le

Devamını Oku!