Adding Links and Graphics - Exercise

Contact Us or call 1-877-932-8228
Adding Links and Graphics - Exercise

Adding Links and Graphics

Duration: 15 to 20 minutes.

In this exercise, you will use XSLT to generate the XSL-FO links shown in the example above.

  1. Open LinksAndGraphics/Exercises/Beatles.xsl for editing.
  2. Modify this document so that each Beatle from the associated Beatles.xml file is output as a link.
  3. Replace the word "Beatles" in the first block inside the xsl-region-body flow with the beatles.jpg image from the Images folder.
  4. To test your solution, transform LinksAndGraphics/Exercises/Beatles.xml against LinksAndGraphics/Exercises/Beatles.xsl.

Code Sample:

LinksAndGraphics/Exercises/Beatles.xsl
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" 
			xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
			xmlns:fo="http://www.w3.org/1999/XSL/Format">
	<xsl:output method="xml" indent="yes"/>
	<xsl:template match="/beatles">
		<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
---- C O D E   O M I T T E D ----
<fo:page-sequence master-reference="list">
				<fo:static-content flow-name="xsl-region-before" text-align="center">
					<fo:block font-size="20pt" font-weight="bold">
						The Beatles
					</fo:block>
				</fo:static-content>
				<fo:flow flow-name="xsl-region-body">
					<fo:block space-after="24pt" font-weight="bold">
						The Beatles
					</fo:block>
					<fo:list-block start-indent="20pt">
						<xsl:apply-templates/>
					</fo:list-block>
				</fo:flow>
			</fo:page-sequence>
		</fo:root>
	</xsl:template>
	<xsl:template match="beatle">
		<fo:list-item>
			<fo:list-item-label end-indent="label-end()">
				<fo:block font-weight="bold">
					<fo:character character="&#x2022;"/>
				</fo:block>
			</fo:list-item-label>
			<fo:list-item-body start-indent="body-start()">
				<fo:block>
					<xsl:value-of select="name/firstname"/>
						<xsl:text> </xsl:text>
					<xsl:value-of select="name/lastname"/>
				</fo:block>
			</fo:list-item-body>
		</fo:list-item>
	</xsl:template>
</xsl:stylesheet>

Solution:

LinksAndGraphics/Solutions/Beatles.xsl
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" 
			xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
			xmlns:fo="http://www.w3.org/1999/XSL/Format">
	<xsl:output method="xml" indent="yes"/>
	<xsl:template match="/beatles">
		<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
---- C O D E   O M I T T E D ----
<fo:page-sequence master-reference="list">
---- C O D E   O M I T T E D ----
<fo:flow flow-name="xsl-region-body">
					<fo:block space-after="24pt" font-weight="bold">
						<fo:external-graphic src="url('Images/beatles.jpg')" 
							width="340px" height="238px"/>
					</fo:block>
					<fo:list-block start-indent="20pt">
						<xsl:apply-templates/>
					</fo:list-block>
				</fo:flow>
			</fo:page-sequence>
		</fo:root>
	</xsl:template>
	<xsl:template match="beatle">
		<fo:list-item>
			<fo:list-item-label end-indent="label-end()">
				<fo:block font-weight="bold">
					<fo:character character="&#x2022;"/>
				</fo:block>
			</fo:list-item-label>
			<fo:list-item-body start-indent="body-start()">
				<fo:block>
					<fo:basic-link external-destination="url('{@link}')" 
						color="blue" text-decoration="underline">
						<xsl:value-of select="name/firstname"/>
							<xsl:text> </xsl:text>
						<xsl:value-of select="name/lastname"/>
					</fo:basic-link>
				</fo:block>
			</fo:list-item-body>
		</fo:list-item>
	</xsl:template>
</xsl:stylesheet>
Next