http://fulbright.uark.edu/departments/biology/directory/webfirst.php Presented by Michael Davis & Morgan Bibbs XML & XSL CASE STUDY: An XML based snippet for one-off manual profile pages.

Digital Design & Development! Before you get started on your own project… Who ya gonna call?? Digital Design & Development!

DEFINING TERMS, PROVIDING CONTEXT XML = eXtensible Markup Language XSL = eXtensible Stylesheet Language Components of XSL: XSLT = transforms XML XPath = navigates XML XQuery = queries XML *W3School s

A note about extensible Markup Language <sea> <hole> <log>Pine</log> <bump></bump> <amphibian></amphibian> <tail></tail> </hole> <log>Oak</log> <bump>Cause: lightning</bump> <amphibian>Tree Frog</amphibian> <tail>At first...</tail> <log>Mangrove</log> <bump>Cause: gator damage</bump> <amphibian>Pig Frog</amphibian> <tail>Not anymore!</tail> </sea> There is no defined syntax for XML You can mix HTML syntax with your own markup As long as the XSL declarations correspond with the XML syntax, you’re good to go

The stylesheet for the previous two documents. OU Templates Files required - file type, purpose, and language File Type Purpose Language Template Image This is what users will see when they select a new page or section to create. GIF TCF Defines new page/section setup form and 
what files to create in a new section. XML TMPL Outlines the PCF page structure, page 
properties, and editable regions.* XSL The stylesheet for the previous two documents. * The file extension PCF is meaningless. Only once the PCF is published does it matter. The file extension upon publish is defined in the stylesheet declaration on the second line of the TMPL document.

Why Snippets? Creating a new template is a large-scale solution for a relatively small-scale problem. XSL snippets allow for easy editing of complex layouts with minimal training required. Our templates are based on XML/XSL for a reason. XML is reliable, tested, simple, and customizable. We should be utilizing the XML/XSL framework of OmniUpdate, and outside of templates, snippets are the best way to do this.

OU snippets Files required - file type, purpose, and language directory-profile-1.inc Snippet source file. XML directory-profile-1.table-transform.xsl Snippet Stylesheet XSL The snippet itself Create a new snippet: name it, 
add to a category, link the .inc file, 
and save. –

DEMO - XSL functionality In our demo, the components of XSL – XSLT, Xquery and Xpath – work together to accomplish the following specific functions and transformations: Query xml elements, attributes, variables Query specific xml paths and to create new variables Dynamically apply classes and other attributes to content and show/hide content based on those xml queries Generate unique IDs to link tabs to tab content

DEMO - XSL elements All XSL elements used: <xsl:template></xsl:template> <xsl:variable /> <xsl:value-of /> <xsl:attribute></xsl:attribute> <xsl:apply-templates /> <xsl:if></xsl:if> <xsl:choose> <xsl:when></xsl:when> <xsl:otherwise></xsl:otherwise> </xsl:choose> “When and “otherwise” must be nested in “choose” to complete the statement.

Top half of XSL stopping after tab list, before tab content DEMO - xsl simplified and color coded Top half of XSL stopping after tab list, before tab content Bright blue = xsl Light green = abbreviated xsl Orange = html 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 <xsl:template match="table[@class='directory-profile-1']" mode=“copy”> <xsl:variable name=“tabs-filled” select=“xml string and conditional statements” /> <xsl:variable name=“total-tabs” select=“function of previous variable” /> <div class=“col-xs-12 col-sm-9”> <div class=“entry-content”> <h3><xsl:value-of select=“xml name string” /></h3> <h4><xsl:value-of select=“xml title string” /></h4> <p><xsl:value-of select=“xml bio info string” /></p> <div id=“tabstrip”> <ul id=“profileTab”> <xsl:attribute name=“class”> <xsl:choose> <xsl:when test=“above variables and conditional statements”>nav nav-pills</xsl:when> <xsl:otherwise>nav nav-tabs</xsl:otherwise> </xsl:choose> </xsl:attribute> <xsl:for-each select=“xml string with conditional statements”> <li> <xsl:if test=“assign first item active class”>active</xsl:if> <a href=“xsl-generated id”><xsl:value-of select=“xsl string”></a> </li> </xsl:for-each> </ul> Two additional variables for education-filled, website-filled

THANK YOU! Resources OFFICIAL XML SCHEMA https://www.w3.org/2001/XMLSchema DEMO RESOURCES: https://github.com/admonkey/directory-profile.snippet THANK YOU!