memiliki id 1 ke sebuah token dengan id 1. Hasilnya terlihat pada Gambar 22.
Gambar 22 Relasi from text to token.
I.2.4. Inisialisasi Input XML
Sewaktu page di-load, akan dibuat sebuah sistem rendering terlebih dahulu dengan
fungsi onload page. Proses ini dapat dilihat pada gambar 23.
Gambar 23 Proses me-load sistem rendering. Hal ini dilakukan untuk mempersiapkan
DIV HTML yang akan digunakan, yaitu DIV dengan id
“viewer”. Pada proses selanjutnya, akan dibuat sebuah canvas yang akan
melakukan rendering. Proses ini dapat dilihat pada Gambar 24.
Gambar 24 Proses menyiapkan canvas. Rendering bisa dilakukan dengan meng-
input string XML secara langsung ke text field atau melakukan pemanggilan file XML yang
telah tersimpan di server. Jika pemanggilan file XML dilakukan, proses yang terjadi
adalah request ke server untuk meminta isi dari file tersebut. Isi dari file XML tersebut
kemudian akan di-parsing sehingga menjadi string. Proses tersebut dapat dilihat pada
Gambar 25.
I.2.5 Parsing XML
String XML yang masuk, kemudian akan di parsing menggunakan DOM Parser.
Prosesnya dapat dilihat pada gambar 26. Gambar 25 Proses parsing file XML menjadi
string.
Gambar 26
Proses parsing
XML menggunakan
DOM parser.
Parsing yang pertama kali dilakukan adalah parsing pada tag
componenst
. Setiap komponen akan dibuatkan objek yang
sesuai dengan nama tag tersebut. Properti masing-masing
objek akan
disesuaikan dengan data dari XML. Proses parsing pada
tag
components
dapat dilihat pada gambar 27. Proses berikutnya adalah parsing tag
relation
untuk mendapatkan relasi dari setiap komponen. Inti dari proses parsing
pada tag
relation
ini adalah untuk mendapatkan informasi yang ada dalam tag
from
dan tag
to
dari setiap komponen sehingga dapat terlihat arah relasi. Proses
parsing untuk tag
from
dapat dilihat pada Gambar 28.
1 function init 2 {
3 Viewer = new dean.Viewer viewer;
4 }
1 this.canvas = new dean.ViewerCanvas;
2 this.canvas.setLeft0; 3 this.canvas.setTop0;
4 this.canvas.setWidth pasta.webgui.stage.getWidth;
5 this.canvas.setHeight pasta.webgui.stage.getHeight;
6 pasta.webgui.stage.addControl 1 parse : functionxml
2 { 3 this.canvas.parsetrimxml;
4 }, 5 load : functionfileName{
6 if window.XMLHttpRequest xhttp = new XMLHttpRequest;
7 else 8 xhttp = new ActiveXObject
Microsoft.XMLHTTP; 9 xhttp.open
GET, fileName, false; 10 xhttp.send;
11 var xml = xhttp.responseText;
12 this.parsexml; 13
},
1 parse : functionxml 2 {
3 this.clear; 4 if window.DOMParser
5 FireFox,Chrome,Safari,Opera 6
{ 7 parser = new DOMParser;
8 xmlDoc = parser.parseFromString xml,textxml;
9 } 10 else Internet Explorer
11 { 12 xmlDoc = new
ActiveXObject Microsoft.XMLDOM;
13
xmlDoc.async=false; 14
xmlDoc.loadXMLxml; 15 }
Gambar 27 Proses parsing pada tag
components
.
Gambar 28 Proses parsing pada tag
relationships
bagian tag
from
. Proses selanjutnya adalah melakukan
parsing pada tag
relationships
pada bagian tag
to
. Proses ini dapat dilihat pada Gambar 29.
I.2.6 Pembentukan dan Peletakan komponen
Setelah melakukan parsing pada dokumen XML,
didapatkan komponen-komponen
penyusun word graph yang akan ditampilkan ke canvas. Komponen tersebut kemudian
digambar berdasarkan tag. Gambar 29 Proses parsing pada tag
relationships
pada bagian tag
to
. Komponen yang dibuat pada proses ini
adalah focus, token, frame, relation, dan text. Contoh proses untuk membuat komponen
focus dapat dilihat pada Gambar 30.
Gambar 30 Proses pembuatan komponen focus.
Proses selanjutnya
adalah peletakan
komponen ke dalam canvas. Pertama, dihitung jumlah masing-masing komponen,
kemudian komponen tersebut akan digambar ke dalam canvas. Frame akan diletakkan
terakhir karena harus dideteksi terlebih dahulu komponen yang ada di dalamnya. Pada proses
selanjutnya,
setelah semua
komponen diletakkan
ke dalam
canvas, adalah
menggambar relation yang menyesuaikan dengan tag
from
dan tag
to
dari masing-masing komponen. Proses ini akan
menghasilkan gambar di canvas berupa sebuah pola word graph dari XML yang telah
di-input. Contoh XML yang di-input adalah XML untuk preposisi pola 1. Output yang
terjadi di canvas ditunjukkan oleh Gambar 31.
Gambar 31 Word graph untuk pola preposisi 1.
1 parsing components 2 var
comNode = xmlDoc.getElementsByTagName
components[0]; 3 if
comNode = null 4 {
5 var tokenCount = 0;
6 var focusCount = 0;
7 ... 8 switch node.tagName
9 { 10 case token :
11 ... 12 break;
13 case focus : 14 ...
15 break; 16 case text
17 ... 18 break
; 19 case relation
20 ... 21 break;
22 case frame 23 ...
24 break;
1 parsing relation 2 var relNode = xmlDoc.
getElementsByTagName relationships[0];
3 .. 4 tag =
this.getFirstTagfromNode; 5
6 switch tag.tagName 7 {
8 case textid : 9 ... break;
10 case tokenid : 11 ... break;
12 case focusid : 13 ... break;
14 case frameid : 15 ... break;
16
} 1 var toNode = this.getTag
node, to; 2
3 if toNode = null {
4 tag = this.getFirstTagtoNode switch tag.tagName
{ 5 case textid :
6 ... break; 7 case tokenid :
8 ... break; 9 case focusid :
10 ... break; 11 case frameid :
12 ...break;
}
1 init : function 2
{ 3
this._super; 4 this.setBorderColor666666;
this.canvas.style.background = urlimgdeanfocusBg.png
5 this.className = Focus; 6
},
I.2.7 Implementasi Antarmuka
Kategori