Impotando XML/XSL para um html

Vadio · Março 12, 2008

Pessoal, seguinte fiz este script baseado em um cap. de um livro.

OBS.: no FF xml ja vem com as formatações e estilos implementados no XSLT, no IE6 não mas se o css tiver sido importado no html funciona nos 2 navegadores...

.. NAO FOI TESTADO NO IE7. Segue código:

atletas.xml

<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet type="text/xsl" href="atletas.xsl" ?>
<atletas>
	<atleta>
		<nome>Oscar Schmidt</nome>
		<esporte>Basquete</esporte>
	</atleta>
	<atleta>
		<nome>Mariana Ohata</nome>
		<esporte>Triathlon</esporte>
	</atleta>
	<atleta>
		<nome>Gustavo Borges</nome>
		<esporte>Natação</esporte>
	</atleta>
</atletas>

atletas.xsl

<?xml version="1.0" encoding="iso-8859-1"?><!-- DWXMLSource="atletas.xml" -->

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html"/><xsl:template match="/">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Atletas</title>
<style type="text/css">
#container {
	font-family: Arial, Helvetica, sans-serif;
	width: 230px;
	display:block;
		
}
#container .atleta {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666666;
	width: 200px;
	border-right-style: solid;
	border-right-color: #666666;
	border-right-width: medium;
	display: table-caption;
}
#container .atleta2 {
	background-color: #f5f5f5;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	width: 200px;
	border-right-style: solid;
	border-right-color: #999999;
	display: table-caption;

}
.nome {
	width: 100px;
	float: left;
}
.esporte {
	width: 100px;
	float: left;
}
</style>

</head>

<body>
	<div id="container" onmouseover="java script: this.style.cursor = 'help';">

   <xsl:for-each select="atletas/atleta">
	<li>
	<div class="atleta" onMouseOver="java script: this.className = 'atleta2'" onMouseOut="java script: this.className = 'atleta'">
	 <span class="nome"><strong><xsl:value-of select="nome" /></strong></span>
	 <span class="esporte"><xsl:value-of select="esporte" /></span>
	</div>
	</li>
   </xsl:for-each>

		</div>

</body>
</html>

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

ajax.js

// JavaScript Document
function criaXMLDocument(){

	var XMLDOCUMENT_IE = new Array(
			"Msxml2.DOMDocument.6.0",
			"Msxml2.DOMDocument.5.0",
			"Msxml2.DOMDocument.4.0",
			"Msxml2.DOMDocument.3.0",
			"Msxml2.DOMDocument",
			"Msxml2.XmlDom"
		);
	
	var XMLdoc = null;
	
	if(window.ActiveXObject != null){
			
		for(var i=0; i<XMLDOCUMENT_IE.length; i++ ){
			try{
				//alert(XMLDOCUMENT_IE[i]);
				var XMLdoc = new ActiveXObject(XMLDOCUMENT_IE[i]);
				
				return XMLdoc;
				
			}catch(oErro){}
		}//for
		throw new Error("Pacote XML não instalado");
	}else{
		for(var i=0; i<XMLDOCUMENT_IE.length; i++ ){
			try{
				var XMLdoc = document.implementation.createDocument("","",null);
				return XMLdoc;
			}catch(oErro){}
		}//for
		throw new Error("Pacote XML não instalado");
	}
}

atletas.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#container {
	font-family: Arial, Helvetica, sans-serif;
	width: 230px;
	display:block;
		
}
#container .atleta {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666666;
	width: 200px;
	border-right-style: solid;
	border-right-color: #666666;
	border-right-width: medium;
	display: table-caption;
}
#container .atleta2 {
	background-color: #f5f5f5;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	width: 200px;
	border-right-style: solid;
	border-right-color: #999999;
	display: table-caption;

}
.nome {
	width: 100px;
	float: left;
}
.esporte {
	width: 100px;
	float: left;
}
</style>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
 function addFF(){
 	var processor = new XSLTProcessor();
	processor.importStylesheet(xslDoc);
	var doc = processor.transformToFragment(xmlDoc,document);
		
	var conteudo = document.getElementById("conteudo");
	if(conteudo.hasChildNodes()) conteudo.removeChild(conteudo.firstChild);
	else conteudo.appendChild(doc);
 }
 function addIE(){
 	var doc = xmlDoc.transformNode(xslDoc);
 	document.getElementById("conteudo").innerHTML = doc;
 }
 function carregarAtletas(xml,xsl,idDiv){
	
	
 	xmlDoc = criaXMLDocument();
	xslDoc = criaXMLDocument();
	
	xmlDoc.async = false;
	xslDoc.async = false;
	
	xmlDoc.load("atletas.xml");
	xslDoc.load("atletas.xsl");	
	if(window.ActiveXObject){
		
	 	addIE();
	}else{
	 	addFF();
 	}	
 }
</script>
</head>

<body>
<form name="form1">
<input id="buscar" type="button" value="Carrega XML" onclick="carregarAtletas(); return false;" />
</form>
<div id="conteudo"></div>
</body>
</html>

Espero que isso ajude a alguém, não sei pq mas acho q esse negóci ode XML é o futuro...

VLW GENTE!

brunocampos_ · Março 12, 2008

Eu costumo fazer diferente.

Para IE eu crio um objeto ActiveXObject("Msxml2.XSLTemplate"), seto o stylesheet, o input e aí sim dou um transform.

Este seu código funciona mesmo?

brunocampos_ · Março 12, 2008

Eu costumo fazer diferente.

Para IE eu crio um objeto ActiveXObject("Msxml2.XSLTemplate"), seto o stylesheet, o input e aí sim dou um transform.

Este seu código funciona mesmo?

Vadio · Março 12, 2008

Eu costumo fazer diferente.

Para IE eu crio um objeto ActiveXObject("Msxml2.XSLTemplate"), seto o stylesheet, o input e aí sim dou um transform.

Este seu código funciona mesmo?

funciona sim, se não eu não iria posta-lo aqui!

unica coisa q fico mais o menos foi o css no IE q não funciona se tive só no xsl

mas se você quiser ajudar a fazer implementações nele para que ele fique melhor diga ae =D

DTC Designer · Março 14, 2008

Cara tem como mostrar o resultado sem precisar de um botão? automaticamente aparecesse?

aguardo

LaBoss · Abril 14, 2008

Eu costumo fazer diferente.

Para IE eu crio um objeto ActiveXObject("Msxml2.XSLTemplate"), seto o stylesheet, o input e aí sim dou um transform.

Este seu código funciona mesmo?

funciona sim, se não eu não iria posta-lo aqui!

unica coisa q fico mais o menos foi o css no IE q não funciona se tive só no xsl

mas se você quiser ajudar a fazer implementações nele para que ele fique melhor diga ae =D

tenta assim:

CODE

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#container {
    font-family: Arial, Helvetica, sans-serif;
    width: 230px;
    display:block;
 
}
#container .atleta {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #666666;
    width: 200px;
    border-right-style: solid;
    border-right-color: #666666;
    border-right-width: medium;
    display: table-caption;
}
#container .atleta2 {
    background-color: #f5f5f5;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
    width: 200px;
    border-right-style: solid;
    border-right-color: #999999;
    display: table-caption;
 
}
.nome {
    width: 100px;
    float: left;
}
.esporte {
    width: 100px;
    float: left;
}
</style>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
function addFF(){
    var processor = new XSLTProcessor();
    processor.importStylesheet(xslDoc);
    var doc = processor.transformToFragment(xmlDoc,document);
 
    var conteudo = document.getElementById("conteudo");
    if(conteudo.hasChildNodes()) conteudo.removeChild(conteudo.firstChild);
    else conteudo.appendChild(doc);
}
function addIE(){
    var doc = xmlDoc.transformNode(xslDoc);
    document.getElementById("conteudo").innerHTML = doc;
}
function carregarAtletas(xml,xsl,idDiv){
 
 
    xmlDoc = criaXMLDocument();
    xslDoc = criaXMLDocument();
 
    xmlDoc.async = false;
    xslDoc.async = false;
 
    xmlDoc.load("atletas.xml");
    xslDoc.load("atletas.xsl");    
    if(window.ActiveXObject){
 
         addIE();
    }else{
         addFF();
    }    
}
</script>
</head>
 
<body onload="carregarAtletas(); return false;">
<div id="conteudo"></div>
</body>
</html>

Entrar

Arquivado

Impotando XML/XSL para um html

Recommended Posts

Vadio 13

Compartilhar este post

Link para o post

Compartilhar em outros sites

brunocampos_ 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

brunocampos_ 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Vadio 13

Compartilhar este post

Link para o post

Compartilhar em outros sites

DTC Designer 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

LaBoss 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

problema em usar json para realizar engenharia de dados

Soma dos dias utilizados

Saber se todos os produtos de uma consulta estão cadastrados no banco de dados

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante