Ir para conteúdo

POWERED BY:

Arquivado

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

Gabriel Ricci

Tags customizadas - XSLT

Por , em Desenvolvimento frontend

Recommended Posts

Gabriel Ricci    0

Gabriel Ricci
Postado

Olá a todos...

 

Bom, sou relativamente novo em se tratando de XML, XSLT, XSL e esse monte de X's huaihai...bom, caso eh o seguinte, to trabalhando numa biblioteca javascript, um toolkit, para trabalhar com Ajax e etc, bom, em geral a lib ta bem madura ja....com um bom suporte a Ajax, varias validações, posicionamento de elementos, um logger no estilo lumberjack, tudo beleza....o caso eh o seguinte...

 

Eu tava querendo implementar alguns elementos de UI...andei pesquisando como os toolkits atuais tratam isso, tem o dojo, mais a ideia de que tudo é uma DIV não me agradou muito, dai eu vi o Backbase, ele usa algumas tags customizadas direto no html, por exemplo, uma janela, ficaria assim

 

<body><b:window title='Janela1' id='window_1'>	Conteudo da janela</b:window><b:window title='Janela2' id='window_2'>	Conteudo da janela 2</b:window></body>

Trabalhei nisso...pois essa metodologia me agrada, e fiz, no Firefox, funcionar, criei uma tag chamada <xcomponent> e você adiciona o tipo da tag, e outros atributos normalmente, fica assim:

 

<xcomponent type='alert' text='abc' /><xcomponent type='box'>	  Conteudo da caixa</xcomponent>

Dai por tras disso eu tenho uma biblioteca de UI que registra os tipos disponiveis e as callbacks, dai quando rola um "load" ou uma pagina eh requisitada por ajax ele faz um parse, le todos os elementos xcomponent, quando ele achou, ele verifica se esta registrado, se estiver manda o node inteiro para a função callback...funcionou perfeitamente no firefox, porem no IE, o alert funcionou legal tb, mas o box não funcionou, pq eu não posso ter nodes filhas de uma node que o IE não conhece...huaihiaa meu mundo desabou...

 

Depois de muito ler, eu vi que na verdade eu não precisava de parser, não precisava de funções callback, nem de nada, soh de um namespace, dos XML das UI, para como elas serão depois, e do XSL que trataria o:

 

<xcomponent:box>	Coteudo</xcomponent:box>

No equivalente dele, definido em um xml de nome box.xml...

 

Eu li, na teoria eu "acho" q sei, mas gostaria que alguem me explicasse passo a passo como fazer isso funfar kra huaihaiua...

 

tipo, vamos dar uma pagina de exemplo pra gente testar....

 

<html XMLNS:xcomponent=?><head><title>Teste</title></head><body><xcomponent:alert text='alerta javascript' /><xcomponent:box>	 Conteudo do componente "box" ( uma div com borda hauihaiua )</xcomponent:box></body></html>

Tipo, quero ter minhas paginas normalmente, tipo, .php ( linguagem que trabalho ) e adicionar minhas tags customizadas lá....e se for preciso ter um javascript por tras que quando rolar um onload ele faz um parse do documento transformando as tags customizadas, colocando o resultado na mesma pagina php que eu estou visualizando...alguem pode me ajudar?

Compartilhar este post

Link para o post
Compartilhar em outros sites

void    1

void
Postado

o ideal para trabalhar com isso seria c você utilizasse dom2 pq com dom2 você pode trabalhar com namespace ai iria facilitar tua vida porem dom2 naum funfa no IE como por exemplo:

 

elements = element.getElementsByTagNameNS(namespaceURI, localName)

que iria trazer todos os elementos seus costumizados!!

acredito q assim seria a melhor forma de fazer isso é claro q para o IE você teria q fazer uns loops bizarros para fazer a mesma coisa!!

 

depois de pegar tudo você tem q criar uma String com todo o html gerado pelo seu JS depois de processar elemento por elemento ai é só substituir o conteudo do body ou do div em questão!!

 

c você olhar bem o backbase ele faz um <xmp></xmp> e colcoa la as tags deles ai o html resultante ele deve fazer um append no conteudo do body!!

 

the void

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gabriel Ricci    0

Gabriel Ricci
Postado

Entendi....eh q assim, mesmo criando o namespace na tag head....no Firefox, que tem suporte document.getElementsByTagNameNS(), a função não me retorna nada ..... tipo...tenho uma pagina assim....

 

<html xmlns:x="http://www.meudominio.com.br/x"><head>	<title>Teste Namespace</title></head><body>	<x:box>		  <div>Conteudo</div>	</x:box></body></html>

Dai se eu tento nesse documento fazer tipo assim:

 

var componentes = document.getElementsByTagNameNS("http://www.meudominio.com.br/x", "*");$A(componentes).each(function(value)){	   alert(value);});

Ele não retorna nada p/ componentes, tipo, to pegando os componentes do namespace http://www.meudominio.com.br/x usando "*" como wildcard ( pega todos os elementos ), dai mesmo assim tento percorrer ele usando a função each da prototype, pra ver se tem alguma coisa la e nada, num faz nenhum alert, nem me retorna nenhum erro =/

Compartilhar este post

Link para o post
Compartilhar em outros sites

void    1

void
Postado

seguinte fiz um b:box igual ao da backbase!!

 

porem estou melhorando ainda ele está com um bug no ie mas vou acertar

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" debug="true"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>teste</title><script language="javascript" type="text/javascript" src="firebug/firebug.js"></script><script type="text/javascript" src="behaviour.js"></script><script type="text/javascript">		/** * @author Sean M. Burke */// graft() function// Originally by Sean M. Burke from interglacial.com// Closure support added by Maciek Adwentfunction graft (parent, t, doc) {	// Usage: graft( somenode, [ "I like ", ['em',	//			   { 'class':"stuff" },"stuff"], " oboy!"] )	doc = (doc || parent.ownerDocument || document);	var e;	if(t == undefined) {		throw complaining( "Can't graft an undefined value");	} else if(t.constructor == String) {		e = doc.createTextNode( t );	} else if(t.length == 0) {		e = doc.createElement( "span" );		e.setAttribute( "class", "fromEmptyLOL" );	} else {		for(var i = 0; i < t.length; i++) {			if( i == 0 && t[i].constructor == String ) {				var snared;				snared = t[i].match( /^([a-z][a-z0-9]*)\.([^\s\.]+)$/i );				if( snared ) {					e = doc.createElement(   snared[1] );					e.setAttribute( 'class', snared[2] );					continue;				}				snared = t[i].match( /^([a-z][a-z0-9]*)$/i );				if( snared ) {					e = doc.createElement( snared[1] );  // but no class					continue;				}				// Otherwise:				e = doc.createElement( "span" );				e.setAttribute( "class", "namelessFromLOL" );			}			if( t[i] == undefined ) {				throw complaining("Can't graft an undefined value in a list!");			} else if(  t[i].constructor == String ||									t[i].constructor == Array ) {				graft( e, t[i], doc );			} else if(  t[i].constructor == Number ) {				graft( e, t[i].toString(), doc );			} else if(  t[i].constructor == Object ) {				// hash's properties => element's attributes				for(var k in t[i]) {					// support for attaching closures to DOM objects					if(typeof(t[i][k])=='function'){						e[k] = t[i][k];					} else {						e.setAttribute( k, t[i][k] );					}				}			} else {				throw complaining( "Object " + t[i] +					" is inscrutable as an graft arglet." );			}		}	}	parent.appendChild( e );	return e; // return the topmost created node}function complaining (s) { alert(s); return new Error(s); }	</script><style>		* {-moz-box-sizing:border-box;}* {color:black;font-family:Verdana,Arial,sans-serif;font-size:11px;}	.b-box{				margin:5px;		padding:0px;			}.b-box-top-left {background-image:url(http://www.backbase.com/demos/explorer/controls/backbase/b-box/corner_top_left.gif);}.b-box-top-left, .b-box-top-right, .b-box-middle-left, .b-box-middle-right, .b-box-bottom-left, .b-box-bottom-right {width:5px;}.b-box-top-left, .b-box-top-middle, .b-box-top-right, .b-box-bottom-left, .b-box-bottom-middle, .b-box-bottom-right {height:5px;}body, td, th {color:#666666;font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;font-size:11px;}.b-box-top-middle, .b-box-middle-left, .b-box-content-td, .b-box-middle-right, .b-box-bottom-middle, .b-box-content {background-color:#FFFFFF;}.b-box-top-middle {background-image:url(http://www.backbase.com/demos/explorer/controls/backbase/b-box/border_top.gif);background-repeat:repeat-x;}.b-box-top-right {background-image:url(http://www.backbase.com/demos/explorer/controls/backbase/b-box/corner_top_right.gif);}.b-box-middle-left {background-image:url(http://www.backbase.com/demos/explorer/controls/backbase/b-box/border_left.gif);background-repeat:repeat-y;}.b-box-content-td {vertical-align:top;}.b-box-middle-right {background-image:url(http://www.backbase.com/demos/explorer/controls/backbase/b-box/border_right.gif);background-repeat:repeat-y;}.b-box-bottom-left {background-image:url(http://www.backbase.com/demos/explorer/controls/backbase/b-box/corner_bottom_left.gif);}.b-box-bottom-middle {background-image:url(http://www.backbase.com/demos/explorer/controls/backbase/b-box/border_bottom.gif);background-repeat:repeat-x;}.b-box-bottom-right {background-image:url(http://www.backbase.com/demos/explorer/controls/backbase/b-box/corner_bottom_right.gif);}	</style><script>var myrules = {	'b:box' : function(element){		graft(			document.getElementById("documentContent"),			["table", { style: element.style.cssText, class:'b-box', border:0, cellpadding:0, cellspacing:0 },				["tr",					["td", { class:'b-box-top-left'}],					["td", { class:'b-box-top-middle'}],					["td", { class:'b-box-top-right'}]				],				["tr",					["td", { class:'b-box-middle-left'}],					["td", { class:'b-box-content-td', height:'100%'},						["div", {class:'b-box-content'}, element.innerHTML]					],					["td", { class:'b-box-middle-right'}]				],				["tr",					["td", { class:'b-box-bottom-left'}],					["td", { class:'b-box-bottom-middle'}],					["td", { class:'b-box-bottom-right'}]				]			]		);	}};Behaviour.register(myrules);</script></head><body>	<div style="display:none">		<b:box style="width: 300px;">teste1</b:box>		<b:box style="width: 250px;">teste2</b:box>	</div>	<div id="documentContent"></div></body></html>

the void

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gabriel Ricci    0

Gabriel Ricci
Postado

Kra.....você eh um genio....valewwww =] Vo da uma estudada na parada amanha no trampo...soh um detalhe...tava faltando o arquivo behaviour.js, dei uma pesquisadinha, achei ele e coloquei pra roda...sem ele nada funfa...Valew kra...!

Compartilhar este post

Link para o post
Compartilhar em outros sites

void    1

void
Postado

po manda ai para eu usar aki!!

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