Tampilkan postingan dengan label Tutorial AIR. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial AIR. Tampilkan semua postingan

Mendebug code di Flex dan AIR, Tool tambahan Debug

untuk mendebug suatu aplikasi di Flex dan AIR kita bisa menggunakan cara

menggunakan fungsi trace, fungsi ini sangat simple digunakan kita cukup mengetik trace("text"), trace(variabel) contoh :

trace("Hello World!"); // menghasilkan: "Hello World!"
var myObj:Object= {item:"item 1", desc:'This is item 1'};
trace(myObj); // menghasilkan: [object Object]

Menggunakan perpective Debug pada FlexBuilder, cara ini adalah menggunakan fasilitas FlexBuilder untuk mendebug dengan memberikan breakpoint pada baris kode. dan debuger pada aplikasi akan membaca code satu persatu sesuai dengan urutan code-nya jika pada baris ada sebuah breakpoint maka dia akan berhenti pada titik tersebut dan memperlihatkan kondisi variable pada baris tersebut.

contoh sederhana menggunakan breakpoint pada debug,

1. Buat project flex dengan nama latihanDebug kemudian file latihanDebug.MXML diisi code berikut:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute" creationComplete="init()">
    <mx:Script>
        <![CDATA[
            private function init():void{
            var x:int=1;
            var y:int=2;
            var z:int=0;
            z=x+y;
            trace(z);
            }
        ]]>
    </mx:Script>
</mx:Application>

2. save dan kemudian, buat masuk ke mode Flex Debugging, kemudian buat breakpoint pada line dengan mengklik dua kali pada nomor baris baris, misal seperti ini:

breakpoint

kemudian jalankan debug dengan mengklik icon debug ato tekan tombol F11, dan akan menghasilkan seperti ini

debug01

untuk melanjutkan debug bisa mengklik tombol resume

 tombol

gambar tombol resume

Bila debug terus dilanjutkan sampai posisi breakpoint terakhir maka hasil dari z adalah 3;

Selain menggunakan fungsi trace perpective Debug kita bisa juga Menggunakan tool Debug tambahan, ada beberapa tool Debug tambahan yang bisa dipakai untuk men-debug code di Flex dan AIR. ada pun aplikasi tersebut adalah :

cara menggunakan De Monster Debugger

  1. Download aplikasi dari webnya dari web demonsterdebugger
  2. Instal di PC kita
  3. buat project di Flex atau AIR
  4. Export Class ke File Project kitaimage
  5.  

  6. import library nl.demonsters.debugger.MonsterDebugger dan kemudian gunakan MonsterDebugger.trace(parameter, "text") kedalam code, misalnya :
  7. <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute" initialize="init()">
        <mx:Script>
            <![CDATA[
            // Import the debugger
            import nl.demonsters.debugger.MonsterDebugger;
            // Variable to hold the debugger
            private var debugger:MonsterDebugger;
            private function onInit():void
            {
                // Init the debugger
                debugger = new MonsterDebugger(this);
                // Send a simple trace
                MonsterDebugger.trace(this, "Hello World!");
            }
            ]]>
        </mx:Script>
    </mx:Application>
  8. Kemudian Run atau jalankan aplikasi, maka akan terlihat seperti iniimage

Latihan Membuat Native Window di AIR

Di AIR terdapat Fasilitas untuk membuat window dengan nama Native window, umumnya aplikasi yang menggunakan native window mudah dalam hal release memory daripada menggunakan single window.kita mulai saja membuat Native window di AIR

 

1. buat project di AIR namakan dengan ProjectNativeWindows

2. ProjectNativeWindows.MXML isi dengan kode berikut:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
    <![CDATA[
        import windows.MyNativeWindow
         private var win:MyNativeWindow;
         private function openWindow():void{
          win=new MyNativeWindow();
          win.open();
         }
         private function CloseWindow():void{
          if(win!=null){
          win.close();
          win=null;
          }
         }
    ]]>
</mx:Script>
<mx:Button label="open window" click="openWindow()" x="248" y="132"/>
<mx:Button label="Close Window" click="CloseWindow()" x="248" y="162"/>
</mx:WindowedApplication>

3. buat folder pada folder scr dengan nama windows

4. buat komponen berdasarkan (based on) window nama kan dengan MyNativeWindow

pic1

5. isi file MyNativeWindow.MXML dengan kode berikut :

<?xml version="1.0" encoding="utf-8"?>
<mx:Window xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute"
    width="400"
    height="300"
    title="My NativeWindows">
    <mx:Script>
        <![CDATA[
            private function TampilFullScreen():void{
            this.stage.displayState=StageDisplayState.FULL_SCREEN;
            }
            private function TampilNormal():void{
            this.stage.displayState=StageDisplayState.NORMAL;
            }
        ]]>
    </mx:Script>
    <mx:Button label="close" click="close()" x="171.5" y="156"/>
    <mx:Button label="FullScreen" click="TampilFullScreen()" x="156.5" y="79"/>
    <mx:Button label="NormalScreen" click="TampilNormal()" x="146" y="109"/>
</mx:Window>

Oke slamat mencoba..

Happy coding with Flex and AIR