<Breve introdução ao XSLT ⁄ >

9244

2007-12-15

mySnippets xml

Download

Bookmark This

" ... XSL Transformations, ou XSLT, é uma linguagem de marcação XML usada para transformar documentos XML. É parte de linguagem de transformação XML da especificação XSL (as outras partes sendo XSL-FO e XPath). Como a XML e a HTML, a especificação XSLT é uma recomendação desenvolvida pela W3C ..." in wikipedia.

Muito basicamente é uma forma de transformarmos um ficheiro XML, dando-lhe uma apresentação diferente, convertendo por exemplo para uma página html perfeitamente normal. Usamos o XML como fonte de dados e podemos construir um site dinâmico sem que seja necessário recorrer a scripts dinâmicos, ou server-side scripting, já que é o browser que se vai encarregar de aplicar a transformação do documento, ou seja, temos o nosso ficheiro XML e vamos dar-lhe uma camada apresentacional.

Da mesma forma que se recorrermos a uma base de dados "convencional" para tornamos o nosso site actualizável dinamicamente, podemos actualizar o ficheiro XML, que o conteúdo gerado será também modificado.

Vão existir pelo menos 2 ficheiros:
- xml - vai conter os dados;
- xsl - é onde vai ser formatado o xml, vai conter um conjunto de instruções que vão transformar o XML em algo mais apresentável

Vamos supôr que temos o seguinte ficheiro XML:
- artes_marciais.xml:

<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet type="text/xsl" href="format_xml.xsl"?>
<pedrocorreia.net>
 
  <artes_marciais description="Breve Lista Artes Marciais" title_col1="Descrição" title_col2="Nome">
 
    <arte_marcial_pais name="japao" description="Japão">
      <arte_marcial name="aikido"  description="Aikido" />
      <arte_marcial name="kendo"  description="Kendo" />
      <arte_marcial name="sumo"  description="Sumo" />
      <arte_marcial name="shurikenjutsu"  description="Shurikenjutsu" />
    </arte_marcial_pais>
 
 
    <arte_marcial_pais name="china" description="China">
      <arte_marcial name="taichichuan"  description="Tai Chi Chuan" />
      <arte_marcial name="shaolinkungfu"  description="Shaolin kung fu" />
      <arte_marcial name="shuaijiao"  description="Shuai Jiao" />
      <arte_marcial name="wingchun"  description="Wing Chun" />
    </arte_marcial_pais>
 
    <arte_marcial_pais name="korea" description="Korea">
      <arte_marcial name="taekwondo"  description="Taekwondo" />
      <arte_marcial name="hapkido"  description="Hapkido" />
      <arte_marcial name="taekyon"  description="Taekyon" />
      <arte_marcial name="soobak"  description="Soobak" />
    </arte_marcial_pais>
 
  </artes_marciais>
 
</pedrocorreia.net>

XML é um formato human-readable, mas podemos alterar a sua apresentação e dar-lhe uma leitura mais fácil.

É um ficheiro XML normalissimo, porém chamava a especial atenção, para a 2ª linha:

<?xml-stylesheet type="text/xsl" href="format_xml.xsl"?>

Esta será a instrução responsável para que seja aplicada a transformação (xslt); o que está ali a dizer é que quando o leitor de XML (que suporte xslt) fôr ler o ficheiro vai processar o ficheiro "format_xml.xsl" (claro que pode ser qualquer nome), mais à frente vamos ter um ficheiro com esse nome.

Podemos/ devemos recorrer a um CSS, também não fazia sentido se não podessemos, se vamos formatar uma estrutura de dados em que o output será HTML puro e duro, não ter suporte CSS seria um contra-senso ^_^''

No CSS não será necessário dar nenhuma instrução especial, é um CSS completamente normal, o mesmo que utilizamos noutras páginas

- style.css:

/****** <estrutura e layout> ******/
body{
    font-family: Tahoma, Verdana, Arial, sans-serif;font-size: 8pt;color: #000;
    margin: 2px;padding: 0;background: #6E726C;text-align: center;
}
div.container{
    width: 400px;margin: 0px auto;padding: 2px;background: #fff;color: #000;
    border: 1px solid #FF5604;
}
/****** <estrutura e layout /> ******/
 
/****** <tabelas> ******/
table.main_tbl{border: solid 1px #FF5604; padding: 1px; border-spacing: 1px; width:350px;font-size: 8pt;}
td.header{background-color: #1A6B85;color:#fff;font-weight:bold;text-align:center;}
td.cell_description{background-color: #FFCC66;color:#000;font-weight:bold;text-align:center;}
td.cell{background-color: #C3C3C3;color:#000;text-align: center;}
td.cell_alternate{background-color: #E1E1E1;color:#000;text-align: center;}
/****** <tabelas/> ******/

Já temos o nosso CSS, porém vamos ter de indicar que o queremos usar, da mesma forma que o fazemos num HTML normal, vamos recorrer a um ficheiro externo, tal não será necessário, podemos recorrer a inline styles, mas sempre que possivel deveremos separar os ficheiros:

- style.xsl:

<?xml version='1.0' encoding='utf-8' ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
	<xsl:template name="Style">
		<link href="style.css" rel="stylesheet" type="text/css" />
	</xsl:template>
</xsl:stylesheet>

Finalmente o ficheiro responsável por tudo o que foi dito até aqui, vão reparar (tirando as instruções xml e umas coisas esquisitas que aparecem lá para o meio ;-)), este parece ser um ficheiro html normal. Neste snippet vamos transformar o XML para uma forma de dados tabulares, vulgo tabela, mas podiamos perfeitamente construir caixas de texto, dropdown's, etc, etc ...
Os comentários estão ao longo do código.

- format_xml.xsl:

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html"/>
<xsl:include href="style.xsl"/> <!-- incluir css -->
<xsl:template match="/pedrocorreia.net/artes_marciais"> <!-- posição inicial -->
<xsl:call-template name="Style"/> <!-- Caracteristicas da formatação -->
 
<head>
  <!--
  a expressão em baixo @description diz respeito a este nó:
  <artes_marciais description="Breve Lista Artes Marciais" title_col1="Descrição" title_col2="Nome">
  isto porque definimos que o nosso template começa em: "/pedrocorreia.net/artes_marciais"
 
  Estamos basicamente a ir buscar o valor da tag description,
  mais à frente vamos usar as outras duas tags: title_col1 e title_col2
  -->
  <title><xsl:value-of select="@description"/></title>
</head>
<body>
  <div class="container">
 
    <table class="main_tbl" align="center">
      <tr>
        <td class="header" colspan="2"><xsl:value-of select="@description"/></td>
      </tr>
      <tr>
        <td class="cell_description"><xsl:value-of select="@title_col1" /></td>
        <td class="cell_description"><xsl:value-of select="@title_col2" /></td>
       </tr>
 
      <!-- ciclo que vai percorrer todos os sub-nodes "arte_marcial_pais", por ex:
        <arte_marcial_pais name="japao" description="Japão">
        ...
       -->
      <xsl:for-each select="arte_marcial_pais">
          <tr>
            <td class="header"><xsl:value-of select="@description"/></td>
            <td class="header"><xsl:value-of select="@name"/></td>
          </tr>
 
          <!-- ciclo que vai percorrer todos os sub-nodes "arte_marcial" , por ex:
            <arte_marcial name="aikido"  description="Aikido" />
          
            ....
          -->
          <xsl:for-each select="arte_marcial">
 
              <!--
              variável auxiliar para podermos especificar a class da célula,
              isto vai permitir ter as células em cores alternadas
               -->
              <xsl:variable name="cell_class">
                <!-- usar condição -->
                <xsl:choose>
                  <!-- condição - é usado "position()-1" para começarmos no 0 -->
                  <xsl:when test="(position()-1) mod 2 = 0">
                    <xsl:value-of select=" 'cell' "/> <!-- atribuir valor, importante: reparar nas plicas -->
                  </xsl:when>
                  <xsl:otherwise>
                    <xsl:value-of select=" 'cell_alternate' "/> <!-- atribuir valor, importante: reparar nas plicas -->
                  </xsl:otherwise>
                </xsl:choose>
              </xsl:variable>
 
              <!--
              construir linha;
              nota: para acedermos à "xls:variable" criada anteriormente teremos de usar {}
              -->
              <tr>
                <td class="{$cell_class}"><xsl:value-of select="@description"/></td>
                <td class="{$cell_class}"><xsl:value-of select="@name"/></td>
              </tr>
 
          </xsl:for-each>
      </xsl:for-each>
 
    </table>
  </div>
</body>
</xsl:template>
</xsl:stylesheet>

Para finalizar resta só dizer que só temos de correr o ficheiro XML, ou seja, vamos somente abrir (no browser, por ex) o ficheiro: artes_marciais.xml; o leitor irá ler a tal 2ª linha que indica qual o ficheiro responsável pela transformação.

Este é um exemplo de como será apresentada a informação:

Se fizermos o view source vamos reparar que é basicamente o nosso ficheiro XML inicial ...

Qualquer erro/ dúvida é só dizer!

9244

2007-12-15

mySnippets xml

Download

Bookmark This