The document discusses code examples for customizing an XML-template engine. It provides code to: 1) Replace current page links with large buttons or icons. 2) Allow navigation by page instead of line in a procedure. 3) Scale images correctly for different devices. 4) Generate a summary section with hyperlinks to other sections in a procedure.

1. D3ML Session
Falk Hartmann
Research Associate, SAP AG

2. Requirements
What is needed?
-A running DA/DM/AM
-A browser (Firefox with User Agent Switcher + IE)
(http://localhost:8888/static)
-An editor supporting XML (JEdit, Eclipse & WTP plugin)
-A CAE
-An MWA
© SAP AG 2006, An Architecture for an XML-Template Engine… / Falk Hartmann / 2
2

3. Open questions
3
What is the code to replace the current links (i.e.: next, previous,
home) shown at the bottom of the page by big icons or buttons?
⇒ Currently hard-coded in the AdaptionManager
What is the code to navigate page by page instead line by line in the
procedure (i.e.: could we create new icons or buttons)?
⇒ Has been done by SBS
What is the code to scale an image in order to display it correctly on
several devices (laptop, PDA, etc.)?
⇒ Images are now scaled to the width of the display device
© SAP AG 2006, An Architecture for an XML-Template Engine… / Falk Hartmann / 3

4. Summary Example (1)
4
What is the code to generate an overview of the procedure (e.g.
some kind of summary with hyperlinks for example)?
⇒ Add summary to procedure.xtl
<section id="summary">
<span class="phase_name">Summary</span><br/>
<ul>
<xtl:for-each select="phases">
<li>
<a>
<xtl:attribute name="href"
select="translate(concat('#',name),' ','_')"/>
<xtl:text select="name"/>
</a>
</li>
</xtl:for-each>
</ul>
</section>
© SAP AG 2006, An Architecture for an XML-Template Engine… / Falk Hartmann / 4

5. Summary Example (2)
⇒ Furthermore, the sections need named anchors
<section id="general_warnings">
<!-- GENERAL WARNINGS AREA -->
<xtl:for-each
select="phases[name='General warnings']">
<a>
<xtl:attribute name="id"
select="translate(name,' ','_')"/>
</a>
<xtl:call-macro name="INFO_ASSET"/>
</xtl:for-each>
<!-- END GENERAL WARNINGS AREA -->
</section>
⇒ Treat the other sections respectively
© SAP AG 2006, An Architecture for an XML-Template Engine… / Falk Hartmann / 5
5

6. Adaptation Example (1)
6
What is the code to adapt the layout of a piece of text according to
the following rendering hints?
⇒Add macro to procedure.xtl
<xtl:macro name="IMPORTANCE">
<xtl:if select="
count(allMetadata/*[name()='Important'] ) > 0">
<xtl:attribute name="style" select="color:red;"
realm="id"/>
</xtl:if>
<xtl:if select="
count(allMetadata/*[name()='Important'] ) = 0
and count( allMetadata/*[name()='Relatively
Important'] ) > 0">
<xtl:attribute name="style" select="color:blue;"
realm="id"/>
</xtl:if>
</xtl:macro>
© SAP AG 2006, An Architecture for an XML-Template Engine… / Falk Hartmann / 6

7. Adaptation Example (2)
⇒ Use the macro
<span class="instruction_name">
<xtl:call-macro name="IMPORTANCE"/>
<xtl:text select="name"/>
</span>
© SAP AG 2006, An Architecture for an XML-Template Engine… / Falk Hartmann / 7
7

8. Layout Container Example (1)
8
How to create a general warnings sections specifically for the PDA
that shows only warnings and cautions?
⇒ Clone and modify the section "general_warnings"
<section id="simplified_general_warnings">
<!-- GENERAL WARNINGS AREA -->
<xtl:for-each select="phases[
name='General warnings']">
<a>
<xtl:attribute name="id"
select="translate(name,' ','_')"/>
</a>
<xtl:call-macro name="SIMPLIFIED_INFO_ASSET"/>
</xtl:for-each>
<!-- END GENERAL WARNINGS AREA -->
</section>
© SAP AG 2006, An Architecture for an XML-Template Engine… / Falk Hartmann / 8

9. Layout Container Example (2)
9
⇒ Clone and modify the macro "INFO_ASSET"
<xtl:macro name="SIMPLIFIED_INFO_ASSET">
<div>
<xtl:for-each
select="contentAssets[type=('warning'|'caution')]">
<xtl:call-macro name="INFO_ASSET_CONTENT"/>
</xtl:for-each>
<xtl:for-each
select="assetReferences[type=('warning'|'caution')]">
<xtl:call-macro name="INFO_ASSET_CONTENT"/>
</xtl:for-each>
</div>
</xtl:macro>
© SAP AG 2006, An Architecture for an XML-Template Engine… / Falk Hartmann / 9

10. Layout Container Example (3)
10
⇒ Use the new section in an alternative layout container
<!-- … -->
<sel:when expr="outputMethod() = 'visual' and
device-height() &lt; 400">
<d3ml:layout-container>
<d3ml:frame paginate="true">
<d3ml:content-ref ref="#general_info"/>
<d3ml:content-ref
ref="#simplified_general_warnings"/>
<xtl:for-each select="phases[
name!='General warnings']">
<d3ml:content-ref>
<xtl:attribute name="ref" select="concat('#',id)"/>
</d3ml:content-ref>
</xtl:for-each>
</d3ml:frame>
</d3ml:layout-container>
</sel:when>
© SAP AG 2006, An Architecture for an XML-Template Engine… / Falk Hartmann / 10

11. That’s it.
<xtl:for-each select="questions/*">
<xtl:text select="answer()"/>
</xtl:for-each>
© SAP AG 2006, An Architecture for an XML-Template Engine… / Falk Hartmann / 11
11