MXML Nedir, Nasıl Çalışır?

Flash(Flex) Builder kullanırken kodlama için iki dil kullanılabilir, ilki ActionScript ikincisi MXML.  Flex içerisinde her iki dili de iç içe kullanma şansımız var, yani bir *.mxml dokümanının da hem ActionScript kodu hem de MXML kodunu kullanabilirsiniz.

MXML temelde XML doküman yapısı ile çalışan bir etiketleme dilidir(Markup Language). Hala karmaşık geliyor o yüzden biraz basite indirgemek gerekiyor. MXML dili XML ve HTML de olduğu gibi etiketlerle çalışır. Eğer daha önce HTML veya XML kullandıysanız, MXML kullanımı sizin için kolay olacaktır.

Flash(Flex) Builder içerisinde yeni bir Flex projesi oluşturduğunuzda, ana uygulama dosyasının içerisindeki kod şu şekilde açılacaktır;

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  3.         xmlns:s="library://ns.adobe.com/flex/spark"
  4.         xmlns:mx="library://ns.adobe.com/flex/halo"
  5.         minWidth="1024"
  6.         minHeight="768">
  7.         <fx:Declarations>
  8.         
  9.         </fx:Declarations>
  10. </s:Application>

Yukarıdaki kod içerisindeki ilk satır XML dokümanının deklarasyonudur. Yani kullanılan XML dokümanının versiyonunun 1.0 olduğunu ve UTF-8 şeklinde kodlandığını belirtiyor. İlk satırdan sonra uygulama tanımlaması ve uygulama içerisine eklenecek componentler yer alır. <s:Application> etiketleri arasında sizin ihtiyaç duyduğunuz kullanıcı ara yüzü yer alır. Hazırladığınız ara yüz ile kullanıcı etkileşimini sağlamak için ise ActionScript kodunu kullanabilirsiniz. Mesela uygulamaya bir Button eklemek istiyorsanız ekleyeceğiniz kod şu şekilde olacaktır;

  1. <s:Button x="50" y="50" label="Buton Adı"/>

Yukarıdaki kod içerisindeki s ifadesi spark componenent paketini temsil eder. Button ifadesi kullanılan componentin adıdır, x ve y ise butonun sahne üzerindeki konumunu belirler, label ifadesi ise butunon görsel ismini temsil eder. Yukarıda ki kodda istediğiniz taktirde id özelliğini şu şekilde tanımlayabilirsiniz;

  1. <s:Button id="test_btn" x="50" y="50" label="Buton Adı"/>

Buradaki özelliklerin sıralanmasında herhangi bir kural yoktur, yani sıralama şu şekilde de olabilir;

  1. <s:Button x="50" label="Buton Adı"   y="50" id="test_btn" />

Tabii uygulamanın anlaşılır olması ve ileriye dönük bir yapı oluşturmak istiyorsanız tavsiyem birbiri ile alakalı kodları yanyana eklemenizdir. Mesela kordinatlar ve boyutları yan yana yazmanız kodun daha anlaşılır olmasını sağlayacaktır.

  1. <s:Button id="test_btn" label="Buton Adı" x="50" y="50" width="120" height="22"  />

Yukarıdaki MXML kodunun ActionScript içerisinde tanımlanması ise şu şekilde olacaktır;

  1. var test_btn:Button = new Button();
  2. test_btn.label ="Buton Adı";
  3. test_btn. x=50;
  4. test_btn.y=50;
  5. test_btn.width=120;
  6. test_btn.height=22;
  7. addChild(test_btn);

Sanırım aradaki farkı aöıklayabildim. MXML dilinin basit ve anlaşılır olması bir çok kişi tarafından rahatlıkla kullanılabilmesini sağlıyor. Yukarıda ki yapıda gördüğünüz gibi gayet basit bir yapı, tabii belli bir süre sonra mutlaka ki uygulamaya ActionScript kodu eklemeniz gerekecektir.

MXML Kodlamak

MXML dilini öğrenmek için belirli bir zaman harcamanız gerekmiyor aslında, sadece kodu yazarken dikkat etmeniz gereken birkaç basit ama önemli nokta var. Eğer daha önce XML dilini az da olsa kullandıysanız zaten herhangi bir zorluk çekmeyeceksinizdir. XML dili için kodlama yaparken kullanılan kuralların aynısı MXML için de geçerli. Bunlardan birkaç tanesine basitçe burada değinceğim.

İlk olarak açılan her etiket, mutlaka kapatılmak zorundadır. Açılan bir etiketi kapamak için  ya etiketin sonuna ters slash işareti eklenir;

  1. <s:Button x="50" y="50" label="Buton Adı"/>

Yada etiket başlandığı gibi aynı etiket ile kapatılır;

  1. <s:Button x="50" y="50" label="Buton Adı">
  2. </s:Button>

MXML Etiketleri küçük büyük harf duyarlıdır, bu yüzden etiketlerde kullanacağız kapama etiketlerine ve etiket içerisinde kullanacağız özelliklere dikkat etmeniz gerekmektedir.

MXML içerisindeki öznitelikler(özellikler) tırak işareti(”" ) ile başlayıp bitmeli.

İç içe geçmiş MXML elementleri düzgün bir şekilde yapılandırılmalıdır;

  1. <s:Button>
  2.         <s:label>Buton Adı</s:label>
  3.         <s:x>50</s:x>
  4.         <s:y>50</s:y>
  5. </s:Button>

MXML’mi ActionScript’mi?

Eğer Flex kullanıyorsanız temel olarak bir fark yok aslında. Yani derleyici sonunda aynı işi yapıyor diyebiliriz. MXML dili temel ihtiyaçlarınızı kesinlikle karşılayacaktır. Zaten MXML dokümanları içerisinde de ActionScript dilini kullanacağınızdan eminim. Ama bir noktadan sonra kendi componentinizi geliştirme ihtiyacı duyabilirsiniz. Tabii kendi componentinizi oluşturmaya kalktığınızda devreye ActionScript girecektir. Benim kişisel tercihim kodlarımı daha temiz ve düzenli tutmak adına elimden geldiği kadar ActionScript kullanmaya çalışıyorum. Tabii MXML uygulama tasarlamada ActionScript den daha hızlı olduğu için ActionScript’i görsel olmayan işlemler ve yeni componentlere ihtiyaç duyduğumda kullanıyorum.

Şimdilik bu kadar.

Kolay Gelsin
Engin Yöyen!

7 Responses to “MXML Nedir, Nasıl Çalışır?”

  1. emrahatilkan 3 January 2010 at 16:20 #

    tam ne merak ettiğimi bilir gibi güzel anlatmışsın,
    teşekürler…

  2. Engin Gündoğdu 21 January 2010 at 10:04 #

    Güzel anlatım. Bu konuya çok yabancı biri olrak mxml flex’in içinemi yazılıyor, yoksa xml ile flash entegrasyonunda olduğu gibi dışardan flex içine mi dahil ediyoruz.
    Bu konularla ilgli makalelerinizi ilgiyle bekliyorum.
    Kolay Gelsin.

  3. Engin Yöyen 30 January 2010 at 13:33 #

    @Engin Gündoğdu
    Merhaba Engin,
    MXML hem flex içinde yazılabiliyor hemde farklı bir metin editoru ile yazılabilir. Ama flex içindeki editoru kullanman daha iyi, kod tamamlamı , kod ipucu gibi özelliklerinden dolayı kod yazmayı ileri derecede kolaylaştırıyor.

  4. Kursat 3 February 2010 at 20:55 #

    Flex kodlama dili ile ilgili internette bir çok kaynak mevcut. Fakat başlama noktasını saptamak zor oluyor bir dili ögrenmeye başlarken. Bu anlamda düzenli bir anlatıma ihtiyaç var. Bunun için önerebileceğiniz bir kitap varmıdır?

  5. Engin Yöyen 5 February 2010 at 00:13 #

    @Kursat
    türkçe kaynak malesef yok, ingilizce en yararlı kaynaklardan biri kendi dokümantasyonu ama oda açıkçası başlangıç için çok iyi değil. Flex’in yeni versiyonu bir iki aya kalmaz çıkacak, bende şu anda bir flex kitabı üzerinde çalışıyorum ama malesef daha kesin bir tarih yok. Bloğu takip edersen eğer Flash Builer yayınlanmasından sonra kitabın piyasaya çıkış tarihide belli olacaktır.
    Bunun haricinde şimdilik edinebileceğin en iyi kaynak kendi dokümantasyonları.

  6. ismini vermek istemeyen izleyici 11 February 2010 at 17:15 #

    Hocam benim sorum başka.
    Mxmlde AS3 üde hakimim.Ancak Flex3 ile en ufak proje 200 kb Flex4 ile 400 kb civarında tutuyor.Sabit sınıfları swf olarak export edip dinamik yükleme buldum çözüm olarak ancak başta preloader saçmalıyor.Sırf bu yyüzden Flash ve minmal component kullanıyorum nasıl çözülebilir bu sorun sizce
    iyi çalışmalar.

  7. Engin Yöyen 13 February 2010 at 13:22 #

    @ismini vermek istemeyen izleyici
    bahsettiğin sorun uzun zamandır tartışılıyor. Burada yapıyı şu şekilde düşünmek gerekiyor; Flex mimarisinin tamamını oluşturmak için yüzlerce sınıfa ihtiyaç var. Burada ki sınıf yapıları birbiri ile entegre çalıştıkları için bir parçasını çaıkarıp almak sistemi çökertiyor. Tabii burada tüm sınıf yapısı içerisinde gereksiz olan sınıflarda yer almakta.

    Sorunu çözmek için önce yapacağın işi belirlemen gerekiyor, eğer yapacağın işlem Flash içerisindeki yapılarla desteklenecek bir işlem ise bunu flash ile yapman tüm uygulamanın boyutunu düşürecektir.
    Eğer bunu flash ile değil de Flex ile yapabilisen, boyutları ancak söylediğin gibi belirli bir noktaya kadar düşürebilirsin.Bunun harici malesef herhangi birşey yapamazsın.

    Ya kendi componentlerini, kendi ihtiyacın doğrultusunda baştan yazacaksın, ya da Flex yapısının sunduğu ama boyut olarak büyük olan yapıları kullanacaksın.
    Seçim tamamen sana kalmış.
    Kolay Gelsin


Leave a Reply