Kod Panosu

Kopyala, Yapıştır, Hatırla, Kodla..

FlexMobile Uygulamaları İçin Örnek IconItemRenderer

<s:List id="list" creationComplete="onCreate(event)" itemRenderer="renderers.MyIconItemRenderer">
    <s:AsyncListView list="{getAllPersonelResult.lastResult}"/>
</s:List>
<?xml version="1.0" encoding="utf-8"?>
<s:IconItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                    xmlns:s="library://ns.adobe.com/flex/spark"
                    labelFunction="getLabel"
                    messageFunction="getMessage"
                    iconFunction="getIcon">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[            
            import spark.primitives.BitmapImage;
            
            import valueObjects.Personel;
            
            [Embed(source="assets/departman/Dogu.png")]
            private var iconDogu:Class;
            
            [Embed(source="assets/departman/Bati.png")]
            private var iconBati:Class;
            
            [Embed(source="assets/departman/Kuzey.png")]
            private var iconKuzey:Class;
            
            [Embed(source="assets/ayripasif/ayri.png")]
            private var iconAyri:Class;
            
            [Embed(source="assets/ayripasif/pasif.png")]
            private var iconPasif:Class;
            
            [Embed(source="assets/ayripasif/aktif.png")]
            private var iconAktif:Class;
            
            override public function set data(value:Object):void{
                var p:Personel = value as Personel;
                if(value == null)    return;
                super.data = value;
                this.decorator = getDecorator(p);
                
            }
            
            private function getLabel(p:Personel):String{
                return p.adi + " " + p.soyadi;
            }
            
            private function getMessage(p:Personel):String{
                return p.goryer;
            }
            
            private function getIcon(p:Personel):Class{
                switch(p.rutbesi)
                {
                    case "Kuzey":    return iconKuzey;
                    case "Batı" :    return iconBati;
                    case "Doğu" :    return iconDogu;
                    default     :    return null;
                }
            }
            
            private function getDecorator(p:Personel):Class{
                if(p.ayriseb != null && p.ayriseb != "")    return iconAyri;
                if(p.passeb != null && p.passeb != "")    return iconPasif;
                return iconAktif;
            }
        ]]>
    </fx:Script>
</s:IconItemRenderer>

6 responses to “FlexMobile Uygulamaları İçin Örnek IconItemRenderer

  1. Burhan Aksendir 26/07/2014, 17:21

    Çok faydalı oldu. Sizden ricam bir de, Flex Mobile uygulamalarında İki View arasında geçiş yaparken loading ekranı göstermek istediğimizde bunu en iyi nasıl uygularız?

    Mesela ilk view’imizde bir listemiz var. Listedeki bir iteme dokununca diğer view’e gidiyor. Ancak bu diğer view’de az da olsa zaman alabilecek bazı işlemler yapıyoruz ve bu esnada kullanıcıya diğer view hazır olana kadar, “lütfen bekleyin…” diyerek bir busyindicator göstermek istiyoruz.

    Ben bunun için bir basit BusyIndicator oluşturup visible özelliğini false ayarladım ve sonra gideceğim view’in preinitialize eventini kullandım. Burada visible özelliğini true yaptım. Daha sonra da creatinComplete’de busyindicator’ü tekrar false olarak ayarladım; ama yukarda anlattığım ulaşmak istediğim etkiyi alamadım. Preinitialize yerine initialize’yi de denemedim ama olmadı.

    İşte bu tarz durumlarda nasıl bir yol izlemeliyiz? Örnek proje olarak daha önce sizinle paylaştığım projeyi kullandım. Orada detailView’e geçerken hatırlarsanız uzun bir bekleme oluyordu ya, işte o gibi durumlarda en azından kullanıcıya işlemin devam ettiğini göstereyim istiyorum🙂

    İlginiz ve cevabınız için şimdiden çok teşekkür ederim.

    Saygılar,

    Burhan

    • Snowblind 04/08/2014, 16:16

      Burhan Bey,

      Bahsettiğiniz şekilde bir “Lütfen bekleyiniz…” ekranını daha önce yazdım bir kurum için ancak kodun tamamı orada kaldı. Müsait bir vakitte proof of concept kâbilinde bir fxp hazırlayıp göndereceğim inşallah.

      Benim yöntemim özetle şu şekildeydi:

      1- <s:SkinnablePopUpContainer> tabanlı ve adına BusyIndicatorPopUp dediğim bir component hazırladım ve bunun içinde sadece bir BusyIndicator vardı.

      2- Globals adlı bir class’ım vardı ve bu class’ın da busyPopup adlı, BusyIndicatorPopUp türünden, static bir property’si vardı. Bu sayede projede istediğim yerde Globals.busyPopup deiyerek “Lütfen bekleyiniz…” ekranına referans verebiliyordum.

      3- Servis bağlantılarımızı oluştururken Data > Connect to Data/Service… menüsünden BlazeDS bağlantısı kuruyorduk. Ama Connect to PHP… de olur tabi. Bu sihirbaz bize services adlı bir package ve her servis için bir tane [ServisAdı].as ve bir de _Super_[ServisAdı].as dosyası oluşturuyordu.

      4- [ServisAdı].as ilk başta sadece preInitializeService metoduyla gelir ve bu metod aslında bir nevi servis nesnesinin creationComplete event’idir. Siz servisten bir instance oluşturduğunuz anda çağırılır, yani servisin herhangi bir metodunun invoke olmasını beklemez. Bu event içinde this.addEventListener deyip servis ilgili servise fault ve result eventleri ekleyebilirsiniz. Bu sayede servis çağrısı sonuçlandığında Globals.busyPopup.close() diyerek açık olan “Lütfen bekleyiniz…” ekranını kapatabilirsiniz. Böylelikle bu kodu sadece tek bir yere, [ServisAdı].as dosyasına yazmış olursunuz; servisi hangi view’ın çağırdığının önemi olmaz.

      5- [ServisAdı].as dosyası açıkken Source > Override/Implement Methods.. derseniz de servisteki herhangi bir metodun çağırılmasında önce olacaklara karar verme şansınız olur. Mesela servisimiz listele diye bir metodu olsun. Source > Override/Implement Methods.. dedikten sonra çıkan ekranda _Super_[ServisAdı] altından listele’yi işaretleyip işaretleyip tamam deyin. Bunun sonucunda [ServisAdı].as dosyasına listele metodu eklenir ve aslında tek yaptığı “return super.listele();”dir. Biz de bu satırın hemen üstüne “Globals.busyPopup.open(FlexGlobals.topLevelApplication.navigator.activeView);” diyoruz.

      6- Buraya kadar anlattıklarım tamamen [ServisAdı].as class’ı içindi. Bunlar sayesinde özetle; servise, popup’ımızı kapatan bir fault ve bir de result event’i ekledik ve servisin metodlarına popup’ımızı açan tek satır bir kod ekledik. Şimdi view’larda yapılacaklardan bahsedelim.

      7- Liste ve detay sisteminde iki seçeneğimiz var diye düşünüyorum.

      a) Ya liste ekranında bir seçim yapıldığında seçimle ilgili data yüklenecek ve ardından bu data detay ekranına gönderilecek ya da

      b) Liste ekranı detay ekranına seçimle ilgili bir referans değer (ör: id) gönderecek ve asıl data detay ekranında çekilecek gösterilecek.

      Ama bu işin güzel kısmı şu: hangisini seçtiğimizin pek bir önemi yok🙂 Eğer servis çağrısını liste ekranında yapıp gelen datayı detay ekranına paslarsak (a yöntemi) busyPopup liste ekranında çıkar, kaybolur ve detay akranın anında yüklü gelir. Yok eğer b yöntemini seçersek, listeden bir eleman seçtiğimiz anda boş bir detay ekranı gelir, data gelene kadar ekranda busyPopup durur, data gelince popup kaybolur ve detay ekranı dolmuş olur.

      Biraz uzun oldu ama özet olarak bu şekilde. Müsait olunca örnek projeyi paylaştığımda daha rahat ifade etmiş olacağım aslında ama şimdilik sadece bu şekilde ifade edebiliyorum.

  2. Burhan Aksendir 04/08/2014, 22:44

    Merhaba,
    çok teşekkür ederim. İlginiz ve uzun, detaylı cevabınızdan çok istifade ettim. Tam olarak yapmak istediğim şeyi çok güzel bir şekilde ifade etmişsiniz. Eksik olmayın. Bilgi ve tecrübelerinizden, çok faydalı, zaman kazandıran ipuçları ve yöntemlerinizden gerçekten istifade ediyorum.

    Müsait olduğunuzda proje paylaşımınızı sabırsızlıkla bekleyeceğim.

    • Snowblind 05/08/2014, 01:53

      http://www.mediafire.com/download/24n6898kdn1xsu2/PhpTest.fxp

      Bu adresten örnek projeyi indirebilirsiniz. PHP servis class’ını da ekledim ama
      Wamp Server + Zend Framework olmadan çalıştıramazsınız..

      • Burhan Aksendir 05/08/2014, 02:42

        Çok teşekkür ederim. Proje dosyasını indirdim. Şu an gerekli yapılandırmaları hazırlayıp test edeceğim. Eksik olmayın. Çok makbule geçti.

        • Burhan Aksendir 05/08/2014, 03:04

          Şimdi baktım da gerçekten tam istediğim gibi. Tıpkı HTTPService’deki showbusyindicator mantığıyla çalışıyor. İşlem sürerken ekranda showbusyindicator’ü tutuyor, result’ta ise kayboluyor! Tekrar teşekkürler. Acaba bunu SQLite’a göre oluşturduğum uygulamama nasıl uyarlayabilirim, onu düşünüyorum şimdi🙂

          Yardımlarınız, zamanınız ve ilginiz için teşekkürler.

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Log Out / Değiştir )

Connecting to %s

%d blogcu bunu beğendi: