" Kuliah Si Boersan "

TUTORIAL APLIKASI MAP DENGAN XML + FUNGSI SEARCH
Requirement:
Flash CS4 dan Flash CS5, publish ke player 10
(Agar lebih aman, silakan convert ke Flash 8 dan CS3)
Actionscript 2
Basic File: map0.fla
DOWNLOAD DI SINI
File dasar tersebut sudah berisi aset-aset yang dibutuhkan.
virtual camera dan map
serta layer-layer actionscript.
Prinsip-prinsip dan batasan aplikasi ini:
- Metode zoom in/out memakai vcam (virtual camera, AS2 dari Sham Bangal yang dimodifikasi Bryan Heisey). Vcam akan mengambil alih stage dengan localtoglobal, jadi xy movie harus dilihat dari vcam. Karena itu semua aset yang tidak ingin ikut di-zoom atau drag harus dimasukkan dalam mc "kamera" di layer "vcam"
- Semua info akan diambil dari xml, termasuk nama dan koordinat lokasi dan peta.
- Fungsi-fungsi akan disederhanakan dengan memakai iterasi for loops, jadi biasakan melihat kode for (i = 1; i <= 3; i += 1) dst... i+=1 lebih cepat dibandingkan i++ (jika ada yang ingin tahu)
- Pada Flash CS5 (mungkin juga CS4?), dynamic text sebaikbya memakai device font, dalam hal ini "Sans", jika memakai jenis font lain, embed font-nya! Dalam file yg didownload, cek ulang apakah ada dynamic text yang terlewat tidak memakai font "SANS".
- Publish fullscreen melalui CS5 membuat input text disable (alasan Adobe: security. Damn). Hanya berfungsi fullscreen utk standalone
- Publish di player 9, AS2, melalui CS5 tidak akan membuat input text berfungsi

OPTIONAL
di layer "mouse", masukkan
map.onEnterFrame=function() {
Mouse.hide();
_root.kamera.koor.posX.text="map x= "+map._x;
_root.kamera.koor.posY.text="map y= "+map._y;
}
Jika fungsi ini tidak dipakai, jangan lupa dipindahkan Mouse.hide() ke layer "aszoom"
Ini optional karena fungsinya nanti untuk mengecek xy map sesuai letak area yang berisi info.

1. Membuat Pengganti Mouse dan Tool Zoom
Layer "vcam", mc "toolzom"
ada lima frame dengan stop():
1. custom cursor
2. zoom in cursor
3. zoom out cursor
4. drag cursor
5. empty cursor (ini bisa dibuang karena kita tidak akan memakainya, atau biarkan saja)

Di layer "mouse", tambahkan kode:

_root.kamera.koor._visible = true;//optional

_root.kamera.garis._visible = true;//optional

_root.kamera.oksrc._visible=false;//menyembunyikan mc "search"

_root.kamera.navmenu._alpha = 25;// zoom transparant, jika diperlukan mengatur alpha navmenu

//ini kode inti

Mouse.hide();

kamera.onMouseMove = function()

{

//if(_root.zoomin || _root.zoomout || _root.dragme) {

this.toolzoom._x = this._xmouse;

this.toolzoom._y = this._ymouse;

updateAfterEvent();

//}

};

Kita membuat mouse menghilang dan menggantinya dengan custom cursor (toolzom frame 1).
kode: if(_root.zoomin || _root.zoomout || _root.dragme)
diperlukan jika (toolzom frame 1) adalah empty cursor.
Jadi karena di frame 1 adalah custom cursor, dengan sendirinya mouse sudah tergantikan

2. Membuat Fungsi Zoom In/Out dan Drag
Di layer "aszoom", masukkan kode:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

var klik = 0;

_root.zoomin = false;

_root.zoomout = false;

_root.dragme = false;

function zoom(mc, faktor, waktu)

{

type = mx.transitions.easing.Strong.easeOut;

besarx = new mx.transitions.Tween(mc, "_xscale", type, mc._xscale, mc._xscale * faktor, waktu, true);

besary = new mx.transitions.Tween(mc, "_yscale", type, mc._yscale, mc._yscale * faktor, waktu, true);

geserx = new mx.transitions.Tween(mc, "_x", type, mc._x, _root._xmouse, waktu, true);

gesery = new mx.transitions.Tween(mc, "_y", type, mc._y, _root._ymouse, waktu, true);

}

map.indo.onRelease = function()

{

if (!dragme)

{

if (_root.zoomin && klik < 5)

{

zoom(kamera,0.5,1);

klik++;

}

if (_root.zoomout && klik > 0)

{

zoom(kamera,2,1);

klik--;

}

}

this.stopDrag();

};

map.indo.onPress = function()

{

if (dragme)

{

map.startDrag();

}

}; 

kode pada layer "zoom button":

for (i = 1; i <= 3; i += 1)

{

buttonmenu = _root.kamera.navmenu["b" + i];

buttonmenu.id = i;

buttonmenu.onRelease = function()

{

_root.kamera.papan._visible = false;// menhilangkan papan keterangan

_root.kamera.papan.gotoAndStop("fungsi");// mengfungsikan kembali button

_root.cursorMovieClip = true;

_root.kamera.oksrc._visible = false;// menghilangkan form search

_root.kamera.bsearch0._visible = true;// Memunculkan button search

_root.map["tanda" + i]._visible = false;//menghilangkan marker

if (this.id == 1)

{

_root.kamera.toolzoom.gotoAndStop(2);

_root.zoomin = true;

_root.zoomout = false;

_root.dragme = false;

}

if (this.id == 2)

{

_root.kamera.toolzoom.gotoAndStop(3);

_root.zoomout = true;

_root.zoomin = false;

_root.dragme = false;

}

if (this.id == 3)

{

_root.kamera.toolzoom.gotoAndStop(4);

_root.dragme = true;

_root.zoomin = false;

_root.zoomout = false;

}

updateAfterEvent();

};

buttonmenu.onRollOver = function()

{

_root.kamera.toolzoom.gotoAndStop(1);

_root.kamera.navmenu._alpha = 100;// zoom transparant 100% 

_root.cursorMovieClip = true;

};

buttonmenu.onRollOut = function()

{

_root.kamera.navmenu._alpha = 25;// zoom transparant 25%

tugelmode();

};

}

function tugelmode()

{

if (_root.zoomin)

{

_root.kamera.toolzoom.gotoAndStop(2);

}

else if (_root.zoomout)

{

_root.kamera.toolzoom.gotoAndStop(3);

}

else if (_root.dragme)

{

_root.kamera.toolzoom.gotoAndStop(4);

}

else if (_root.cursorMovieClip)

{

_root.kamera.toolzoom.gotoAndStop(1);

}

}

Kita memakai map.indo sebagai mc yang memicu fungsi zoom() saat di-press ketika tidak dalam dragmode.
Juga untuk drag, namun yang kita drag adalah mc "map" bukan "map.indo".
Fungsi iterasi di atas dan tugelmode() adalah penyederhanaan event release, rollover, dan rollout, untuk _root.kamera.navmenu.b1, _root.kamera.navmenu.b2, _root.kamera.navmenu.b3. Ini menggantikan 6 fungsi pada tutorial sebelumnya.
Hasilnya
http://nayzuko.com/flashfiles/map1.swf
3. Menggunakan XML untuk Info dan Marker
Di movie, layer "vcam" kita mempunyai mc "papan" yang akan menampung judul area di dynamic text "infot",
Gambar area di mc kosong "gbr" dan keterangan area di dynamic text "infot2". Ada mc "papanpt" dg dynamic text "nmpt" yg berfungsi sama seperti "infot". Ini optional.
Di file "map1.fla", kita juga mempunyai 5 area di map, yakni "z0", "z1"... "Z4". Jika menamainya mulai dari "z1" bukan "z0" maka nanti harus ada penyesuaian. Kita memulai dari angka 0 agar lebih mudah dan menyesuaikan dengan cara Flash menghitung.
Sekarang kita buat file xml yang berisi info 5 area, namakan "dataku.xml":

<?xml version="1.0" encoding= "UTF-8" ?>

<datagw>

<infogw

id="0"

judul="block g"

gambar="images/gbr0.jpg"

mapx="371"

mapy="220"

posx="-99"

posy="-21">Inilah rumah pertama</infogw>

<infogw

id="1"

judul="block h"

gambar="images/gbr1.jpg"

mapx="40"

mapy="-145"

posx="228"

posy="338">Inilah rumah Kedua </infogw>

<infogw

id="2"

judul="pt. lg"

gambar="images/gbr2.jpg"

mapx="396"

mapy="180"

posx="-121"

posy="17.5">Inilah rumah Ketiga</infogw>

<infogw

id="3"

judul="block i"

gambar="images/gbr3.jpg"

mapx="450"

mapy="167"

posx="-175"

posy="32">Inilah rumah Keempat</infogw>

<infogw

id="4"

judul="pt. anu"

gambar="images/gbr2.jpg"

mapx="464"

mapy="197"

posx="-190"

posy="4">Inilah rumah Kelima</infogw>

</datagw>

Nodes "id" optional. Siapa tahu nanti berguna. Sediakan folder "images" di tempat yg sama dengan "map1.swf", isinya 5 gambar sesuai isi xml.
Mapx, mapy adalah koordinat xy map saat area berada di tengah stage. Cek dengan menggunakan drag cursor. geser map sehingga area di tengah dan catat xy-nya.
Inilah gunanya kode "OPTIONAL" sebelumnya. Buang kode ini dan mc "koor", mc "garis" jika aplikasinya sudah final.

Posx, posy adalah koordinat xy area (z0...z5), cek langsung di flash, di property x y.

Node text berisi keterangan area, misalnya "iniah rumah pertama bla bla bla". Jangan lupa dynamic text memakai device font atau embed font-nya.

4. LOAD DAN KONTROL ISI XML
Di layer "munculnya info" isi kode ini:

posisix=[];

posisiy=[];

areamap=[];

var myXML:XML = new XML();

myXML.ignoreWhite=true;

myXML.load("dataku.xml");

myXML.onLoad = function(success) {

if (success) {

var mydata = myXML.firstChild.childNodes;

for(i=0; i<mydata.length; i+=1){

showInfo(mydata[i]);

posisix[i]=mydata[i].attributes.mapx;

posisiy[i]=mydata[i].attributes.mapy; 

areamap[i]=mydata[i].attributes.judul;  

}

} else {

pesan.text="gagal";

}

};

_root.kamera.papan._visible=false;

function showInfo(dataxml) {

var judul=dataxml.attributes.judul;

var isi=dataxml.firstChild.nodeValue;

var gambar=dataxml.attributes.gambar;

var posx=dataxml.attributes.posx;

var posy=dataxml.attributes.posy;

var no=i;

var area=_root.map["z"+no];

map.attachMovie("tanda", "tanda"+no, 500+i);

var marker=_root.map["tanda"+no];

marker._x=posx;

marker._y=posy;

marker.infopt.text=judul;

marker._visible=false;

area.onPress=function(){

trace(this);

_root.kamera.papan.gotoAndStop("tkfungsi");

_root.kamera.papan.infot.text=judul;

_root.kamera.papan.infot2.text=isi;

_root.kamera.papan.gbr.loadMovie(gambar);

_root.kamera.papan._visible=true;

_root.zoomin=false;

_root.zoomout=false;

_root.dragme=false;

_root.kamera.toolzoom.gotoAndStop(1);

_root.map["tanda"+i]._visible=false;

}

// roll over button balik semula

area.onRollOver=function() {

_root.kamera.toolzoom.gotoAndStop(1);

_root.kamera.papanpt.nmpt.text=judul;

}

area.onRollOut=function() {

_root.kamera.papanpt.nmpt.text=""; // teks kosong

tugelmode();    

}

//end for

};

_root.kamera.papan.clos.onRelease=function() {

_root.kamera.toolzoom.gotoAndStop(1);

_root.kamera.papan._visible=false;

_root.kamera.papan.gotoAndStop("fungsi");

}

Pertama kita membuat array untuk menampung posisi map, yakni posisix=[]; dan posisiy=[]; serta nama area di areamap=[];
Pada file lama, array ini namanya "area". dijadikan "areamap" agar tidak bingung atau berpotensi konflik dengan area sebagai wakil mc lokasi (_root.map["z"+no]).

Objek XML kita adalah myXML. Sedangkan "var mydata = myXML.firstChild.childNodes;" adalah variabel array yang mewakili setiap nodes secara berurutan dalam dataku.xml.
Jadi node pertama atau "mydata[0]" adalah

<infogw

id="0"
judul="block g"
gambar="images/gbr0.jpg"
mapx="371"
mapy="220"
posx="-99"
posy="-21">Inilah rumah pertama</infogw>

Begitu seterusnya.

Artinya, jika kita ingin mengakses judul dan posx dalam nodes urutan 3 (atau mydata[2]):
mydata[2].attributes.judul;
mydata[2].attributes.posx;
Untuk memudahkan pengkodean, kita membuat fungsi showInfo() yang menampung setiap isi array mydata.

Kita cukup mendefinisikan variabelnya sekali:

var judul=dataxml.attributes.judul;
var isi=dataxml.firstChild.nodeValue;
var gambar=dataxml.attributes.gambar;
var posx=dataxml.attributes.posx;

Dengan showInfo(mydata[i]), kita meminta Flash melakukan berulang kali sebanyak isi array. Jika kita tidak memakai atribut, maka path xml-nya adalah:
var isi=dataxml.firstChild.nodeValue;
Sedikit tentang struktur xml dalam "dataku.xml":

<datagw>
<infogw attibut="">teks
</infogw>
<infogw attibut="">teks
</infogw>
...
<infogw attibut="">teks
</infogw>
</datagw>

Untuk mengakses node teksnya:
myXML.childNodes[0].childNodes[0].childNodes[0].nodeValue
myXML.childNodes[0].childNodes[1].childNodes[0].nodeValue
...
myXML.childNodes[0].childNodes[4].childNodes[0].nodeValue
Jika tidak ingin memakai atribut (attribute wajib pakai tanda kutip) dan mengubah strukturnya menjadi begini:

<datagw>

<judul>Inilah rumah pertama</judul>

<gbr>images/gbr0.jpg </gbr>

<infogw>Bla bla 1</infogw>

</datagw>

<datagw>

<judul>Inilah rumah kedua</judul>

<gbr>images/gbr1.jpg</gbr>

<infogw>Bla bla 2</infogw>

</datagw>

Maka untuk mengakses "judul" dan "gbr" (images/gbr0.jpg):

myXML.childNodes[0].childNodes[0].childNodes[0].nodeValue; // ini judul
myXML.childNodes[0].childNodes[1].childNodes[0].nodeValue; // ini gambar
myXML.childNodes[0].childNodes[2].childNodes[0].nodeValue; // ini infogw
{/code}
Nodevalue "judul" di node yang kedua (rumah kedua):
{code}myXML.childNodes[1].childNodes[0].childNodes[0].nodeValue; // output "Inilah rumah kedua"
...
myXML.childNodes[4].childNodes[0].childNodes[0].nodeValue; // utk node ke-5

Damn, jalan melingkar. LoadVars jauh lebih mudah dan efektif.

Selanjutnya...

Ada kode:

var no=i;
var area=_root.map["z"+no];

map.attachMovie("tanda", "tanda"+no, 500+i);
var marker=_root.map["tanda"+no];

"no" di sini sama dengan "i" karena semua nama mc kita sudah mulai dengan "0"
karena "mydata" adalah array yang dimulai dengan "0"

Seandainya sudah kebablasan memulai nama areanya tidak dengan angka 0, misalnya map.z1, map.z2...map.z114
buat "no=i+1"

var no=i+1;
var area=_root.map["z"+no];

map.attachMovie("tanda", "tanda"+i, 500+i);
var marker=_root.map["tanda"+i];

Dengan begitu, kita tetap bisa mengontorl map.z1 dst sementara "tanda" adalah linkage id bagi mc "petunjuk lokasi" yang ada di library, tidak ada di stage.
jadi, untuk "tanda" kita memakai iterasinya tetap dengan "i", bukan "no".

Oke, done utk XML.
Tidak perlu preview swf dan download .fla karena movienya pasti jalan.
***
5. FUNGSI SEARCH DAN PENANDA (MARKER)
Berbeda dari fungsi search sebelumnya, di sini kita akan membuat fungsinya terpisah dari fungsi onRelease button.
Karena kita akan menambahkan search dengan menekan "Enter" selain menekan tombol. Sebelum itu, kita harus membuat map kembali ke skala dan posisi awal dengan fungsi zoom2(). Skala awal ditentukan oleh skala vcam 100% dengan xy 275, 200. Posisi awal map, seperti bisa dicatat, xy-nya 271.85 dan 126.7.
Tambahkan kode ini di layer "aszoom":

function zoom2(mc, waktu)

{

type = mx.transitions.easing.Elastic.easeOut;

besarx = new mx.transitions.Tween(mc, "_xscale", type, mc._xscale, 100, waktu, true);

besary = new mx.transitions.Tween(mc, "_yscale", type, mc._yscale, 100, waktu, true);

geserx = new mx.transitions.Tween(mc, "_x", type, mc._x, 275, waktu, true);

gesery = new mx.transitions.Tween(mc, "_y", type, mc._y, 200, waktu, true);

gesermapx = new mx.transitions.Tween(_root.map, "_x", type, _root.map._x, 271.85, waktu, true);

gesermapy = new mx.transitions.Tween(_root.map, "_y", type, _root.map._y, 126.7, waktu, true);

}

Pemicu zoom2 ada di mc "kamera.bsearch0". Ini dummy button, tujuan utk membuat skala kembali ke awal dengan zoom2(); lalu memunculkan input_text dan button search sungguhan.
Kodenya letakkan di "as search":

kamera.oksrc._visible=false;//ini mc search yang asli yang disembunyikan dulu

kamera.bsearch0.onRelease = function() {

kamera.oksrc._visible=true;//mc seacrh asli muncul

kamera.oksrc.warn._visible=true;//teks petunjuk

kamera.bsearch0._visible=false;//mc dummy lenyap

_root.zoomin=false;

_root.zoomout=false;

_root.dragme=false;

zoom2(kamera, 1);//kembalikan ke skala dan klik awal

klik=0;

_root.kamera.toolzoom.gotoAndStop(1);

}

kamera.bsearch0.onRollOver=function() {

_root.kamera.toolzoom.gotoAndStop(1);

}

kamera.bsearch0.onRollOut=function() {

tugelmode();

}

Ketika mc "kamera.bsearch0" rollOver, custom mouse muncul utk menghilangkan ikon zoomin/out atau drag
saat rollout, tugelmode() utk mengembalikan mode yg aktif.
Setelah diklik akan muncul button search asli yakni "kamera.oksrc.bsrc". Jalankan fungsi cari(); saat diklik.
Ini pemisahan fungsi yang ada sebelumnya (jika kamu punya file yang lama).

kamera.oksrc.bsrc.onRelease = function() {
cari();
};
Berikut fungsi cari(); di layer "as search" juga:

function cari() {

_root.kamera.toolzoom.gotoAndStop(1);

_root.map["tanda"+i]._visible=false;//sembunyikan marker untuk pencarian berikutnya

_root.kamera.oksrc.warn._visible=false;

if (kamera.oksrc.input_txt.text != "") {

for (i=0; i<areamap.length; i++) {

if (areamap[i] == kamera.oksrc.input_txt.text.toLowerCase()) {

kamera.myinfo.text = "Found "+kamera.oksrc.input_txt.text;

_root.map["tanda"+i]._visible=true;

gesermap(map, 1); 

kamera.oksrc.input_txt.text="";

_root.kamera.garis._visible = false;

break;

} else {

kamera.myinfo.text = "No data";

} 

} //end for

} else {

kamera.myinfo.text = "Please type something";

} //end if else result

} //end cari

Fungsi cari() akan mengecek apakah input text berisi, jika berisi apakah isinya sama dengan salah satu elemen di "areamap". Jika iya, geser mapnya menuju lokasi di elemen urutan yang sama di array posisix dan posisiy dengan geserpmap(); Lalu munculkan marker (tanda) yang posisinya sudah kita atur melalui xml, kosongkan isi input text dan hilangkan mc "garis" optional. break. (artinya kalau sudah ketemu, loop dihentikan).

Ini fungsi gesermap() di layer yang sama.

function gesermap(mc, waktu)
{
type = mx.transitions.easing.Strong.easeOut;
geserx = new mx.transitions.Tween(mc, "_x", type, mc._x, posisix[i], waktu, true);
gesery = new mx.transitions.Tween(mc, "_y", type, mc._y, posisiy[i], waktu, true);
}
Done.
Jika ingin membuat fungsi cari(); juga dijalankan dengan menekan tombol Enter, masukkan kode ini di layer yang sama:

var keyListener:Object = new Object();
keyListener.onKeyDown = function() {
if(Key.isDown(Key.ENTER)) {
cari();
}
}
Key.addListener(keyListener);

Download Final FLA

Pengembangan XML dimulai pada tahun 1996 dan menjadi standar W3C sejak Februari 1998. Teknologi ini bukan merupakan barang baru. Sebelum XML sudah ada apa yang dinamakan SGML, yang dikembangkan pada awal tahun 80-an, menjadi standar ISO sejak 1986, dan digunakan secara luas untuk berbagai proyek dokumentasi berskala besar. Pengembangan HTML dimulai pada tahun 1990. Desainer XML mengambil bagian terbaik dari SGML, dan didukung pengalaman dengan HTML, menghasilkan sesuatu yang tidak kalah hebat dibandingkan SGML, namun jauh lebih umum dan lebih sederhana untuk digunakan. Sebagai tambahan, SGML lebih banyak digunakan untuk dokumentasi teknis dan jarang digunakan untuk data jenis lain, sementara XML sebaliknya.

XML merupakan singkatan dari Extensible Markup Language. Dari kepanjangan tersebut kita dapat melihat ada dua kata kunci, yaitu ‘Extensible’ dan ‘Markup’. Markup berarti bahasa ini berisi kode-kode instruksi yang harus diterjemahkan oleh suatu aplikasi lain untuk menjalankan proses eksekusi yang sesungguhnya. Dalam hal ini, aplikasi yang menterjemahkan bahasa markup adalah web browser. Hasil eksekusi ini biasanya adalah bagaimana menampilkan data ke layar monitor.

Extensible mengandung arti bahasa XML dapat kita perluas sendiri sehingga tag-tag atau kode-kode di dalamnya dapat kita definisikan sendiri. Keuntungan kita memiliki tag-tag sendiri adalah kita dapat mendefinisikan sendiri jenis dan fungsi data yang kita buat. Sehingga, jumlah jenis dan fungsi data yang kita miliki menjadi tak berhingga. Kemampuan inilah yang menjadi kekuatan utama XML, karena di era pertukaran informasi yang besar saat ini, kita sangat memerlukan definisi mengenai jenis dan fungsi data yang banyak.

Di samping itu, dengan bantuan bahasa stylesheet, pemrograman, atau scripting (Java, PHP, dan lain-lain), XML mampu memisahkan antara content dan layout dari suatu dokumen. Kemampuan ini memudahkan pengembangan aplikasi yang berbasis XML, karena data tidak bercampur dengan kode-kode untuk menampilkannya, seperti yang terjadi pada HTML. Hal ini menyebabkan tingkat skalabilitas aplikasi yang menggunakan XML menjadi tinggi.

XML juga merupakan bahasa yang non vendor specific, artinya tidak terikat oleh suatu pengembang perangkat lunak atau bahasa tertentu seperti Sun Microsystem, Microsoft, dan Oracle.

XML sendiri merupakan sebuah bahasa yang direkomendasikan oleh World Wide Web Consortium (W3C) pada tahun 1998. XML merupakan derivat dari SGML (Standard Generalized Markup Language), yang juga merupakan bahasa yang extensible, namun sangat kompleks. Spesifikasi SGML sendiri mencakup lebih dari 500 halaman.

XML adalah respon atas tantangan yang tidak mampu dijawab oleh HTML secara skalabilitas, integritas data, serta universalitas. Meskipun HTML dapat dikatakan universal untuk semua platform sistem operasi maupun browser, dia tidak dapat dipakai dalam platform non-PC, seperti PDA, handphone, dan peralatan bergerak lainnya. Sebaliknya, struktur XML memungkinkannya untuk menjadi bahasa markup yang universal, bahkan bisa diterapkan pada platform non-PC. Oleh karena sifat inilah, salah satu aplikasi yang paling banyak memanfaatkan keuntungan XML adalah aplikasi yang banyak melakukan pertukaran data, misalnya aplikasi B2B (Business to Business).

Integritas data dalam XML dapat diterangkan dengan membandingkan data yang dipertukarkan dari Database Management System (DBMS) dengan data yang dipertukarkan dari dan dalam format XML. Dalam DBMS, data hanya terintegrasi (terdefinisi tipe, struktur, dan relasinya) di dalam DBMS itu sendiri. Namun, ketika data tersebut dikirimkan, data menjadi tidak terintegrasi lagi. Untuk mengintegrasikannya kembali dibutuhkan suatu pemrograman khusus, yang tentu saja membutuhkan kerja ekstra. Faktor ini menghambat fleksibilitas sistem pertukaran data. Tingkat fleksibilitas menjadi semakin rendah bila terdapat banyak jenis DBMS dalam suatu jaringan pertukaran data.

Dengan XML, data terintegrasi kuat baik di dalam sistem penyimpanan data maupun setelah data tersebut dikirimkan. Kemampuan integrasi data ini membuat data XML bersifat siap digunakan, dan tidak dibutuhkan pemrograman tambahan untuk mengintegrasikannya kembali. Kemudian, karena sifat XML yang non vendor specific, maka dalam suatu jaringan pertukaran data, XML menjadi suatu wahana yang universal yang mampu menampung semua jenis informasi dalam suatu format yang seragam. Kemampuan ini membuat sistem yang mempertukaran data dalam format XML memiliki tingkat fleksibilitas yang tinggi.

Sebuah dokumen XML terdiri atas teks dan elemen. Elemen-elemen dalam dokumen XML dapat mengandung teks atau elemen lain. Elemen juga dapat mengandung atribut-atribut. Setiap dokumen XML harus memiliki sebuah pendeklarasian tipe dokumen yang diletakkan di posisi paling atas dokumen. Setiap dokumen juga harus memiliki sebuah elemen root yang mencakup semua teks dan elemen-elemen lain dalam dokumen. Semua elemen dalam dokumen XML harus dalam bentuk yang well-formed, artinya pendeklarasian elemen harus memiliki start tag dan end tag. Dokumen XML juga dapat memiliki deklarasi untuk menghubungkannya dengan XSL sebagai bahasa untuk menampilkan dokumen.