מטרת המאמר: הדגמת יכולות של XML+XSL
השיטה: בניית תפריט דינמי רב שכבות
מבנה ה- XML:<![CDATA[<?xml version="1.0"?>
<Root_Element>
<menu id="1580" title="menu1" menu_level="0" parent_id="0" isLeaf="0">
<menu id="2" title="menu11" menu_level="1" parent_id="1580" isLeaf="0">
<menu id="3" title="menu11" menu_level="2" parent_id="2" isLeaf="1"/>
</menu>
<menu id="4" title="menu12" menu_level="1" parent_id="1580" isLeaf="1"/>
</menu>
<menu id="5264" title="menu2" menu_level="0" parent_id="0" isLeaf="0">
<menu id="6" title="menu21" menu_level="1" parent_id="5264" isLeaf="1"/>
<menu id="7" title="menu22" menu_level="1" parent_id="5264" isLeaf="1"/>
</menu>
<menu id="8976" title="menu3" menu_level="0" parent_id="0" isLeaf="0">
<menu id="9" title="menu31" menu_level="1" parent_id="8976" isLeaf="1"/>
<menu id="1064" title="menu32" menu_level="1" parent_id="8976" isLeaf="0">
<menu id="11" title="menu321" menu_level="2" parent_id="1064" isLeaf="1"/>
<menu id="12" title="menu322" menu_level="2" parent_id="1064" isLeaf="1"/>
<menu id="13" title="menu323" menu_level="2" parent_id="1064" isLeaf="1"/>
<menu id="14" title="menu324" menu_level="2" parent_id="1064" isLeaf="0">
<menu id="15" title="menu3241" menu_level="2" parent_id="14" isLeaf="1"/>
<menu id="16" title="menu3242" menu_level="3" parent_id="14" isLeaf="0">
<menu id="17" title="menu32421" menu_level="4" parent_id="16" isLeaf="1"/>
</menu>
</menu>
</menu>
</menu>
<menu id="18" title="menu4" menu_level="0" parent_id="0" isLeaf="0">
<menu id="19" title="menu41" menu_level="1" parent_id="18" isLeaf="1"/>
<menu id="20" title="menu42" menu_level="1" parent_id="18" isLeaf="0">
<menu id="20" title="menu421" menu_level="2" parent_id="20" isLeaf="1"/>
</menu>
</menu>
</Root_Element>
]]>
הסבר
כפי שניתן לראות לכל האלמנטים בתפריט יש את אותו שם כאשר הם מכוננים אחד בתוך השני. הכינון מהווה את המבנה ההיררכי של התפריט והסגולות Attributes)
מתארות כל אלמנט והקשרים שלו לרשומת האב ואם הוא עלה או ענף 0- ענף 1 - עלה.
כמו כן יש סגולה ששומרת את כותרת האלמנט בתפריט וסגולה נוספת לרמה של התפריט, 0 רמה ראשונה.
מבנה ה-XSL:<![CDATA[<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:script language="Jscript"><![CDATA[
var oParentTempNodeId;
function setOParentTempNodeId(oNode)
{
oParentTempNodeId=oNode.getAttribute("id");
}
function getParentId(oNode)
{
idValue=oNode.getAttribute("id");
return idValue;
}
function compareId(oNode,oChildNode)
{
if (oParentTempNodeId==oChildNode.getAttribute("parent_id"))
return "true";
else
return "false";
}
var strSPath="";
function updateDivPath(oNode)
{
var intIsLeaf;
intIsLeaf = oNode.getAttribute("isLeaf")
intId = oNode.getAttribute("id")
intParentId = oNode.firstChild.getAttribute("parent_id")
if (intIsLeaf==0){
strSPath = strSPath + "_" + oNode.getAttribute("id");
}
else
strSPath = "";
}
function getSPath() {
return strSPath;
}
]]]]><![CDATA[></xsl:script>
<xsl:template match="/">
<table border="0" class="clsTopLine">
<tr id="topLine">
<xsl:apply-templates select="/Root_Element/menu"></xsl:apply-templates>
</tr>
</table>
<xsl:for-each select="//menu[@isLeaf=0]">
<xsl:eval>updateDivPath(this.parentNode)</xsl:eval>
<div class="clsDivMenu" STYLE="position:absolute;top:50px;left:50px;display:none;">
<xsl:attribute name="id">div_<xsl:eval>getParentId(this)</xsl:eval></xsl:attribute>
<xsl:attribute name="name">div_<xsl:eval>getParentId(this)</xsl:eval></xsl:attribute>
<xsl:attribute name="divPath">
<xsl:eval>getSPath()</xsl:eval>_<xsl:eval>getParentId(this)</xsl:eval>
</xsl:attribute>
<table border="0" class="clsTableMenu" menuItem="1">
<xsl:eval>setOParentTempNodeId(this)</xsl:eval>
<xsl:apply-templates select="//menu[@menu_level!=0]"></xsl:apply-templates>
</table>
</div>
</xsl:for-each>
</xsl:template>
<xsl:template match="/Root_Element/menu">
<xsl:choose>
<xsl:when test=".[@menu_level=0]">
<td class="clsTopLineUnSelected">
<xsl:if test=".[@isLeaf=0]">
<xsl:attribute name="onmouseover">changeTopLineStyle(this);showMenu(this);</xsl:attribute>
<xsl:attribute name="onmouseout">changeTopLineStyle(this);</xsl:attribute>
<xsl:attribute name="onclick">displayMenu(this)</xsl:attribute>
</xsl:if>
<xsl:attribute name="id"><xsl:value-of select="./@id"/></xsl:attribute>
<xsl:attribute name="menu_level"><xsl:value-of select="./@menu_level"/></xsl:attribute>
<xsl:attribute name="parent_id"><xsl:value-of select="./@parent_id"/></xsl:attribute>
<xsl:value-of select="./@title"/>
</td>
</xsl:when>
<xsl:otherwise>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
<xsl:template match="//menu[@menu_level!=0]">
<xsl:if expr="compareId(this.parentNode,this)==true">
<tr class="clsMenuItemUnSelected" onmouseover="changeMenuStyle(this)"
onmouseout="changeMenuStyle(this)">
<td>
<xsl:attribute name="onmouseover">
showHideSideDiv(this)
</xsl:attribute>
<xsl:attribute name="id"><xsl:value-of select="./@id"/></xsl:attribute>
<xsl:attribute name="isLeaf"><xsl:value-of select="./@isLeaf"/></xsl:attribute>
<xsl:attribute name="menu_level"><xsl:value-of select="./@menu_level"/></xsl:attribute>
<xsl:attribute name="parent_id"><xsl:value-of select="./@parent_id"/></xsl:attribute>
<xsl:value-of select="./@title"/>
<xsl:if test=".[@isLeaf=0]">
>>
</xsl:if>
</td>
</tr>
</xsl:if>
</xsl:template>
</xsl:stylesheet>
]]>
הסבר
נשתמש בשני טמפלטים אחד בונה את השורה העליונה של התפריט
והוא פונה רק לצומת ברמה הראשונה מתחת לשורש
הטמפלט השני פונה לכל שאר הרמות ואני משתמש ב// על מנת להתייחס לכל האלמנטים
ללא קשר לרמה בה התפריט נמצא למעט הרמה הראשונה
הנה הקוד: <![CDATA[<xsl:template match="//menu[@menu_level!=0]">
]]>הטמפלט הזה מכיל את כל הדיבים של התפריטים והתוכן שלהם
בדרך אני גם משתמש ב-SCRIPT <![CDATA[<xsl:attribute name="divPath">
<xsl:eval>getSPath()</xsl:eval>_<xsl:eval>getParentId(this)</xsl:eval>
</xsl:attribute>
]]>שמחזיר לסגולה divPath שקבעתי לעצמי בדיב את כל הדיבים הקשורים לדיב המדובר
ואיך זה מוצג:
כדי להציג את התפריט אני טוען שני אובייקטים אחד שמחזיק את ה- XML
ואחד שמחזיק את ה-XSL לשני האובייקטים נעשה טרנספורמציה כאשר העמוד נטען
להלן הקוד: <![CDATA[function bodyOnLoad()
{
//load the html
xmldoc = new ActiveXObject("Microsoft.XMLDOM");
xmldoc.async = false;
xmldoc.load("menu2.xml");
xsldoc = new ActiveXObject("Microsoft.XMLDOM");
xsldoc.async = false;
xsldoc.load("menu.xsl");
divMenu.innerHTML = xmldoc.transformNode(xsldoc);
}
]]>כל השאר זה פונקציות פשוטות שמשתמשות בדום על מנת להציג או להסתיר אלמנטים שונים בתפריט
את הפונקציות ניתן לראות בתצוגת קוד רגילה
על מנת להתקדם
ניתן להוסיף לתפריט ארוע לחיצת עכבר בתוך ה XSL שיקח ערך מסגולה שתוסיפו ל XML ובה תשמרו את ההפניות לעמודים שונים או לפונקציות שונות בעת בחירה של אלמנט בתפריט
כמו כן ניתן להוסיף סגולה של זמין/לא זמין לאלמנט בתפריט שישתנה בהתאם לעמודים בהם נמצאים.
אפשרות נוספת היא ליצור ממשק אדמין בתצורת עץ על מנת לאפשר למנהל המערכת לבנות את התפריט בלי לכתוב את ה- XML
כמו כן ניתן להשתמש בדאטה על מנת לבנות מפת אתר וכיוצא בזה ...
סיכום
כפי שניתן לראות שימוש בטכנולוגיה זו מנצלת את השימוש במבנה ההיררכי של הנתונים ועיבוד שלהם באמצעות רכיב תצוגה.
היתרון הגדול שניתן למצוא כאן הוא העבודה בצד הלקוח ומיעוט הקוד שנכתב.
אמנם למי שהנושא חדש עבורו קצת קשה לעשות שינוי תפיסתי אבל מאוד מומלץ.
בהצלחה!
| 
.png)
