המאמר הבא מציג שימוש ב XML וXSL לצורך הצגת נתונים ומיונם בטבלה. אני מביא דוגמא זו כדי להמחיש את היתרון בשילוב של עבודה בצד לקוח למיון של מידע מבלי לגשת שוב לשרת. שימו לב למהירות התגובה המדהימה והפשטות של הקוד.
בדוגמא זו אני ממחיש כיצד ניתן גם לעבוד עם XSL בצורה גנרית מבלי להתחשב כמעט בתוכן הנתונים אלא במבנה שלהם, הסבר בהמשך.
ראשית נראה את מבנה ה-XML <![CDATA[<?xml version="1.0" ?>
<catalog>
<cd>
<title link="http://localHost">Empire Burlesque</title>
<artist>Bob Dylan</artist>
<country>USA</country>
<company>Columbia</company>
<price>10.90</price>
<year>1985</year>
</cd>
<cd>
<title link="http://localHost">Hide your heart</title>
<artist>Bonnie Tyler</artist>
<country>UK</country>
<company>CBS Records</company>
<price>9.90</price>
<year>1988</year>
</cd>
.
.
.
</catalog>
]]>
הסבר
CATALOG מהוה שורש המסמך והוא מופיע רק פעם אחת (משול לשם טבלה).
CD הוא הרשומה שלי והיא תופיע כמספר השורות שאני רוצה בטבלה.
הבנים של CD הם השדות ולמעשה בפתרון ה גנרי שאני מדגים כאן לא משנה כמה יהיו כאלה ואיך
נקרא להם. אתם יכולים לשים כמה עמודות/שדות שאתם רוצים הXSL יודע לטפל בהם. מה שחשוב הוא
ששם השדה יהיה שם הכותרת של הטבלה ואם השם מורכב מכמה מילים אז יש להפריד ביניהם ב _ כדי שהמסמך יהיה חוקי. ב XSL אנחנו כבר נטפל בתצוגה.
ה-XSL<![CDATA[<?xml version="1.0" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:script language="JavaScript"><![CDATA[
function getTableHeader(oNode) {
var strNodeName;
strNodeName = oNode.baseName.replace(/_/g," ");
return strNodeName;
}
]]]]><![CDATA[></xsl:script>
<xsl:template match="/">
<table border="1" bordercolor="black" cellpadding="2" cellspacing="0">
<tr bgcolor="#d6e7ff">
<xsl:apply-templates select="/*/*/*" />
</tr>
<xsl:apply-templates select="/*/*" order-by="$orderBy" />
</table>
</xsl:template>
<xsl:template match="/*/*/*">
<xsl:if expr="childNumber(this.parentNode)==1">
<xsl:for-each select=".">
<th>
<img src="sortup.gif">
<xsl:attribute name="onclick">
orderTable(<xsl:eval>this.baseName</xsl:eval>,true)
</xsl:attribute>
<xsl:eval>getTableHeader(this)</xsl:eval>
<img src="sortdown.gif">
<xsl:attribute name="onclick">
orderTable(<xsl:eval>this.baseName</xsl:eval>,false)
</xsl:attribute>
</th>
</xsl:for-each>
</xsl:if>
</xsl:template>
<xsl:template match="/*/*">
<tr>
<xsl:for-each select="*">
<td>
<xsl:if test=".[@link]">
<a>
<xsl:attribute name="href">
<xsl:value-of select="@link" />
</xsl:attribute>
</a>
</xsl:if>
<xsl:value-of select="." />
</td>
</xsl:for-each>
</tr>
</xsl:template>
</xsl:stylesheet>
]]>
הסבר
קובץ XSL הוא למעשה קובץ XML לכל דבר לכן אנו פותחים עם : <![CDATA[<?xml version="1.0" ?>
]]>מיד אחר כך אנו מגדירים שזהו XSL <![CDATA[<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/TR/WD-xsl">
]]>הקטע הבא הוא קטע סקריפט כתוב ב JS שמחזיר לנו כל צומת שאנחנו שולחים אליו מופרד ברווחים במקום _ כדי ליצור את הכותרות של הטבלה. בהמשך נראה איך קוראים לפונקציה...
חשוב לזכור את הפתיחה של כדי שהמסמך ידע להתמודד עם הסקריפט.
מסמך XSL בנוי מטמפלטים שכל אחד מהם מתייחס לחלק אחר בהיררכיה של הXML. כאן אני עושה שימוש בשלושה טמפלטים.
לניווט בהיררכיה קוראים XPATH על שם ה .PATH –
הטמפלט הראשון הוא : <![CDATA[<xsl:template match="/">
]]>הוא פונה לשורש של המסמך הXML במקרה שלנו CATALOG בו אנו מגדירים טבלה רגילה וTR אחד לשורת הכותרת בתוך הTR נרצה TH כמספר הילדים של CD זוכרים!
כדי ליצר את הTH נעשה זאת בטמפלט נפרד שמהטמפלט שלנו אנחנו קוראים לו: <![CDATA[<xsl:apply-templates select="/*/*/*" />
]]>שימו לב זה כמו קריאה לסאב.
הטמפלט שמיצר את ה TH הוא : <![CDATA[<xsl:template match="/*/*/*">
]]>כאן אנחנו רואים את הגנריות בפעם הראשונה במקום להשתמש בשמות הצמתים NODE של ה XML קרי TITLE /CD / CATALOGוכך הלאה אני משתמש ב* שזה אומר הכל...
במיקום שבהיררכיה. וזאת מכיוון שאני לא רוצה להיות תלוי המספר או בשם הצמתים, אלא רק במבנה הכללי של המסמך.
חשוב לזכור כי הטמפלט הוא סוג של לולאה שמבצעת את עצמה על כל הצמתים שבהיררכיה.
השלב הבא הוא שימוש בתנאי: <![CDATA[<xsl:if expr="childNumber(this.parentNode)==1">
]]>בו אני מבקש לבצע את הפעולה רק במקרה והצומת היא הראשונה אני בודק את זה על רמה מעל בגלל זה ה this.parentNode
עכשיו אני רושם את ה TH בתוכו נשים תמונה של חץ שה EVENT שלו ONCLICK הוא דינאמי ולכן אנו משתמשים ב: <![CDATA[<xsl:attribute name="onclick">orderTable(<xsl:eval>this.baseName</xsl:eval>,true)</xsl:attribute>
]]>this.baseName נותן לנו את שם ה NODE עליו אנו נמצאים. <![CDATA[<xsl:eval>getTableHeader(this)</xsl:eval>
]]>זו הקריאה לפונקציה שהגדרנו קודם לכן.
הטמפלט השלישי גם לו אנו קוראים מהראשון בונה את כל השורות בטבלה. בתוכו אנו בונים לולאה של for-each על כל האייטמים (*) כדי לבנות את ה TD.
כאן גם הוספתי תנאי שבודק אם לצומת יש ) ATTRIBUTEסגולה / תכונה) בשם LINK ואז אני יכול להוסיף קישור על השדה. גישה ל ATTRIBUTE היא באמצעות @.
הנה הקוד:
<![CDATA[<xsl:template match="/*/*">
<tr>
<xsl:for-each select="*">
<td>
<xsl:if test=".[@link]">
<a>
<xsl:attribute name="href">
<xsl:value-of select="@link" />
</xsl:attribute>
</a>
</xsl:if>
<xsl:value-of select="." />
</td>
</xsl:for-each>
</tr>
</xsl:template>
]]>זהו ה-XSL עכשיו נראה את הדברים החשובים ב-HTML :
הנה פונקציות שעושות את עיקר העבודה: <![CDATA[function onPageLoad() {
var nodeForSort;
//load the xml
xmldoc = new ActiveXObject("Microsoft.XMLDOM");
xmldoc.async = false;
xmldoc.load("sample.xml");
nodeForSort = xmldoc.documentElement.firstChild.firstChild.baseName;
//hold the first node for sort while the page load in the first time
//load the xsl
xsldoc = new ActiveXObject("Microsoft.XMLDOM");
xsldoc.async = false;
xsldoc.load("Xtable1.xsl");
transfromXML(nodeForSort);
}
function transfromXML(nodeForSort) {
var strXsl;
var nodeForSort;
oOrderBy = xsldoc.selectSingleNode("//xsl:apply-templates[@select=/*/*]")
oOrderBy.setAttribute("order-by",nodeForSort)
//alert(oOrderBy.xml);
divContent.innerHTML = xmldoc.transformNode(xsldoc);
}
function orderTable(strNode,blnAscending)
{
var nodeForSort;
if (blnAscending)
nodeForSort="+"
else
nodeForSort="-"
if (strNode==PRICE) //privet case for numeric value
nodeForSort+=number( + strNode + );
else
nodeForSort+=strNode;
transfromXML(nodeForSort);
}
]]>הפונקציה onPageLoad טוענת את ה-XML וה XSL -. בנוסף היא מאתרת את שם הצומת הראשונה בשביל המיון כאשר הדף נטען והיא קוראת לפונקציה transfromXML.
הפונקציה orderTable שכבר הזכרנו אותה ב-XSL מקבלת שני פרמטרים שם הצומת וסדר המיון והיא משרשרת אותו לשם הצומת הנבחר ואז היא קוראת לפונקציה transfromXML.
הפונקציה transfromXML למעשה עושה את הטרנספורמציה עם ה XML לא לפני שהיא עושה החלפת פרמטר ב XSL הנה השורות החשובות להחלפה. <![CDATA[oOrderBy = xsldoc.selectSingleNode("//xsl:apply-templates[@select=/*/*]")
oOrderBy.setAttribute("order-by",nodeForSort)
]]>למעשה אנחנו נגשים לצומת xsl:apply-templates ואז אנחנו מחליפים בה את הסגולה order-by שיש בתוכה משתנה שקבענו ב–XSL שנקרא $orderBy הנה הצומת: <![CDATA[<xsl:apply-templates select="/*/*" order-by="$orderBy" />
]]>ובהחלפה אנחנו מחליפים אותו ב- nodeForSortשהפונקציה מקבלת.
זהו זה כל הקסם ויש לכם מיון איכותי בצד לקוח...
לשאלות ניתן לפנות אלי במייל.
|
.png)
