1.27k likes | 1.3k Views
Discover the basics of XSLT and XPath in this workshop presented at the uPortal Conference. Learn design aspects, conversion of XML to markup languages, and practical methodologies. No prior experience needed. Dive into uPortal, XPath, and XSLT concepts with hands-on sessions and references. Explore JA-SIG’s use of XSLT in uPortal for rendering structure, themes, and channels. Practical tips and recommended resources included. Gain insights into creating structured layouts and transforming content for various devices. Dive into user layout, channel transformations, and XSL views. Understand the importance of XHTML for XSLT stylesheets and practical aspects of creating well-formed documents. Explore user preferences, skin selection, and publish/subscribe modules in uPortal. Learn about different types of channels and controls for flexible content delivery.
E N D
Introduction to XSLT Justin Tilton instructional media + magic, inc. As presented at the Summer uPortal Conference Denver, Colorado, June 8, 2003
The Abstract… Looking for a methodology to quickly and effectively create Transformations? Interested in the basics of XSLT and Xpath, and a good way to get started? If so, this workshop is for you! We will be discussing the fundamental concepts of XSLT and Xpath, and the methodologies that have emerged from months of developing stylesheet transformations for the uPortal 2.0 project. We will discuss the design aspects related to converting structured information in XML into device-dependent markup languages such as HTML, and WML, and the guidelines and best practices evolving from this experience. No prior XSLT experience is necessary.
Overview • Introduction • uPortal • Basic XPath • Basic XSLT • Markup: XHTML • Cascading Style Sheets • Tools • The Creation Process • Hands-on
Background • Who: W3C • What: XPath and XSLT Specs. • When: 11/16/1999 • Why: A need arose for a specification to define the syntax and semantics for transforming XML documents.
References • “The” definitivereference… • Michael Kay • Wrox Press Inc • ISBN: 1861005067
References • Great practicalreference… • Jeni Tennison • Hungry Minds • ISBN: 0764547763
References • Practical use oftransformationsin Java code • Eric Burke • O'Reilly & Assoc. • ISBN: 0596001436
Use of XSLT in uPortal • XSLT is used to render the "Structure", "Theme" and "Channels" • Structure is an XML to XML Transformation of Abstract Layout to Structured Layout (such as Tab and Column) • Theme is an XML to Markup Language Transformation (XHTML, WAP, etc) which renders the container for headers, navigation, channels, footers, etc. • Channels have XML to Markup Language Transformations that render content
Structure XSLT Tab/Col/Row Tab/Column Tree/Column XSLT Processor User Layout XML XML StructureXSLT
Conceptual Structure The Structure is XML at this point, the illustrations are representational
Theme XSLT HTML 4.0Browser HTML 3.2PDA WML Mobile Phone XSLT Processor StructureXML ThemeXSLT
Channel XSLT Channel XML and Stylesheets Final Output Output Streamto Device
Basic Architecture Channel XSLT Channel XSLT Framework Channel XSLT Structure XSLT Theme XSLT Skins - CSS
Channel • Elementary unit of presentation, defined by the IChannel interface User InteractionExternal Information Channel Content(Presentation) IChannel
IChannel content must • Be well-formed XML such as XHTML, RSS, SVG, SMIL, or a SOAP message (HTML is not well formed XML) • Rendered by an XSL transformation using an XSL stylesheet
Framework Organization User Interaction Presentation uPortal Framework Channel Channel Channel
User Layout • User Layout is an abstract structure defining the overall content available to the user • userLayout is a tree structure consisting of “folders” and “channels”, the later always being the leaf nodes
User Layout Tab Tab Tab Column Channel Channel Channel Column Channel Channel Channel Channel Channel Structure Transformation
Theme Transformation User Layout Tab Tab Tab Jim Smith Financial Aid Library Column Column Channel Channel Channel Channel Channel Channel Dictionary.com Bookmarks Cartoon
Compiling the Presentation userLayout Structuretransformation XSLT structuredLayout setRuntimeData() XSLT Channels Themetransformation renderXML() HTML, WML VoiceML...
Content Transformation XML XSLT Processor XHTML: Web Browser HTML: PDA Stylesheet WML: Cell Phone
User Preferences • Swappable layout and preference management modules • Profile management module • Tab-column specific prefs. module • Skin selection
Publish/Subscribe • Channel publishing document • Channel parameters • Default values • Modification permissions • Descriptions • Publish/Subscribe steps • Step sequence • Instructions, help • A complex channel with multiple XSL views
Why XHTML? • XSLT Stylesheets are XML documents • If you plan to output HTML, it will reside in the template bodies of the XSLT Stylesheet, and the markup will be output as literal output. • When the XSLT Stylesheet contains Markup, it has to be well formed
Differences with HTML 4 • Due to the fact that XHTML is an XML application, certain practices that were perfectly legal in HTML 4 must be changed. • Documents must be well-formed • Well-formedness is a new concept introduced by [XML]. Essentially this means that all elements must either have closing tags or be written in a special form (as described below), and that all the elements must nest. • CORRECT: nested elements. <p>here is an emphasized <em>paragraph</em>.</p> • INCORRECT: overlapping elements <p>here is an emphasized <em>paragraph.</p></em>
Differences with HTML 4 • Element and attribute names must be in lower case • XHTML documents must use lower case for all HTML element and attribute names. This difference is necessary because XML is case-sensitive e.g. <li> and <LI> are different tags.
Differences with HTML 4 • In HTML 4 certain elements were permitted to omit the end tag; with the elements that followed implying closure. This omission is not permitted in XML-based XHTML. All elements must have an end tag. • CORRECT: terminated elements <p>here is a paragraph.</p><p>here is another paragraph.</p> • INCORRECT: unterminated elements <p>here is a paragraph.<p>here is another paragraph.
Differences with HTML 4 • All attribute values must be quoted, even those which appear to be numeric. • CORRECT: quoted attribute values <table rows="3"> • INCORRECT: unquoted attribute values <table rows=3>