Using the lum_pagination Control

In the "Number of Items" option of the right-click on the List interfaces of Lumis, for example, the quantity of items to be displayed can be determined. In this case, the page containing the List interface will undergo pagination.

Therefore, if the List interface of the News service, for example, receives a greater number of registered items via XML than the maximum determined, the pagination information will reach the lum_pagination control in the XML:

<renderData>
   <controls>
          <control type="lum_form">
                 <control type="lum_interfaceHeader">
                       <data>
                              <title>List (News)</title>
                       </data>
                 </control>
                 <control type="lum_tabularData">
                       <data>
                              <row href="main.jsp">
                                     <title>Lumis Expands Operation in Brazil</title>
                                     <publishStartDate>
                                            <value>06/09/06 11:16</value>
                                     </publishStartDate>
                                     <introductionImage>
                                            <name>img_logoLumis.gif</name>
                                            <href>data/files/img_logoLumis.gif</href>
                                            <imageLegend>Lumis Logo</imageLegend>
                                     </introductionImage>
                                     <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>
                              </row>
                              <row href="main.jsp">
                                     <title>Magazine Luiza Implements New Intranet Platform</title>
                                     <publishStartDate>
                                            <value>06/09/06 11:12</value>
                                     </publishStartDate>
                                     <introductionImage>
                                            <name>img_logoLumis.gif</name>
                                            <href>data/files/img_logoLumis.gif</href>
                                            <imageLegend>Lumis Logo</imageLegend>
                                     </introductionImage>
                                     <introduction>After using its own solution to manage the Luiza Portal for a year, the retail chain migrates to Lumis's tool. The intranet serves 10,000 employees.</introduction>
                              </row>
                       </data>
                 </control>
                 <control type="lum_pagination">
                       <strings>
                              <string id="STR_NEXT_PAGE">Next page</string>
                              <string id="STR_PAGES">Pages</string>
                              <string id="STR_PREVIOUS_BLOCK">Previous block of pages</string>
                              <string id="STR_FIRST_PAGE">First page</string>
                              <string id="STR_LAST_PAGE">Last page</string>
                              <string id="STR_NEXT_BLOCK">Next block of pages</string>
                              <string id="STR_PREVIOUS_PAGE">Previous page</string>
                       </strings>
                       <data>
                              <numPages>3</numPages>
                              <page currentPage="true" href="javascript:function f1();">1</page>
                              <page href="javascript:function f1();">2</page>
                              <page href="javascript:function f1();">3</page>
                              <nextPage href="javascript:function f1();">2</nextPage>
                       </data>
                 </control>
          </control>
  </controls>
</renderData>

Based on the previous XML code, there are two options to create the pagination:

Call the existing pagination template in the DouiControls.xsl within the XSL of the List interface.
Or, call the same template, but customize it in the XSL file where it was called.

Calling the pagination template in the XSL file of the List interface (of News):

<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="control[@type='lum_form']">
   <form>
   <xsl:call-template name="lum_formHeader" ></xsl:call>
   <div>
         <div><strong><xsl:value-of select="//control[@type='lum_interfaceHeader']/data/title" ></xsl:value></strong></div>
          <br /><br />
         <xsl:for-each select="//control[@type='lum_tabularData']/data/row">
                 <div>
                       <a href="{@href}"><strong><xsl:value-of select="title" ></xsl:value></strong></a>
                       (<xsl:value-of select="publishStartDate/value" ></xsl:value>)
                       <br />
                       <xsl:if test="introductionImage/name != ''">
                              <img src="{introductionImage/href}" border="0" alt="" style="float:left;margin:0 6px 6px 0;">
                                     <xsl:if test="introductionImage/imageLegend != ''">
                                            <xsl:attribute name="alt"><xsl:value-of select="introductionImage/imageLegend" ></xsl:value></xsl:attribute>
                                     </xsl:if>
                              </img>
                       </xsl:if>
                       <xsl:value-of disable-output-escaping="yes" select="introduction" ></xsl:value>
                 </div>
                 <br /><br />
          </xsl:for-each>
          <B><xsl:apply-templates select="//control[@type='lum_pagination']" ></xsl:apply>
   </div>
   </form>                   
</xsl:template>
</xsl:stylesheet>

Notes:

In addition to adding the <xsl:apply-templates /> calling the lum_pagination template, the following code was added:

This is because, for pagination to work, the following must be used <xsl:template match="//control[@type='lum_form']"> instead of just <xsl:template match="/">, and additionally, it is necessary to have the <form> calling the lum_formHeader template.

To simplify the code, just use the tag <lum:form /> around the code. This is one of the most recommended areas to use Lumis tags instead of normal XSL tags. (look for the example with <lum:form />)

With the previous XSL coding, the pagination is set up. In the following example, it has been determined for the interface to display only one item per page, as can be seen in the XML of it:

The second option to create the pagination, customizing the structure and layout, should use the tag <xsl:template match="//control[@type='lum_pagination']">. This time, <lum:form /> was used to make it easier:

<xsl:stylesheet xmlns: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>
<lum:form>
   <div>
         <div><strong><xsl:value-of select="//control[@type='lum_interfaceHeader']/data/title" ></xsl:value></strong></div>
          <br /><br />
         <xsl:for-each select="//control[@type='lum_tabularData']/data/row">
                 <div>
                       <a href="{@href}"><strong><xsl:value-of select="title" ></xsl:value></strong></a>
                       (<xsl:value-of select="publishStartDate/value" ></xsl:value>)
                       <br />
                       <xsl:if test="introductionImage/name != ''">
                              <img src="{introductionImage/href}" border="0" alt="" style="float:left;margin:0 6px 6px 0;">
                                     <xsl:if test="introductionImage/imageLegend != ''">
                                            <xsl:attribute name="alt"><xsl:value-of select="introductionImage/imageLegend" ></xsl:value></xsl:attribute>
                                     </xsl:if>
                              </img>
                       </xsl:if>
                       <xsl:value-of disable-output-escaping="yes" select="introduction" ></xsl:value>
                 </div>
                <br /><br />
          </xsl:for-each>
         
          <B><xsl:apply-templates select="//control[@type='lum_pagination']" ></xsl:apply>
   </div>
</lum:form>
<xsl:template match="control[@type='lum_pagination']">
   <xsl:if test="data/page">
   <input type="hidden" name="{@id}" />
          <div style="border:1px solid #ccc;padding:8px;">
                 <table cellpadding="0" cellspacing="0" width="90%">
                 <tr>
                       <td width="25%"><xsl:value-of select= "data/numPages"></xsl:value> <xsl:value-of select="strings/string[@id='STR_PAGES']"></xsl:value></td>
                       <td width="65%" align="center">
                              <xsl:if test="data/previousBlock"><a href="{data/previousBlock/@href}"><<</a>  </xsl:if>
                              <xsl:if test="data/previousPage"><a href="{data/previousPage/@href}"><</a>  </xsl:if>
                              <xsl:if test="data/firstPage"><a href="{data/firstPage/@href}"><xsl:value-of select="data/firstPage" ></xsl:value>...</a> </xsl:if>
                              <xsl:for-each select="data/page">
                                     <a href="{@href}">
                                            <xsl:choose>
                                            <xsl:when test="@currentPage='true'">
                                                  [<xsl:value-of select="." ></xsl:value>]
                                            </xsl:when>
                                            <xsl:otherwise>
                                                  <xsl:value-of select="." ></xsl:value>
                                            </xsl:otherwise>
                                            </xsl:choose>
                                     </a>
                                    <xsl:if test="position()!=last()"> - </xsl:if>
                              </xsl:for-each>
                              <xsl:if test="data/lastPage"> <a href="{data/lastPage/@href}">...<xsl:value-of select="data/lastPage" ></xsl:value></a></xsl:if>
                              <xsl:if test="data/nextPage">  <a href="{data/nextPage/@href}">></a></xsl:if>
                              <xsl:if test="data/nextBlock">  <a href="{data/nextBlock/@href}">>></a></xsl:if>
                       </td>
                 </tr>
                 </table>
          </div>
   </xsl:if>
</xsl:template>
</xsl:stylesheet>

At first glance, the XSL of the lum_pagination control may seem complex. This complexity is related to checks for pagination existence, number of pages, which will be the last page, existence of previous and next links, etc...

The code related to pagination was taken from the DouiControls.xsl file and some modifications were made.

With the customization of the lum_pagination control, the List interface will be displayed as follows: