18:08

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.


Bu Makaleyi Tweet'le

Devamını Oku!
13:50

Flex 3 - Dolar / TL Çevirici Uygulaması

Flex 3 deki ilk uygulamam: Dolar TL Çeviricisi
Swf Dosyası



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>



Bu Makaleyi Tweet'le

Devamını Oku!
13:13

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.


Bu Makaleyi Tweet'le

Devamını Oku!
12:57

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>



Bu Makaleyi Tweet'le

Devamını Oku!
12:34

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.


Bu Makaleyi Tweet'le

Devamını Oku!
12:25

Flex 3 - Label, Text, htmlText Kullanımı

Bu bölümde dikkat edilecek kodlar:
truncateToFit="false" --- Label genişliği yazıya göre dar geldiğinde (...) üç nokta ile bitirmesini engeller.

condenseWhite="true" --- Text içindeki boşluklara izin verir. Daha düzgün yazar.

htmlText --- İçerisinde tüm HTML kodları kullanılabilir. CDATA içinde direkt yazı yazılabilir.

DipNot: Flex de istedğiniz bölümün alt tarafa kopyasını almak için Bölümü seçin Klavyede CTRL + ALT + Alt Yön Tuşu


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
backgroundColor="#eeeeee">
<mx:Label text="Volkan Çelebi Deneme Deneme Deneme fsdkf sdfjsdhfn" width="150" truncateToFit="false">

</mx:Label>
<mx:Text width="150" condenseWhite="true">
<mx:htmlText>
<![CDATA[
<font color="#FF0000"><b>Volkan Çelebi </b>Deneme</font> Deneme Deneme fsdkf sdfjsdhfn
]]>
</mx:htmlText>
</mx:Text>
</mx:Application>



Bu Makaleyi Tweet'le

Devamını Oku!
18:22

Flex 3 - Basit bir yatay menü örneği

Flex Yatay Menü Örneği


<?xml version="1.0"?>
<!-- Basit Menü Uygulaması -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="Baslangic();" width="457" height="253">

<mx:Script>
<![CDATA[

import mx.events.MenuEvent;
import mx.controls.Alert;
import mx.collections.*;

[Bindable]
//XML Liste tanımlaması yapılıyor
public var xmlTut:XMLListCollection;
//Tanımlanan XML için öğeler tanımlanıyor
private var menubarXML:XMLList =
<>
<menuitem label="1. Menü" data="menu1">
<menuitem label="Alt Menü 1" data="alt1"/>
<menuitem label="Alt Menü 2" data="alt2"/>
</menuitem>
<menuitem label="2. Menü" data="menu1">
<menuitem label="Alt Menü 1" type="check" data="2A"/>
<menuitem type="separator"/>
<menuitem label="Alt Menü 2" >
<menuitem label="Alt Alt Menü 1" type="radio"
groupName="one" data="3A"/>
<menuitem label="Alt Alt Menü 2" type="radio"
groupName="one" data="3B"/>
</menuitem>
</menuitem>
</>;

// Başlangıçta tetiklenen fonksiyon XML Listeyi çağırıp öğeleri içine aktarıyor
private function Baslangic():void {
xmlTut = new XMLListCollection(menubarXML);
}

// Menülerdeki etiketlere tıklandığında
private function menuCalis(event:MenuEvent):void {
// Alert veriliyor, bu kısımda istenilen bilgiye ulaşılabilir
if (event.item.@data != "top") {
Alert.show("Etiket: " + event.item.@label + "\n" +
"Veri: " + event.item.@data, "tıklanan öğe");
}
}
]]>
</mx:Script>

<mx:Panel title="MenuBar Örneği" height="152" width="368"
paddingTop="10" paddingLeft="10">

<mx:Label width="100%" color="blue"
text="Bir öğe seçiniz"/>

<mx:MenuBar labelField="@label" itemClick="menuCalis(event);"
dataProvider="{xmlTut}" />

</mx:Panel>
</mx:Application>




Bu Makaleyi Tweet'le

Devamını Oku!
17:53

Flex 3 - Dahili ve Harici Resim Ekleme + VBox

Unuturum diye bir köşeye yazayım dedim. Flex 3 de projeye Dahili (Embed) ve Harici (URL) ile resim ekleme kodları:



<!--Projeye Resim Ekleme -->
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="200">
<!--Bu şekilde SWF dosyasına dahil edilen (embed) resimler görüntülenir -->
<mx:Image source="@Embed('images/flex.jpg')" x="60" y="54"/>
<!--Bu kısımda SWF dosyasının yanında images klasörü ve içinde flex.jpg olmalı-->
<mx:Image source="images/flex.jpg" x="261" y="54"/>

</mx:Application>



Bir de VBox özelliğine bakalım:
    <mx:VBox backgroundImage="assets/bigben.jpg" width="150" height="200"
alpha=".3">
<mx:Label text="Deneme"/>
<mx:Label text="Deneme"/>
<mx:Label text="Deneme"/>
<mx:Label text="Deneme"/>
<mx:Label text="Deneme"/>
</mx:VBox>



Bu Makaleyi Tweet'le

Devamını Oku!
14:32

Windows 7 de Flex 3 Script (Türkçe) Hatasının Çözümü


Flex 3 Builder DEMO versiyonu Windows 7 işletim sistemine yükledim. Güzel güzel kod yazmaya başlamıştım ki mx:script tagını tanımayıp hata vermeye başladı. İnterneti alt üst edip sonunda çözümü buldum.

İlk aşamada sorunun kaynağını saptamak yerinde olur sanıyorum. Flex 3 ün bu hatayı İngilizce işletim sistemlerinde vermediğini fark ettim.


İlk aşamada Programlar için kullanılan dili Windows 7 de değiştireceğiz. Bunun için:
Denetim Masası -- Bölge ve Dil --Yönetimsel -- Sistem Yerel Ayarlarını Değiştir -- İngilizce (ABD) seçiyoruz. (Uyarı bu ayar diğer programlarınızı da etkileyecektir. Türkçe karakter problemi yaşayabilirsiniz.)
Bu ayardan sonra bilgiyarınızı yeniden başlatın. Flex 3 ü tekrar açın, Projeleri temizleyip tekrar yükleyin. Bu aşamada bazı bilgisayarlarda direkt düzelme gözlenmesine rağmen bazı bilgisayarlar mx:script tagında hata vermeye devam etmiştir.

Sorunu çözülmemiş olanlar (bunların içinde ben de varım) şu dosyayı değitirsinler:
C:/Program Dosyaları (x86)/ Adobe / Flex Builder 3 / FlexBuilder.ini
dosyasını Not Defteri ile açın. İçine şu satırları ekleyin:
-Duser.language=en
-Duser.location=us

Flexi kapatıp açın (yemezse bilgisayarı resetleyin), artık mx:script tagında takılmayacaktır.


Bu Makaleyi Tweet'le

Devamını Oku!
13:47

Flex 3 içinde AS3 Kullanmak

Flex 3 içerisinde AS3 Kodlarını kullanmak için basit bir örnek, hem MXML ile hem AS3 ile ekrana bir metin yazdırma gerçekleştiriliyor.




<?xml version="1.0" encoding="utf-8"?>
<!-- Flex içinde AS3 kullanımı -->
<!-- Bu komut ile uygulama başladığında kullanılacak fonksiyon tetikleniyor -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
creationComplete="Baslangic()">
<!-- Script tagı içinde AS3 komutlarını Class yapısında kullanmak mümkün -->
<mx:Script>
<![CDATA[
//Bu bölümü alt tarafa etiket isimli label oluşturunca flex kendisi oluşturuyor.
import mx.controls.Label;
private function Baslangic():void
{
var etiket:Label= new Label();
etiket.text="AS3 ile yazılan yazı";
etiket.setStyle("fontSize",20);
//Flash daki gibi ekrana ekleme işlemi yapılıyor
this.addChild(etiket);
}
]]>
</mx:Script>
<!-- Bu bölüm ise Flexin kendi label kullanımı-->
<mx:Label text="MXML ile yazılan yazı" fontSize="16" y="86" x="10"/>
</mx:Application>







Bu Makaleyi Tweet'le

Devamını Oku!
16:03

Flex 3 - Firefox Browser Ayarı

Uzun zamandır ara verdiğim Flex 3 Builder çalışmalarına tekrar başladım. Bu bağlamda Lynda nın eğitim setleri biçilmiş kaftan.

Flex 3 Builder ı DEMO olarak Windows 7 ye yüklemeyi başardıktan sonra, hiç sevmediğim Internet Explorer da açılan Flash Player Debug versiyonunun Firefox da çalışması için ufak bir araştırma yaptım.

Ctrl + F11 ile projeyi browser üzerinde görüntülebiliyoruz. Bunu Firefox olarak tanımlamak için:
Window -- Preferences -- Web Browser sekmesine geliyoruz.
Bu aşamada sistemizde Firefox un yüklü olduğunu varsayıyorum.
Search ile Program Files da yer alan Mozilla Firefox klasörünü seçiyoruz.
Ardından yanındaki onay kutusunu seçiyoruz ki öncelikli olarak Firefox kullanılsın.
Artık Firefox da görüntüleyebilirsiniz.


Bu Makaleyi Tweet'le

Devamını Oku!