aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Ayer Ajaxian, me alegraba con un nuevo framework para aplicar templates al javascript. En este caso se trata de un framework capaz de aplicar fichero XSL a nuestros XML’s, Freja es el nombre de este framework.

¿Que es Freja?

Freja es un framework especializado para la creación te templates para aplicaciones web visuales, para que nos entendamos, nos permite transforma nuestras códigos XML, en algo legible por el usuario de forma realmente simple.

Únicamente necesitas conocer el lenguaje XSL para poder distrutar de esta librería.

Ejemplo de uso

//XML
<?xml version="1.0" encoding="utf-8"?>
<items>
	<item id="item1">
		<name>Black Bean and Smoked Tomato</name>
		<description>with Goat Cheese, a touch of Cumin and Cayenne</description>		
		<price>$3.80</price>	
	</item>
	<item id="item2">
		<name>Baked Brie Wheel</name>
		<description>Oven baked and served with condiments and crackers</description>		
		<price>$8.85</price>	
	</item>	
	<item id="item3">
		<name>Pork Green Chili and Chips</name>
		<description>Homemade pork green chili served with a basket of white corn tortilla chips</description>		
		<price>$7.95</price>	
	</item>	
</items>
//XSL
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" indent="yes" encoding="UTF-8"/>
<xsl:template match="/">
	<xsl:apply-templates />
</xsl:template>
<xsl:template match="items">
<div>
	<xsl:apply-templates />
	<p><a href="#" class="addLink">Add a new menu entry</a></p>
</div>
</xsl:template>
<xsl:template match="item">	
<div>
	<h4><xsl:value-of select="name" /> &#xA0; <small><a href='#' id='{@id}' class='editLink'>edit</a></small></h4>
	<p><xsl:value-of select="description" /></p>
	<p><em>Price: <xsl:value-of select="price" /></em></p>
</div>
</xsl:template>
<xsl:template match="text()" />
</xsl:stylesheet>
//Javascript
// Freja Tutorial 3 - http://www.csscripting.com/freja

Freja.AssetManager.HTTP_METHOD_TUNNEL = null;
Freja.AssetManager.XSLT_SERVICE_URL = "srvc-xslt.php";	// For safari only

// Load Model and Views
var menu = getModel('models/data.xml');
var display = getView('views/display.xsl');
var edit = getView('views/edit.xsl');

// Handles 'ok' button in edit view
edit.behaviors["editForm"] = {
	onsubmit : function() {
		menu.updateFrom(edit);
		display.render(menu, "content");
		return false;
	}
};
edit.behaviors["cancelButton"] = {
	onclick : function() {
		display.render(menu, "content");
		return false;
	}
};

// Handles 'edit' link next to each menu item
display.behaviors["editLink"] = {
	onclick : function(n) {		
		edit.render(menu, "content", {itemid:n.id});
		return false;
	}
};

// Handles 'add new menu item' link at the bottom of the list
display.behaviors["addLink"] = {
	onclick : function() {
		var newitem = Freja._aux.loadXML(Freja._aux.xmlize( {name: '', description:'', price: '' },"item"));
		var root = menu.document.documentElement;	
		newitem = root.appendChild(Freja._aux.importNode(menu.document, newitem.documentElement));
		var newid = 'item'+root.childNodes.length;
		newitem.setAttribute('id',newid);
		edit.render(menu, "content", {itemid:newid});
		return false;
	}
};

// Let's go.
window.onload = function() {
	display.render(menu, "content");
}

[ Descargar][Demo][Tutorial]