Kod Panosu

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

Tag Archives: flex mobile

Flex Mobile İçin Kenarlarda Esnemeyen Scroller

Flex Mobile veya AIR Desktop ile SQLite Veritabanı Kullananlara Notlar

  • FlexORM kullanırsanız datanızı SQLite veritabanı gibi değil, RAM’de duran bir ArrayCollection gibi yönetirsiniz. Bu da datayı compenentlere bind ederken büyük kolaylık sağlar.
  • Genelde async bağlantı kullanmanız tavsiye edilir (SQLConnection.openAsync()) ama böyle yaprasanız her DB çağrısına bir Responder yazmak zorunda kalırsınız ve sonuçta kod spagettiye döner, maintain edemezsiniz. Benim tavsiyem sekron bağlantı kurmak ve datayı listelerken bir sayfalama mekanizması kulanmaktan yana. Bunu yapmak için http://www.riaspace.com/paged-list-loaded-from-sqlite-in-adobe-air adresindeki makaleyi incelemenizi tavsiye ederim.
  • FlexORM ve sekron bağlantı kullanarak AsyncListView’e sayfalandırılmış data doldurmayı denediğim örnek projemi https://github.com/snowy73/PersonelLite adresindeki repositoryden incelleyebilirsiniz. ÖNEMLİ NOT: Bu projede kullanılan FlexORM kaynak kodu v0.8.2’den clonelanmış ve bir miktar değiştirilmiştir (https://github.com/snowy73/PersonelLite/blob/master/src/flexorm-degisiklikler.txt)
  • AIR’ın SQLite veritabanlarını şifreleme yöntemi çoğu veritabanı yönetim aracına uymadığından projenizi ilk başta şifrelenmiş veritabanı kullanacak şekilde başlatırsanız veritabanı büyüdükçe yönetmek zorlaşır. Ama development ortamında şifresiz veritabanı kullanıp projeyi production ortamına aktarmadan önce veritananınızı https://github.com/probertson/air-sqlite/blob/DB-copy-dev/src/com/probertson/data/DBCopier.as adresinde bulabileceğiniz classı kullanarak şifreleyebilirsiniz. Bu classı düzgün bir şekilde kullanmak için ilgili repository’nin DB-copy-dev adlı branch’ini kullanmanız gerekir.

Placeholder Yazılabilen, Şifreler İçin De Kullanılabilen, TabIndex Alabilen TextInput

Orijinal CaptionTextInput Class’ı için bkz. Spark TextInput with Caption (Watermark)

package components
{
	import flash.events.FocusEvent;

	import mx.core.UIComponent;

	import spark.components.TextInput;

	import spark.skins.mobile.TextInputSkin;

	public class CaptionTextInput extends TextInput
	{
		private var _displayAsPassword:Boolean;
		private var _showsCaption:Boolean;
		private var _caption:String;

		public function CaptionTextInput()
		{
			super();
			//	bunu yapmazsak tabIndex calismaz
			this.setStyle("skinClass", Class(spark.skins.mobile.TextInputSkin));
			this.addEventListener(FocusEvent.FOCUS_IN, onFocusIn);
			this.addEventListener(FocusEvent.FOCUS_OUT, onFocusOut);
		}

		[Bindable("change")]
		[Bindable("textChanged")]
		override public function set text(value:String):void {
			this._showsCaption = false;
			super.displayAsPassword = _displayAsPassword;
			super.text = value;
		}

		override public function set displayAsPassword(value:Boolean):void{
			if(!this._showsCaption){
				super.displayAsPassword = value;
			}
			_displayAsPassword = value;
		}

		override public function get text():String {
			if (this._showsCaption) {
				return "";
			}
			else return super.text;
		}

		/**
		 * The value to be shown if the textfield has no text (this.text == '')
		 */
		public function set caption(value:String):void {
			if (super.text == "") {
				super.displayAsPassword = false;
				super.text = value;
				this._caption = value;
				this._showsCaption = true;
			}
		}

		private function onFocusIn(ev:FocusEvent):void {
			if (this._showsCaption) {
				this._showsCaption = false;
				super.displayAsPassword = _displayAsPassword;
				super.text = "";
			}
		}

		private function onFocusOut(ev:FocusEvent):void {
			if (this.text == "") {
				this._showsCaption = true;
				super.displayAsPassword = false;
				super.text = _caption;
			}
		}
	}
}

Flex Mobile Projenizden Çağırdığınız BlazeDS Servislerinizi NetBeans Üzerinden Debug Etmek

  1. https://www.adobe.com/go/lc_blazeds_turnkey adresinden BlazeDS Turnkey’i indirin ve zip dosyasını masaüstüne açın.
  2. http://netbeans.org/downloads/ adresinden NetBeans’in full paketini indirin, varsayılan ayarlarla kurun ve açın.
  3. File > New Project > Java Web > Web Application > Next yolunu takip edin.
  4. Project Name: TestApp
  5. Next butonuna tıklayın.
  6. Karşınıza gelen Server and Settings ekranında Add… butonuna tıklayın.
  7. Apache Tomcat’i seçin Next  butonuna tıklayın.
  8. Karşınıza gelen ekranda Server Location’ın yanındaki Browse… butonuna tıklayın.
  9. Masaüstüne açtığınız “blazeds-turnkey…” adlı klasörün içie girin, “tomcat” adlı klasöre tek tıklayın ve Open butonuna tıklayın.
  10. Username: NetBeans
  11. Password: PASS
  12. Create user if it does not exits seçeneğinin seçili olduğundan emin olun ve Finish butonuna tıklayın.
  13. Karşınızdaki ekranda önce Next sonra da Finish butonuna tıklayın.
  14. Soldaki proje ağacında bulunan WEB-INF klasörünün içindeki “web.xml” dosyasına sağ tıklayın ve silin.
  15. Masaüstüne açtığınız “blazeds-turnkey…” adlı klasörün içine girip tomcat > webapps > blazeds > WEB-INF yolunu takip edin.
  16. Bu klasörün içindeki “flex” klasörünü ve “web.xml” dosyasını sürükleyip NetBeans’de açık olan projenin içindeki WEB-INF klasörünün üzerine bırakın.
  17. Yukarıdaki adımda projeye bıraktığınız “web.xml” dosyasını NetBeans üzerinden açın ve “<!– begin rds ” ve “end rds –>” yazan iki satırı silin.
  18. Yine aynı dosyanın içindeki “<param-value>true</param-value> ” değerini “<param-value>false</param-value> ” olarak değiştirin.
  19. Proje ağacının en üstündeki TestApp’e sağ tıklayın ve Properties’i seçin.
  20. Açılan pencerede Run kısmına gidip “Display Browser on Run” seçeneğinin işaretini kaldırın ve OK butonuna tıklayın.
  21. Proje ağacında bulunan Libraries’e sağ tıklayıp Properties’i seçin.
  22. Açılan pencerede Add Library…’ye, ardından Create…’e  tıklayın.
  23. Library Name: BlazeDS
  24. Library Type: Class Libraries
  25. OK butonuna tıklayın.
  26. Açılan pencerede Add JAR/Folder…’ı tıkladıktan sonra masaüstüne açtığınız “blazeds-turnkey…” adlı klasörün içine girip tomcat > webapps > blazeds > WEB-INF > lib yolunu takip edin.
  27. Ctrl+A tuşlarına basarak burada bulunan tüm .jar dosyalarını seçip Add JAR/Folder butonuna, ardından da Yes butonuna tıklayın.
  28. Ekrandaki pencerelerde sırasıyla OK, Add Library ve OK butonlarına tıklayın.
  29. File > New File… > Java > Java Class > Next yolunu takip edin.
  30. Class Name: EchoService
  31. Package: services
  32. Finish butonuna tıklayın.
  33. Ekrana gelen yeni class’a “public String doEcho(String s) {return s;} ” şeklinde yeni bir metod ekleyin ve kaydedin.
  34. Soldaki proje ağacından WEB-INF > flex > remoting-config.xml dosyasını açın.
  35. </service> satırından hemen önceki satıra <destination id=”EchoServiceDestination”><properties><source>services.EchoService</source></properties></destination> ifadesini yapıştırın ve kaydedin.
  36. Flash Builder’ı açın.
  37. File > New > Flex Mobile Project yolunu takip edin.
  38. Project name: TestApp
  39. İki kere Next dedikten sonra Application server type’ı Java seçip hemen altından da BlazeDS’i işaretleyin.
  40. Root folder: C:\Documents\NetBeansProjects\TestApp\web
  41. Root URL: http://localhost:8400/TestApp
  42. Context root: /TestApp
  43. Output folder: C:\Documents\NetBeansProjects\TestApp\web\apk
  44. Validate Configuration’a tıkladıktan sonra Finish’e tıklayın.
  45. Data > Connect to BlazeDS…’e tıklayın ve No passwords required kutusunu işaretleyip OK deyin.
  46. Açılan ekranda EchoServiceDestination’ın yanındaki kutuyu işaretleyip Finish’e tıklayın.
  47. NetBeans’e dönüp doEcho metoduna breakpoint koyduktan sonra Debug > Debug Project’e tıklayın.
  48. Tekrar Flash Builder’a dönüp önce alt kısımda bulunan Data/Services tabına tıklayın, ardından doEcho’ya sağ tıklayıp Test Operation… deyin.
  49. Açılan ekranda Test butonuna tıkladığınızda NetBeans’e koyduğunuz breakpoint’in çalıştığını göreceksiniz.

FlexMobile: SQLite’dan Gelen Tarih Verisini DataGrid İçinde İstenilen Formatta Göstermek

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" title="HomeView"
    creationComplete="creationComplete(event)">
  <fx:Script>
    <![CDATA[
      import mx.collections.ArrayCollection;
      import mx.events.FlexEvent;
      import mx.formatters.DateFormatter;
      
      protected function creationComplete(event:FlexEvent):void
      {
        var conn:SQLConnection = new SQLConnection();
        var dbFile:File = File.applicationDirectory.resolvePath('assets/test.db');
        var dbAppFile:File = File.applicationStorageDirectory.resolvePath('assets/test.db');
        
        if(!dbAppFile.exists)
          dbFile.copyTo(dbAppFile);
        
        conn.openAsync(dbAppFile, SQLMode.READ, new Responder(function success(event:SQLEvent):void{
          /* var update:SQLStatement = new SQLStatement();
          update.sqlConnection = conn;
          update.text = "UPDATE mytable SET dob = :dob WHERE name = :name"
          update.parameters[':dob'] = new Date()
          update.parameters[':name'] = 'Test';
          update.execute(-1, new Responder(function success(event:SQLResult):void{
            trace(event.rowsAffected);
          },
          function error(event:SQLError):void{
            trace(event.toString());
          })); */
          
          
          var select:SQLStatement = new SQLStatement();
          select.sqlConnection = conn;
          select.text = "SELECT name, dob FROM mytable";
          select.execute(-1, new Responder(function success(event:SQLResult):void{
            trace("OK");
            list.dataProvider = new ArrayCollection(event.data); 
          },
          function error(event:SQLErrorEvent):void{
            trace(event.error.toString());
          }));
        },
        function error(event:SQLError):void{
          trace(event.toString());
        }));
      }
      
      private var _dateformatter:DateFormatter = new DateFormatter();
      
      private function formatDate(item:Object,column:GridColumn):String
      {
        _dateformatter.formatString = "DD/MM/YYYY";
        return _dateformatter.format(item[column.dataField]);
      }
      
    ]]>
  </fx:Script>
  <fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
  </fx:Declarations>
  <s:DataGrid id="list" left="0" right="0" top="0" bottom="0" >
    <s:columns>
      <s:ArrayCollection>
        <s:GridColumn dataField="name" />
        <s:GridColumn dataField="dob" labelFunction="formatDate" />
      </s:ArrayCollection>
    </s:columns>
  </s:DataGrid>
</s:View>

Flash Builder ile Android Emulator İçin APK Üretmek

http://www.youtube.com/watch?v=WHzZHrqBs9Q&t=4m41s

adt -package -target apk-emulator -storetype pkcs12 -keystore cert.p12 AppName.apk AppName-app.xml AppName.swf

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>