Apresentando dados em XML com XSL
Olá a todos novamente. Depois de um bom tempo fora as coisas se ajeitaram e o tempo acabou sobrando.
Comemoramos 1 ano do Estação ZN - Parabéns aos que postam e muitíssimo obrigado aos que dedicam um pedaço de seu tempo para ler.
O projeto começou com o intuito de ajudar a nós mesmos e também todos que compartilham das idéias, dúvidas e do material apresentado aqui.
Bem, agora vamos falar do assunto do post: Exibindo um documento XML formatado com folhas de estilo XSL
A maneira padrão de apresentar informações para o usuário na Web é o HTML. Esta linguagem começou orientada à formatação do texto a ser exibido para o usuário. Atualmente, com CSS o foco mudou um pouco: agora o objetivo é a informação, e usamos os estilos adequados à entidade que queremos exibir. Então, nas nossas páginas dinâmicas, nós produzimos HTML já formatado via código para exibir os dados.
Está se tornando cada vez mais comum o uso de WebServices (aplicações remotas invocadas através de HTTP e usando o padrão XML para troca de informações) para integrar aplicações na Web, além de outras tecnologias e paradigmas que usam o formato XML para compor resultados vindos do banco de dados. A questão é: como vamos exibir para o usuário as informações que ele quer/precisa ver de forma que ele entenda e que se "encaixe" no layout do site? Simples, vamos "destrinchar" o XML e a partir dele criar um documento HTML formatado, tudo via código. Brincadeira! Hehe...
É aqui que entra em cena as folhas de estilo para XML, as XSL ou XSLT (dois nomes, mesma coisa). Estas folhas de estilo diferem um pouco do CSS porque, enquanto o CSS criar regras de formatação para alguns elementos e classes para serem aplicadas, o XSL funciona como um "documento de apresentação", ou seja, um documento HTML onde indicamos onde cada elemento do documento XML vai aparecer. Como assim? Vamos ver na prática as duas implementações:
HTML:
folha de estilos: estilos.css
p {
font: normal 11px arial;
color: black;
}
.info-cliente {
font: bold arial 15px;
color: red;
}
#grid {
background: #eaeaea;
}
documento HTML: doc.html
<html>
<head>
<style type="text/css">
@import url(estilos.css);
</style>
</head>
<body>
<p>Parágrafo</p>
<div class="info-cliente">Formatação info-cliente</div>
<div id="grid">Grid</div>
</body>
</html>
Aqui o foco do documento é o layout e a informação é disposta junto com o ele.
Vamos ver agora um exemplo de XML com XSL:
folha de estilos: dados_cliente.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' version='1.0' encoding='iso-8859-1' indent='yes'/>
<xsl:template match="/">
<html>
<h1>Dados do cliente</h1>
<b>Código:</b> <xsl:value-of select="cliente/codigo"/><br>
<b>Nome:</b> <xsl:value-of select="cliente/nome"/>
</html>
</xsl:template>
</xsl:stylesheet>
documento xml: dados_cliente.xml
<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet type="text/xsl" href="dados_cliente.xsl"?>
<cliente>
<codigo>1</codigo>
<nome>Felipe Guerço</nome>
</cliente>
Usando XML + XSL nosso documento de dados contém apenas a informação. Tudo relacionado à formatação entra na folha de estilos, que deixa de ser um arquivo só com definições de fontes, cores e outras formatações e passa a ser um documento completo de formatação dos dados.
Com XSL podemos fazer várias coisas legais. Ele nos oferece bastante recursos para exibir informações inclusive fazendo loop de vários "registros" dentro do XML.
Como o objetivo do post é dar uma visão geral sobre a tecnologia e mostrar suas vantagens, fico por aqui. Mas em breve trarei mais posts sobre recursos e aplicações práticas. Aquele abraço e até a próxima.
Felipe, excelente idéia falar sobre assunto!!!
ResponderExcluirGostei muito do conteúdo de da bordagem tb.
Estamos comemorando 1 ano de Estação ZN.
Parabéns pra vc amigo, parabéns pelo trabalho investido aqui!
Sou muito grato por essa parceria!!