XSLT Pipeline

Organized by Type

  • Markup Languages

    • BusinessML: ct70_highlight_1abt_i.xml

    • StructureML: ct70_highlight_1abt_i.xml

    • StructureLayoutML: ct70_highlight_1abt_i.xml

    • SiteHTML: ct70_highlight_1abt_i.html

  • XSLT

    • ct70_highlight.xslt (and ct00_core.xslt)

    • mt01.xslt (and mt00_core.xslt)

    • sh01_general.xslt

  • EZA ("Element Zone Assignment")

    • eza-ct70_highlight-mt01-pt70-recipe_1.xml

  • CSS

    • ie_pc.css

Organized by Sequence

BusinessML to StructureML

  1. BusinessML 
    
     ct70_highlight_1abt_i.xml:
    
    	<highlights>  1
    		<highlight>
    			<p>Our first marketed product has been making a difference in the lives of
     patients with cardiovascular disease. <a href="/products/integrilin/index.asp"> 
    More </a> ... </p>
    		</highlight> 
    		<highlight>
    			<p>The most advanced of our investigational drugs is being developed with
     the goal of making a difference in the lives of multiple myeloma patients. 
    <a href="/rd/oncology/velcade/index.asp">More</a>...</p>
    		</highlight>
    	</highlights> 
    	
    1

    The Element "highlights" (plural) is a "place-able" Element for this Content Type. This means you may determine in which Module "Zone" you wish it to appear ("Assign" it to).

  2. "CT" XSLT = BusinessML to StructureML: 
    
    ct70_highlight.xslt:
    
    <xsl:template match="highlights">  1
          <xsl:variable name="eza-info">
                <xsl:call-template name="getElementEZA">  2
                      <xsl:with-param name="elementName">
                      <xsl:value-of select="name(.)"/>
                      </xsl:with-param>
                </xsl:call-template>
          </xsl:variable>
          <xsl:copy-of select="$eza-info"/>
          <div><xsl:apply-templates/></div>  3
    </xsl:template>
    
    <xsl:template match="highlight">  4
          <xsl:element name="div">
                <xsl:apply-templates/>
          </xsl:element>
    </xsl:template>
    
    1

    Match on "highlights" (plural) element.

    2

    Run the utility template in ct00_core.xslt called getElementEZA.

    This retrieves the "Assignment" information about which "place-able" "Element" goes in which Module "Zone". (EZA = Element-Zone Assignment)

    3
    [Note]Note

    The 'div' element wrapping the 'xsl:apply-templates' is of critical importance, as will be shown as we proceed with the "walk-through."

    Essentially, the "MT" XSLT will need an outermost element to "grab" onto, to be able to place the "place-able" element in the correct Zone and Position in the Module cell.

    4

    Match on "highlight" (singular) element.

  3. getElementEZA template (ct00_core.xslt):
    
    <xsl:template name="getElementEZA">
    <xsl:param name="elementName"/>
    <!-- TAG NAME -->
    <xsl:variable name="thisElementName">
    	<xsl:value-of select="$elementName"/>
    </xsl:variable>
    <!-- GET 'EZA' MARKER FOR THIS TAG -->
    <xsl:for-each select="document($pathPlusRecipe)/ezaRecipe/elementZoneAssignments/eza"> 1
    	<xsl:if test="$thisElementName=@elementName">  2
    		<!-- PLANT EZA MARKER -->
    		<xsl:element name="eza">
    		<xsl:attribute name="zone"><xsl:value-of select="@zone"/></xsl:attribute>  3
    		<xsl:attribute name="position"><xsl:value-of select="@position"/></xsl:attribute> 4
    		<xsl:if test="@presentationStyle">
    			<xsl:attribute name="presentationStyle"><xsl:value-of select="@presentationStyle"/></xsl:attribute>  5
    		</xsl:if>
    		</xsl:element>
    	</xsl:if>
    </xsl:for-each>
    </xsl:template>
    
    1

    Variables for the "path" plus "Recipe" (filename) have been established, such that the document() function can open the ezaRecipe file. The XPath gets down to the nodeset of individual "assignments" ('eza' element).

    2

    When the passed-in elementName matches the elementName attribute in the 'eza' element, we've got our match.

    3

    The "Zone" values match the Module Type cells, and are named simply 'A', 'B', etc.

    4

    The "Position" value is the numeric position (stacked, top-to-bottom) within a Zone; numbered simply '1', '2', etc.

    5

    The "Presentation Style" for a particular BusinessML element is often the default "SiteHTML" style as found in the sh01_general.xslt, for the "StructureML" element it is transformed into (e.g. <headline> might become <h3>, or even more generically <div>).

    But if the presentation needs to differ from the default, a "flag" may be set here in the ezaRecipe file: in this example "ps70" signifies the element <div> will be processed differently. See the sh01_general.xslt snippet below.

  4. eza-ct70_highlight-mt01-pt70-recipe_1.xml:
    
    <ezaRecipe>
    ...
    <elementZoneAssignments>  1
    	<eza zone="A" position="1" elementName="highlights" presentationStyle="ps70"/> 2
    </elementZoneAssignments>
    1

    Container for possibly multiple 'eza' elements, one for each "place-able" element in the Content Type Module (BusinessML). In this case, one place-able element only: 'highlights'.

    2

    The key information carried by the ezaRecipe: which Element; which Zone in the Module (which <td> table cell, effectively) (lettered 'A', 'B', etc.); which Position within that Zone (stacked up, simply)(numbered '1', '2', etc.); and (optional) any Presentation Style.

    [Note]Note

    Not discussed here, but can be seen in the code: there is also the "Presentation Type". This is a higher abstraction of indicating style decisions, as it applies a single "code" or "flag" to the entire Module (e.g. 'pt70'), as opposed to a single Element (as we have here, with @presentationStyle='ps70' for the Element 'highlights'). [You may think of the term "Type" as signifying an entire Module, as we do for "Content Type" (BusinessML module) and "Module Type" (StructureML module).]

    So, if a given Module has to apply a special presentation to more than one Element, you may do one of two things:

    • create multiple @presentationStyle attributes, each of which can be tested individually in the sh01_general.xslt (see below for example)

    OR

    • you may approach the design decision differently and devise a <presentationType> element value that will apply to all the elements in the Module. You would then need to program the sh01_general.xslt to present each of these elements properly, testing for each on this single presentationType "flag," as determined at the Module level, rather than testing on several different flags as determined at the Element level.

    Note: The current project did not make use of this presentationType (Module-level); it did use the presentationStyle (Element-level).

    [Tip]Tip

    Again, please recall these special presentation mechanisms are only used when you want elements to receive a look + feel handling in the final SiteHTML XSLT (sh01_general.xslt) that is different from the default look + feel.

    Usually, most of a site's content would call for no need for these "presentationStyle" and "presentationType" mechanisms.

StructureML to StructureLayoutML

  1. StructureML
    
    ct70_highlight_1abt_i.xml:
    
    <moduleBody>  1
    	<eza zone="A" position="1" presentationStyle="ps70"/>  2
    	<div>  3
    		<div><p>Our first marketed product has been making a 
    difference in the lives of patients with cardiovascular disease. 
    <a href="/products/integrilin/index.asp">More</a>...</p></div>
    		<div><p>The most advanced of our investigational drugs is 
    being developed with the goal of making a difference in the lives of multiple myeloma 
    patients. 
    <a href="/rd/oncology/velcade/index.asp">More</a>...</p></div>
    	</div>
    </moduleBody>
    
    1

    The container element in BusinessML was 'contentBody'; has now been transformed to 'moduleBody' in StructureML.

    2

    The 'eza' element is written down immediately ahead of the "place-able" element, which was 'highlights' in BusinessML and has been transformed simply to 'div' in StructureML.

    3

    This is the 'div' from the transformation of 'highlights' (plural); it serves as a "wrapping" container element for the entire contents of what was within <highlights> in BusinessML.

    [Note]Note

    Now, the 'eza' element and this 'div' element (was 'highlights') are "siblings," such that this 'div' is what you get for the "following-sibling::*[1]/node()" XPath that is seen in the MT XSLT (see further below).

    (By the way, the next, nested 'div' is unrelated to this "eza" mechanism; it just happens to come from the transformation of the first 'highlight' (singular).)

    [Note]Note

    As previously noted, the importance of having this outermost "wrapping" container is critical: the next XSLT (MT) will depend upon it, as we will see.

  2. "MT" XSLT = StructureML to StructureLayoutML: 
    
    mt01.xslt (and mt00_core.xslt):
    
    mt01.xslt:
    
    <table border="0" cellpadding="0" cellspacing="0"> 
    	<tr>
    		<td>
    		<div>
    			<xsl:apply-templates select="eza[@zone='A'][@position='1']"/>  1
    			<xsl:apply-templates select="eza[@zone='A'][@position='2']"/>
    	...	
    <xsl:template match="eza[@zone='A'][@position='1']">  2
          <xsl:call-template name="ezaWriter"/>
    </xsl:template>
    
    
    mt00_core.xslt:
    
    <xsl:template name="ezaWriter">  3
          <xsl:element name="div">
                <xsl:copy-of select="following-sibling::*[1]/node()"/>  4
          </xsl:element>
    </xsl:template>
    
    1

    All the various MT XSLTs are full of templates that seek to match all the permutations of Zone and Position ('A' '1'; 'A' '2'; etc., 'B' '1'; 'B' '2'; etc.). These are positioned inside <table><tr><td> cells appropriate to the Module Type.

    2

    The "xsl:apply-templates select" from the above note will "match" this template; it in turn simply calls the 'ezaWriter' template...

    3

    ezaWriter utility functional template (over in mt00_core.xslt).

    4

    Here the xsl:copy-of does a "deep" copy on the node returned by the XPath. This node is our "place-able" element, in this case, 'highlights' from the BusinessML, which has been transformed to 'div' in the StructureML.

    As will be seen in the source XML to the next "hop," the 'div' will be written to the appropriate <td> table cell in the Module, in the StructureLayoutML version.

StructureLayoutML to SiteHTML

  1. StructureLayoutML 
    
    ct70_highlight_1abt_i.xml:
    
    <table border="0" cellpadding="0" cellspacing="0"> 
    	<tr>
    		<td>  1
    		<div>
    		<div presentationStyle="ps70">  2
    			<div><p>Our first marketed product has been making a difference in the 
    lives of patients with cardiovascular disease. 
    <a href="/products/integrilin/index.asp">More</a>...</p></div>
    			<div><p>The most advanced of our investigational drugs is being developed 
    with the goal of making a difference in the lives of multiple myeloma patients. 
    <a href="/rd/oncology/velcade/index.asp">More</a>...</p></div>
    		</div>
    		</div>
    		</td>	
    
    1

    The place-able "Element" is located within ("Assigned" to) a specific "Zone" (a particular <td>) in the Module.

    2

    The Presentation Style ("ps70") has been passed along as an attribute on the 'div' corresponding to the place-able element.

  2. "SH" XSLT = StructureLayoutML to SiteHTML: 
    
    sh01_general.xslt:
    
    <xsl:template match="div">  1
    	<xsl:choose>
    		<xsl:when test="@presentationStyle='ps70'">  2
    			<table width="175" cellspacing="0" cellpadding="0" border="0">
    				<tr>    3
    					<td colspan="4">
    						<img src="/images/rt_side_hdr_hilite.gif" width="175" height="34" alt="" border="0"/>
    					</td>
    				</tr>
    				<tr>
    					<td width="1" CLASS="bgBeige"><img src="/images/spacer.gif" width="1" height="1" alt="" border="0"/></td>
    					<td colspan="2"><img src="/images/spacer.gif" width="1" height="15" alt="" border="0"/></td>	
    					<td width="1" CLASS="bgBeige"><img src="/images/spacer.gif" width="1" height="1" alt="" border="0"/></td>
    				</tr>
    ...  4
    				</tr>
    			</table>
    		</xsl:when>
    		<xsl:otherwise>  5
    			<div>
    				<xsl:copy-of select="@*"/>
    				<xsl:apply-templates/>
    			</div>			
    		</xsl:otherwise>
    	</xsl:choose>
    </xsl:template>
    
    1

    Template matching on 'div' be it default or specialized presentation.

    2

    Finally, the "test" in XSL that determines if this 'div' has the "flag" that indicates it requires the special presentation treatment.

    3

    As can be seen from all this highly presentational HTML, the contents of this table are getting special, one-off presentation treatment.

    4

    Much HTML edited out (48 lines of code all told).

    5

    For 'div' elements that do not have presentationStyle=ps70, the default behavior is very straightforward (wrap in a 'div', copy-of (grabbing attributes), and apply-templates (keep going...).

SiteHTML (and CSS)

  1. SiteHTML 
    
    ct70_highlight_1abt_i.html:
    
    <table border="0" cellpadding="0" cellspacing="0" width="175">
    	<tr>  1
    		<td colspan="4"><img border="0" alt="" height="34" width="175" src="/images/rt_side_hdr_hilite.gif"></td>
    	</tr>
    	<tr>
    		<td CLASS="bgBeige" width="1">  2
    			<img border="0" alt="" height="1" width="1" src="/images/spacer.gif"></td>
    		<td colspan="2"><img border="0" alt="" height="15" width="1" src="/images/spacer.gif"></td>
    		<td CLASS="bgBeige" width="1"><img border="0" alt="" height="1" width="1" src="/images/spacer.gif"></td>
    	</tr>
    	<tr>
    		<td CLASS="bgBeige"><img border="0" alt="" height="1" width="1" src="/images/spacer.gif"></td>
    		<td align="center" valign="top">  3
    			<img border="0" alt="" height="5" width="1" src="/images/spacer.gif"><br>
    			<img border="0" alt="" height="8" width="11" src="/images/blk_arrow_right.gif">
    		</td>
    		<td>
    			<div class="related">  4
    				Our first marketed product has been making a difference in 
    the lives of patients with cardiovascular disease. 
    <a href="/products/integrilin/index.asp">More</a>...</div>
    		</td>
    		<td CLASS="bgBeige"><img border="0" alt="" height="1" width="1" src="/images/spacer.gif"></td>
    	</tr>
    ...
    
    1

    As also noted in looking at the "SiteHTML XSLT" in the previous section, here we see the final result of highly presentational HTML: the contents of this table are getting special, one-off presentation treatment.

    2

    Here the background color presentation is kept separate one further step, by the standard means of Cascading Style Sheets (CSS). (See also snippet below.)

    3

    Spacer.gif files, special use of <br /> for line breaks, and special graphics (arrow) complete the very non-structural presentation of the content, for final "SiteHTML" look + feel.

    4

    And here the font choice for content presentation is also kept separate by means of CSS. (Again, see also snippet below.)

  2. ie_pc.css:   
    .bgBeige
    {
          background-color:#cc6600; 1
    }
    .related
    {
          font-family:arial,helvetica;
          font-size:11px;  2
          color:#0066cc;
          margin:0px 12px 10px 0px;  3
    }
    
    1

    Standard use of CSS to separate out color decisions from content markup.

    2

    Here, an exception to the site's design re: font sizes: fixed font used in the tight real estate of the very presentational "Highlights" box. This prevents the user from increasing font size with her or his browser, which would cause the Highlights box to break. (Almost everywhere else on the site, the text is relatively sized; the user can adjust the font size if they wish).

    3

    CSS used to control whitespace, vertically and horizontally. This, as opposed to excessive use of spacer gifs, <br /> line breaks, etc., etc. Used wherever feasible.

    By the way, the four numbers are for the top, right, bottom and left respectively.