Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

brcontainer

xsl xml html css

Por , em Desenvolvimento frontend

Recommended Posts

brcontainer    16

brcontainer
Postado

Introdução

Antes de começarmos a entender as aplicações XSL+XML, devemos entender para que cada um deles vai ser usado e não confundirmos suas aplicações:
O xml vai ser a nossa BASE DE DADOS, não confundam XML com HTML, o XML será aqui meramente uma aplicação de dados para podermos transmitir a outra "programa", então se você quiser aplicar uma quebra de linha em um texto, você não deverá aplicar no XML e sim isso deverá ser feito pelo programa que esta a usar o XML, se for FLASH deve-se criar uma interpretação, se for XSL deve criar a parte HTML dentro do XSL e não do XML e assim por diante.

As vezes algumas pessoas com duvida em FLASH, por estarem a usar XML tambem acreditam que sua duvida provem do XML, porem é um engano.
O Flash é quem deve interpretar o XML, mesmo que você aplique exemplo <BR> o XML pensará que isso é somente um "nó", ae quando o FLASH ler o XML ele deve interpretar o <BR> como quebra.

Então veremos assim:
XML=Informações, conteudo da página
CSS=Estilo, cores, fontes, tamanhos, formatos, etc
XSL=Estrutura do HTML, nesse caso o "ESQUELETO"
-----------------------------------------------------------------------------------------------------------------------------
[Vantagens]
Com XSL você pode criar tipos de paginas diferentes (Templates) para um unico XML
Você terá IFs (condições) sem necessitar SERVER-SIDE para poder fazer com que uma coisa apareça ou outra condição.
E terá algumas funções que lhe ajudarão


[Desvantagens]Por enquanto eu vi somente "uma" antes do Ie6(nessa caso do ie5.5 para baixo) o XSL não funciona
Se alguem souber mais alguma me avisem.
-----------------------------------------------------------------------------------------------------------------------------
Para testar os exemplos do tutorial, rode o arquivo XML e não o XSL, pois o XSL é somente o template.

1ª(primeira) parte: Como criar o XML
Primeiramente devemos definir o cabecario
<?xml version="1.0" encoding="ISO-8859-1"?>
o enconding define o que tipos de caracteres iremos usar, no nosso caso usaremos os caracteres latinos: UTF-8 ou ISO-8859-1

depois iremos definir a chamada para p XSL, nesse caso o XSL é o template.
<?xml-stylesheet type="text/xsl" href="xsl.xsl"?>
no HREF="" definiremos a url do template.

2ª(segunda) parte: Definindo os NÓS
Para iniciarmos um XML devemos ter no minimo um nó inicial, um exemplo seria isso:
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="xsl.xsl"?>
<pagina>
...
</pagina>
o nó que usei aqui se chama PAGINA ele deve ter e deve ser o inicio e FIM como mostrado no exemplo.

3ª parte: Criando um XSL:
devemos criar o cabecario como no xml
<?xml version="1.0" encoding="ISO-8859-1"?>
de preferencia com o mesmo enconding

depois devemos definir duas "TAGs" muito importates:
<xsl:stylesheet version="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
...
</xsl:template>
</xsl:stylesheet>
observerm que elas serão o inicio e o fim do corpo do XSL, onde está os três pontos aplicaremos o template.

4ª parte: aplicando um TEMPLATE simples ao XML:
Bem tendo a base todas iremos criar nosso primeiro nó de exemplo no xml:
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="xsl.xsl"?>
<pagina>
<meuno>Meu primeiro nó</meuno>
</pagina>
observem que aplicamos o nó pagina, ele é 100% necessario.

agora aplicando o template conforme o XML:
XSL.XSL:
inicio o XSL
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
	<head>
		<title>titulo</title>
	</head>
<body>
agora entre a tag BODY iremos definir a "chamada" do NÓ:

seleciono o nó
<xsl:value-of select="pagina/meuno" />
observer que o SELECT ficou assim: pagina/meuno, referente a cada um dos nós.

e agora fechamos o XSL:
</body>
</html>
</xsl:template>
</xsl:stylesheet>

para testar:
XSL:
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
	<head>
		<title>titulo</title>
	</head>
<body>
<xsl:value-of select="pagina/meuno" />
</body>
</html>
</xsl:template>
</xsl:stylesheet>

XML:
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="xsl.xsl"?>
<pagina>
<meuno>Meu primeiro nó</meuno>
</pagina>
------------------------------------------------------------
5ª parte: selecionando nós e sub-nós
(agora entraremos em uma parte mais complicada para entendermos, portanto "anteção")

a função que usamos anteriormente foi 
<xsl:value-of select="pagina/meuno" />
que serve para pegar o VALOR de um SELECT, porem quando criamos um XML a preferencia é usarmos sub-nós. Seria algo assim:
<pagina>
<meuno>
	<primeiro>1</primeiro>
	<segundo>2</segundo>
</meuno>
</pagina>
Por que disso, vocês me perguntam, porque é para melhor oganização e maior facilidade em criar aplicações dentro do XSL.
usaremos 
<xsl:for-each select="pagina/Nó">
, pagina se refere ao primeiro NÓ e "Nó" ao "ao um nó dentro do nó pagina"...Vixe enrolou tudo.

6ª parte: lendo nós e sub-nos
para lermos os nós internos de um determinado nó devemos usar a função
<xsl:for-each select="pagina/NÓ">
...
</xsl:for-each>
, ele irá selecionar um nó inteiro e com isso poderemos pegar seus valores aplicarmos de maneira organizada. Detalhe observem que ele tem "TAG" de fechamento.

exemplo:
XML:
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="xsl.xsl"?>
<pagina>
<meuno>
	<primeiro>1</primeiro>
	<segundo>2</segundo>
</meuno>
</pagina>

XSL:
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
	<head>
		<title>titulo</title>
	</head>
<body>
<xsl:for-each select="pagina/meuno">
		<xsl:value-of select="primeiro" />
		<xsl:value-of select="segundo" />
</xsl:for-each>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

explicação com a TAG:
<xsl:for-each select="pagina/meuno">
eu entrei em <pagina> e depois entrei em <meuno> com
<xsl:value-of select="primeiro" />
e capturei o valor de
<primeiro>1</primeiro>
Detalhe eu não necessitei entrar em PAGINA de novo como eu mostrei no primeiro exemplo lá em cima, pois eu já estou no FOR-EACH da TAG <pagina> e tambem da TAG <MEUNO>

7ª parte: exemplo mais complexo.
Não recomendo aplicar mais do que dois niveis de nós dentro de um NÓ que fará parte do template, porem é bom fazer SOMENTE para entender melhor a ideia da função:
<xsl:for-each select="pagina/meuno">...
.

criamos assim o XML:
<pagina>
<meuno>
	<primeiro>
		<a>Letra A no primeiro nó</a>
		<b>Letra B no primeiro nó</b>
	</primeiro>
	<segundo>
		<a>Letra A no segundo nó</a>
		<b>Letra B no segundo nó</b>
	</segundo>
</meuno>
</pagina>

e assim o XSL:
<xsl:for-each select="pagina/meuno">
			<xsl:for-each select="primeiro">
				<xsl:value-of select="a" />
				<xsl:value-of select="b" />
			</xsl:for-each>
		<br />
			<xsl:for-each select="segundo">
				<xsl:value-of select="a" />
				<xsl:value-of select="b" />
			</xsl:for-each>
</xsl:for-each>
observem que pelo primeiro: 
<xsl:value-of select="a" />
estar dentro do 
<xsl:for-each select="primeiro">
ele vai capturar o valor que a seguir mostrado:

<primeiro>
<a>Letra A no primeiro nó</a>
...
</primeiro>


8ª parte: aplicando o (X)HTML
aplicar o HTML é simples, basta seguir esse exemplo:
xml:
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="xsl.xsl"?>
<pagina>
<meuno>
	<titulo>primeiro</titulo>
	<conteudo>
		BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ 
		BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ 
		BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ 
		BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ 
	</conteudo>
</meuno>
</pagina>

XSL:
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
	<head>
		<title>titulo</title>
	</head>
<body>
<xsl:for-each select="pagina/meuno">
	<h1><xsl:value-of select="titulo" /></h1>
	<p><xsl:value-of select="conteudo" /></p>
</xsl:for-each>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
agora é só testar para entender ;)
explicação basica, podemos alimentar HTML para o XML de qualquer maneira dentro do XSL, é isso que torna o XSL o nosso template, são as aplicações HTML.

exemplo mais estruturado:
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="xsl.xsl"?>
<pagina>
	<cabecario>
		<titulo>Minha pagina ^^</titulo>
	</cabecario>

	<corpo>
		<titulo>primeiro</titulo>
		<conteudo>
		BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ 
		BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ 
		BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ 
		BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ 
		</conteudo>
	</corpo>
</pagina>

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<xsl:for-each select="pagina/cabecario">
	<head>
		<title><xsl:value-of select="titulo" /></title>
	</head>
</xsl:for-each>
<body>
<xsl:for-each select="pagina/corpo">
	<h1><xsl:value-of select="titulo" /></h1>
	<p><xsl:value-of select="conteudo" /></p>
</xsl:for-each>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
explicação, eu criei nós para definir o HEADER do HTML:
<cabecario>
	<titulo>Minha pagina ^^</titulo>
</cabecario>

e aqui eu apliquei o template:
<html>
<xsl:for-each select="pagina/cabecario">
	<head>
		<title><xsl:value-of select="titulo" /></title>
	</head>
</xsl:for-each>

e logo após no XML eu criei outro nó com o nome corpo onde aplicarei as "partes" e o conteudo do BODY do HTML:
<corpo>
		<titulo>primeiro</titulo>
		<conteudo>
		BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ 
		BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ 
		BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ 
		BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ BLÁ 
		</conteudo>
	</corpo>
e aqui faço a aplicação do template:
<body>
<xsl:for-each select="pagina/corpo">
	<h1><xsl:value-of select="titulo" /></h1>
	<p><xsl:value-of select="conteudo" /></p>
</xsl:for-each>
</body>

9ª parte: os atributos
Como algumas pessoas pensavem para criarmos exemplo um link deveria ser assim:
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="xsl3.xsl"?>
<pagina>
<menu>
<url>http://forum.imasters.com.br</url>
<titulo>forum imasters</titulo>
</menu>
</pagina>

<xsl:for-each select="pagina/corpo">
<a href="<xsl:value-of select="url" />"><xsl:value-of select="titulo" /></a>
</xsl:for-each>

porem devemos lembrar que XHTML, HTML, XSL, RSS, WAP, etc, são derivados do XML, portanto não podermos aplicar TAG dentro de TAG:

<a href="<xsl:value-of select="url" />">


Claro que no HTML tem suas exeções, mas estamos falando de XSL.
para aplicarmos o XML como atributo HREF da TAG <a> devemos usar uma função do XSL chamada xsl:attribute.

exemplo:
XML
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="xsl.xsl"?>
<pagina>
<menu>
<url>http://forum.imasters.com.br</url>
<titulo>forum imasters</titulo>
</menu>
</pagina>

tendo o nosso XML agora aplicaremos o XSL:
devemos criar a TAG <A> sem o atributo HREF chamando com For-each dentro de pagina/menu

<xsl:for-each select="pagina/menu">
<a>
...
</a>
...

e agora aplicaremos o atributo entre a TAG <A>:
<xsl:for-each select="pagina/menu">
<a>
		<xsl:attribute name="href">
		<xsl:value-of select="url" />
		</xsl:attribute>
</a>

observem que o NAME da TAG xsl:attribute se refere ao atributo HTML da tag <a>
a entre as TAGs XSL:Attribute eu apliquei "VAlue-of" para dizer o valor do atributo.

exemplo:
XML:
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="xsl.xsl"?>
<pagina>
<menu>
<url>http://forum.imasters.com.br</url>
<titulo>forum imasters</titulo>
</menu>
</pagina>

XSL:
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">



<xsl:for-each select="pagina/menu">
	<a>
		<xsl:attribute name="href">
		<xsl:value-of select="url" />
		</xsl:attribute>

		<xsl:value-of select="titulo" />
	</a>
</xsl:for-each>



</xsl:template>
</xsl:stylesheet>

exemplo com varios LINK's:
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="xsl.xsl"?>
<pagina>
<menu>
<url>http://forum.imasters.com.br</url>
<titulo>forum imasters</titulo>
</menu>

<menu>
<url>http://forum.imasters.com.br</url>
<titulo>forum imasters</titulo>
</menu>

<menu>
<url>http://forum.imasters.com.br</url>
<titulo>forum imasters</titulo>
</menu>

<menu>
<url>http://forum.imasters.com.br</url>
<titulo>forum imasters</titulo>
</menu>

</pagina>

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">

<xsl:for-each select="pagina/menu">
	<a>
		<xsl:attribute name="href">
		<xsl:value-of select="url" />
		</xsl:attribute>

		<xsl:value-of select="titulo" />
	</a><br />
</xsl:for-each>

</xsl:template>
</xsl:stylesheet>

10ª parte: Aplicando dois atributos:
Vamos usar um exemplo a TAG <IMG>, nela aplicaremos ALT e SRC atravez de um XML:

XML.XML
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="xsl.xsl"?>
<pagina>
	<imagens>
		<url>http://www.google.com.br/images/nav_logo3.png</url>
		<titulo>Site Google</titulo>
	</imagens>
</pagina>

e o XSL.XSL
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<xsl:for-each select="pagina/imagens">

<img>
		<xsl:attribute name="src">
		<xsl:value-of select="url" />
		</xsl:attribute>

		<xsl:attribute name="alt">
		<xsl:value-of select="titulo" />
		</xsl:attribute>
</img>

</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

explicação:
Esta linha le o NÓ IMAGENS 
<xsl:for-each select="pagina/imagens">
<pagina>
	<imagens>
e lista tudo que estiver dentro

11ª parte: Aplicando CSS:
Aplicar um CSS ao nosso template é como se fosse um HTML, lembrando o CSS irá afetar o XSL e não o XML:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
<html>
<head>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
...
</body>
</html>
</xsl:template>
</xsl:stylesheet>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nícolas    4

Nícolas
Postado

Caramba Siver.... mandou bem demais cara http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

 

Eu dei uma lida muito por cima mas gostei bastante depois eu vou ver com calma, eu sempre quis fazer uma integração de xml com xhtml sem utilizar nenhuma outra linguagem paralela mas nunca tive tempo de ir atrás de algum tutorial bacana.

 

Pooo cara, preciso nem falar nada só que troféu joinha pra você http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

feasso    0

feasso
Postado

Como eu coloco o que está no: 

<xsl:value-of select="imagem"/>
dentro do 
[b]<img alt="IMAGEM" src="imagens/imagem-chamada.jpg"/>[/b]
para ficar como o SRC da imagem ? Pois o xls está trazendo o caminho da imagem.

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

Como eu coloco o que está no: 

<xsl:value-of select="imagem"/>
dentro do 
[b]<img alt="IMAGEM" src="imagens/imagem-chamada.jpg"/>[/b]
para ficar como o SRC da imagem ? Pois o xls está trazendo o caminho da imagem.
Mantenha suas duvidas nos seus tópicos amigo ;)

Ficarei agredecido.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito