Displaying Data with XSLT Objectives In this lesson, you will learn to: ☛ Perform conditional formatting in a style sheet ☛ Use XPath pattern matching in a style sheet ☛ Create a comma-separated list of values ☛ Import a style sheet in another style sheet
©NIIT
eXtensible Markup Language/Lesson 6/Slide 1 of 45
Displaying Data with XSLT Problem Statement 6.D.1 A list of products sold at CyberShoppe needs to be displayed. These products need to be categorized based on their prices. The details about products priced higher than $50 are to be displayed in red and the rest are to be displayed in green. The details to be displayed include the product name, description, price, and quantity on hand.
©NIIT
eXtensible Markup Language/Lesson 6/Slide 2 of 45
Displaying Data with XSLT Task List ☛ Identify data to be displayed. ☛ Identify the elements required to format data based on a condition. ☛ Create a style sheet to format data based on a condition. ☛ Apply the style sheet to the XML document. ☛ View the XML document.
©NIIT
eXtensible Markup Language/Lesson 6/Slide 3 of 45
Displaying Data with XSLT Task 1: Identify data to be displayed. Result ☛ As per the scenario, the data that has to be displayed is as follows: ✓ PRODUCTNAME ✓ DESCRIPTION ✓ PRICE ✓ QUANTITY
©NIIT
eXtensible Markup Language/Lesson 6/Slide 4 of 45
Displaying Data with XSLT Task 2: Identify the elements required to format data based on a condition. The if Element ☛ The if element provides a simple if-then construct. The syntax of if element is as follows: <xsl:if test=“condition”> [actions to be performed if the condition is true]
©NIIT
eXtensible Markup Language/Lesson 6/Slide 5 of 45
Displaying Data with XSLT Task 2: Identify the elements …a condition. (Contd.) The choose Element ☛ The choose element is used to make a choice when there are two or more possible courses of action. ☛ It provides a means for testing multiple conditions.
©NIIT
eXtensible Markup Language/Lesson 6/Slide 6 of 45
Displaying Data with XSLT
Task 2: Identify the elements …a condition. (Contd.) ☛ The syntax of the choose element is as follows: <xsl:choose> <xsl:when test="condition"> [action to be taken] : : <xsl:otherwise> [action to be taken]
©NIIT
eXtensible Markup Language/Lesson 6/Slide 7 of 45
Displaying Data with XSLT Task 2: Identify the elements …a condition. (Contd.) ☛ The following table lists the comparison and boolean operators that can be used with the xsl:choose and xsl:if elements: Operator =
Meaning
Example
Equal to
PRICE[. = 20] PRODUCTNAME[. = ‘Mini Bus’]
!=
Not equal to
PRICE[. != 20] PRODUCTNAME[. != ‘Barbie Doll’]
<
Less than
PRICE[. < 20]
>
Greater than
PRICE[. > 20]
<=
Less than or equal to
PRICE[. <= 20]
>=
Greater than or equal to
PRICE[. >= 20]
©NIIT
eXtensible Markup Language/Lesson 6/Slide 8 of 45
Displaying Data with XSLT Task 2: Identify the elements … a condition. (Contd.)
Operator
Meaning
Example
and
Logical AND
PRICE[. > 20 and . < 30]
or
Logical OR
PRICE[. = 20 or . = 45]
not
Negation operator
PRICE[not(. = 30)]
The operators given in bold in the above list are Microsoft extensions to the original list of operators recommended by W3C.
©NIIT
eXtensible Markup Language/Lesson 6/Slide 9 of 45
Displaying Data with XSLT Task 2: Identify the elements … a condition. (Contd.) Result ☛ As the value of the PRICE element needs to be checked for a range of values, the choose element in combination with when and otherwise can be used for performing the check.
©NIIT
eXtensible Markup Language/Lesson 6/Slide 10 of 45
Displaying Data with XSLT Task 3: Create a style sheet to format data based on a condition.
Task 4: Apply the style sheet to the XML document.
Task 5: View the XML document.
©NIIT
eXtensible Markup Language/Lesson 6/Slide 11 of 45
Displaying Data with XSLT Just a Minute… The details about the books sold at CyberShoppe need to be displayed. Books priced higher than $100 are to be displayed in red, those priced higher than $75 are to be displayed in blue, and the rest are to be displayed in green.
©NIIT
eXtensible Markup Language/Lesson 6/Slide 12 of 45
Displaying Data with XSLT Problem Statement 6.D.2 CyberShoppe needs to display a summarized report about orders. The data about the products and all orders placed for products is stored in an XML document. This data includes the details about a product, such as product ID, product name, and price per unit. For each product, the data about all orders placed against that product is also stored. This data includes the order number, shipping address, and the order quantity.
©NIIT
eXtensible Markup Language/Lesson 6/Slide 13 of 45
Displaying Data with XSLT Problem Statement 6.D.2 (Contd.) The structure of the XML document is given below:
SUMMARY PRODUCT ORDER SHIPPING ADDRESS QUANTITY
©NIIT
eXtensible Markup Language/Lesson 6/Slide 14 of 45
Displaying Data with XSLT Task List ☛ Identify the data to be displayed. ☛ Identify a mechanism to display summarized data. ☛ Identify the XPath expressions required for performing calculations. ☛ Identify the functions required for performing calculations. ☛ Create an XSLT style sheet containing XPath patterns and functions. ☛ Create the XML document. ☛ View the XML document.
©NIIT
eXtensible Markup Language/Lesson 6/Slide 15 of 45
Displaying Data with XSLT Task 1: Identify the data to be displayed.
Result ☛ As per the given scenario, the details to be displayed are as follows: ✓ Product ID ✓ Product Name ✓ Price per unit ✓ Details about orders placed against the product: ➤ Order
number
➤ Shipping ➤ Total
address
quantity
➤ Order
value
✓ Total sales amount for the product ©NIIT
eXtensible Markup Language/Lesson 6/Slide 16 of 45
Displaying Data with XSLT Task 2: Identify a mechanism to display summarized data. ☛ XML Path (XPath) language is used for searching and retrieving information from an XML file. ☛ XPath treats an XML document as a tree of interrelated branches and nodes. ☛ A node can be of any type, such as an element, attribute, processing instruction (PI), comment, text, or namespace. ☛ XPath provides a set of expressions and functions that can be used for matching nodes in an XML document. As a result of matching nodes with a specific pattern, a set of nodes referred to as node set is retrieved.
©NIIT
eXtensible Markup Language/Lesson 6/Slide 17 of 45
Displaying Data with XSLT Task 2: Identify a … summarized data. (Contd.) Result ☛ As XPath provides a set of expressions and functions that can match specific patterns, retrieve results, and perform additional operations such as calculations, XPath can be used along with XSLT for displaying data in the given scenario.
©NIIT
eXtensible Markup Language/Lesson 6/Slide 18 of 45
Displaying Data with XSLT Task 3: Identify the XPath expressions required for performing calculations. ☛ XPath expressions can be used to retrieve data based on specific conditions. You can apply constraints by adding a filter clause, which is otherwise referred to as a filter pattern. ☛ Using XPath, you can create expressions that can identify the nodes in an XML document based on names and values. You can also create expressions that identify the relationship of a node with other nodes in the document. These expressions can be used with XSLT patterns for matching and retrieving nodes. ☛ XPath expressions work on the basis of a specific context. ☛ XPath expressions can be created using a set of operators and special characters. The following table describes these operators: ©NIIT
eXtensible Markup Language/Lesson 6/Slide 19 of 45
Displaying Data with XSLT Task 3: Identify the … performing calculations. (Contd.) Operator/ Special Character
Example
Description
/
/PRODUCTDATA
Selects immediate child elements of PRODUCTDATA. If this operator occurs at the start of the pattern, it indicates that the child elements should be selected from the root node.
//
//PRODUCTNAME
Searches for the specified element at any node level.
.
.PRODUCTNAME
Indicates the current context.
*
*
Selects all elements regardless of the element name.
@
@PRODUCTID
Used as a prefix for the attribute PRODUCTID.
©NIIT
eXtensible Markup Language/Lesson 6/Slide 20 of 45
Displaying Data with XSLT Task 3: Identify the … performing calculations. (Contd.) Operator/ Special Character
Example
Description
@*
@*
Selects all attributes, regardless of the name.
:
:
Separates the namespace prefix from the element or attribute name.
()
(PRICE*QUANTITY)
Used to group operations.
[]
[@PRODUCTID='P001']
Applies a filter pattern.
+
num1 + num2
Adds two numbers, returning their sum.
-
num1 - num2
Subtracts num2 from num1, returning the difference.
©NIIT
eXtensible Markup Language/Lesson 6/Slide 21 of 45
Displaying Data with XSLT Task 3: Identify the …performing calculations. (Contd.) Operator/ Special Character
Example
Description
*
num1 * num2
Multiplies num1 by num2, returning the product.
div
num1 div num2
Divides num1 by num2, returning the quotient.
mod
num1 mod num2
Returns the modulus—that is, divides num1 by num2 and returns the remainder.
..
../PRODUCTNAME
Selects the PRODUCTNAME element, which exists within the parent of the current element.
©NIIT
eXtensible Markup Language/Lesson 6/Slide 22 of 45
Displaying Data with XSLT Task 3: Identify the … performing calculations. (Contd.) Result ☛ In the given scenario, an XPath expression can be created for calculating the order value: <xsl:value-of select='(../@PRICE) * (QUANTITY)'/> ☛ The above expression instructs the XSLT processor to pick up the value of the PRICE attribute of the parent element and multiply it by the value of the QUANTITY element.
©NIIT
eXtensible Markup Language/Lesson 6/Slide 23 of 45
Displaying Data with XSLT Task 4: Identify the functions required for performing calculations. XPath functions ☛ XPath provides a various categories of functions. They are: ✓ string ✓ node set ✓ boolean ✓ number ☛ These functions can take one or more arguments.
©NIIT
eXtensible Markup Language/Lesson 6/Slide 24 of 45
Displaying Data with XSLT Task 4: Identify the ... performing calculations. (Contd.) String functions ☛ The string functions of XPath are used to perform string operations, such as finding the length of a string or converting a string from uppercase to lowercase. ☛ Some of the string functions provided in XPath are: ✓ string(obj?): Converts the argument to a string value. ✓ starts-with(str, str): Returns true if the first string begins with the second string ✓ contains(str, str): Returns true if the first string contains the second string. ©NIIT
eXtensible Markup Language/Lesson 6/Slide 25 of 45
Displaying Data with XSLT Task 4: Identify the … performing calculations. (Contd.) String functions (Contd.) ✓ substring(str, num, num?): Returns a portion of the string starting from the position specified in the second argument. Returns the number of characters specified in the third argument. ✓ substring-before(str, str): Returns the portion of the first string that precedes the second string. ✓ substring-after(str, str): Returns the portion of the first string that follows the second string. ✓ string-length(str?): Returns the length of the string. ©NIIT
eXtensible Markup Language/Lesson 6/Slide 26 of 45
Displaying Data with XSLT Task 4: Identify the … performing calculations. (Contd.) Node-Set functions ☛ Node-set functions are used to manipulate node sets or to return information about node sets. ☛ Some of the node-set functions provided in XPath are: ✓ last(): Returns the number of the last node in the current node-set. ✓ position(): Returns the position of the current node within the parent node. ✓ count(ns): Returns the number of occurrences of the specified node-set. ✓ id(obj): Returns the element with the specified unique ID. ©NIIT
eXtensible Markup Language/Lesson 6/Slide 27 of 45
Displaying Data with XSLT Task 4: Identify the … performing calculations. (Contd.) Boolean functions ☛ All boolean functions return either true or false. ☛ Some of the node-set functions provided in XPath are: ✓ boolean(obj?): Converts the argument to a boolean. ✓ not(boolean): Takes an expression, which returns a boolean value, as its argument. Negates the result of the Boolean expression.
©NIIT
eXtensible Markup Language/Lesson 6/Slide 28 of 45
Displaying Data with XSLT Task 4: Identify the … performing calculations. (Contd.) Numeric functions ☛ XPath provides numeric functions for various purposes, such as adding numbers, finding the nearest integer value, and converting strings to numbers. ☛ Some of the numeric function provided in XPath are: ✓ number(obj?): Converts the argument to a number. ✓ sum(ns): Sums up the values of the nodes contained in the node-set, which is passed as an argument to the function. ✓ floor(num): Returns the largest integer that is less than or equal to the argument. ✓ ceiling(num): Returns the smallest integer that is greater than or equal to the argument. ©NIIT
eXtensible Markup Language/Lesson 6/Slide 29 of 45
Displaying Data with XSLT Task 4: Identify the … performing calculations. (Contd.) ✓ round(num): Rounds up the number to the nearest integer. Result ☛ As per the scenario, the sum() function of XPath needs to be used for calculating the product sales value of each product. The code for calculating the product sales values is given as follows: <xsl:value-of select='(../@PRICE) * (QUANTITY)'/> <xsl:value-of select='(./@PRICE) * sum(./ORDER/QUANTITY)'/>
©NIIT
eXtensible Markup Language/Lesson 6/Slide 30 of 45
Displaying Data with XSLT Task 5: Create an XSLT style sheet containing XPath patterns and functions. Task 6: Create the XML document.
Task 7: View the XML document.
©NIIT
eXtensible Markup Language/Lesson 6/Slide 31 of 45
Displaying Data with XSLT Problem Statement 6.D.3 The details about the books that are available for sale at CyberShoppe are stored in an XML document. The book details, such as book ID, title, rate, author first name, and author last name should be displayed in a tabular format. The first name and last name of an author should be displayed in a single column, "AUTHOR(S)". If a book has multiple authors, their names should be displayed as comma-separated values.
©NIIT
eXtensible Markup Language/Lesson 6/Slide 32 of 45
Displaying Data with XSLT Task List ☛ Identify the data to be displayed. ☛ Identify a mechanism to be used to display the data in a tabular format. ☛ Identify the elements required to display data in a tabular format. ☛ Identify a mechanism to create a comma-separated list of values. ☛ Create a style sheet. ☛ Apply the style sheet to the XML document. ☛ View the XML document.
©NIIT
eXtensible Markup Language/Lesson 6/Slide 33 of 45
Displaying Data with XSLT Task 1: Identify the data to be displayed. Result In the given scenario, the data to be displayed is as follows: ☛ BOOKID ☛ TITLE ☛ RATE ☛ AUTHOR ✓FIRSTNAME ✓LASTNAME
©NIIT
eXtensible Markup Language/Lesson 6/Slide 34 of 45
Displaying Data with XSLT Task 2: Identify a mechanism to be used to display the data in a tabular format. ☛ Information pertaining to the way in which XML data must appear in a browser is specified in either CSS or XSLT style sheets. ☛ However, in certain situations, these two methods do not have the capability to display data in certain formats. ☛ You can combine the features of HTML and XSLT to format the data from an XML document as per requirements.
©NIIT
eXtensible Markup Language/Lesson 6/Slide 35 of 45
Displaying Data with XSLT Task 2: Identify a mechanism …the data in a tabular format. (Contd.) Result: ☛ In the given scenario, HTML tags can be used in an XSLT to display data in a tabular format.
©NIIT
eXtensible Markup Language/Lesson 6/Slide 36 of 45
Displaying Data with XSLT Task 3: Identify the elements required to display data in a tabular format. Using HTML Elements in an XSLT Style Sheet ☛ In order to use HTML tags in an XSLT style sheet, you must write the HTML code to display the data in the desired format. ☛ This code is then embedded in the XSLT document.
©NIIT
eXtensible Markup Language/Lesson 6/Slide 37 of 45
Displaying Data with XSLT Task 3: Identify the …in a tabular format. (Contd.) Result: ☛ In the given scenario, you can use the TABLE, TR, TH, and TD elements in an XSLT style sheet to display data in a tabular format.
©NIIT
eXtensible Markup Language/Lesson 6/Slide 38 of 45
Displaying Data with XSLT Task 4: Identify a mechanism to create a commaseparated list of values. Result ☛ In order to create a comma-separated list of values, you can use either the template or the for-each element.
©NIIT
eXtensible Markup Language/Lesson 6/Slide 39 of 45
Displaying Data with XSLT Task 5:Create a style sheet. Task 6:Apply the style sheet to the XML document. Task 7:View the XML document.
©NIIT
eXtensible Markup Language/Lesson 6/Slide 40 of 45
Displaying Data with XSLT Problem Statement 6.P.1 The details about suppliers who supply various products to CyberShoppe need to be displayed in a tabular format. Supplier details include supplier ID, first name, last name, address, phone number, and various products supplied by them. A supplier may supply one or more products. The names of all products supplied by a supplier must be displayed in a single column in the form of a comma-separated list. The details in every alternate row in the table must be displayed in red. Hint: Use the mod operator of XPath for checking for an alternate row.
©NIIT
eXtensible Markup Language/Lesson 6/Slide 41 of 45
Displaying Data with XSLT Creating Nested Style Sheets The import Element ☛ The import element is an element supported by XSLT in which one XSLT style sheet can be reused by another XSLT style sheet. ☛ The general form of the import element is as follows: <xsl:import href="location"/> ☛ The import element is a top level element that must appear immediately after the stylesheet element.
©NIIT
eXtensible Markup Language/Lesson 6/Slide 42 of 45
Displaying Data with XSLT Summary In this lesson, you learned that: ☛ There are two elements in XSLT that allow you to format data based on a condition. They are if and choose. ☛ The if element provides a simple if-then construct. It has a single test attribute, which specifies the criteria for performing an action. ☛ The choose element selects one from a number of possible alternatives. It consists of a number of when elements followed by an optional otherwise element. ☛ XPath is a language used for searching and retrieving information from an XML document. ☛ The primary purpose of XPath is to address parts of an XML document, and manipulate strings, numbers, and boolean values. ©NIIT
eXtensible Markup Language/Lesson 6/Slide 43 of 45
Displaying Data with XSLT Summary (Contd.) ☛ XPath expressions can match specific patterns, retrieve results, and perform additional operations relative to the context of the returned nodes. ☛ XPath provides functions, which can be categorized as follows: ✓ String functions: Used for basic string operations, such as finding a string's length or changing a string from uppercase to lowercase. ✓ Node-set functions: Used to manipulate node sets or return information about node sets. ✓ Boolean functions: Return either true or false based on the argument passed to the function. ✓ Numeric functions: Used to perform calculations on numeric values. ©NIIT
eXtensible Markup Language/Lesson 6/Slide 44 of 45
Displaying Data with XSLT Summary (Contd.) ☛ You can use HTML code in an XSLT style sheet to display data in different formats. ☛ The import element is used to import an XSLT style sheet to another XSLT style sheet.
©NIIT
eXtensible Markup Language/Lesson 6/Slide 45 of 45