Lập trình web nâng cao XML - Trường CĐN Đà Lạt

</navitem>

<description>Search for a CD</description>

<href>controller.asp?view=cdSearch</href>

</navitem>

Có thể bạn quan tâm!

Xem toàn bộ 258 trang tài liệu này.

<href>controller.asp?view=cdAdd</href>

<icon>newCD.gif</icon>

</navitem>

</children>

</navitem>

<description>Inventory</description>

<icon>inventory.gif</icon>

<description>View Current Inventory</description>

<href>controller.asp?view=inventory</href>

<icon>inventory.gif</icon>

</navitem>

<description>View Low-Inventory Items</description>

<href>controller.asp?view=lowinventory</href>

<icon>lowinventory.gif</icon>

</navitem>

<description>Place Supply Requisition</description>

<href>controller.asp?view=requisition</href>

<icon>requisition.gif</icon>

</navitem>

</children>

</navitem>

</children>

</navigation>

Chú ý rằng không phải là mọi phần tử <navitem> được làm căng phồng lên hoàn toàn. Mã vẫn còn hợp lệ theo giản đồ chúng ta, bởi vì chỉ mỗi phần tử <description> được yêu cầu. Tại sao có một phần tử <navitem> mà không có hyperlink? Câu trả lời là điều đó không phải tất cả các mục chọn đều uất hiện trong một thực đơn hệ thống hay bảng nội dung của cây cung cấp những mối liên kết tới những tài liệu. Mô vài dịch vụ có thể lưu trữ theo dạng nhóm các phần tử con.

Nghĩ về tài liệu XML có trước và cái mà nó đại diện cho. Quan trọng hơn, nghĩ về cái mà nó không phải đại diện cho. Không có gì trong tài liệu chỉ báo thông tin cần phải được trả lại như thế nào. Những phần tử dẫn hướng có thể hiển thị như một cái cây, thực đơn thả xuống hay thực đơn bảng chỉ như dễ dàng. Chúng ta hãy khám phá ví dụ này về sau và tạo ra hai sự thi hành XSLT khác nhau cho tài liệu dẫn hướng của chúng ta.

Tạo một thực đơn bảng

Sự thi hành đầu tiên sẽ là một cách tiếp cận bảng hai tầng. Những quy tắc biểu diễn sẽ giả thiết một tài liệu dẫn hướng hai mức ( Điều đó, Một danh sách của những chủ đề và những tùy chọn) và ý định xây dựng cho một sự đông cứng của những bảng, khi được kích, để lộ ra một danh sách những tùy chọn từ đó người sử dụng có thể chọn. Mã XSLT sau đây sẽ được thêm vào khung mẫu khác những quy tắc chúng tôi được định nghĩa đến đây.

<xsl:template match="navigation[@type='menu']">

<html>

<head>

<xsl:text disable-output-escaping = "yes">

<![CDATA[

]]>

</xsl:text>

</style>

Những hàm JavaScript sau đây xử lý tất cả sự tương tác người sử dụng với những ngăn bảng. clearFunctions()tháo sự đông cứng hiện tại của những tùy chọn bất cứ khi nào mà một bảng mới được kích. clearModuleStyles() tác động những bảng không hoạt động. Cuối cùng hàm showFunction() hiển thị bảng được chọn và xây dựng một danh sách mới những tùy chọn.

<![CDATA[

function clearFunctions() { var i = 1;

var theFunction = ""; var isFunction = true;

while (isFunction) { theFunction = "function"+i;

var hideDiv = document.getElementById(theFunction); if (hideDiv) {

hideDiv.style.visibility = "hidden"; i++;

} else {

isFunction = false;

}

function clearModuleStyles() { var i = 1;

var theModule = ""; var isModule = true; while (isModule) {

theModule = "module"+i; theModuleLeft = "moduleLeft"+i; theModuleRight = "moduleRight"+i; theModuleAnchor = "moduleAnchor"+i;

cleanStyle = document.getElementById(theModule); cleanStyleLeft = document.getElementById(theModuleLeft); cleanStyleRight = document.getElementById(theModuleRight); cleanStyleAnchor = document.getElementById(theModuleAnchor); if (cleanStyle) {

cleanStyle.style.backgroundColor = 'steelblue'; cleanStyle.style.borderBottom = '1px solid'; cleanStyle.style.borderColor = '336699'; cleanStyleLeft.style.backgroundColor = 'steelblue'; cleanStyleLeft.style.borderBottom = '1px solid'; cleanStyleLeft.style.borderColor = '336699'; cleanStyleRight.style.backgroundColor = 'steelblue'; cleanStyleRight.style.borderBottom = '1px solid'; cleanStyleRight.style.borderColor = '336699';

cleanStyleAnchor.style.color = 'white'; i++;

} else {

isModule = false;

}

function showFunction(id) { clearFunctions(); clearModuleStyles(); theId = "function"+id;

thisFunction = document.getElementById(theId); thisFunction.style.visibility = 'visible';

theId = "module"+id; theLeftId = "moduleLeft"+id;

theRightId = "moduleRight"+id; theAnchorId = "moduleAnchor"+id;

thisModule = document.getElementById(theId); thisModuleRight = document.getElementById(theRightId); thisModuleLeft = document.getElementById(theLeftId); thisModuleAnchor = document.getElementById(theAnchorId); thisModule.style.backgroundColor = 'white'; thisModule.style.borderBottom = '0'; thisModuleRight.style.backgroundColor = 'white'; thisModuleRight.style.borderBottom = '0'; thisModuleLeft.style.backgroundColor = 'white'; thisModuleLeft.style.borderBottom = '0';

thisModuleAnchor.style.color = '336699';

}

window.status = "Noverant Back-Office";

]]>

</script>

</head>

Sự biến đổi này được giả thiết rằng tài liệu dẫn hướng sẽ tồn tại trong khung của riêng mình, như nó tạo ra một tài liệu HTML đầy đủ. Khung mẫu có thể dễ dàng được sửa đổi để chia sẻ một khung với những phần tử UI khác.

Trong mục sau đây, mã khung mẫu lặp lại qua những phần tử cấp tao cấp cao

<navitem> những phần tử và tạo nên những ngăn bảng cho toàn bộ chúng. Những phương thức JavaScript gắn liền gồm onClik (), mouseover(), và mouseout() để xử lý các sự kiện liên quan.

<tr>

<xsl:for-each select="children/navitem">

<xsl:choose>

<xsl:when test="position() = 1">

<xsl:attribute name="style">background-color:white

</xsl:attribute>

</xsl:when>

<xsl:otherwise>

<xsl:attribute name="style">background-color: steelblue;border-bottom:1px solid;border-color:336699</xsl:attribute>

</xsl:otherwise>

</xsl:choose>

</td>

<xsl:choose>

<xsl:when test="position() = 1">

<xsl:attribute name="style">padding:2px; background-color:white</xsl:attribute>

</xsl:when>

<xsl:otherwise>

<xsl:attribute name="style">padding:2px; background-color:steelblue;border-bottom:1pxsolid; border-color:336699

</xsl:attribute>

</xsl:otherwise>

</xsl:choose>

<xsl:attribute name="onMouseOver">JavaScript:window. status='<xsl:value-of select="description"/>'; return true;

</xsl:attribute>

<xsl:attribute name="onMouseOut">JavaScript: window.status='Noverant Back-Office'; return true;</xsl:attribute>

<xsl:if test="position() = 1">

<xsl:attribute name="style">color:336699

</xsl:attribute>

</xsl:if>

<xsl:value-of select="description"/></a>

</td>

<xsl:choose>

<xsl:when test="position() = 1">

<xsl:attribute name="style">background-color:white

</xsl:attribute>

</xsl:when>

<xsl:otherwise>

<xsl:attribute name="style">background-color: steelblue;border-bottom:1px solid;border-color:336699</xsl:attribute>

</xsl:otherwise>

</xsl:choose>

</td>

</xsl:for-each>

</tr>

</table>

</div>

Hàm XSL generate-id( ) dùng để tạo ra những giá trị ID duy nhất để gán cho những phần tử được dùng trong tài liệu kết quả. generate-id( ) bảo đảm rằng nó sẽ sản xuất một ID duy nhất và lặp lại cho mọi nút trong tài liệu gốc.

Tại điểm này khung mẫu lặp lại qua tất cả mức giây <navitem> những phần tử và tạo nên một danh sách các siêu liên kết ra khỏi chúng. Các siêu lien kết này sẽ xuất hiện ở dưới những ngăn bảng.

<xsl:for-each select="children/navitem">

<xsl:variable name="i" select="position()"/>

<xsl:choose>

<xsl:when test="position() != 1">

<xsl:attribute name="style">position:absolute; display:inline;visibility:hidden;width:100%;background-color:white; border-bottom:1px solid;border-color:steelblue</xsl:attribute>

</xsl:when>

<xsl:otherwise>

<xsl:attribute name="style">position:absolute; display:inline;width:100%;background-color:white;border-bottom:1px

solid;border-color:steelblue</xsl:attribute>

</xsl:otherwise>

</xsl:choose>

<tr>

<xsl:attribute name="nowrap"/>

<xsl:for-each select="children/navitem">

<xsl:variable name="j" select="position()"/>

<xsl:variable name="functionVar" select= "concat($i,'_',$j)"/>

<xsl:attribute name="onMouseOver">JavaScript: window.status='<xsl:value-of select="description"/>'; return true;

</xsl:attribute>

<xsl:attribute name="onMouseOut">JavaScript: window.status='Noverant Back-Office'; return true;</xsl:attribute>

<xsl:value-of select="description"/>

</a>  

<xsl:if test="position() != last()"> | 

</xsl:if>

</xsl:for-each>

</td>

</tr>

</table>

</div>

</xsl:for-each>

</body>

</html>

</xsl:template>

Một lời gọi đến trang này từ tập khung sẽ cho kết quả là trang như minh hình sau:

Tạo một cây dẫn hướng

Với sự cài đặt thứ hai, cùng một XML dẫn hướng có thể sử dụng để tạo hệ thống dẫn hướng dựa trên cây. Bằng cách viết lại dẫn hướng XSLT, người thiết kế trang có thể tạo một sự khác biệt từ đầu đến cuối. Ví dụ này của một XSLT dùng để sản xuất một cái cây trình diễn tính linh hoạt mà có thể được đạt được bằng việc phân chia nội dung từ sự biểu diễn.

Like sự chuyển đổi thực đơn, sự chuyển đổi cây giả thiết rằng kết quả lấy tài liệu ý định cư trú trong khung (của) riêng mình.

<xsl:template match="navigation[@type='tree']">

<html>

<head>

{

eval("closed_"+divid).style.display = 'none'; eval("open_"+divid).style.display = '';

}

function collapse(divid)

{

eval("open_"+divid).style.display = 'none'; eval("closed_"+divid).style.display = '';

}

</script>

<style>

a:visited {background-color:#C7D2DE; color:black; text-decoration: underline}

a:link {background-color:#C7D2DE; color:black; text-decoration: underline}

a:active {background-color:activecaption; color:captiontext; text-decoration: underline}

a:hover {background-color:#C7D2DE; color:black;

text-decoration: underline}

.clsHeading {font-family: verdana; color: black; font-size: 11; font-weight: 800;}

.clsEntryText {padding-top: 2px; font-family: verdana; color: black; font-size: 11; font-weight: 400; background-color:#C7D2DE;}

.clsWarningText {font-family: verdana; white-space:pre; color: #B80A2D; font-size: 11; font-weight: 600; width:550;

background-color:#EFE7EA;}

.clsCopy {font-family: verdana; color: black; font-size: 11; font-weight: 400; background-color:#FFFFFF;}

</style>

</head>

<tr>

<xsl:if test="openIcon"><img src="images/{openIcon}"/>  </xsl:if>

<xsl:if test="href"><a href="{href}">

<xsl:if test="href/@target"><xsl:attribute name= "target"><xsl:value-of select="href/@target"/></xsl:attribute>

</xsl:if>

<xsl:value-of select="description"/></a>

</xsl:if>

<xsl:if test="not(href)"><xsl:value-of select= "description"/></xsl:if>

<xsl:apply-templates select="children"/>

</div>

</td>

</tr>

</table>

</body>

</html>

</xsl:template>

Đệ quy một cách tự nhiên của sự dẫn hướng cây XSLT hoàn chỉnh. Những phần tử

<navitem> có thể được thay đổi đúng chỗ với lôgic với điều kiện nhỏ.

<xsl:template match="navitem">

<xsl:choose>

<xsl:when test="children">

<xsl:variable name="childcnt" select="count(.//navitem)"/>

<xsl:for-each select="ancestor::navitem">

<xsl:choose>

<xsl:when test="count(following-sibling::navitem) > 0">

</xsl:when>

<xsl:otherwise>

</xsl:otherwise>

</xsl:choose>

</xsl:for-each>

<xsl:choose>

<xsl:when test="closedIcon"><img src="images/{closedIcon}"

/> </xsl:when>

<xsl:when test="icon"><img src="images/{icon}"/> 

</xsl:when>

</xsl:choose>

<xsl:if test="href"><a href="{href}">

<xsl:if test="href/@target"><xsl:attribute name= "target"><xsl:value-of select="href/@target"/></xsl:attribute>

</xsl:if>

<xsl:value-of select="description"/></a>

</xsl:if>

<xsl:if test="not(href)"><xsl:value-of select="description"/>

</xsl:if>

(<xsl:value-of select="$childcnt"/> artist<xsl:if test= "$childcnt != 1">s</xsl:if>)

</div>

<xsl:for-each select="ancestor::navitem">

<xsl:choose>

<xsl:when test="count(following-sibling::navitem) > 0">

</xsl:when>

<xsl:otherwise>

</xsl:otherwise>

</xsl:choose>

</xsl:for-each>

<xsl:choose>

<xsl:when test="openIcon"><img src="images/{openIcon}"

/> </xsl:when>

<xsl:when test="icon"><img src="images/{icon}"/> 

</xsl:when>

</xsl:choose>

<xsl:if test="href"><a href="{href}">

<xsl:if test="href/@target"><xsl:attribute name= "target"><xsl:value-of select="href/@target"/></xsl:attribute>

</xsl:if>

<xsl:value-of select="description"/></a>

</xsl:if>

<xsl:if test="not(href)"><xsl:value-of select="description"/>

</xsl:if>

(<xsl:value-of select="$childcnt"/> artist<xsl: if test="$childcnt != 1">s</xsl:if>)

<xsl:apply-templates select="children"/>

</div>

</xsl:when>

<xsl:otherwise>

<xsl:for-each select="ancestor::navitem">

<xsl:choose>

<xsl:when test="count(following-sibling::navitem) > 0">

</xsl:when>

<xsl:otherwise>

</xsl:otherwise>

</xsl:choose>