<pedrocorreia.net ⁄>
corner
<mySearch ⁄> <mySearch ⁄>

corner
 
corner
<mySnippets order="rand" ⁄> <mySnippets order="rand" ⁄>

corner
 
corner
<myContacts ⁄> <myContacts ⁄>

<email ⁄>


pc@pedrocorreia.net

<windows live messenger ⁄>


pedrojacorreia@hotmail.com

<myCurriculum type="pdf" ⁄>


Download
corner
 
corner
<myBlog show="last" ⁄> <myBlog show="last" ⁄>

corner
 
corner
<myNews show="rand" ⁄> <myNews show="rand" ⁄>

corner
 
corner
<myNews type="cat" ⁄> <myNews type="cat" ⁄>

corner
 
corner
<myQuote order="random" ⁄> <myQuote order="random" ⁄>

corner
 
corner
<myPhoto order="random" ⁄> <myPhoto order="random" ⁄>

<pedrocorreia.net ⁄>
corner
 
corner
<myAdSense ⁄> <myAdSense ⁄>

corner
 
corner
<myVisitorsMap ⁄> <myVisitorsMap ⁄>

corner
 
 

<Breve introdução ao XSLT ⁄ >




clicks: 12941 12941 2007-12-15 2007-12-15 goto mySnippets mySnippets xml  Download  Bookmark This 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:
  1. <?xml version="1.0" encoding="iso-8859-1"?>
  2. <?xml-stylesheet type="text/xsl" href="format_xml.xsl"?>
  3. <pedrocorreia.net>
  4.  
  5. <artes_marciais description="Breve Lista Artes Marciais" title_col1="Descrição" title_col2="Nome">
  6.  
  7. <arte_marcial_pais name="japao" description="Japão">
  8. <arte_marcial name="aikido" description="Aikido" />
  9. <arte_marcial name="kendo" description="Kendo" />
  10. <arte_marcial name="sumo" description="Sumo" />
  11. <arte_marcial name="shurikenjutsu" description="Shurikenjutsu" />
  12. </arte_marcial_pais>
  13.  
  14.  
  15. <arte_marcial_pais name="china" description="China">
  16. <arte_marcial name="taichichuan" description="Tai Chi Chuan" />
  17. <arte_marcial name="shaolinkungfu" description="Shaolin kung fu" />
  18. <arte_marcial name="shuaijiao" description="Shuai Jiao" />
  19. <arte_marcial name="wingchun" description="Wing Chun" />
  20. </arte_marcial_pais>
  21.  
  22. <arte_marcial_pais name="korea" description="Korea">
  23. <arte_marcial name="taekwondo" description="Taekwondo" />
  24. <arte_marcial name="hapkido" description="Hapkido" />
  25. <arte_marcial name="taekyon" description="Taekyon" />
  26. <arte_marcial name="soobak" description="Soobak" />
  27. </arte_marcial_pais>
  28.  
  29. </artes_marciais>
  30.  
  31. </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:
  1. /****** <estrutura e layout> ******/
  2. body{
  3. font-family: Tahoma, Verdana, Arial, sans-serif;font-size: 8pt;color: #000;
  4. margin: 2px;padding: 0;background: #6E726C;text-align: center;
  5. }
  6. div.container{
  7. width: 400px;margin: 0px auto;padding: 2px;background: #fff;color: #000;
  8. border: 1px solid #FF5604;
  9. }
  10. /****** <estrutura e layout /> ******/
  11.  
  12. /****** <tabelas> ******/
  13. table.main_tbl{border: solid 1px #FF5604; padding: 1px; border-spacing: 1px; width:350px;font-size: 8pt;}
  14. td.header{background-color: #1A6B85;color:#fff;font-weight:bold;text-align:center;}
  15. td.cell_description{background-color: #FFCC66;color:#000;font-weight:bold;text-align:center;}
  16. td.cell{background-color: #C3C3C3;color:#000;text-align: center;}
  17. td.cell_alternate{background-color: #E1E1E1;color:#000;text-align: center;}
  18. /****** <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:
  1. <?xml version='1.0' encoding='utf-8' ?>
  2. <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  3. <xsl:template name="Style">
  4. <link href="style.css" rel="stylesheet" type="text/css" />
  5. </xsl:template>
  6. </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:
  1. <?xml version="1.0" encoding="iso-8859-1"?>
  2. <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  3. <xsl:output method="html"/>
  4. <xsl:include href="style.xsl"/> <!-- incluir css -->
  5. <xsl:template match="/pedrocorreia.net/artes_marciais"> <!-- posição inicial -->
  6. <xsl:call-template name="Style"/> <!-- Caracteristicas da formatação -->
  7.  
  8. <head>
  9. <!--
  10. a expressão em baixo @description diz respeito a este nó:
  11. <artes_marciais description="Breve Lista Artes Marciais" title_col1="Descrição" title_col2="Nome">
  12. isto porque definimos que o nosso template começa em: "/pedrocorreia.net/artes_marciais"
  13.  
  14. Estamos basicamente a ir buscar o valor da tag description,
  15. mais à frente vamos usar as outras duas tags: title_col1 e title_col2
  16. -->
  17. <title><xsl:value-of select="@description"/></title>
  18. </head>
  19. <body>
  20. <div class="container">
  21.  
  22. <table class="main_tbl" align="center">
  23. <tr>
  24. <td class="header" colspan="2"><xsl:value-of select="@description"/></td>
  25. </tr>
  26. <tr>
  27. <td class="cell_description"><xsl:value-of select="@title_col1" /></td>
  28. <td class="cell_description"><xsl:value-of select="@title_col2" /></td>
  29. </tr>
  30.  
  31. <!-- ciclo que vai percorrer todos os sub-nodes "arte_marcial_pais", por ex:
  32. <arte_marcial_pais name="japao" description="Japão">
  33. ...
  34. -->
  35. <xsl:for-each select="arte_marcial_pais">
  36. <tr>
  37. <td class="header"><xsl:value-of select="@description"/></td>
  38. <td class="header"><xsl:value-of select="@name"/></td>
  39. </tr>
  40.  
  41. <!-- ciclo que vai percorrer todos os sub-nodes "arte_marcial" , por ex:
  42. <arte_marcial name="aikido" description="Aikido" />
  43. ....
  44. -->
  45. <xsl:for-each select="arte_marcial">
  46.  
  47. <!--
  48. variável auxiliar para podermos especificar a class da célula,
  49. isto vai permitir ter as células em cores alternadas
  50. -->
  51. <xsl:variable name="cell_class">
  52. <!-- usar condição -->
  53. <xsl:choose>
  54. <!-- condição - é usado "position()-1" para começarmos no 0 -->
  55. <xsl:when test="(position()-1) mod 2 = 0">
  56. <xsl:value-of select=" 'cell' "/> <!-- atribuir valor, importante: reparar nas plicas -->
  57. </xsl:when>
  58. <xsl:otherwise>
  59. <xsl:value-of select=" 'cell_alternate' "/> <!-- atribuir valor, importante: reparar nas plicas -->
  60. </xsl:otherwise>
  61. </xsl:choose>
  62. </xsl:variable>
  63.  
  64. <!--
  65. construir linha;
  66. nota: para acedermos à "xls:variable" criada anteriormente teremos de usar {}
  67. -->
  68. <tr>
  69. <td class="{$cell_class}"><xsl:value-of select="@description"/></td>
  70. <td class="{$cell_class}"><xsl:value-of select="@name"/></td>
  71. </tr>
  72.  
  73. </xsl:for-each>
  74. </xsl:for-each>
  75.  
  76. </table>
  77. </div>
  78. </body>
  79. </xsl:template>
  80. </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!









clicks: 12941 12941 2007-12-15 2007-12-15 goto mySnippets mySnippets xml  Download  Bookmark This Bookmark This