Utilização do controle lum_advancedTabularData

 Top  Previous  Next

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" />

                                     </validators>

                                     <addParameters>

                                            <parameter name="id">

                                                   <value controlId="adminList.tabulardata" type="firstSelected" />

                                            </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" />

                                     </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" />

                                     </validators>

                                     <addParameters>

                                            <parameter name="itemId">

                                                   <value controlId="adminList.tabulardata" type="firstSelected" />

                                            </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>

<!-- continua -->

Os controles que estão em negrito são os que serão trabalhados no XSL. 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:

  <!-- continuação -->

                <control type="lum_advancedTabularData" id="000000000000000000000">

                       <fields>

                              <field id="title" display="true" name="Título" required="true" />

                              <field id="lastModifiedDate" display="true" name="Data da última alteração" />

                              <field id="workflowState" doLookup="true" name="Estado" />

                              <field id="workflowAssignedTo" doLookup="true" name="Responsável" />

                       </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 />

                              </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 />

                              </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. Em negrito alguns destaques importantes do código:
 

 <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:output omit-xml-declaration = "yes" method="xml" />

<lum:form>

   <xsl:variable name= "id"select="//control[@type='lum_advancedTabularData']/@id" />

   <xsl:variable name= "fieldPath"select="//control[@type='lum_advancedTabularData']/fields" />

   <div>

          <div style="padding-bottom:8px;">

                <strong><xsl:value-ofselect="//control[@type='lum_interfaceHeader']/data/title" /></strong>

          </div>

          <div style="padding-bottom:4px;">

                  <B><xsl:apply-templatesselect="//control[@type='lum_interfaceHeaderButtons']" />

          </div>

          <div style="padding-bottom:8px;">

                <xsl:apply-templatesselect="//control[@type='lum_filters']" />

          </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;">&#160;</th>

                       <th nowrap="1">

                               <B><xsl:value-ofselect="$fieldPath/field[@id='title']/@name" />

                       </th>

                       <th nowrap="1">

                               <B><xsl:value-ofselect="$fieldPath/field[@id='lastModifiedDate']/@name" />

                       </th>

                       <th nowrap="1">

                               <B><xsl:value-ofselect="$fieldPath/field[@id='workflowState']/@name" />

                       </th>

                       <th nowrap="1">

                               <B><xsl:value-ofselect="$fieldPath/field[@id='workflowAssignedTo']/@name" />

                       </th>

                       <th style="width:8px;">&#160;</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" /></a></td>

                       <td><xsl:value-of select="lastModifiedDate/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" /></span>

                       </td>

                       <td><xsl:value-of select="workflowAssignedTo" /></td>

                       <td>&#160;</td>

                 </tr>

                 </xsl:for-each>

          </tbody>

          </table>

          <div style="padding:20px 0;">

                <xsl:apply-templatesselect="//control[@type='lum_pagination']" />

          </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" /></a>

         <xsl:iftest="position()!=last()"> &#160;|&#160; </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-eachselect="//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 e uma interface Administração ter checkboxes.

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

xsl025

 

 

 

 

 

Lumis Portal 6.1.0.111014
Copyright © 2001-2007, Lumis. Todos os direitos reservados.