Data XML dapat diubah menjadi HTML menggunakan stylesheet XSL sederhana. Seiring dengan perkembangan spesifikasi XML, tampaknya perlu untuk memenuhi kebutuhan semua orang dalam versi baru, sayangnya, membuat transformasi sederhana selalu mengganggu spesifikasi;
Misalkan saya memiliki data XML yang mewakili konten suatu halaman, dan sekarang saya ingin mengubah kontennya menjadi tata letak. Berikut XML yang ingin saya konversi:
<?xml version='1.0'?>
<?xml-stylesheet type="teks/xsl" href="artikel.xsl"?>
<xml>
<folder>
<folder>
<teks>Folder 1</teks>
<file>
<berkas>
<teks>File 1</teks>
<bidang>
<bidang>
<data>
<tipe>string</tipe>
<panjang>50</panjang>
<value>beberapa data</value>
</data>
</bidang>
</bidang>
</file>
</file>
</folder>
</folder>
</xml>
Konten ini mewakili sekumpulan folder, file, dan bidang. Setiap folder berisi file, dan setiap file berisi kolom untuk memasukkan data. Setiap folder dalam grup folder akan diwakili oleh elemen TR dan elemen TD di baris pertama TABLE. Setiap file dalam grup file akan direpresentasikan sebagai elemen TR dan elemen TD pada baris pertama elemen TABLE yang bersarang di dalam folder elemen TR. Setiap domain di grup domain akan muncul sebagai INPUT di file terkait.
Untuk mengimplementasikan ide ini, kita perlu melintasi XML dan membuat tabel berdasarkan XSL.
Berikut adalah XSL yang digunakan untuk transformasi ini:
<?xml version="1.0"?>
<xsl:lembar gaya
xmlns:xsl=" http://www.w3.org/1999/XSL/Transform " version="1.0"
xmlns:msxsl="urn:schemas-microsoft-com:xslt"
xmlns:fn=" http://www.perusahaansaya.com/mynamespace ">
<xsl:metode keluaran="html"/>
<msxsl:script bahasa="JScript" implementasi-prefix="fn">
function getElementCount(daftar node, apa) {
varrtrn = 0;
rtrn = nodelist[0].parentNode.selectNodes(apa).panjang;
return (rtrn + 1); //1 ditambahkan untuk pengisi TD
}
</msxsl:script>
<xsl:template match="/">
<TABEL CELLSPACING="0" CELLPADDING="0"
LEBAR="100%" BORDER="0" ID="tblRoot" NAMA="tblRoot"
style="tata letak-tabel:tetap;">
<TR>
<xsl:untuk setiap pilih="xml/folder/folder">
<xsl:nama elemen="TD">
<xsl:attribute name="style">lebar:55px</xsl:attribute>
<xsl:nilai-dari pilih="teks"/>
</xsl:elemen>
</xsl:untuk masing-masing>
<TD> </TD>
</TR>
<xsl:untuk setiap pilih="xml/folders/folder">
<TR>
<xsl:nama elemen="TD">
<xsl: nama atribut = "colspan">
<xsl:value-of select="fn:getElementCount(., 'folder')"/>
</xsl:atribut>
<TABEL CELLSPACING="0" CELLPADDING="0"
WIDTH="100%" BORDER="0" style="tata letak-tabel:tetap;">
<TR>
<xsl:untuk setiap pilih="file/file">
<xsl:nama elemen="TD">
<xsl:attribute name="style">lebar:55px;</xsl:attribute>
<xsl:nilai-dari pilih="teks"/>
</xsl:elemen>
</xsl:untuk masing-masing>
<TD> </TD>
</TR>
<xsl:untuk setiap pilih="file/file">
<TR>
<xsl:nama elemen="TD">
<xsl: nama atribut = "colspan">
<xsl:value-of select="fn:getElementCount(., 'file')"/>
</xsl:atribut>
<xsl:untuk setiap pilih="bidang/bidang">
<xsl:nama elemen="MASUKAN">
<xsl:attribute name="type">teks</xsl:attribute>
<xsl: nama atribut = "panjang maksimal">
<xsl:nilai-dari pilih="data/panjang"/>
</xsl:atribut>
<xsl: nama atribut = "nilai">
<xsl:nilai-dari pilih="data/nilai"/>
</xsl:atribut>
</xsl:elemen><BR/>
</xsl:untuk setiap>
</xsl:elemen>
</TR>
</xsl:untuk masing-masing>
</TABEL>
</xsl:elemen>
</TR>
</xsl:untuk masing-masing>
</TABEL>
</xsl:templat>
</xsl:lembar gaya>
Dalam tag stylesheet, kami menyiapkan beberapa namespace, termasuk namespace xsl yang mendefinisikan semua tag transformasi xsl. namespace msxml yang memungkinkan kita membuat fungsi pengguna yang dapat digunakan dalam stylesheet. Saya menggunakan ini untuk mendapatkan semua elemen anak untuk mendapatkan set atribut COLSPAN untuk tag TD. Namespace fn digunakan untuk menggabungkan serangkaian fungsi yang ditentukan pengguna yang dibuat oleh elemen msxml:script.
Kemudian, kita membuat TABLE bagian luar dan TR pertama. Di TR, saya membuat TD untuk setiap folder yang ditentukan dalam XML. Saya menggunakan tag xsl:element karena memungkinkan saya menambahkan atribut khusus atau menjalankan fungsi untuk menyetel properti untuk atribut COLSPAN di elemen TD lainnya.
Setelah membuat TD yang diperlukan untuk setiap folder, saya mulai membuat TR untuk setiap folder. Saya hanya menambahkan satu TD ke TR ini, tetapi saya menetapkan atribut COLSPAN-nya sama dengan jumlah tag folder di grup folder ditambah satu. Yang tambahan digunakan untuk mengisi ruang dalam TABLE tata letak tetap.
Untuk mendapatkan COLSPAN, saya meneruskan konteks saat ini (ditentukan di sini dengan ".") dan nama node yang ingin saya hitung. Dalam fungsi saya, saya mendapatkan konteks saat ini, paraentNode, dan jumlah node yang ditentukan dalam kueri XPath. Fungsi tersebut kemudian mengembalikan jumlah ini ditambah satu untuk mengisi TD.
Dengan TD ini, saya menyematkan TABLE lain di dalamnya yang berisi setiap file dalam grup file. Mulai saat ini, prosesnya sama dengan konversi TABLE eksternal. Langkah terakhir adalah menambahkan field di setiap file. Kali ini saya tidak membuat TABEL yang disematkan, saya hanya menambahkan kolom ke TD saat ini.
Setelah saya menyelesaikan tata letak umum, saya dapat mulai menambahkan fitur antarmuka pengguna, seperti menyembunyikan folder dan baris file lain hingga pengguna mengklik tab yang relevan. Fungsionalitas ini dapat dicapai dengan menulis skrip yang mendukung fungsi ini, menambahkan elemen onclick xsl:attribute ke elemen TD folder dan file, dan kemudian mengatur nilainya ke nama fungsi skrip.
Terakhir, setelah fungsionalitas umum selesai, Anda dapat menambahkan kelas xsl:attributes dan menambahkan classNames yang relevan di STYLE atau CSS untuk mendapatkan tampilan yang Anda inginkan.
Contoh ini menciptakan dasar untuk tampilan File-Folder-Field yang digunakan dalam menyebarkan solusi data Web. Kunjungi MSDN untuk mengetahui lebih lanjut tentang spesifikasi XML Microsoft.