XSL ile açılır kutu doldurmak ve seçili index değiştiğinde verileri görüntülemek

Birazdan görecekleriniz hastanın bilgilerini taşıyan xml içindeki rapor bilgilerini açılır kutuda(select) göstermek ve seçili rapor değiştiğinde rapor bilgilerinin görüntülenmesi hakkındadır.


Önce select elemanını tanıyalım:

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Yukarıdaki örnekte araba markaları select içinde birer option elemanında saklanıyor. Option html elemanının value adında bir özelliği(attribute) bulunuyor. İçinde taşıdığı metin ise görüntülenen kısmıdır.

Bizim oluşturmak istediğimiz sonuç ise şu şekildedir:

<select id="selectRapor" name="selectRapor" onchange="raporDegis()">
 <option value="10523">10523</option>
 <option value="24778">24778</option>
 <option value="10523">10523</option>
 <option value="20523">20523</option>
 <option value="30523">30523</option>
 <option value="40523">40523</option>
</select>

Dikkat edeceğiniz gibi "onchange" eventi "raporDegis" fonksiyonuna bağlanmış. Eventler ile ilgili şu makalemi okuyabilirsiniz.

Değişken tanımlamak:

xsl:variable komutu ile raporNo adında bir değişken tanımlıyoruz.
Kodumuz içerisinde tanımladığımız değişkenimizi birden fazla yerde kullanabiliriz.
Tanımlamış olduğumuz değişkenimizin xsl etiketi iki özelliğe sahiptir.
Bunlar:"name" ve "select" özellikleridir.
Değişken tanımlamaları aşağıdaki üç farklı yöntem ile yapılabilir.

<xsl:variable name="raporNo" select="@no">
</xsl:variable>


<xsl:variable name="raporNo" select="@no"/>


<xsl:variable name="raporNo">
  <xsl:value-of select="@no" />
</xsl:variable>

xsl:element komutu ile option adında html elementi oluşturuyoruz.
xsl:attribute kullanarak da value adında bir attribute oluşturarak rapor numarası "raporNo" adındaki değişkenimizin "value" değerini çekiyoruz.

<xsl:element name="option">     
 <xsl:attribute name="value"> <xsl:value-of select="$raporNo"/> </xsl:attribute>      
 <xsl:value-of select="$raporNo"/>      
</xsl:element>

select option'un içinde value diye bir attribute olduğu için değişken ismimizin önüne $ işaretini getirerek rapor numaraları değerini çekiyoruz.
xsl:element attribute leri:

<xsl:element
name="name"
namespace="URI"
use-attribute-sets="namelist">

xsl:for-each ve select deyimleri:
Örnekte görüldüğü üzere for-each komutu ile döngü kurarak select ifadesi ile çektiğimiz raporların içerisinde dolaşıyoruz.

<xsl:for-each select="/hastalistesi/raporbilgileri/raporlar/rapor">
 <xsl:variable name="raporNo" select="@no" />     
   <xsl:element name="option">    
       <xsl:attribute name="value"> <xsl:value-of select="$raporNo"/> </xsl:attribute>      
              <xsl:value-of select="$raporNo"/>      
    </xsl:element>
</xsl:for-each>

Rapor numaralarına bağlı olarak değişmesini istediğimiz diğer veriler;

<div id="raporBilgileri">
    <div>RAPOR BİLGİLERİ</div>
        
        <b>RAPOR NUMARALARI</b>
  <span>
  <select id="selectRapor" name="selectRapor" onchange="raporDegis()">
    
  <xsl:for-each select="/hastalistesi/raporbilgileri/raporlar/rapor">        
   <xsl:variable name="raporNo" select="@no" />     
   <xsl:element name="option">     
    <xsl:attribute name="value"> <xsl:value-of select="$raporNo"/> </xsl:attribute>      
    <xsl:value-of select="$raporNo"/>      
   </xsl:element>
  </xsl:for-each>
  </select>
    
  </span>
              <br/>
    
  <b>RAPOR VEREN TESİS KODU</b>
        <span>
   <xsl:value-of select="hastalistesi/raporbilgileri/raporlar/rapor/@raporverentesiskodu"/>
  </span>
              <br/>
                    
     <b>VERİLİŞ TARİHİ</b>                
        <span><xsl:value-of select="hastalistesi/raporbilgileri/raporlar/rapor/tarihler/verilistarihi"/></span>
        <br/>
                
     <b>GEÇERLİLİK TARİHİ</b>                
        <span><xsl:value-of select="hastalistesi/raporbilgileri/raporlar/rapor/tarihler/gecerliliktarihi"/></span>
        <br/>
        <b>RAPOR SEANS SAYISI</b>                
        <span><xsl:value-of select="hastalistesi/raporbilgileri/raporlar/rapor/@raporseanssayisi"/></span>
    
</div>

JavaScript'te değişkenleri bildirmek için iki farklı yol kullanılabilir;

1)Sadece değer ataması yaparak. Örneğin, x = 35

2)var anahtar sözcüğüyle birlikte kullanarak. Örneğin, var x = 35
Biz burada Script içersinde global bir değişken dizi olarak raporlar dizisini yarattık.

div#raporbilgileri spanların içindeki elemanlar;


raporDegis adında bir fonksiyon tanımladık.
for döngüsü kullanrak raporların uzunluğu kadar döngüyü devam ettirdik.

<script language="JavaScript">
<xsl:comment>
function raporDegis(){
 var selectedVal = selectRapor.options[selectRapor.selectedIndex].value;

 for(var i=0; i < raporlar.length; i++)
 {
  console.log(raporlar[i].no);
  // Burada seçilen rapor numarasının değerinin döngü içerisindeki rapor numarası ile eşleşmesi
  // durumunda rapor numarasına bağlı olarak diğer rapor bilgilerinin değişmesi için tanımla yaptık.
  //bu bilgileri jquery'e sardık.
  //jguery ile neslelerimize farklı özellikler kazandırabiliriz.
  if(raporlar[i].no == selectedVal){   
   $("div#raporbilgileri span").get(1).innerHTML = raporlar[i].raporverentesiskodu;
   $("div#raporbilgileri span").get(2).innerHTML = raporlar[i].tarihler.verilistarihi;
   $("div#raporbilgileri span").get(3).innerHTML = raporlar[i].tarihler.gecerliliktarihi;
   $("div#raporbilgileri span").get(4).innerHTML = raporlar[i].raporseanssayisi;
  }
 }
}
</xsl:comment>
</script>

XML'imiz;

<raporbilgileri>
     <raporlar>
     
  <rapor no="10523" raporverentesiskodu="11340040" raporseanssayisi="3">   
   <tarihler>
    <verilistarihi>03.07.2008</verilistarihi>
    <gecerliliktarihi>03.07.2030</gecerliliktarihi>
   </tarihler>
  </rapor>
     <rapor no="24778" raporverentesiskodu="11535040" raporseanssayisi="3">
   <tarihler>
    <verilistarihi>03.07.2006</verilistarihi>
    <gecerliliktarihi>03.07.2028</gecerliliktarihi>
   </tarihler>
  </rapor>
     <rapor no="10523" raporverentesiskodu="12140414" raporseanssayisi="3">
   <tarihler>
    <verilistarihi>03.07.2004</verilistarihi>
    <gecerliliktarihi>03.07.2026</gecerliliktarihi>
   </tarihler>
  </rapor>
  <rapor no="20523" raporverentesiskodu="12431536" raporseanssayisi="3">
   <tarihler>
    <verilistarihi>03.07.2002</verilistarihi>
    <gecerliliktarihi>03.07.2024</gecerliliktarihi>
   </tarihler>
  </rapor>
     <rapor no="30523" raporverentesiskodu="12525018" raporseanssayisi="3">
   <tarihler>
    <verilistarihi>03.07.2000</verilistarihi>
    <gecerliliktarihi>03.07.2022</gecerliliktarihi>
   </tarihler>
  </rapor>
     <rapor no="40523" raporverentesiskodu="11247787" raporseanssayisi="3">
   <tarihler>
    <verilistarihi>03.07.1998</verilistarihi>
    <gecerliliktarihi>03.07.2020</gecerliliktarihi>
   </tarihler>
  </rapor>
     </raporlar>
        
</raporbilgileri>

xsl:

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">


<xsl:template name="ggg">

<xsl:for-each select="/hastalistesi/raporbilgileri/raporlar/rapor/*">
 <xsl:value-of select="/raporverentesiskodu"/>
</xsl:for-each>
</xsl:template>

<xsl:template match="/">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="jquery-ui.css" />
<script src="jquery-1.9.1.js"></script>
<script src="jquery-ui.js"></script>
<script language="JavaScript">
 // Global bir değişken dizi olarak raporlar dizisini yarattık
 var raporlar = new Array();
 
 <xsl:for-each select="/hastalistesi/raporbilgileri/raporlar/rapor">
    
  raporlar[<xsl:value-of select="position()-1"/>] = {
   'no' : '<xsl:value-of select="@no" />',
   'raporverentesiskodu' : '<xsl:value-of select="@raporverentesiskodu" />',
   'raporseanssayisi' : '<xsl:value-of select="@raporseanssayisi" />',
   'tarihler': {
    'verilistarihi':'<xsl:value-of select="tarihler/verilistarihi" />',
    'gecerliliktarihi':'<xsl:value-of select="tarihler/gecerliliktarihi" />',
   }
  }
 </xsl:for-each>
</script>

<script language="JavaScript">
<xsl:comment>
function raporDegis(){
 var selectedVal = selectRapor.options[selectRapor.selectedIndex].value;

 for(var i=0; i < raporlar.length; i++)
 {
  console.log(raporlar[i].no);
  if(raporlar[i].no == selectedVal){   
   $("div#raporbilgileri span").get(1).innerHTML = raporlar[i].raporverentesiskodu;
   $("div#raporbilgileri span").get(2).innerHTML = raporlar[i].tarihler.verilistarihi;
   $("div#raporbilgileri span").get(3).innerHTML = raporlar[i].tarihler.gecerliliktarihi;
   $("div#raporbilgileri span").get(4).innerHTML = raporlar[i].raporseanssayisi;
  }
 }
}
</xsl:comment>
</script>
</head>
<body>

<div id="raporBilgileri">
                <div>RAPOR BİLGİLERİ</div>
        
                <b>RAPOR NUMARALARI</b>
    <span>
    <select id="selectRapor" name="selectRapor" onchange="raporDegis()">
    
    <xsl:for-each select="/hastalistesi/raporbilgileri/raporlar/rapor">        
     <xsl:variable name="raporNo" select="@no" />     
     <xsl:element name="option">     
      <xsl:attribute name="value"> <xsl:value-of select="$raporNo"/> </xsl:attribute>      
      <xsl:value-of select="$raporNo"/>      
     </xsl:element>
    </xsl:for-each>
    </select>
    
    </span>
                <br/>
    
       <b>RAPOR VEREN TESİS KODU</b>
                <span>
     <xsl:value-of select="hastalistesi/raporbilgileri/raporlar/rapor/@raporverentesiskodu"/>
     
     </span>
                <br/>
                    
       <b>VERİLİŞ TARİHİ</b>                
                <span><xsl:value-of select="hastalistesi/raporbilgileri/raporlar/rapor/tarihler/verilistarihi"/></span>
                <br/>
                
    <b>GEÇERLİLİK TARİHİ</b>                
                <span><xsl:value-of select="hastalistesi/raporbilgileri/raporlar/rapor/tarihler/gecerliliktarihi"/></span>
                <br/>
                <b>RAPOR SEANS SAYISI</b>                
                <span><xsl:value-of select="hastalistesi/raporbilgileri/raporlar/rapor/@raporseanssayisi"/></span>
    
</div>
</body>
 </html>
 </xsl:template>
</xsl:stylesheet>

XSL KOMUT ÖRNEKLERİ

Döngü:Gerçekleşmesini istediğimiz eylemlerin tekrar etmesi durumunda kullanılır.
xsl:for-each:Tüm xml elemanlarının içeriğini döngü yaparak almamızı sağlar.
xsl:element:Veri bloklarını (düğümlerini) oluşturur.
attribute:Öznitelik-Nitelik-Bağlamak

Örnek_1
Eğer xml attribute içeriyor ise xsl'de bulunan değerleri aşağıdaki gibi alıyoruz.

<xsl:attribute name="value">

<xsl:value-of select="@no"/></xsl:attribute>

xml



xsl

 script

Örnek_2
xml

xsl

Ekan çıktısı

HTML DOM Events

Event:Etkinlik-Olay-Faaliyet
Trigger:Tetikleme

Mouse (fare) Events (Olayları):

onclick:Öğenin üzerine fare ile tıklandığında olay gerçekleşir.
ondbclick:Öğenin üzerine fare ile çift tıklandığında olay gerçekleşir.
onmousedown:Öğenin üzerine fare ile basılı tutulduğunda olay gerçekleşir.
onmousemove:Öğenin üzerinde iken fare hareketli olduğunda olay gerçekleşir.
onmouseover:Fare öğenin üzerine taşındığında olay gerçekleşir.
onmouseout:Fare ögenin dışına taşındığında olay gerçekleşir.
onmouseup:Öğenin üzerinde fare düğmesi serbest bırakıldığında olay gerçekleşir.

Keyboard (Klavye) Events (Olayları):

onkeydown:Kullanıcı Klavyede bir tuşu basılı tuttuğunda olay gerçekleşir.
onkeypress:Kullanıcı Klavyede bir tuşa bastığında olay gerçekleşir.
onkeyup:Kullanıcı Klavyede  basılı tuttuğu bir tuşu bıraktığında olay gerçekleşir.

Form Events (Olayları):

onblur:onblur olayı ilgili elementin içinden çıkılarak, odaklanmasını (focus) kaybettiği zaman tetiklenir.
onchance:onchance olayı ilgili elementin değeri değiştiği zaman tetiklenir.
onfocus:onfocus ilgili elementin içine girilerek odaklanıldığı (focus) zaman tetiklenir.
onreset:onreset olayı kullanıcı bir formu sıfırladığı (reset) zaman tetiklenir.
onselect:onselect olayı bir elementi seçtiği zaman tetiklenir.
onsubmit:onsubmit olayı kullanıcı sayfadaki bir formu gönderdiği zaman gerçekleşir.