Using the lum_details control
Generally speaking, there are not many differences between an XML of the List interface (lum_tabularData) and a Details interface (lum_details). Among them are:
- There are no links in the XML of the Details interface, so it's not necessary to use the tag
<a>
in the XSL; - There is no list of registered items, as only one
<row />
will always arrive within a<data />
; - Despite the lum_interfaceHeader (header) control arriving in the XML, depending on the solution, it will likely not be used in the XSL;
- The tag related to the image is
<contentImage />
to be assigned an image along with the content. The tag<introductionImage />
can also be used to display an image alongside the introduction. The latter was not used in the example of the Details interface; - There is the field
<content />,
which brings the text of the content field of the registered item.
<renderData>
<controls>
<control type="lum_details">
<control type="lum_interfaceHeader">
<data>
<title>Details</title>
</data>
</control>
<data>
<row>
<title>Lumis expands operations in Brazil</title>
<publishStartDate>
<value>06/09/06 11:16</value>
</publishStartDate>
<contentImage>
<name>img_logoLumis.gif</name>
<href>data/files/img_logoLumis.gif</href>
<imageLegend>Logo of Lumis</imageLegend>
</contentImage>
<introduction>Lumis (www.lumis.com.br), developer of the software platform for corporate portals, LumisXP Suite, expands operations to southern Brazil, with a newly established business unit in Curitiba.</introduction>
<content><p align="justify">In addition, the company celebrates the acquisition of Copesul – Southern Petrochemical Company, (<a href="http://www.copesul.com.br/">www.copesul.com.br</a>), located in Rio Grande do Sul and responsible for producing about 40% of the ethylene consumed in Brazil.</p></content>
</row>
</data>
</control>
</controls>
</renderData>
The XSL to handle the XML of the Details interface can be as follows:
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:import href="../../../../lumis/doui/style/DouiControls.xsl" ></xsl:import>
<xsl:output omit-xml-declaration = "yes" method="xml" ></xsl:output>
<xsl:template match="/">
<div>
<xsl:for-each select="//control[@type='lum_details']/data/row">
<div><strong><xsl:value-of select="title" ></xsl:value></strong></div>
<br /><br />
<div>
<xsl:if test="contentImage/name != ''">
<img src="{contentImage/href}" border="0" alt="" style="float:left;margin:0 6px 6px 0;">
<xsl:if test="contentImage/imageLegend != ''">
<xsl:attribute name="alt"><xsl:value-of select="contentImage/imageLegend" ></xsl:value></xsl:attribute>
</xsl:if>
</img>
</xsl:if>
<em><xsl:value-of disable-output-escaping="yes" select="introduction" ></xsl:value></em>
<br /><br />
<xsl:value-of disable-output-escaping="yes" select="content" ></xsl:value>
</div>
</xsl:for-each>
</div>
</xsl:template>
</xsl:stylesheet>
Although in the Details interface only one <row / >
arrives within <data />
, the tag <xsl:for-each />
was used, as it facilitates the calling of items within the loop, already in the correct hierarchy.
Another option, if the <xsl:for-each />
tag is not used, is:
<xsl:value-of select="//control[@type='lum_details']/data/row/XXXX" />
- Where XXXX is the field name (e.g., title, content, etc… )
You can also create a variable in the XSL, within <xsl:template />
:
<xsl:variable name= "path" select="//control[@type='lum_details']/data/row" />
From the variable above, each field would be called in the following way:
<xsl:value-of select="$path/title" />
Replacing the normal tags in the above XSL with the specific Lumis tags, you have the following code:
<xsl:stylesheetxmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:lum="http://www.lumis.com.br/doui" version="1.0">
<xsl:import href="../../../../lumis/doui/style/DouiControls.xsl" ></xsl:import>
<xsl:output omit-xml-declaration = "yes" method="xml" ></xsl:output>
<xsl:template match="/">
<div>
<lum:details>
<div><strong><lum:field id="title" ></lum:field></strong></div>
<br /><br />
<div>
<xsl:if test="contentImage/name != ''">
<lum:field id="contentImage" isImage="true" style="float:left;margin:0 6px 6px 0;" ></lum:field>
</xsl:if>
lum:field id="introduction" isHtml="true" />
<br /><br />
<lum:field id="content" isHtml="true" ></lum:field>
</div>
</lum:details>
</div>
</xsl:template>
</xsl:stylesheet>
Note that instead of <xsl:for-each />
, <lum:details />
was used, and not <lum:loop />
. The tag <lum:form />
should not be used in the XSL of the Details interface.
The layout of the Details interface applying this XSL will look like this:

To enhance this layout, simply create CSS classes and apply them in the customized XSL, in the tags <div />
.