XML 2. bolum:

  1. XML dokumanlarini CSS kullanarak goruntulemek:

Ilk yazdigimiz CSS ornegini hatirlayalim:

BOOK

{display:block;

margin-top:12pt;

font-size:10pt}


TITLE

{font-style:italic}


AUTHOR

{font-weight:bold}


Hatirlarsaniz bu ornek ilk Inventory.xml dosyamizi bicimlendirmek icin yazilmisti. (www.shedai.net/ics344/xml/).

Ve yazdigimiz css dosyalarinin xml dokumani tarafindan okunmasi icin:

<?xml-stylesheet type=”text/css” href=”Inventory.css”?>

satirini xml dokumanimiza eklememiz gerekiyordu.

O zamanlar css hakkinda sadece bu kadar bilgiyi verip gecmistik, simdi daha fazla detaya girelim:

CSS, buyuk/kucuk harflere karsi duyarsizdir. Yani:

Book{diplay:block;} satiri ile

BOOK{DISPLAY:bLOCK;} satirlari ayni anlama gelir.

Peki CSS kullanrak neler yapabiliriz?

Mesela birden fazla xml komutuna tek bir css komutu ile bicimleme yapmamiz mumkun.

BASLIK,YAZAR,CIZER{diplay:block;margin-bottom:12pt}

gibi. Burada 3 ayri xml komutuna tek bir css komutuyla atama yapildi.

Hatta daha da ileri gidip bir xml komutunun birden fazla css komutu icinde gecmesini bile saglayabilirsiniz:

BASLIK,YAZAR,CIZER{display:block;margin-bottom:12pt}

YAZAR{font-style:italic}

yani YAZAR xml komutu hem block, hemde italic olacak.

Kosullu bicimlemelerimiz varsa ne yapacagiz?

Bazi durumlarda bicimlemelerimize sart koymak isteyebiliriz. Mesela Book xml komutunun icindeki authorlari bold, disindaki authorlari ise italic yapsin istiyoruz.

BOOK AUTHOR{font-weight:bold}

AUTHOR{font-style:italic}

seklinde bir css yazarsak ve css'in etkiledigi xml komutlari arasinda virgul yoksa:

<inventory>

<book>

<author>ali</author>

</book>

<author>veli</author>

</inventory>

xml dosyasindaki ali, bold, veli ise italic yazilir.

CSS komutlarinin tam listesi, yardimci programlar ve version ozellikleri icin:

http://www.w3.org/Style/CSS/

adresine basvurabilirsiniz.




  1. XML'e donus:

Biz yine xml konularimiza donup bir html sayfasi ile xml dokumanini nasil baglayabilecegimize bakalim:

DSO: Data Shared Object

xml dokumanlari aslinda birer DSOdur. Yani ufak birer databasedirler.HTML dokumanlarinin ise bu DSO'lari kullanmasi mumkundur. Bir html dokumaninin icine:

<XML ID=”dsoBook” SRC=”http://www.shedai.net/documents/Book.xml”>

</XML>

seklinde bir satir eklerseniz, bu xml dokumanina html komutlariyla erisiminiz mumkun olur.

Database konularindan bilindigi uzere: Her tablonun alanlari vardir. Ve her kayit bu tablodaki alanlari doldurur. Mesela: calisan tablosu:

ISIM

SOYISIM

BOLUM

Ali

Gelir

14

Selami

Gider

-

Veli

Bakar

10


Seklindeki bir tabloda, ISIM, SOYISIM, BOLUM gibi bilgiler birer alandir. [ali,gelir,14],[selami,gider,-] gibi bilgilerde kayittir.

XML dokumaninin database gibi kullanilmasina gelince, her xml dokumani bir tablo, her yeni komut bit kayit, ve her komutun alt komutu da birer alandir. Yani yukaridaki tabloyu xml'e uyarlarsak:

<calisan>

<eleman>

<isim>ali</isim>

<soyisim>gelir</soyisim>

<bolum>14</bolum>

</eleman>

<eleman>

<isim>Selami</isim>

<soyisim>Gider</soyisim>

</eleman>

<eleman>

<isim>Veli</isim>

<soyisim>Bakar</soyisim>

<bolum>10</bolum>

</eleman>

</calisan>

seklinde bir xml dokumani elde ederiz.

Peki bir html komutunu, bir xml komutuna nasil baglariz?

Iki turlu baglamamiz mumkun.

  1. Tablo bazli baglama

  2. Kayit bazli baglama


Once tablo baglamaya bakalim. Simdi bizim mesur inventory.xml dosyasi icin bir html olusturalim.


<!-- File Name: Inventory Table.htm -->

<HTML>

<HEAD>

<TITLE>Book Inventory</TITLE>

</HEAD>

<BODY>

<XML ID="dsoInventory" SRC="Inventory.xml"></XML>

<H2>Book Inventory</H2>

<TABLE DATASRC="#dsoInventory" BORDER="1" CELLPADDING="5">

<THEAD>

<TH>Title</TH>

<TH>Author</TH>

<TH>Binding</TH>

<TH>Pages</TH>

<TH>Price</TH>

</THEAD>

<TR ALIGN="center">

<TD><SPAN DATAFLD="TITLE"

STYLE="font-style:italic"></SPAN></TD>

<TD><SPAN DATAFLD="AUTHOR"></SPAN></TD>

<TD><SPAN DATAFLD="BINDING"></SPAN></TD>

<TD><SPAN DATAFLD="PAGES"></SPAN></TD>

<TD><SPAN DATAFLD="PRICE"></SPAN></TD>

</TR>

</TABLE>

</BODY>

</HTML>

Bu kodun calisan hali asagidadir:


Buradaki en onemli satir:

<TABLE DATASRC="#dsoInventory" ...

satiridir. Bu satirla, table komutumuzun bilgileri #dsoInventory'den okumasi gerektigini soyluyoruz. (ki #dsoInventory daha oncede belirttigimiz gibi <XML ID="dsoInventory" SRC="Inventory.xml"></XML> satiriyla tanimlanmis bir xml kaynagidir.)

Peki html bu alanlardan hangisini table'in hangi bolmesine yazacagini nasil anliyor?

Iste bunu yapanda <TD><SPAN DATAFLD="AUTHOR"></SPAN></TD> seklindeki satirlar.

  1. Biraz daha HTML baglantisi

Simdi bu xml, html baglantisini bir adim daha ileri goturerek, asagidaki goruntuyu elde etmeye calisalim:







Yukaridaki goruntuyu elde etmek icin, ONCLICK ozellikleri ve DATAPAGESIZE="5" gibi yeni komutlari iceren asagidaki kodu yazmamiz gerekiyor.

<HTML>

<BODY>

<XML ID="dsoInventory" SRC="Inventory Big.xml"></XML>

<H2>Book Inventory</H2>

<BUTTON ONCLICK="InventoryTable.firstPage()">

|&lt; First Page

</BUTTON>

&nbsp;&nbsp;

<BUTTON ONCLICK="InventoryTable.previousPage()">

&lt; Previous Page

</BUTTON>

&nbsp;&nbsp;

<BUTTON ONCLICK="InventoryTable.nextPage()">

Next Page &gt;

</BUTTON>

&nbsp;&nbsp;

<BUTTON ONCLICK="InventoryTable.lastPage()">

Last Page &gt;|

</BUTTON>

<p>

<TABLE ID="InventoryTable" DATASRC="#dsoInventory"

DATAPAGESIZE="5" BORDER="1" CELLPADDING="5">

<THEAD>

<TH>Title</TH>

<TH>Author</TH>

<TH>Binding</TH>

<TH>Pages</TH>

<TH>Price</TH>

</THEAD>

<TR ALIGN="center">

<TD><SPAN DATAFLD="TITLE"

STYLE="font-style:italic"></SPAN></TD>

<TD><SPAN DATAFLD="AUTHOR"></SPAN></TD>

<TD><SPAN DATAFLD="BINDING"></SPAN></TD>

<TD><SPAN DATAFLD="PAGES"></SPAN></TD>

<TD><SPAN DATAFLD="PRICE"></SPAN></TD>

</TR>

</TABLE></BODY></HTML>






JavaScript kullanarak XML uzerinde arama yapmak:

<XML ID="dsoInventory" SRC="Inventory Big.xml"></XML>

<H2>Find a Book</H2>

Title text: <INPUT TYPE="TEXT" ID="SearchText">&nbsp

<BUTTON ONCLICK='FindBooks()'>Search</BUTTON>

<HR>

Results:<P>

<DIV ID=ResultDiv></DIV>

<SCRIPT LANGUAGE="JavaScript">

function FindBooks ()

{

SearchString = SearchText.value.toUpperCase();

if (SearchString == "")

{

ResultDiv.innerHTML = "&ltYou must enter text into "

+ "'Title text' box.&gt";

return;

}

dsoInventory.recordset.moveFirst();

ResultHTML = "";

while (!dsoInventory.recordset.EOF)

{

TitleString = dsoInventory.recordset("TITLE").value;


if (TitleString.toUpperCase().indexOf(SearchString)

>=0)

ResultHTML += "<I>"

+ dsoInventory.recordset("TITLE")

+ "</I>, "

+ "<B>"

+ dsoInventory.recordset("AUTHOR")

+ "</B>, "

+ dsoInventory.recordset("BINDING")

+ ", "

+ dsoInventory.recordset("PAGES")

+ " pages, "

+ dsoInventory.recordset("PRICE")

+ "<P>";

dsoInventory.recordset.moveNext();

}

if (ResultHTML == "")

ResultDiv.innerHTML = "&ltno books found&gt";

else

ResultDiv.innerHTML = ResultHTML;

}

</SCRIPT>


  1. DOM ve XML

Gercek amacimiz, Javada DOM kullanarak XML sayfalarini parse etmek. Ancak javaya baslamadan once, baslamisken XML dokumanlarini nasil JavaScript ve dom yardimiyla kullaniriz bir bakalim.

Bir html sayfasina DSO eklemeyi yukaridaki orneklerde gosterdik. Simdi asagidaki ornek html kodunu inceleyelim.

<SCRIPT LANGUAGE="JavaScript" FOR="window" EVENT="ONLOAD">

Document = dsoBook.XMLDocument;

title.innerText=

Document.documentElement.childNodes(0).text;

author.innerText=

Document.documentElement.childNodes(1).text;

binding.innerText=

Document.documentElement.childNodes(2).text;

pages.innerText=

Document.documentElement.childNodes(3).text;

price.innerText=

Document.documentElement.childNodes(4).text;

</SCRIPT>

Yukaridaki kod, JavaScript ile DOM parser'ini kullanarak, XML dokumanina erisiyor. DOM, xml dokumanlarini parcalarken agac yapisina benzer bir yapi kullanir. Ve her yeni xml komutu (database mantigina gore kayidi) birer childNode olur.


Ornegin yukaridaki sekilde her bir book ogesi documentElement'in birer childNode'udur. Ve her book ogesininde beser adet childNode'u vardir.


DOM hakkinda daha fazla bilgi icin:

http://www.w3.org/TR/REC-DOM-Level-1

adresine basvurabilirsiniz.