FLEX UZAT BIRAK I

Buradaki açıklamalar http://www.tutorialized.com/tutorials/Adobe-Flex/1 adresindedir

Flex Uzat Bırak (Drag and Drop)

Flex ile DragManager sınıfını kullanarak uzat-bırak yaratma ve kullanma üzerine bir açıklama burada anlatılmıştır. Ayrıca belirtmek gerekirse listelerin içinde uzat-bırak türü özellikler zaten vardır. Ama burada kolaylıkla her zaman kullanılabilecek bir uzat-bırak ulgulaması anlatılmıştır.

Aşağıdaki örnek kurulacak yapının işlevselliğini gösterir. Çok basit bir gösteri programıdır. Bu örnek çok kolaylıkla alış veriş uygulamasında sepetinize ekleyebileceğiniz kodlamadan oluşur. Bir kez sepet içinde bırakıldımı, ürünler hemen alış veriş listenizde görüntülenir. Arayüz ve kodlama çok kolaydır.

Burada birçok Flex anlatımı gibi kullanıcı arayüzünün bulunduğu birkaç çerçeveyle işe başlanır. En önemli parçalar oyun resimleri ve sepete koyma çevçevesidir. Aşağıda görüldüğü gibi resimler üzerinde fareye basılma olayı bağlanmıştır. Sepet çerçevesinde dragEnter ve drapDrop olayları ayarları yapılmıştır. Bu işlemlerde kullanılan göstergeler uzat-bırak işlemini güzel yapacak biçimde çalışır.

Kodlama:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
  xmlns:mx="http://www.adobe.com/2006/mxml"
  layout="absolute" width="374" height="406">
  <mx:Label x="0" y="210" text="Games"
    width="118" height="42" fontSize="28" color="#818181"/>
  <mx:Image name="Bioshock" x="2" y="2"
    source="{bioshock_icon}" mouseDown="doDrag(event)" />
  <mx:Image name="Crysis" x="120" y="2"
    source="{crysis_icon}" mouseDown="doDrag(event)" />
  <mx:Image name="Halo" x="240" y="2"
    source="{halo_icon}" mouseDown="doDrag(event)" />
  <mx:Image name="Neverwinter Nights" x="50" y="110"
    source="{neverwinter_icon}" mouseDown="doDrag(event)" />
  <mx:Image name="World of Warcraft" x="200" y="110"
    source="{wow_icon}" mouseDown="doDrag(event)" />
  <mx:Canvas x="0" y="255" width="174" height="151"
    borderStyle="solid" backgroundColor="#12976A"
    dragEnter="dragAccept(event)"
    dragDrop="dragDrop(event)">
    <mx:Label x="0" y="0" text="Basket"
    width="118" height="42" fontSize="28" color="#FFFFFF"/>
  </mx:Canvas>
  <mx:DataGrid dataProvider="{cartContents}"
    x="173" y="255" width="201" height="151">
    <mx:columns>
      <mx:DataGridColumn headerText="Name" dataField="name"/>
      <mx:DataGridColumn headerText="Quantity" dataField="num"
        width="65"/>
    </mx:columns>
  </mx:DataGrid>
  <mx:Label x="272" y="235" text="Shopping Cart" color="#3A3A3A"
    fontWeight="bold" fontSize="12"/>
</mx:Application>