Tutorial XML Untuk Aplikasi Dinamis Android - Adobe Air

Setelah kita berhasil membuat swf loader, kali ini akan kita manfaatkan keunggulan dari flash-adobe air lainnya yakni dapat melakukan load database berbasis XML yang sangat simpel dan berguna. Dengan menggunakan database "Tree" yang dimiliki nya maka akan sangat mudah untuk melakukan update isi dari suatu aplikasi dinamis hanya dengan merubah satu file text saja. Untuk belajar dasar-dasar mengenai flash (actionscript3) dan xml dapat membaca tutorial yang sangat menarik disini.

Format file xml dimulai dengan tag  <?xml version="1.0" encoding="UTF-8"?> , selanjutnya disusun berdasarkan tag < nama > </nama> yang dinamakan tiap node dan boleh memiliki children node didalamnya. Perhatikan kode berikut :

<GALLERY>

<IMAGE TITLE="gambar 1">

<FILE>gambar1.jpg</FILE>

<TEKS>ini teks untuk gambar1</TEKS>

</IMAGE>

<IMAGE TITLE="gambar 2">

<FILE>gambar2.jpg</FILE>

<TEKS>ini teks untuk gambar2</TEKS>

</IMAGE>

<IMAGE TITLE="gambar 3">

<FILE>gambar3.jpg</FILE>

<TEKS>ini teks untuk gambar3</TEKS>

</IMAGE>

</GALLERY>

kode diatas merupakan kode XML dari GALLERY yang memiliki node <IMAGE> yang beranak<FILE> dan <TEKS>. Panjang dari node dan anak dari GALLERY dapat disesuaikan sesuai keinginan asal dengan format yang seragam. Node IMAGE disini memiliki 3 anggota, sehingga akan menjadi array yang sangat simple jika dipindahkan ke FLASH dengan contoh test script berikut: 

simpan file xml tadi dengan nama "test.xml"

var myXML:XML;
var myLoader:URLLoader = new URLLoader();

myLoader.load(new URLRequest("test.xml"));
myLoader.addEventListener(Event.COMPLETE, processXML);

function processXML(e:Event):void {
myXML = new XML(e.target.data);
trace(myXML.IMAGE.length());
trace(myXML.IMAGE.*);
trace(myXML.IMAGE[0].TEKS);
trace(myXML.IMAGE.(@TITLE=="gambar 3").FILE);

}

output dari tracing scipt diatas adalah :

3
<FILE>gambar1.jpg</FILE>
<TEKS>ini teks untuk gambar1</TEKS>
<FILE>gambar2.jpg</FILE>
<TEKS>ini teks untuk gambar2</TEKS>
<FILE>gambar3.jpg</FILE>
<TEKS>ini teks untuk gambar3</TEKS>
ini teks untuk gambar1
gambar3.jpg

Dan dari hasil tracing diatas dapat dilihat betapa simplenya database dapat diubah-ubah sesuai keinginan, semisal kita ingin merubah nama gambar ke 3 tinggal merubah saja nama filenya sesuai alamat yang dituju. contoh script berikut jika kita menginginkan menampilkan gambar pada file lokal melalui XML

file gambar1.jpg , gambar2.jpg dan gambar3.jpg harus ada di lokasi yang satu folder dengan aplikasi.

var myXML:XML;
var myLoader:URLLoader = new URLLoader();

myLoader.load(new URLRequest("test.xml"));
myLoader.addEventListener(Event.COMPLETE, processXML);

function processXML(e:Event):void {
myXML = new XML(e.target.data);

var pictURL:String = myXML.IMAGE[1].FILE;
var pictURLReq:URLRequest = new URLRequest(pictURL);
pictLdr.load(pictURLReq);
addChild(pictLdr);

}

output yang keluar adalah gambar2.jpg pada layar 

jika kita memiliki text field dengan nama textnya, maka bisa juga di tambahkan seperti berikut:

var myXML:XML;
var myLoader:URLLoader = new URLLoader();

myLoader.load(new URLRequest("test.xml"));
myLoader.addEventListener(Event.COMPLETE, processXML);

function processXML(e:Event):void {
myXML = new XML(e.target.data);

var pictURL:String = myXML.IMAGE.(@TITLE =="gambar 3").FILE;
var pictURLReq:URLRequest = new URLRequest(pictURL);
pictLdr.load(pictURLReq);
addChild(pictLdr);
textnya.text=myXML.IMAGE.(@TITLE == "gambar 3").TEKS;

}

Maka output yang didapat adalah flash meload gambar3.jpg serta menampilkan isi TEKS yaitu: "ini teks untuk gambar 3". Mudah bukan? Ayo kita lanjut saja ke praktek beneran pada adobe flash cs5.5 . kali ini kita akan membuat loader file xml, dengan gambar yang bersumber di internet dan teks dari file XML yang diupload ke server.

Sesuai pembahasan loader swf sebelumnya, kita akan membuat animasi pre-loader dengan menggunakan tween, sehingga kelihatan halus saat menunggu file xml serta gambar di load ke layar android. Kita membuat animasi loader serta textbox dengan UI component berupa scroll slider.

Langsung saja perhatikan code berikut dan kita akan bahas setelahnya.

var myXML:XML;
var myLoader:URLLoader = new URLLoader();
var urutan:Number=0; //urutan gambar
tulisan.visible=false; //tulisan
uiScroller.visible=false; //text scroller

//xml loader,  contoh filenya ada di server berikut
//ubah sesuai keinginan (lokal juga bisa)

myLoader.load(new URLRequest("http://www.flexievdo.net/test.xml"));

//listener
myLoader.addEventListener(Event.COMPLETE, processXML);

//pengatur gambar
var pictLdr:Loader = new Loader();
pictLdr.contentLoaderInfo.addEventListener(Event.COMPLETE, kecilkan);

//geser-geser secara swap
Multitouch.inputMode = MultitouchInputMode.GESTURE;
stage.addEventListener(TransformGestureEvent.GESTURE_SWIPE, onSwipe);


//function untuk menyeuaikan gambar

function kecilkan(e:Event):void {
pictLdr.x=10;
pictLdr.y=10;
pictLdr.width=300;
pictLdr.height=310;
trace("selesai");
tulisan.visible=true;
uiScroller.visible=true;

//tampilkan setelah gambar selesai di load

nama.text=myXML.IMAGE[urutan].@TITLE;
tulisan.text=myXML.IMAGE[urutan].TEKS;
ke.text="Gambar ke "+ String(urutan + 1) + " dari " + String(myXML.IMAGE.length());
uiScroller.update();

loaded.visible=false;

}


//pemroses xml

function processXML(e:Event):void {
myXML = new XML(e.target.data);


loaded.visible=true;

var pictURL:String = myXML.IMAGE[urutan].FILE;
var pictURLReq:URLRequest = new URLRequest(pictURL);
pictLdr.load(pictURLReq);
addChild(pictLdr);



}


//swipe babe !!

function onSwipe(evt:TransformGestureEvent):void {
 
//swipe akan menentukan urutan gambar
 
 if( evt.offsetX == -1){
 
 urutan++ ;
 if(urutan >= myXML.IMAGE.length()) {
  urutan=0;
 }
 
 }

 else if( evt.offsetX == 1){
 
 urutan-- ;
 if(urutan < 0 )  {
  urutan= (myXML.IMAGE.length() -1);
 }
 
 }

//hayo kita hancurkan kemudian tampilkan lagi

if(evt.offsetX == 1 || evt.offsetX == -1 )
{

tulisan.visible=false;
uiScroller.visible=false;
loaded.visible=true;
nama.text="";
tulisan.text="";
ke.text="";
uiScroller.update();


removeChild(pictLdr);
var pictURL:String = myXML.IMAGE[urutan].FILE;
var pictURLReq:URLRequest = new URLRequest(pictURL);
pictLdr.load(pictURLReq);
addChild(pictLdr);
}

}

Terlihat mudah saja, bahwa tiap file XML memiliki format sesuai contoh awal pada test.xml dan informasi yang akan digunakan berupa @TITLE, FILE, dan TEKS . Kita akan memainkan proses swipe untuk merubah posisi dari IMAGE[urutan] dan kemudian dengan image loader akan diresize sesuai panjang dan lebar dari layar HP Android. Sebagai keunggulan dari xml dimana kita dapat mengambil source gambar dari mana saja seperti contoh berikut, dan file tutorial lengkap dapat diunduh disini.


<GALLERY>
<IMAGE TITLE="BALI ISLAND OF GOD">
<FILE>http://us.123rf.com/400wm/400/400/saiko3p/saiko3p1107/saiko3p110700147/

10085679-beauty-rice-terrace-with-palms-on-bali-island.jpg</FILE>
<TEKS>Bali, the famed Island of the Gods, with its varied landscape of hills 

and mountains, rugged coastlines and sandy beaches, lush rice terraces and 

barren volcanic hillsides all providing a picturesque backdrop to its 

colourful, deeply spiritual and unique culture, stakes a serious claim to be 

paradise on earth. With world-class surfing and diving, a large number of 

cultural, historical and archaeological attractions, and an enormous range of 

accommodations, this is one of the world's most popular island destinations 

and one which consistently wins travel awards. Bali has something to offer a 

very broad market of visitors from young back-packers right through to the 

super-rich.
</TEKS>
</IMAGE>
</GALLERY>



Jangan lupa untuk mempublish aplikasi adobe air - android dengan permission "Internet"


-=UPDATE=-


Contoh aplikasi yang telah dibikin dengan methode xml dan ditambah dengan image caching




SELAMAT MENCOBA