Utilização do controle lum_advancedTabularData

O controle lum_advancedtabularData está presente nas interfaces administrativas. Pelo fato do XML ser muito extenso, será exibido em dois blocos.

<renderData>
   <controls>
          <control type="lum_form">
                 <control type="lum_interfaceHeader">
                       <data>
                              <title> Administração(Notícias)</title>
                       </data>
                 </control>
                 <control type="lum_interfaceHeaderButtons">
                       <control id="addButton" text="STR_ADD" type="lum_addButton">
                              <onClick>
                                     <interfaceId>add</interfaceId>
                              </onClick>
                              <image>lumis/portal/client/images/Add.gif</image>
                              <data>
                                     <name>Adicionar</name>
                                     <onclick>function f1();return false;</onclick>
                              </data>
                        </control>
                        <control id="editButton" text="STR_EDIT" type="lum_editButton">
                              <onClick>
                                     <interfaceId>edit</interfaceId>
                                     <validators>
                                            <validator controlId="adminList.tabulardata" type="selectedOne" ></validator>
                                     </validators>
                                     <addParameters>
                                            <parameter name="id">
                                                   <value controlId="adminList.tabulardata" type="firstSelected" ></value>
                                            </parameter>
                                     </addParameters>
                              </onClick>
                              <image>lumis/portal/client/images/Edit.gif</image>
                              <data>
                                     <name>Editar</name>
                                     <onclick>function f1();return false;</onclick>
                              </data>
                        </control>
                        <control id="deleteButton" text="STR_DELETE" type="lum_deleteButton">
                              <onClick>
                                     <processActionId>delete</processActionId>
                                     <validators>
                                            <validator controlId="adminList.tabulardata" type="selectedMany" ></validator>
                                     </validators>
                              </onClick>
                              <image>lumis/portal/client/images/Delete.gif</image>
                              <data>
                                     <name>Excluir</name>
                                     <onclick>function f1();return false;</onclick>
                              </data>
                        </control>
                        <control id="versionsButton" text="STR_VERSIONS" type="lum_versionsButton">
                              <onClick>
                                 <interfaceId>lumis.service.content.version.selectVersion</interfaceId>
                                     <pageId>LumisBlankPage</pageId>
                                     <validators>
                                            <validator controlId="adminList.tabulardata" type="selectedOne" ></validator>
                                     </validators>
                                     <addParameters>
                                            <parameter name="itemId">
                                                   <value controlId="adminList.tabulardata" type="firstSelected" ></value>
                                            </parameter>
                                            <parameter name="callerServiceId">
                                                   <value>lumis.service.news</value>
                                            </parameter>
                                            <parameter name="callerServiceInstanceId">
                                                   <value>8A8181830CA775FB010CA7917A1700F2</value>
                                            </parameter>
                                            <parameter name="callerSourceId">
                                                   <value>default</value>
                                            </parameter>
                                            <parameter name="primaryKeyFieldId">
                                                   <value>id</value>
                                            </parameter>
                                            <parameter name="editInterfaceId">
                                                   <value>lumis.service.news.edit</value>
                                            </parameter>
                                     </addParameters>
                              </onClick>
                              <image>lumis/portal/client/images/Versions.gif</image>
                              <data>
                                     <name>Versões</name>
                                     <onclick>function f1();return false;</onclick>
                              </data>
                        </control>
                 </control>

O controle lum_interfaceHeader monta o cabeçalho da interface, como já foi visto.
O controle lum_interfaceHeaderButtons monta os botões de administração: adicionar, editar, excluir e versões.

Segue abaixo, o segundo bloco:

<control type="lum_advancedTabularData" id="000000000000000000000">
                       <fields>
                              <field id="title" display="true" name="Título" required="true" ></field>
                              <field id="lastModifiedDate" display="true" name="Data da última alteração" ></field>
                              <field id="workflowState" doLookup="true" name="Estado" ></field>
                              <field id="workflowAssignedTo" doLookup="true" name="Responsável" ></field>
                       </fields>
                       <data>
                              <row href="main.jsp" primaryKey="XXXX">
                                     <title>Lumis expande operação no Brasil</title>
                                     <lastModifiedDate>
                                            <value>06/09/06 11:16</value>
                                     </lastModifiedDate>
                                     <workflowState>
                                            <id>approved</id>
                                            <name>Aprovado</name>
                                            <description>Aprovado</description>
                                            <color>
                                                  <light>#dbe4bc</light>
                                                  <strong>#539a53</strong>
                                            </color>
                                            <image>
                                                  <small> Approved_small.gif</small>
                                                  <large> Approved_large.gif</large>
                                            </image>
                                     </workflowState>
                                     <workflowAssignedTo ></workflowAssignedTo>
                              </row>
                              <row href="main.jsp" primaryKey="YYYY">
                                     <title>Magazine Luiza implanta nova plataforma de intranet</title>
                                     <lastModifiedDate>
                                            <value>06/09/06 11:12</value>
                                     </lastModifiedDate>
                                     <workflowState>
                                            <id>approved</id>
                                            <name>Aprovado</name>
                                            <description>Aprovado</description>
                                            <color>
                                                  <light>#dbe4bc</light>
                                                  <strong>#539a53</strong>
                                            </color>
                                            <image>
                                                  <small> Approved_small.gif</small>
                                                  <large> Approved_large.gif</large>
                                            </image>
                                     </workflowState>
                                     <workflowAssignedTo ></workflowAssignedTo>
                              </row>
                       </data>
                 </control>
          </control>
  </controls>
</renderData>

O controle lum_advancedTabularData é semelhante ao controle da interface Lista, lum_tabularData, exceto pelo fato de trazer algumas informações importantes para uma interface Administração:

Id: O id do controle lum_advancedTabularData é importante para que os checkboxes funcionem. Caso não funcionem, não será possível editar ou excluir nenhuma notícia já cadastrada;
Fields: As tags dentro de <fields /> trazem os campos que irão aparecer no cabeçalho da tabela na interface Administração. Como por exemplo: “Título” ou “Data” da Última Alteração.

No XSL apresentado abaixo, estão sendo chamados os templates de Filtros e Paginação, mas nesse caso eles não serão customizados. Eles já foram customizados nas seções anteriores.

<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>
   <xsl:variable name= "id"select="//control[@type='lum_advancedTabularData']/@id" ></xsl:variable>
   <xsl:variable name= "fieldPath"select="//control[@type='lum_advancedTabularData']/fields" ></xsl:variable>
   <div>
          <div style="padding-bottom:8px;">
                <strong><xsl:value-ofselect="//control[@type='lum_interfaceHeader']/data/title" ></xsl:value></strong>
          </div>
          <div style="padding-bottom:4px;">
                  <B><xsl:apply-templatesselect="//control[@type='lum_interfaceHeaderButtons']" ></xsl:apply>
          </div>
          <div style="padding-bottom:8px;">
                <xsl:apply-templatesselect="//control[@type='lum_filters']" ></xsl:apply>
          </div>
          <style>
          #adminTable thead tr {background:#f9f9f9;}
          #adminTable thead th {border-bottom:1px solid #ccc;border-top:1px solid #ccc;}
          </style>
          <table cellspacing="0" cellpadding="3" width="100%" id="adminTable">
          <thead>
                 <tr align="left">
                       <th style="width:20px;"> </th>
                       <th nowrap="1">
                               <B><xsl:value-ofselect="$fieldPath/field[@id='title']/@name" ></xsl:value>
                       </th>
                       <th nowrap="1">
                               <B><xsl:value-ofselect="$fieldPath/field[@id='lastModifiedDate']/@name" ></xsl:value>
                       </th>
                       <th nowrap="1">
                               <B><xsl:value-ofselect="$fieldPath/field[@id='workflowState']/@name" ></xsl:value>
                       </th>
                       <th nowrap="1">
                               <B><xsl:value-ofselect="$fieldPath/field[@id='workflowAssignedTo']/@name" ></xsl:value>
                       </th>
                       <th style="width:8px;"> </th>
                 </tr>
          </thead>
          <tbody>
                 <xsl:for-eachselect="//control[@type='lum_advancedTabularData']/data/row">
                 <tr>
                       <td><input type="checkbox" name="{$id}" value="{@primaryKey}"/></td>
                       <td><a href="{@href}"><xsl:value-of select="title" ></xsl:value></a></td>
                       <td><xsl:value-of select="lastModifiedDate/value" ></xsl:value></td>
                       <td>
                              <img src="{workflowState/image/small}" border="0" style="vertical-align:bottom;margin:0 5px 0 0;" />
                              <span style="color:{workflowState/color/strong}"><xsl:value-of select="workflowState/name" ></xsl:value></span>
                       </td>
                       <td><xsl:value-of select="workflowAssignedTo" ></xsl:value></td>
                       <td> </td>
                 </tr>
                 </xsl:for-each>
          </tbody>
          </table>
          <div style="padding:20px 0;">
                <xsl:apply-templatesselect="//control[@type='lum_pagination']" ></xsl:apply>
          </div>
   </div>
</lum:form>
<xsl:templatematch="control[@type='lum_interfaceHeaderButtons']">
   <xsl:for-each select="control">
          <a href="#" onclick="{data/onclick}"><img src="{image}" border="0" style="vertical-align:bottom;margin:0 5px 0 0;" /><xsl:value-of select="data/name" ></xsl:value></a>
         <xsl:iftest="position()!=last()">  |  </xsl:if>
   </xsl:for-each>
</xsl:template>
</xsl:stylesheet>

Foi utilizada a tag <lum:form /> para reduzir o tamanho do código;
A tag <xsl:variable name= "id"select="//control[@type='lum_advancedTabularData']/@id" /> é importante para que os checkboxes funcionem. Será chamada dentro deles no atributo name. No caso o atributo value chamando o campo “@primaryKey” também é importante para o seu funcionamento;
O controle lum_interfaceHeaderButtons foi chamado com <xsl:apply-templates />; e depois montado logo abaixo de <lum:form />. Se os controles lum_filters ou lum_pagination fossem customizados, seriam também logo abaixo de <lum:form />;
Atribuindo um id="adminTable" a tabela, fica fácil customizar todas as tags <tr> e <th> dentro do <thead> (cabeçalho), usando o CSS declarado dentro de <style />;
Quando for montado o portal é melhor inserir todo o CSS num arquivo externo, aplicado à páginas ou canais;
Os campos do cabeçalho da tabela estão fixos. São chamados como no exemplo:<xsl:value-ofselect="$fieldPath/field[@id='title']/@name" />, sendo que a variável “fieldPath” foi declarada no início do código;
Finalmente, o loop de dados cadastrados com <xsl:for-each select="//control[@type='lum_advancedTabularData']/data/row">. Neste caso, o código é bem parecido com o funcionamento de um loop de Lista, como foi visto nas primeiras seções, com a diferença de uma interface Administração ter checkboxes.

Após a customização do XSL, a interface Administração ficará assim:

using_lum_advancedtabulardata_control_001