From f6603ccc13454fa03624708c1a6595bb8ad4b82d Mon Sep 17 00:00:00 2001
From: Juan Ferrer Toribio <juan.ferrer.toribio@gmail.com>
Date: Wed, 18 Oct 2017 18:01:21 +0200
Subject: [PATCH] Backup

---
 forms/account/address-list/ui.xml      |   2 +-
 forms/account/address/ui.xml           |  14 +-
 forms/account/conf/conf.js             |   1 -
 forms/account/conf/ui.xml              |  29 +-
 forms/cms/about/ui.xml                 |  70 ++--
 forms/cms/contact/ui.xml               |  24 +-
 forms/ecomerce/catalog/catalog.js      |   7 +
 forms/ecomerce/catalog/ui.xml          |  11 +-
 forms/ecomerce/checkout/checkout.js    |   2 +-
 forms/ecomerce/checkout/ui.xml         |  55 ++-
 forms/news/new/ui.xml                  |  10 +-
 forms/news/news/ui.xml                 |   2 +-
 forms/preview/ui.xml                   |   2 +-
 forms/reports/items-form/items-form.js |  16 +-
 forms/reports/items-form/ui.xml        |   8 +-
 forms/reports/shelves/ui.xml           |  26 +-
 js/hedera/form.js                      |  36 +-
 js/hedera/gui.js                       |   4 +-
 js/hedera/login.js                     |   4 +-
 js/hedera/report.css                   |   2 +-
 js/hedera/report.js                    |  15 +-
 js/hedera/social-bar.js                |   2 +-
 js/htk/assistant-bar.js                |   3 +-
 js/htk/column.js                       |   4 +-
 js/htk/component.js                    |  56 ---
 js/htk/field.js                        |   5 +-
 js/htk/field/calendar.js               |   8 +-
 js/htk/field/label.js                  |  22 +
 js/htk/field/radio.js                  |  12 +-
 js/htk/grid.js                         |   4 +-
 js/htk/htk.js                          |   6 +-
 js/htk/icon.js                         |   4 +-
 js/htk/image-editor.js                 |   5 +-
 js/htk/popup.js                        |   7 +-
 js/htk/repeater.js                     |  33 +-
 js/htk/spinner.js                      |   4 +-
 js/htk/widget.js                       |  88 ----
 js/vn/builder.js                       | 559 +++++++++++++++----------
 js/vn/component.js                     | 157 +++++++
 js/vn/iterator.js                      |   5 +-
 js/{htk => vn}/node-builder.js         |   5 +-
 js/vn/object.js                        |   2 +-
 js/vn/vn.js                            |   2 +
 web/app.php                            |   1 -
 web/db-session-handler.php             |   4 +-
 web/service.php                        |   2 +-
 46 files changed, 734 insertions(+), 606 deletions(-)
 delete mode 100644 js/htk/component.js
 delete mode 100644 js/htk/widget.js
 create mode 100644 js/vn/component.js
 rename js/{htk => vn}/node-builder.js (85%)

diff --git a/forms/account/address-list/ui.xml b/forms/account/address-list/ui.xml
index e1b96177..9e0c2955 100755
--- a/forms/account/address-list/ui.xml
+++ b/forms/account/address-list/ui.xml
@@ -16,7 +16,7 @@
 	</db-model>
 </vn-group>
 <h1 id="title">
-	<t>Addresses</t>
+	_Addresses
 </h1>
 <div id="actions">
 	<htk-bar-button
diff --git a/forms/account/address/ui.xml b/forms/account/address/ui.xml
index 8543f070..1bae850e 100755
--- a/forms/account/address/ui.xml
+++ b/forms/account/address/ui.xml
@@ -20,7 +20,7 @@
 	</db-form>
 </vn-group>
 <h1 id="title">
-	<t>AddEditAddress</t>
+	_AddEditAddress
 </h1>
 <div id="actions">
 	<htk-bar-button
@@ -35,23 +35,23 @@
 <div id="main" class="address">
 	<div class="card form">
 		<div>
-			<label><t>Name</t></label>
+			<label>_Name</label>
 			<htk-entry lot="iter" name="consignee"/>
 		</div>
 		<div>
-			<label><t>Address</t></label>
+			<label>_Address</label>
 			<htk-entry lot="iter" name="name"/>
 		</div>
 		<div>
-			<label><t>City</t></label>
+			<label>_City</label>
 			<htk-entry lot="iter" name="city"/>
 		</div>
 		<div>
-			<label><t>ZipCode</t></label>
+			<label>_ZipCode</label>
 			<htk-entry lot="iter" name="zip_code"/>
 		</div>
 		<div>
-			<label><t>Country</t></label>
+			<label>_Country</label>
 			<htk-combo>
 				<vn-param
 					id="country"
@@ -66,7 +66,7 @@
 			</htk-combo>
 		</div>
 		<div>
-			<label><t>Province</t></label>
+			<label>_Province</label>
 			<htk-combo lot="iter" name="province_id">
 				<db-model property="model" lot="iter">
 					SELECT province_id, name FROM vn2008.province
diff --git a/forms/account/conf/conf.js b/forms/account/conf/conf.js
index 076afeb0..49a0aeb9 100644
--- a/forms/account/conf/conf.js
+++ b/forms/account/conf/conf.js
@@ -6,7 +6,6 @@ Hedera.Conf = new Class
 	,activate: function ()
 	{
 		this.$('user-model').setInfo ('c', 'customer_view', 'hedera');
-		this.$('addresses').setInfo ('a', 'address_view', 'hedera');
 	}
 	
 	,onPassChangeClick: function ()
diff --git a/forms/account/conf/ui.xml b/forms/account/conf/ui.xml
index c2eb1f1d..393005ed 100755
--- a/forms/account/conf/ui.xml
+++ b/forms/account/conf/ui.xml
@@ -16,7 +16,7 @@
 	</db-form>
 </vn-group>
 <h1 id="title">
-	<t>Configuration</t>
+	_Configuration
 </h1>
 <div id="actions">
 	<htk-bar-button
@@ -31,15 +31,15 @@
 <div id="main" class="conf">
 	<div class="card form">
 		<div>
-			<label for="user-name"><t>Username</t></label>
+			<label for="user-name">_Username</label>
 			<htk-text lot="user" name="name"/>
 		</div>
 		<div>
-			<label for="email"><t>Email</t></label>
+			<label for="email">_Email</label>
 			<htk-entry lot="user" name="email"></htk-entry>
 		</div>
 		<div>
-			<label for="mail"><t>Receive invoices by email</t></label>
+			<label for="mail">_Receive invoices by email</label>
 			<htk-check lot="user" name="mail"/>
 		</div>
 	</div>
@@ -64,10 +64,10 @@
 		</div>
 		<div class="button-bar">
 			<button class="thin" on-click="onPassModifyClick">
-				<t>Modify</t>
+				_Modify
 			</button>
 			<button class="thin" on-click="onPassInfoClick">
-				<t>Info</t>
+				_Info
 			</button>
 			<div class="clear"/>
 		</div>
@@ -78,28 +78,23 @@
 	modal="true">
 	<div property="child-node" class="htk-dialog pass-info">
 		<h3>
-			<t>Password requirements</t>
+			_Password requirements
 		</h3>
 		<ul>
 			<li>
-				<htk-text lot="password-form" name="length"/> 
-				<t>characters long</t>
+				<htk-text lot="password-form" name="length"/> <t>characters long</t>
 			</li>
 			<li>
-				<htk-text lot="password-form" name="nAlpha"/> 
-				<t>alphabetic characters</t>
+				<htk-text lot="password-form" name="nAlpha"/> <t>alphabetic characters</t>
 			</li>
 			<li>
-				<htk-text lot="password-form" name="nUpper"/> 
-				<t>capital letters</t>
+				<htk-text lot="password-form" name="nUpper"/> <t>capital letters</t>
 			</li>
 			<li>
-				<htk-text lot="password-form" name="nDigits"/> 
-				<t>digits</t>
+				<htk-text lot="password-form" name="nDigits"/> <t>digits</t>
 			</li>
 			<li>
-				<htk-text lot="password-form" name="nPunct"/> 
-				<t>symbols</t>
+				<htk-text lot="password-form" name="nPunct"/> <t>symbols</t>
 			</li>
 		</ul>
 	</div>
diff --git a/forms/cms/about/ui.xml b/forms/cms/about/ui.xml
index 723835fe..0b99b6e9 100755
--- a/forms/cms/about/ui.xml
+++ b/forms/cms/about/ui.xml
@@ -1,95 +1,95 @@
 <vn>
 <h1 id="title">
-	<t>About</t>
+	_About
 </h1>
 <div id="main" class="about">
 <div class="cols">
 	<div class="card">
 		<h1>
-			<t>QualityAndVariety</t>
+			_QualityAndVariety
 		</h1>
-		<p><t>MaximumFreshness</t></p>
-		<h3><t>SquareMeters</t></h3>
+		<p>_MaximumFreshness</p>
+		<h3>_SquareMeters</h3>
 		<img src="forms/cms/about/image/store.png" alt="store"/>
-		<h3><t>AboutRealms</t></h3>
-		<p><t>AboutLocation</t></p>
+		<h3>_AboutRealms</h3>
+		<p>_AboutLocation</p>
 		<img src="forms/cms/about/image/trailer.png" alt="trailer"/>
 		<p>
 			<img src="forms/cms/about/image/dealer.png" alt="dealer"/>
-			<t>PurchaseThroughWeb</t>
+			_PurchaseThroughWeb
 		</p>
 		<img src="forms/cms/about/image/palletizing.png" alt="palletizing"/>
 	</div>
 	<div class="card">
 		<h1>
-			<t>WhatMakeUsDifferent</t>
+			_WhatMakeUsDifferent
 		</h1>
-		<p><t>DesignVariety</t></p>
+		<p>_DesignVariety</p>
 		<img src="forms/cms/about/image/differentiates_us.png" alt="differentiates_us"/>
-		<p><t>AdaptToYourNeeds</t></p>
-		<h3><t>TheBestQuality</t></h3>
+		<p>_AdaptToYourNeeds</p>
+		<h3>_TheBestQuality</h3>
 	</div>
 	<div class="card">
 		<h1>
-			<t>AtYourService</t>
+			_AtYourService
 		</h1>
-		<h2><t>BuyersAndTraders</t></h2>
+		<h2>_BuyersAndTraders</h2>
 		<img src="forms/cms/about/image/commercial.png" alt="commercial"/>
 	</div>
 	<div class="card">
 		<h1>
-			<t>Verdnatura training</t>
+			_Verdnatura training
 		</h1>
-		<p><t>GoodTraining</t></p>
+		<p>_GoodTraining</p>
 		<img src="forms/cms/about/image/training.png" alt="training"/>
-		<p><t>SpecialTrainingPrices</t></p>
+		<p>_SpecialTrainingPrices</p>
 		<img src="forms/cms/about/image/courses.png" alt="courses"/>
-		<h2><t>YoutubeChannel</t></h2>
+		<h2>_YoutubeChannel</h2>
 		<img src="forms/cms/about/image/youtube.png" alt="youtube"/>
 	</div>
 	<div class="card">
 		<h1>
-			<t>HowWeWork</t>
+			_HowWeWork
 		</h1>
-		<p><t>AalsmeerAuction</t></p>
+		<p>_AalsmeerAuction</p>
 		<img src="forms/cms/about/image/auction.png" alt="auction"/>
-		<p><t>BeforeAuction</t></p>
+		<p>_BeforeAuction</p>
 		<img src="forms/cms/about/image/producers.png" alt="producers"/>
-		<p><t>DirectlyFromProviders</t></p>
-		<p><t>GoodsDischarge</t></p>
+		<p>_DirectlyFromProviders</p>
+		<p>_GoodsDischarge</p>
 		<img src="forms/cms/about/image/goods_transport.png" alt="goods_transport"/>
 		<h2>
-			<t>FirstQualityControl</t>		
+			_FirstQualityControl		
 			<img src="forms/cms/about/image/glass.png" alt="glass"/>
 		</h2>
 		<img src="forms/cms/about/image/goods_receive.png" alt="goods_receive"/>
-		<p><t>GoodsTravel</t></p>
+		<p>_GoodsTravel</p>
 		<img src="forms/cms/about/image/2_control.png" alt="2_control"/>
-		<p><t>GoodsReception</t></p>
+		<p>_GoodsReception</p>
 		<h2>
-			<t>SecondQualityControl</t>
+			_SecondQualityControl
 			<img src="forms/cms/about/image/glass.png" alt="glass"/>
 		</h2>
-		<p><t>CustomerOrders</t></p>
+		<p>_CustomerOrders</p>
 		<img src="forms/cms/about/image/web.png" alt="web"/>
-		<p><t>AfterOrder</t></p>
+		<p>_AfterOrder</p>
 		<img src="forms/cms/about/image/4_control.png" alt="4_control"/>
 		<h2>
-			<t>ThirdQualityControl</t>		
+			_ThirdQualityControl		
 			<img src="forms/cms/about/image/glass.png" alt="glass"/>
 		</h2>
-		<p><t>BuyerControl</t></p>
+		<p>_BuyerControl</p>
 		<h2>
-			<t>FourthQualityControl</t>
+			_FourthQualityControl
 			<img src="forms/cms/about/image/glass.png" alt="glass"/>
 		</h2>
-		<p><t>EmbeddedSection</t></p>
+		<p>_EmbeddedSection</p>
 		<img src="forms/cms/about/image/fit.png" alt="fit"/>
-		<p><t>AfterEmbedAgency</t></p>
+		<p>_AfterEmbedAgency</p>
 		<img src="forms/cms/about/image/agencies.png" alt="agencies"/>
-		<p><t>FreshnessGuaranteed</t></p>
+		<p>_FreshnessGuaranteed</p>
 		<p class="summary">
-			<t>AboutSummary</t>
+			_AboutSummary
 			<img src="image/logo.svg" alt="Verdnatura"/>
 		</p>
 	</div>
diff --git a/forms/cms/contact/ui.xml b/forms/cms/contact/ui.xml
index 874094f6..61837d9b 100755
--- a/forms/cms/contact/ui.xml
+++ b/forms/cms/contact/ui.xml
@@ -1,6 +1,6 @@
 <vn>
 <h1 id="title">
-	<t>IWantCustomer</t>
+	_IWantCustomer
 </h1>
 <div id="main" class="contact">
 	<form
@@ -8,45 +8,45 @@
 		<input type="hidden" name="srv" value="json:misc/contact"/>
 	<div class="card form">
 		<p>
-			<t>FillFormData</t>
+			_FillFormData
 		</p>
 		<p>
-			<t>OrCallUs</t>
+			_OrCallUs
 		</p>
 		<div>
-			<label><t>Name</t></label>
+			<label>_Name</label>
 			<input type="text" name="name"/>
 		</div>
 		<div>
-			<label><t>City</t></label>
+			<label>_City</label>
 			<input type="text" name="city"/>
 		</div>
 		<div>
-			<label><t>PC</t></label>
+			<label>_PC</label>
 			<input type="text" name="pc"/>
 		</div>
 		<div>
-			<label><t>Phone</t></label>
+			<label>_Phone</label>
 			<input type="text" name="phone"/>
 		</div>
 		<div>
-			<label><t>EMail</t></label>
+			<label>_EMail</label>
 			<input type="text" name="email"/>
 		</div>
 		<div>
-			<label><t>Message</t></label>
+			<label>_Message</label>
 			<textarea name="message"/>
 		</div>
 		<div class="form-group captcha">
-			<label><t>Anti-Spam</t></label>
+			<label>_Anti-Spam</label>
 			<input type="text" name="captcha"/>
 			<img alt="Captcha" id="captcha-img"/>
 		</div>
 		<p class="mandatory-message">
-			<t>AllFieldsMandatory</t>
+			_AllFieldsMandatory
 		</p>
 		<button class="thin">
-			<t>Send</t>
+			_Send
 		</button>
 	</div>
 	</form>
diff --git a/forms/ecomerce/catalog/catalog.js b/forms/ecomerce/catalog/catalog.js
index f1980850..4f40e225 100644
--- a/forms/ecomerce/catalog/catalog.js
+++ b/forms/ecomerce/catalog/catalog.js
@@ -539,6 +539,13 @@ Vn.Filter = new Class
 			this._label.nodeValue = _('Loading...');
 		}
 	}
+
+	,_destroy: function ()
+	{
+		this._select.unref ();
+		this._modelLot.unref ();
+		this.parent ();
+	}
 });
 
 })();
diff --git a/forms/ecomerce/catalog/ui.xml b/forms/ecomerce/catalog/ui.xml
index 6ec955c2..fe8d1157 100755
--- a/forms/ecomerce/catalog/ui.xml
+++ b/forms/ecomerce/catalog/ui.xml
@@ -218,13 +218,12 @@
 		<div id="filters" class="filters">
 			<h2><t>Filter by</t></h2>
 			<vn-filter
-				lot="params"
 				name="type"
+				lot="params"
 				placeholder="_Family">
 				<db-model
 					id="types"
 					property="model"
-					conn="conn"
 					lot="params"
 					result-index="1"
 					on-status-changed="refreshTitle">
@@ -240,8 +239,8 @@
 			</vn-filter>
 			<vn-filter
 				id="test"
-				lot="params"
 				name="color"
+				lot="params"
 				placeholder="_Color"
 				filter="filter">
 				<db-model property="model" auto-load="false" result-index="1">
@@ -257,8 +256,8 @@
 				</db-model>
 			</vn-filter>
 			<vn-filter
-				lot="params"
 				name="producer"
+				lot="params"
 				placeholder="_Producer"
 				filter="filter">
 				<db-model property="model" auto-load="false" result-index="1">
@@ -273,8 +272,8 @@
 				</db-model>
 			</vn-filter>
 			<vn-filter
-				lot="params"
 				name="origin"
+				lot="params"
 				placeholder="_Origin"
 				filter="filter">
 				<db-model property="model" auto-load="false" result-index="1">
@@ -290,8 +289,8 @@
 				</db-model>
 			</vn-filter>
 			<vn-filter
-				lot="params"
 				name="category"
+				lot="params"
 				placeholder="_Category"
 				filter="filter">
 				<db-model property="model" auto-load="false" result-index="1">
diff --git a/forms/ecomerce/checkout/checkout.js b/forms/ecomerce/checkout/checkout.js
index ecd26f11..9fdcdb1b 100644
--- a/forms/ecomerce/checkout/checkout.js
+++ b/forms/ecomerce/checkout/checkout.js
@@ -171,7 +171,7 @@ Hedera.Checkout = new Class
 
 		if (row != -1)
 		{
-			var builder = this.$('repeater').getBuilder (row);
+			var builder = this.$('repeater').getScope (row);
 		
 			this.selectedNode = builder.$('address');
 			Vn.Node.addClass (this.selectedNode, 'selected');
diff --git a/forms/ecomerce/checkout/ui.xml b/forms/ecomerce/checkout/ui.xml
index 12975571..548277e2 100755
--- a/forms/ecomerce/checkout/ui.xml
+++ b/forms/ecomerce/checkout/ui.xml
@@ -23,7 +23,7 @@
 	</db-model>
 </vn-group>
 <h1 id="title">
-	<t>ConfigureOrder</t>
+	_ConfigureOrder
 </h1>
 <div id="actions">
 	<htk-bar-button
@@ -40,7 +40,7 @@
 			node="assistant-node"/>
 		<div id="assistant-node">
 			<div id="method-step">
-				<h2><t>DeliveryOrPickupQuestion</t></h2>
+				<h2>_DeliveryOrPickupQuestion</h2>
 				<div class="answers radio">
 					<htk-radio-group
 						id="rg-method"
@@ -48,21 +48,21 @@
 						name="method"
 						on-changed="onFieldChange"/>
 					<div>
-						<htk-radio radio-group="rg-method" value="AGENCY"/>
-						<label><t>ReceiveThroughtAgency</t></label>
+						<htk-radio radio-group="rg-method" id="r-agency" value="AGENCY"/>
+						<label for="r-agency">_ReceiveThroughtAgency</label>
 					</div>
 					<div>
-						<htk-radio radio-group="rg-method" value="DELIVERY"/>
-						<label><t>ReceiveThroughtRoute</t></label>
+						<htk-radio radio-group="rg-method" id="r-delivery" value="DELIVERY"/>
+						<label for="r-delivery">_ReceiveThroughtRoute</label>
 					</div>
 					<div>
-						<htk-radio radio-group="rg-method" value="PICKUP"/>
-						<label><t>PickupInStore</t></label>
+						<htk-radio radio-group="rg-method" id="r-pickup" value="PICKUP"/>
+						<label for="r-pickup">_PickupInStore</label>
 					</div>
 				</div>
 			</div>
 			<div id="date-step">
-				<h2 id="date-question"><t>OrderDateDeliveryQuestion</t></h2>
+				<h2 id="date-question">_OrderDateDeliveryQuestion</h2>
 				<div class="answers">
 					<htk-calendar
 						id="calendar"
@@ -70,11 +70,11 @@
 						lot="lot"
 						name="date"
 						restrict-func="calendarRestrict"
-						on-changed="onFieldChange"/>
+						on-pick="onFieldChange"/>
 				</div>
 			</div>
 			<div id="address-step">
-				<h2><t>AddressQuestion</t></h2>
+				<h2>_AddressQuestion</h2>
 				<db-form id="address-form" model="addresses"/>
 				<div class="answers target">
 					<htk-repeater
@@ -103,7 +103,7 @@
 				</div>
 			</div>
 			<div id="agency-step">
-				<h2><t>AgencyQuestion</t></h2>
+				<h2>_AgencyQuestion</h2>
 				<div class="answers target">
 					<htk-combo
 						id="agency-combo"
@@ -114,7 +114,7 @@
 				</div>
 			</div>
 			<div id="pickup-step">
-				<h2><t>PickupWarehouseQuestion</t></h2>
+				<h2>_PickupWarehouseQuestion</h2>
 				<div class="answers target">
 					<htk-combo
 						id="warehouse-combo"
@@ -125,57 +125,52 @@
 				</div>
 			</div>
 			<div id="confirm-agency-step" class="confirm">
-				<h2><t>ConfirmToAccessCatalog</t></h2>
+				<h2>_ConfirmToAccessCatalog</h2>
 				<div class="answers target">
 					<p>
-						<t>Arrival</t> 
-						<htk-text format="%D" lot="lot" name="date"/>
+						<t>Arrival</t> <htk-text format="%D" lot="lot" name="date"/>
 					</p>
 					<p>
 						<htk-text lot="address-form" name="name"/>
 					</p>
 					<p>
-						<t>Agency</t> 
-						<htk-text lot="agency-combo" name="description"/>
+						<t>Agency</t> <htk-text lot="agency-combo" name="description"/>
 					</p>
 					<button id="confirm-agency" class="thin" on-click="onConfirmClick">
-						<t>Confirm</t>
+						_Confirm
 					</button>
 					<div class="clear"/>
 				</div>
 			</div>
 			<div id="confirm-delivery-step" class="confirm">
-				<h2><t>ConfirmToAccessCatalog</t></h2>
+				<h2>_ConfirmToAccessCatalog</h2>
 				<div class="answers target">
 					<p>
-						<t>Arrival</t> 
-						<htk-text format="%D" lot="lot" name="date"/>
+						<t>Arrival</t> <htk-text format="%D" lot="lot" name="date"/>
 					</p>
 					<p>
 						<htk-text lot="address-form" name="name"/>
 					</p>
 					<p>
-						<t>ReceiveThroughtRoute</t>
+						_ReceiveThroughtRoute
 					</p>
 					<button id="confirm-delivery" class="thin" on-click="onConfirmClick">
-						<t>Confirm</t>
+						_Confirm
 					</button>
 					<div class="clear"/>
 				</div>
 			</div>
 			<div id="confirm-pickup-step" class="confirm">
-				<h2><t>ConfirmToAccessCatalog</t></h2>
+				<h2>_ConfirmToAccessCatalog</h2>
 				<div class="answers target">
 					<p>
-						<t>Pickup</t> 
-						<htk-text format="%D" lot="lot" name="date"/>
+						<t>Pickup</t> <htk-text format="%D" lot="lot" name="date"/>
 					</p>
 					<p>
-						<t>Warehouse</t> 
-						<htk-text lot="warehouse-combo" name="description"/>
+						<t>Warehouse</t> <htk-text lot="warehouse-combo" name="description"/>
 					</p>
 					<button id="confirm-pickup" class="thin" on-click="onConfirmClick">
-						<t>Confirm</t>
+						_Confirm
 					</button>
 					<div class="clear"/>
 				</div>
diff --git a/forms/news/new/ui.xml b/forms/news/new/ui.xml
index 6807bef6..c13cc571 100755
--- a/forms/news/new/ui.xml
+++ b/forms/news/new/ui.xml
@@ -14,7 +14,7 @@
 	<vn-param lot="iter" name="text" on-changed="onBodyChange"/>
 </vn-group>
 <h1 id="title">
-	<t>AddEditNew</t>
+	_AddEditNew
 </h1>
 <div id="actions">
 	<htk-bar-button
@@ -29,11 +29,11 @@
 <div id="main" class="new">
 	<div class="card form">
 		<div>
-			<label><t>Title</t></label>
+			<label>_Title</label>
 			<htk-entry lot="iter" name="title"/>
 		</div>
 		<div>
-			<label><t>Tag</t></label>
+			<label>_Tag</label>
 			<htk-combo lot="iter" name="tag">
 				<db-model property="model">
 					SELECT name, description FROM news_tag
@@ -42,11 +42,11 @@
 			</htk-combo>
 		</div>
 		<div>
-			<label><t>Priority</t></label>
+			<label>_Priority</label>
 			<htk-entry form="iter" column="priority"/>
 		</div>
 		<div>
-			<label><t>NewBody</t></label>
+			<label>_NewBody</label>
 			<textarea id="html-editor"/>
 		</div>
 	</div>
diff --git a/forms/news/news/ui.xml b/forms/news/news/ui.xml
index 0a332e20..9e0f178b 100755
--- a/forms/news/news/ui.xml
+++ b/forms/news/news/ui.xml
@@ -1,6 +1,6 @@
 <vn>
 <h1 id="title">
-	<t>NewsManagement</t>
+	_NewsManagement
 </h1>
 <div id="actions">
 	<htk-bar-button
diff --git a/forms/preview/ui.xml b/forms/preview/ui.xml
index 1a8b5955..6a6d36ec 100755
--- a/forms/preview/ui.xml
+++ b/forms/preview/ui.xml
@@ -1,6 +1,6 @@
 <vn>
 <h1 id="title">
-	<t>Preview</t>
+	_Preview
 </h1>
 <div id="actions">
 	<htk-bar-button
diff --git a/forms/reports/items-form/items-form.js b/forms/reports/items-form/items-form.js
index 34a2b2bb..4836fed2 100644
--- a/forms/reports/items-form/items-form.js
+++ b/forms/reports/items-form/items-form.js
@@ -5,19 +5,15 @@ Hedera.ItemsForm = new Class
 	
 	,activate: function ()
 	{
-		this.$('warehouse').value = 7;
-		this.$('realm').value = null;
+		this.$('lot').assign ({
+			warehouse: 7,
+			realm: null
+		});
 	}
 	
-	,onPreviewClick: function ()
+	,onShowClick: function ()
 	{
-		var batch = new Sql.Batch ();
-		batch.addValues ({
-			 'warehouse': this.$('warehouse').value
-			,'realm': this.$('realm').value
-			,'rate': this.$('rate').value
-		});
-		this.gui.openReport ('items-report', batch);
+		this.gui.openReport ('items-report', this.$('lot').params);
 	}
 });
 
diff --git a/forms/reports/items-form/ui.xml b/forms/reports/items-form/ui.xml
index fda8e084..71af804c 100755
--- a/forms/reports/items-form/ui.xml
+++ b/forms/reports/items-form/ui.xml
@@ -1,7 +1,7 @@
 <vn>
 <vn-lot id="lot"/>
 <h1 id="title">
-	<t>Item list</t>
+	_Item list
 </h1>
 <div id="actions" class="action-bar">
 	<htk-bar-button
@@ -12,7 +12,7 @@
 <div id="main" class="items">
 	<div class="card form">
 		<div>
-			<label><t>Store</t></label>
+			<label>_Store</label>
 			<htk-combo lot="lot" name="warehouse">
 				<db-model property="model">
 					SELECT id, name FROM vn2008.warehouse
@@ -21,7 +21,7 @@
 			</htk-combo>
 		</div>
 		<div>
-			<label><t>Realm</t></label>
+			<label>_Realm</label>
 			<htk-combo lot="lot" name="realm" not-null="false">
 				<db-model property="model">
 					SELECT id, reino FROM vn2008.reinos
@@ -30,7 +30,7 @@
 			</htk-combo>
 		</div>
 		<div>
-			<label><t>Rate</t></label>
+			<label>_Rate</label>
 			<select id="rate">
 				<option>3</option>
 				<option>2</option>
diff --git a/forms/reports/shelves/ui.xml b/forms/reports/shelves/ui.xml
index 89f9b525..cc7f5f46 100755
--- a/forms/reports/shelves/ui.xml
+++ b/forms/reports/shelves/ui.xml
@@ -4,7 +4,7 @@
 </vn-lot-query>
 <vn-lot id="lot"/>
 <h1 id="title">
-	<t>Shelves</t>
+	_Shelves
 </h1>
 <div id="actions">
 	<htk-bar-button
@@ -15,7 +15,7 @@
 <div id="main" class="shelves">
 	<div class="card form">
 		<div>
-			<label><t>Configuration</t></label>
+			<label>_Configuration</label>
 			<htk-combo
 				id="config"
 				placeholder="_Select config"
@@ -33,11 +33,11 @@
 			</htk-combo>
 		</div>
 		<div>
-			<label><t>Date</t></label>
+			<label>_Date</label>
 			<htk-date-chooser lot="lot" name="date"/>
 		</div>
 		<div>
-			<label><t>Reign</t></label>
+			<label>_Reign</label>
 			<htk-combo lot="lot" name="realm">
 				<db-model property="model">
 					SELECT id, reino FROM vn2008.reinos
@@ -46,7 +46,7 @@
 			</htk-combo>
 		</div>
 		<div>
-			<label><t>Family</t></label>
+			<label>_Family</label>
 			<htk-combo lot="lot" name="family">
 				<db-model property="model" lot="lot">
 					SELECT tipo_id, Tipo FROM vn2008.Tipos 
@@ -55,7 +55,7 @@
 			</htk-combo>
 		</div>
 		<div>
-			<label><t>Store</t></label>
+			<label>_Store</label>
 			<htk-combo lot="lot" name="warehouse">
 				<db-model property="model">
 					SELECT id, name FROM vn2008.warehouse
@@ -64,7 +64,7 @@
 			</htk-combo>
 		</div>
 		<div>
-			<label><t>Shelf</t></label>
+			<label>_Shelf</label>
 			<htk-combo lot="lot" name="shelf">
 				<db-model property="model">
 					SELECT id, name FROM shelf
@@ -72,27 +72,27 @@
 			</htk-combo>
 		</div>
 		<div>
-			<label><t>Name prefix</t></label>
+			<label>_Name prefix</label>
 			<htk-entry lot="lot" name="namePrefix"/>
 		</div>
 		<div>
-			<label><t>Limit amount per item</t></label>
+			<label>_Limit amount per item</label>
 			<htk-entry lot="lot" name="maxAmount"/>
 		</div>
 		<div>
-			<label><t>Title</t></label>
+			<label>_Title</label>
 			<htk-entry lot="lot" name="reportTitle"/>
 		</div>
 		<div>
-			<label><t>Show packing</t></label>
+			<label>_Show packing</label>
 			<htk-check lot="lot" name="showPacking"/>
 		</div>
 		<div>
-			<label><t>Stack different items</t></label>
+			<label>_Stack different items</label>
 			<htk-check lot="lot" name="stack"/>
 		</div>
 		<div>
-			<label><t>Use ids instead of names</t></label>
+			<label>_Use ids instead of names</label>
 			<htk-check lot="lot" name="useIds"/>
 		</div>
 	</div>
diff --git a/js/hedera/form.js b/js/hedera/form.js
index 66c63569..373473d8 100644
--- a/js/hedera/form.js
+++ b/js/hedera/form.js
@@ -3,7 +3,7 @@ var Gui = require ('./gui');
 
 module.exports = new Class
 ({
-	Extends: Htk.Component
+	Extends: Vn.Component
 	,Properties: {
 		gui:
 		{
@@ -35,15 +35,17 @@ module.exports = new Class
 			return;
 	
 		var builder = new Vn.Builder ();
-		builder.signalData = this;
-		builder.add ('conn', this.conn);
-		builder.add ('hash', this.hash);
-		builder.loadXml ('forms/'+ this.formInfo.path +'/ui.xml');
+		builder.compileFile ('forms/'+ this.formInfo.path +'/ui.xml');
 		
-		var res = this.builder = builder.load ();
-		this._node = res.$('main');
+		var extraObjects = {
+			conn: this.conn,
+			hash: this.hash
+		};
+		var scope = builder.load (this.doc, this, null, extraObjects);
+		this.scope = scope;
+		this._node = this.$('main');
 
-		var paramsLot = res.$('params');
+		var paramsLot = this.$('params');
 
 		if (paramsLot)
 		{
@@ -51,14 +53,14 @@ module.exports = new Class
 			this.params = paramsLot;
 		}
 	
-		res.link ();
+		scope.link ();
 
-		var models = res.getByTagName ('db-model');
+		var models = scope.getByTagName ('db-model');
 
 		for (var i = 0; i < models.length; i++)
 			models[i].conn = this.conn;
 
-		var queries = res.getByTagName ('db-query');
+		var queries = scope.getByTagName ('db-query');
 
 		for (var i = 0; i < queries.length; i++)
 			queries[i].conn = this.conn;
@@ -66,8 +68,8 @@ module.exports = new Class
 		if (this.node)
 		{
 			this.gui.setForm (this.node);
-			this.gui.setTitle (res.$('title'));
-			this.gui.setActions (res.$('actions'));
+			this.gui.setTitle (scope.$('title'));
+			this.gui.setActions (scope.$('actions'));
 			this.activate ();
 		}
 		
@@ -82,17 +84,17 @@ module.exports = new Class
 		if (this.node)
 		{
 			this.deactivate ();
-			this.builder.unref ();
+			this.scope.unref ();
 			this.gui.setTitle (null);
 			this.gui.setActions (null);
 			this.gui.setForm (null);
 			this.node = null;
 			this.params = null;
 		}
-		if (this.builder)
+		if (this.scope)
 		{
-			this.builder.unref ();
-			this.builder = null;
+			this.scope.unref ();
+			this.scope = null;
 		}
 	}
 
diff --git a/js/hedera/gui.js b/js/hedera/gui.js
index b284d21e..de027cbc 100644
--- a/js/hedera/gui.js
+++ b/js/hedera/gui.js
@@ -11,7 +11,7 @@ require ('./gui.css');
  */
 module.exports = new Class
 ({
-	Extends: Htk.Component,
+	Extends: Vn.Component,
 	Properties:
 	{
 		/**
@@ -54,7 +54,7 @@ module.exports = new Class
 
 	,initialize: function (props)
 	{
-		this.builderInitString (Tpl);
+		this.loadTemplateFromString (Tpl);
 		this.loadingCount = 0;
 
 		this.$('background').onclick = function () {};
diff --git a/js/hedera/login.js b/js/hedera/login.js
index 1a09e699..eadd1132 100644
--- a/js/hedera/login.js
+++ b/js/hedera/login.js
@@ -8,7 +8,7 @@ require ('./login.css');
  */
 module.exports = new Class
 ({
-	Extends: Htk.Component,
+	Extends: Vn.Component,
 	Properties:
 	{
 		/**
@@ -31,7 +31,7 @@ module.exports = new Class
 	,initialize: function (props)
 	{
 		this.parent (props);
-		this.builderInitString (Tpl);
+		this.loadTemplateFromString (Tpl);
 	
 		this.$('social-bar').conn = this._conn;
 		
diff --git a/js/hedera/report.css b/js/hedera/report.css
index c50e0111..b7064f93 100644
--- a/js/hedera/report.css
+++ b/js/hedera/report.css
@@ -56,7 +56,7 @@
 /*	page-break-after: always;*/
 }
 
-/* Widgets */
+/* Components */
 
 .report .htk-grid
 {
diff --git a/js/hedera/report.js b/js/hedera/report.js
index a17781bf..f546585a 100644
--- a/js/hedera/report.js
+++ b/js/hedera/report.js
@@ -1,7 +1,7 @@
 
 module.exports = new Class
 ({
-	Extends: Htk.Component
+	Extends: Vn.Component
 
 	,activate: function ()
 	{
@@ -46,12 +46,13 @@ module.exports = new Class
 	,renderReport: function ()
 	{
 		var builder = new Vn.Builder ();
-		builder.signalData = this;
-		builder.add ('hash', this.hash);
-		builder.add ('conn', this.conn);
-		builder.loadXml ('reports/'+ this.info.path +'/ui.xml');
+		builder.compileFile ('reports/'+ this.info.path +'/ui.xml');
 
-		var res = this.builderResultInit (builder);
-		this.body.appendChild (res.$('report'));
+		var extraObjects = {
+			conn: this.conn,
+			hash: this.hash
+		};
+		this.loadScope (builder, null, extraObjects);
+		this.body.appendChild (this.$('report'));
 	}
 });
diff --git a/js/hedera/social-bar.js b/js/hedera/social-bar.js
index 31d1da2c..844f126f 100644
--- a/js/hedera/social-bar.js
+++ b/js/hedera/social-bar.js
@@ -1,7 +1,7 @@
 
 module.exports = new Class
 ({
-	Extends: Htk.Widget
+	Extends: Vn.Component
 	,Tag: 'htk-social-bar'
 	,Properties:
 	{
diff --git a/js/htk/assistant-bar.js b/js/htk/assistant-bar.js
index 612c034b..4ca0ef54 100644
--- a/js/htk/assistant-bar.js
+++ b/js/htk/assistant-bar.js
@@ -1,10 +1,9 @@
 
-var Widget = require ('./widget');
 var Assistant = require ('./assistant');
 
 module.exports = new Class
 ({
-	Extends: Widget
+	Extends: Vn.Component
 	,Tag: 'htk-assistant-bar'
 	,Properties:
 	{
diff --git a/js/htk/column.js b/js/htk/column.js
index 3c1e4ad5..46547e05 100644
--- a/js/htk/column.js
+++ b/js/htk/column.js
@@ -1,13 +1,11 @@
 
-var NodeBuilder = require ('./node-builder');
-
 /**
  * Represents a grid column. This is an abstract class and should not be
  * instantiated directly.
  */
 module.exports = new Class
 ({
-	Extends: NodeBuilder
+	Extends: Vn.NodeBuilder
 	,Tag: 'htk-column'
 	,Properties:
 	{
diff --git a/js/htk/component.js b/js/htk/component.js
deleted file mode 100644
index 4b37b4ed..00000000
--- a/js/htk/component.js
+++ /dev/null
@@ -1,56 +0,0 @@
-
-var Widget = require ('./widget');
-
-module.exports = new Class
-({
-	Extends: Widget
-
-	,builder: null
-	
-	,builderInit: function (path)
-	{
-		var builder = new Vn.Builder ();
-		builder.signalData = this;
-		builder.loadXml (path, this.doc);
-		this.builderResultInit (builder);
-	}
-	
-	,builderInitString: function (xmlString)
-	{
-		var builder = new Vn.Builder ();
-		builder.signalData = this;
-		builder.loadFromString (xmlString, this.doc);
-		this.builderResultInit (builder);
-	}
-	
-	,builderResultInit: function (builder)
-	{
-		var res = this.builder = builder.load ();
-		this._node = res.$('main');
-		res.link ();
-		return res;
-	}
-
-	/**
-	 * Gets an object from the builder associated to this component.
-	 *
-	 * @param {string} objectId The object identifier
-	 * @return {Object} The object, or %null if not found
-	 */
-	,$: function (id)
-	{
-		if (this.builder)
-			return this.builder.getById (id);
-			
-		return null;
-	}
-
-	,_destroy: function ()
-	{
-		if (this.builder)
-			this.builder.unref ();
-
-		this.parent ();
-	}
-});
-
diff --git a/js/htk/field.js b/js/htk/field.js
index 246b558e..b83316d4 100644
--- a/js/htk/field.js
+++ b/js/htk/field.js
@@ -1,12 +1,9 @@
-
-var Widget = require ('./widget');
-
 /**
  * Base class for graphical fields.
  */
 module.exports = new Class
 ({
-	Extends: Widget
+	Extends: Vn.Component
 	,Implements: Vn.ParamIface
 	,Tag: 'htk-field'
 	,Properties:
diff --git a/js/htk/field/calendar.js b/js/htk/field/calendar.js
index 82e223f1..ef89a415 100644
--- a/js/htk/field/calendar.js
+++ b/js/htk/field/calendar.js
@@ -12,7 +12,7 @@ module.exports = new Class
 			{
 				this._restrictFunc = x;
 			}
-			,get: function (x)
+			,get: function ()
 			{
 				return this._restrictFunc;
 			}
@@ -94,7 +94,8 @@ module.exports = new Class
 			for (var j = 0; j < len; j++)
 			{
 				var td = this.createElement ('td');
-				td.addEventListener ('click', this.dayClicked.bind (this, td, i*len+j));
+				td.addEventListener ('click',
+					this.dayClicked.bind (this, td, i * len + j));
 				tr.appendChild (td);
 				
 				var div = this.createElement ('div');
@@ -226,7 +227,7 @@ module.exports = new Class
 		this.selectedCell = cellIndex;
 	}
 
-	,putValue: function (value)
+	,putValue: function ()
 	{
 		this.goToSelectedMonth ();
 	}
@@ -240,6 +241,7 @@ module.exports = new Class
 			this.selectCell (cellIndex);
 
 			var newDate = new Date (this.year, this.month, cell.day);
+			this.emit ('pick', newDate);
 			this.valueChanged (newDate);
 		}
 	}
diff --git a/js/htk/field/label.js b/js/htk/field/label.js
index c1e326c7..b036a834 100644
--- a/js/htk/field/label.js
+++ b/js/htk/field/label.js
@@ -21,9 +21,31 @@ module.exports = new Class
 				return this._format;
 			}
 		}
+		/**
+		 * Input entry associated to the label.
+		 */
+		,for:
+		{
+			type: Vn.Component
+			,set: function (x)
+			{
+				this._for = x;
+				this.node.htmlFor = x.htmlId;
+			}
+			,get: function ()
+			{
+				return this._for;
+			}
+		}
 	}
 	
 	,_format: null
+	,_for: null
+
+	,appendChild: function (child)
+	{
+		this.node.appendChild (child);
+	}
 
 	,render: function ()
 	{
diff --git a/js/htk/field/radio.js b/js/htk/field/radio.js
index 3e5e4723..b80870ae 100644
--- a/js/htk/field/radio.js
+++ b/js/htk/field/radio.js
@@ -31,12 +31,18 @@ module.exports = new Class
 			}
 		}
 	}
-	
-	,_radioGroup: null
+
+	,initialize: function (props)
+	{
+		Object.assign (this, {
+			_radioGroup: null
+		});
+		this.parent (props);
+	}
 
 	,render: function ()
 	{
-		var radio = this.doc.createElement ('input');
+		var radio = this.createRoot ('input');
 		radio.type = 'radio';
 		radio.name = '';
 		radio.checked = false;
diff --git a/js/htk/grid.js b/js/htk/grid.js
index 4d756f10..22dfb397 100644
--- a/js/htk/grid.js
+++ b/js/htk/grid.js
@@ -1,9 +1,7 @@
 
-var Widget = require ('./widget');
-
 module.exports = new Class
 ({
-	Extends: Widget
+	Extends: Vn.Component
 	,Tag: 'htk-grid'
 	,Child: 'model'
 	,Properties:
diff --git a/js/htk/htk.js b/js/htk/htk.js
index 99ee7948..c2fb0a68 100644
--- a/js/htk/htk.js
+++ b/js/htk/htk.js
@@ -3,10 +3,7 @@ require ('db/db');
 require ('./style.css');
 
 Htk = module.exports = {
-	 NodeBuilder  : require ('./node-builder')
-	,Widget       : require ('./widget')
-	,Component    : require ('./component')
-	,Popup        : require ('./popup')
+	 Popup        : require ('./popup')
 	,Dialog       : require ('./dialog')
 	,Toast        : require ('./toast')
 	,Repeater     : require ('./repeater')
@@ -51,4 +48,3 @@ var Fields = {
 
 for (var field in Fields)
 	Htk[field] = Fields[field];
-
diff --git a/js/htk/icon.js b/js/htk/icon.js
index d31613d5..f93d2668 100644
--- a/js/htk/icon.js
+++ b/js/htk/icon.js
@@ -1,9 +1,7 @@
 
-var Widget = require ('./widget');
-
 module.exports = new Class
 ({
-	Extends: Widget
+	Extends: Vn.Component
 	,Tag: 'htk-icon'
 	,Properties:
 	{
diff --git a/js/htk/image-editor.js b/js/htk/image-editor.js
index 053258d4..c80b15df 100644
--- a/js/htk/image-editor.js
+++ b/js/htk/image-editor.js
@@ -1,5 +1,4 @@
 
-var Component = require ('./component');
 var Toast = require ('./toast');
 var Tpl = require ('./image-editor.xml');
 
@@ -9,7 +8,7 @@ var Tpl = require ('./image-editor.xml');
  */
 module.exports = new Class
 ({
-	Extends: Component
+	Extends: Vn.Component
 	,Properties:
 	{
 		/**
@@ -23,7 +22,7 @@ module.exports = new Class
 	
 	,initialize: function (props)
 	{
-		this.builderInitString (Tpl);
+		this.loadTemplateFromString (Tpl);
 
 		var self = this;
 		this.$('form').onsubmit = function ()
diff --git a/js/htk/popup.js b/js/htk/popup.js
index 0d40671d..62beb37e 100644
--- a/js/htk/popup.js
+++ b/js/htk/popup.js
@@ -1,12 +1,9 @@
-
-var Widget = require ('./widget');
-
 /**
  * Class to handle popups.
  */
 module.exports = new Class
 ({
-	Extends: Widget
+	Extends: Vn.Component
 	,Tag: 'htk-popup'
 	,Properties:
 	{
@@ -15,7 +12,7 @@ module.exports = new Class
 		 */
 		child:
 		{ 
-			type: Widget
+			type: Vn.Component
 			,set: function (x)
 			{
 				this._child = x;
diff --git a/js/htk/repeater.js b/js/htk/repeater.js
index 3a39b1e9..b4afbf97 100644
--- a/js/htk/repeater.js
+++ b/js/htk/repeater.js
@@ -1,9 +1,7 @@
 
-var Widget = require ('./widget');
-
 module.exports = new Class
 ({
-	Extends: Widget
+	Extends: Vn.Component
 	,Tag: 'htk-repeater'
 	,Child: 'model'
 	,Properties:
@@ -74,6 +72,7 @@ module.exports = new Class
 	
 	,_builder: null
 	,_formId: 'form'
+	,_parentScope: null
 	
 	,render: function ()
 	{
@@ -84,14 +83,14 @@ module.exports = new Class
 		div.appendChild (this._container);
 	}
 	
-	,loadXml: function (builderResult, node)
+	,loadXml: function (scope, node)
 	{
-		this.parent (builderResult, node);
+		this.parent (scope, node);
 
 		var builder = this._builder = new Vn.Builder ();
-		builder.setParent (builderResult);
-		builder.loadXmlFromNode (node.firstElementChild);
+		builder.compileNode (node.firstElementChild);
 
+		this._parentScope = scope;
 		this._onModelChange ();
 	}
 	
@@ -100,9 +99,9 @@ module.exports = new Class
 		return this._container.childNodes[index];
 	}
 	
-	,getBuilder: function (index)
+	,getScope: function (index)
 	{
-		return this._childsData[index].builder;
+		return this._childsData[index].scope;
 	}
 	
 	,getForm: function (index)
@@ -117,19 +116,21 @@ module.exports = new Class
 			row: index
 		});
 		
-		this._builder.add (this._formId, set);
-		var res = this._builder.load ();
-		res.link ();
+		var extraObjects = {};
+		extraObjects[this._formId] = set;
+
+		var scope = this._builder.load (this.doc, null, this._parentScope, extraObjects);
+		scope.link ();
 
 		this._childsData.push ({
-			builder: res,
+			scope: scope,
 			set: set
 		});
 		
 		if (this._renderer)
-			this._renderer (res, set);
+			this._renderer (scope, set);
 			
-		return res.getMain ();
+		return scope.getMain ();
 	}
 
 	,_onModelChange: function ()
@@ -235,7 +236,7 @@ module.exports = new Class
 	{
 		var childData = this._childsData[index];
 		childData.set.unref ();
-		childData.builder.unref ();
+		childData.scope.unref ();
 	}
 
 	,_destroy: function ()
diff --git a/js/htk/spinner.js b/js/htk/spinner.js
index f7edcd39..06e325c0 100644
--- a/js/htk/spinner.js
+++ b/js/htk/spinner.js
@@ -1,9 +1,7 @@
 
-var Widget = require ('./widget');
-
 module.exports = new Class
 ({
-	Extends: Widget
+	Extends: Vn.Component
 	,Tag: 'htk-spinner'
 	
 	,_started: false
diff --git a/js/htk/widget.js b/js/htk/widget.js
deleted file mode 100644
index b1970700..00000000
--- a/js/htk/widget.js
+++ /dev/null
@@ -1,88 +0,0 @@
-
-var NodeBuilder = require ('./node-builder');
-
-var nativeEvents = {
-	 'click'     : 1
-	,'mousedown' : 1
-	,'focusout'  : 1
-};
-
-module.exports = new Class
-({
-	Extends: NodeBuilder
-	,Properties:
-	{
-		/**
-		 * Main HTML node that represents the widget
-		 */
-		node:
-		{
-			type: Object
-			,get: function ()
-			{
-				this.renderBase ();
-				return this._node;
-			}
-		},
-		/**
-		 * CSS classes to be appendend to the node classes.
-		 */
-		class:
-		{
-			type: String
-			,set: function (x)
-			{
-				this._cssClass = x;
-				this._refreshClass ();
-			}
-			,get: function ()
-			{
-				return this._node.className;
-			}
-		}
-	}
-
-	,_node: null
-	
-	,initialize: function (props)
-	{
-		this.doc = document;
-		this.renderBase ();
-		this.parent (props);
-	}
-	
-	,on: function (id, callback, instance)
-	{
-		if (nativeEvents[id])
-			this.node.addEventListener (id,
-				callback.bind (instance, this));
-		else
-			this.parent (id, callback, instance);
-	}
-	
-	,createRoot: function (tagName)
-	{
-		return this._node = this.createElement (tagName);
-	}
-	
-	,renderBase: function ()
-	{
-		if (this._node)
-			return;
-
-		this.render ();
-		this._refreshClass ();
-	}
-
-	,_refreshClass: function ()
-	{
-		if (this._node && this._cssClass)
-			this._node.className = this._cssClass +' '+ this._node.className;
-	}
-	
-	,remove: function ()
-	{
-		Vn.Node.remove (this._node);
-	}
-});
-
diff --git a/js/vn/builder.js b/js/vn/builder.js
index 1d0bc026..b278b8d8 100644
--- a/js/vn/builder.js
+++ b/js/vn/builder.js
@@ -1,7 +1,16 @@
 
 var VnObject = require ('./object');
+var Component = require ('./component');
 var Type = require ('./type');
 
+var specialAttrs = {
+	id       : 1,
+	property : 1
+};
+var objectAttrs = {
+	for      : 1
+};
+
 /**
  * Creates a object from a XML specification.
  */
@@ -10,92 +19,50 @@ module.exports = new Class
 	 Extends: VnObject
 	,_addedMap: {}
 	,_contexts: null
-	
-	,add: function (id, object)
-	{
-		this._addedMap[id] = object;
-	}
-	
-	,setParent: function (parentResult)
-	{
-		this._parentResult = parentResult;
-		
-		if (parentResult && !this.signalData)
-			this.signalData = parentResult.builder.signalData;
-	}
-	
-	,getMain: function (result)
-	{
-		return result.objects[this._mainContext];
-	}
-	
-	,getById: function (result, objectId)
-	{
-		var index = this._contextMap[objectId];
-		
-		if (index !== undefined)
-			return result.objects[index];
-
-		var object = this._addedMap[objectId];
-
-		if (object !== undefined)
-			return object;
-
-		if (this._parentResult)
-			return this._parentResult.getById (objectId);
-
-		return null;
-	}
-	
-	,getByTagName: function (result, tagName)
-	{	
-		var tags = this._tags[tagName];
-	
-		if (tags)
-		{
-			var arr = new Array (tags.length);
-			
-			for (var i = 0; i < tags.length; i++)
-				arr[i] = result.objects[tags[i]];
-
-			return arr;
-		}
-		
-		return [];
-	}
 
 	/**
 	 * Compiles an XML file.
 	 *
-	 * @path String The XML path
-	 * @dstDocument Document The document used to create the nodes
-	 * @return %true on success, %false othersise
+	 * @param {String} path The XML path
+	 * @return {Boolean} %true on success, %false othersise
 	 */
-	,loadXml: function (path, dstDocument)
+	,compileFile: function (path)
 	{
 		this._path = path;
-		return this.loadFromXmlDoc (Vn.getXml (path), dstDocument);
+		return this.compileDocument (Vn.getXml (path));
 	}
 	
-	,loadFromString: function (xmlString, dstDocument)
+	/**
+	 * Compiles an XML string.
+	 *
+	 * @param {String} xmlString The XML string
+	 * @return {Boolean} %true on success, %false othersise
+	 */
+	,compileString: function (xmlString)
 	{
 		var parser = new DOMParser ();
-		var xmlDoc = parser.parseFromString (xmlString, 'text/xml');
-		return this.loadFromXmlDoc (xmlDoc, dstDocument);
+		var doc = parser.parseFromString (xmlString, 'text/xml');
+		return this.compileDocument (doc);
 	}
 	
-	,loadFromXmlDoc: function (xmlDoc, dstDocument)
+	/**
+	 * Compiles a XML document.
+	 *
+	 * @param {Document} doc The DOM document
+	 * @return {Boolean} %true on success, %false othersise
+	 */
+	,compileDocument: function (doc)
 	{	
-		if (!xmlDoc)
+		if (!doc)
 			return false;
 
-		this._compileInit (dstDocument);
+		this._compileInit ();
 
-		var docElement = xmlDoc.documentElement;
+		var docElement = doc.documentElement;
 		
 		if (docElement.tagName !== 'vn')
 		{
-			this._showError ('Malformed XML');
+			this._showError ('The toplevel tag should be named \'vn\'');
 			this._contexts = null;
 			return false;
 		}
@@ -113,116 +80,81 @@ module.exports = new Class
 	/**
 	 * Compiles a single DOM node.
 	 *
-	 * @path Node The DOM node
-	 * @dstDocument Document The document used to create the nodes
-	 * @return %true on success, %false othersise
+	 * @param {Node} path The DOM node
+	 * @return {Boolean} %true on success, %false othersise
 	 */
-	,loadXmlFromNode: function (node, dstDocument)
+	,compileNode: function (node)
 	{
-		this._compileInit (dstDocument);
+		this._compileInit ();
 		this._mainContext = this._compileNode (node).id;
 		this._compileEnd ();
 		return true;
 	}
 	
-	,load: function ()
+	/**
+	 * Creates a new scope from a compiled XML tree.
+	 * 
+	 * @param {Document} dstDocument The document used to create the nodes
+	 * @param {Object} signalData The object where to bind methods
+	 * @param {Scope} parentScope The parent scope or %null for no parent
+	 * @return {Scope} The created scope
+	 */
+	,load: function (dstDocument, signalData, parentScope, extraObjects)
 	{
 		if (this._contexts === null)
 			return null;
+
+		this._doc = dstDocument || document;
 	
 		var contexts = this._contexts;
 		var len = contexts.length;
 		var objects = new Array (len);
+		var scope = new Scope (this, objects, signalData, parentScope, extraObjects)
 	
 		for (var i = 0; i < len; i++)
 		{
 			var context = contexts[i];
 			
 			if (context.tagName)
-				objects[i] = this.elementInstantiate (context);
+				objects[i] = this.elementInstantiate (context, scope);
 			else if (context.klass)
-				objects[i] = this.objectInstantiate (context);
+				objects[i] = this.objectInstantiate (context, scope);
 			else
-				objects[i] = this.textInstantiate (context);
+				objects[i] = this.textInstantiate (context, scope);
 		}
 		
-		return new BuilderResult (this, objects);
+		return scope;
 	}
 	
-	,link: function (result)
-	{
-		var objects = result.objects;
-	
-		for (var i = this._links.length - 1; i >= 0; i--)
-		{
-			var l = this._links[i];
-			var addedObject = this._addedMap[l.objectId];
-
-			if (addedObject)
-			{
-				if (l.prop)
-					objects[l.context.id][l.prop] = addedObject;
-				else
-					objects[l.context.id].appendChild (addedObject);
-			}
-			else
-				this._showError ('Referenced unexistent object with id \'%s\'',
-					l.objectId);
-		}
-
-		var contexts = this._contexts;
-		for (var i = 0; i < contexts.length; i++)
-		{
-			var context = contexts[i];
-			var object = objects[i];
-
-			if (context.tagName)
-				this.elementLink (context, object, objects, result);
-			else if (context.klass)
-				this.objectLink (context, object, objects, result);
-		}
-	}
-	
-	,_compileInit: function (dstDocument)
+	,_compileInit: function ()
 	{
 		this._path = null;
 		this._tags = {};
 		this._contexts = [];
 		this._contextMap = {};
-		this._links = [];
+		this._objectLinks = [];
 		this._mainContext = null;
-		this._doc = dstDocument ? dstDocument : document;
 	}
 	
 	,_compileEnd: function ()
 	{
-		for (var i = this._links.length - 1; i >= 0; i--)
+		var links = this._objectLinks;
+
+		for (var i = links.length - 1; i >= 0; i--)
 		{
-			var l = this._links[i];
-			var contextId = this._contextMap[l.objectId];
+			var link = links[i];
+			var context = link.context;
+			var contextId = this._contextMap[link.objectId];
 			
-			if (contextId != undefined)
-			{
-				if (l.prop)
-					l.context.objectProps[l.prop] = contextId;
-				else
-					l.context.childs.push (contextId);
-				
-				this._links.splice (i, 1);
-			}
+			if (contextId == undefined)
+				continue;
+
+			if (link.prop)
+				context.objectProps[link.prop] = contextId;
 			else
-			{
-				var object = this._addedMap[l.objectId];
-				
-				if (!object && this._parentResult)
-					object = this._parentResult.getById (l.objectId);
+				context.childs.push (contextId);
 			
-				if (object)
-				{
-					l.context.props[l.prop] = object;
-					this._links.splice (i, 1);
-				}
-			}
+			links.splice (i, 1);
 		}
 	}
 
@@ -230,8 +162,9 @@ module.exports = new Class
 	{
 		var context = null;
 		var tagName = null;
+		var isElement = node.nodeType === Node.ELEMENT_NODE;
 
-		if (node.nodeType === Node.ELEMENT_NODE)
+		if (isElement)
 			tagName = node.tagName.toLowerCase ();
 		else if (node.nodeType !== Node.TEXT_NODE
 		|| /^[\n\r\t]*$/.test (node.textContent))
@@ -244,12 +177,15 @@ module.exports = new Class
 
 		context.id = this._contexts.length;
 
-		if (tagName)
+		if (isElement)
 		{
 			var nodeId = node.getAttribute ('id');
 	
 			if (nodeId)
+			{
 				this._contextMap[nodeId] = context.id;
+				context.nodeId = nodeId;
+			}
 
 			var tags = this._tags[tagName];
 		
@@ -262,25 +198,53 @@ module.exports = new Class
 		this._contexts.push (context);
 		return context;
 	}
-
-	/**
-	 * Creates a text node context.
-	 */
-	,textCompile: function (node, tagName)
-	{
-		if (!tagName)
-			var text = node.textContent;
-		else if (tagName === 't')
-			var text = _(node.firstChild.textContent); 
-		else
-			return null;
-
-		return {text: text};
-	}
 	
-	,textInstantiate: function (context)
+	,link: function (scope)
 	{
-		return this._doc.createTextNode (context.text);
+		var objects = scope.objects;
+		var links = this._objectLinks;
+	
+		for (var i = links.length - 1; i >= 0; i--)
+		{
+			var link = links[i];
+			var object = objects[link.context.id];
+			var objectRef = scope.$(link.objectId);
+
+			if (objectRef == null)
+			{
+				this._showError ('Referenced unexistent object with id \'%s\'',
+					link.objectId);
+				continue;
+			}
+
+			if (link.prop)
+				object[link.prop] = objectRef;
+			else
+				object.appendChild (objectRef);
+		}
+
+		var contexts = this._contexts;
+		for (var i = 0; i < contexts.length; i++)
+		{
+			var context = contexts[i];
+			var object = objects[i];
+
+			if (context.tagName)
+				this.elementLink (context, object, objects, scope);
+			else if (context.klass)
+				this.objectLink (context, object, objects, scope);
+		}
+
+		for (var i = 0; i < contexts.length; i++)
+		{
+			var context = contexts[i];
+			var object = objects[i];
+
+			if (context.tagName)
+				this.elementConnect (context, object, objects, scope);
+			else if (context.klass)
+				this.objectConnect (context, object, objects, scope);
+		}
 	}
 	
 	/**
@@ -295,6 +259,7 @@ module.exports = new Class
 
 		var props = {};
 		var objectProps = {};
+		var funcProps = {};
 		var childs = [];
 		var events = {};
 			
@@ -302,6 +267,7 @@ module.exports = new Class
 			klass: klass,
 			props: props,
 			objectProps: objectProps,
+			funcProps: funcProps,
 			childs: childs,
 			events: events,
 			custom: null
@@ -315,13 +281,8 @@ module.exports = new Class
 			var value = a[i].nodeValue;
 
 			if (this._isEvent (attribute))
-			{
-				var handler = this._getMethod (value)
-				
-				if (handler)
-					events[attribute.substr (3)] = handler;
-			}
-			else if (!/^(id|property)$/.test (attribute))
+				events[attribute.substr (3)] = value;
+			else if (!specialAttrs[attribute])
 			{
 				this.propCompile (context, klass, props,
 					node, attribute, value);
@@ -342,7 +303,7 @@ module.exports = new Class
 			
 			if (childTagName === 'pointer')
 			{
-				this._addLink (context, null, child.getAttribute ('object'));
+				this.objectAddLink (context, null, child.getAttribute ('object'));
 			}
 			else if (childTagName === 'custom')
 			{
@@ -388,6 +349,8 @@ module.exports = new Class
 			return;
 		}
 
+		var propError = false;
+
 		switch (propInfo.type)
 		{
 			case null:
@@ -403,8 +366,7 @@ module.exports = new Class
 				newValue = this._translateValue (value);
 				break;
 			case Function:
-				var method = this._getMethod (value);
-				newValue = method ? method.bind (this.signalData) : null;
+				context.funcProps[propName] = value;
 				break;
 			case Type:
 				newValue = window[value];
@@ -414,26 +376,41 @@ module.exports = new Class
 				newValue = propInfo.enumType[value];
 			else if (propInfo.type instanceof Function)
 				isLink = true;
+			else
+				propError = true;
 		}
 		
 		if (isLink)
-			this._addLink (context, propName, value);
-		else if (newValue !== null && newValue !== undefined)
+			this.objectAddLink (context, propName, value);
+		else if (newValue != null)
 			props[propName] = newValue;
-		else
+		else if (propError)
 			this._showError ('Attribute \'%s\' invalid for tag \'%s\'',
 				attribute, node.tagName);
 	}
 	
-	,objectInstantiate: function (context)
+	,objectAddLink: function (context, prop, objectId)
 	{
-		return new context.klass ();
+		this._objectLinks.push ({
+			 context: context
+			,prop: prop
+			,objectId: objectId
+		});
 	}
 	
-	,objectLink: function (context, object, objects, res)
+	,objectInstantiate: function (context, scope)
 	{
+		var object = new context.klass ();
 		object.setProperties (context.props);
+
+		if (context.nodeId && object instanceof Component)
+			object.htmlId = scope.getHtmlId (context.nodeId);
+
+		return object;
+	}
 	
+	,objectLink: function (context, object, objects, scope)
+	{
 		var objectProps = context.objectProps;
 		for (var prop in objectProps)
 			object[prop] = objects[objectProps[prop]];
@@ -441,13 +418,30 @@ module.exports = new Class
 		var childs = context.childs;
 		for (var i = 0; i < childs.length; i++)
 			object.appendChild (objects[childs[i]]);
+
+		if (context.custom)
+			object.loadXml (scope, context.custom);
+	}
+	
+	,objectConnect: function (context, object, objects, scope)
+	{
+		var funcProps = context.funcProps;
+		for (var prop in funcProps)
+		{
+			var method = scope.getMethod (funcProps[prop], true);
+
+			if (method)
+				object[prop] = method;
+		}
 		
 		var events = context.events;
 		for (var event in events)
-			object.on (event, events[event], this.signalData);
-
-		if (context.custom)
-			object.loadXml (res, context.custom);
+		{
+			var method = scope.getMethod (events[event]);
+			
+			if (method)
+				object.on (event, method, scope.signalData);
+		}
 	}
 	
 	/**
@@ -455,10 +449,10 @@ module.exports = new Class
 	 */
 	,elementCompile: function (node, tagName)
 	{
-		var attributes = {};
+		var props = {};
+		var objectProps = {};
 		var childs = [];
 		var events = {};
-		var handler;
 
 		var a = node.attributes;
 
@@ -468,14 +462,11 @@ module.exports = new Class
 			var value = a[i].nodeValue;
 
 			if (this._isEvent (attribute))
-			{
-				var handler = this._getMethod (value);
-				
-				if (handler)
-					events[attribute.substr (3)] = handler;
-			}
-			else if (attribute !== 'id')
-				attributes[attribute] = this._translateValue (value);
+				events[attribute.substr (3)] = value;
+			else if (objectAttrs[attribute])
+				objectProps[attribute] = value;
+			else if (!specialAttrs[attribute])
+				props[attribute] = this._translateValue (value);
 		}
 
 		var childContext;
@@ -484,42 +475,94 @@ module.exports = new Class
 		if (childNodes)
 		for (var i = 0; i < childNodes.length; i++)
 		if (childContext = this._compileNode (childNodes[i]))
-				childs.push (childContext.id);
+			childs.push (childContext.id);
 
 		return {
 			tagName: tagName,
-			attributes: attributes,
+			props: props,
+			objectProps: objectProps,
 			childs: childs,
 			events: events
 		};
 	}
 	
-	,elementInstantiate: function (context)
+	,elementInstantiate: function (context, scope)
 	{
-		return this._doc.createElement (context.tagName);
+		var object = this._doc.createElement (context.tagName);
+
+		var props = context.props;
+		for (var prop in props)
+			object.setAttribute (prop, props[prop]);
+
+		if (context.nodeId)
+			object.setAttribute ('id', scope.getHtmlId (context.nodeId));
+
+		return object;
 	}
 	
-	,elementLink: function (context, object, objects)
+	,elementLink: function (context, object, objects, scope)
 	{
-		var attributes = context.attributes;
-		for (var attribute in attributes)
-			object.setAttribute (attribute, attributes[attribute]);
+		var props = context.objectProps;
+		for (var prop in props)
+		{
+			var objectValue = scope.$(props[prop]);
+			var htmlId;
+
+			if (objectValue instanceof Component)
+				htmlId = objectValue.htmlId;
+			if (objectValue instanceof Node)
+				htmlId = objectValue.id;
+	
+			object.setAttribute (prop, htmlId);
+		}
 
 		var childs = context.childs;
 		for (var i = 0; i < childs.length; i++)
 		{
 			var child = objects[childs[i]];
 		
-			if (child instanceof Htk.Widget)
+			if (child instanceof Component)
 				child = child.node;
 			if (child instanceof Node)
 				object.appendChild (child);
 		}
-		
+	}
+
+	,elementConnect: function (context, object, objects, scope)
+	{
 		var events = context.events;
 		for (var event in events)
-			object.addEventListener (event,
-				events[event].bind (this.signalData));
+		{
+			var method = scope.getMethod (events[event], true);
+			
+			if (method)
+				object.addEventListener (event, method);
+		}
+	}
+	
+	/**
+	 * Creates a text node context.
+	 */
+	,textCompile: function (node, tagName)
+	{
+		if (!tagName)
+		{
+			var text = node.textContent;
+
+			if (/^[\s]*\\?_.*/.test (text))
+				text = _(text.trim ().substr (1));
+		}
+		else if (tagName === 't')
+			var text = _(node.firstChild.textContent); 
+		else
+			return null;
+
+		return {text: text};
+	}
+	
+	,textInstantiate: function (context)
+	{
+		return this._doc.createTextNode (context.text);
 	}
 	
 	,_showError: function (error)
@@ -532,15 +575,6 @@ module.exports = new Class
 	
 		console.warn.apply (console, logArgs);
 	}
-	
-	,_addLink: function (context, prop, objectId)
-	{
-		this._links.push ({
-			 context: context
-			,prop: prop
-			,objectId: objectId
-		});
-	}
 
 	,_translateValue: function (value)
 	{
@@ -554,19 +588,6 @@ module.exports = new Class
 		return value;		
 	}
 	
-	,_getMethod: function (value)
-	{	
-		if (this.signalData)
-			var method = this.signalData[value];
-		else
-			var method = window[value];
-
-		if (method === undefined)
-			this._showError ('Function \'%s\' not found', value);
-
-		return method;
-	}
-	
 	,_isEvent: function (attribute)
 	{
 		return /^on-\w+/.test (attribute);
@@ -576,16 +597,54 @@ module.exports = new Class
 	{
 		return token.charAt(1).toUpperCase ();
 	}
+	
+	,getMain: function (result)
+	{
+		return result.objects[this._mainContext];
+	}
+	
+	,getById: function (objectId)
+	{
+		return this._contextMap[objectId];
+	}
+	
+	,getByTagName: function (result, tagName)
+	{	
+		var tags = this._tags[tagName];
+	
+		if (tags)
+		{
+			var arr = new Array (tags.length);
+			
+			for (var i = 0; i < tags.length; i++)
+				arr[i] = result.objects[tags[i]];
+
+			return arr;
+		}
+		
+		return [];
+	}
 });
 
-var BuilderResult = new Class
+var scopeUid = 0;
+
+var Scope = new Class
 ({
 	Extends: VnObject
 
-	,initialize: function (builder, objects)
+	,initialize: function (builder, objects, signalData, parentScope, extraObjects)
 	{
 		this.builder = builder;
 		this.objects = objects;
+		this.signalData = signalData;
+		this.parentScope = parentScope;
+		this.uid = ++scopeUid;
+		this.extraObjects = extraObjects;
+
+		if (!signalData && parentScope)
+			this.signalData = parentScope.signalData;
+
+		this.parent ();
 	}
 
 	,getMain: function ()
@@ -593,14 +652,37 @@ var BuilderResult = new Class
 		return this.builder.getMain (this);
 	}
 	
-	,$: function (objectId)
+	/**
+	 * Fetchs an element by it's identifier.
+	 *
+	 * @param {String} id The node identifier
+	 */
+	,$: function (id)
 	{
-		return this.builder.getById (this, objectId);
+		var object;
+		var index = this.builder.getById (id);
+
+		if (index !== undefined)
+			object = this.objects[index];
+		else
+		{
+			object = this.extraObjects[id];
+
+			if (object === undefined && this.parentScope)
+				object = this.parentScope.getById (id);
+		}
+
+		return object ? object : null;
 	}
 	
-	,getById: function (objectId)
+	/**
+	 * Fetchs an element by it's identifier.
+	 *
+	 * @param {String} id The node identifier
+	 */
+	,getById: function (id)
 	{
-		return this.builder.getById (this, objectId);
+		return this.$(id);
 	}
 	
 	,getByTagName: function (tagName)
@@ -612,6 +694,29 @@ var BuilderResult = new Class
 	{
 		this.builder.link (this);
 	}
+
+	,getMethod: function (value, binded)
+	{	
+		if (this.signalData)
+		{
+			var method = this.signalData[value];
+
+			if (method && binded)
+				method = method.bind (this.signalData);
+		}
+		else
+			var method = window[value];
+
+		if (method === undefined)
+			this.builder._showError ('Function \'%s\' not found', value);
+
+		return method;
+	}
+
+	,getHtmlId: function (nodeId)
+	{
+		return 'vn-'+ this.uid +'-'+ nodeId;
+	}
 	
 	,_destroy: function ()
 	{
@@ -619,9 +724,11 @@ var BuilderResult = new Class
 	
 		for (var i = objects.length; i--;)
 		if (objects[i] instanceof VnObject)
+		{
 			objects[i].unref ();
+			objects[i].disconnectByInstance (this.builder.signalData);
+		}
 
 		this.parent ();
 	}
 });
-
diff --git a/js/vn/component.js b/js/vn/component.js
new file mode 100644
index 00000000..d7cc0e95
--- /dev/null
+++ b/js/vn/component.js
@@ -0,0 +1,157 @@
+
+var NodeBuilder = require ('./node-builder');
+
+var nativeEvents = {
+	 click     : 1
+	,mousedown : 1
+	,focusout  : 1
+};
+
+module.exports = new Class
+({
+	Extends: NodeBuilder
+	,Properties:
+	{
+		/**
+		 * Main HTML node that represents the component
+		 */
+		node:
+		{
+			type: Object
+			,get: function ()
+			{
+				this.renderBase ();
+				return this._node;
+			}
+		},
+		/**
+		 * CSS classes to be appendend to the node classes.
+		 */
+		class:
+		{
+			type: String
+			,set: function (x)
+			{
+				this._cssClass = x;
+				this._refreshClass ();
+			}
+			,get: function ()
+			{
+				return this._node.className;
+			}
+		},
+		/**
+		 * The HTML id of the element.
+		 */
+		htmlId:
+		{
+			type: String
+			,set: function (x)
+			{
+				this._htmlId = x;
+
+				if (this._node)
+					this._node.id = x;
+			}
+			,get: function ()
+			{
+				return this._htmlId;
+			}
+		}
+	}
+
+	,_node: null
+	,scope: null
+	
+	,initialize: function (props)
+	{
+		this.doc = document;
+		this.renderBase ();
+		this.parent (props);
+	}
+	
+	,on: function (id, callback, instance)
+	{
+		if (nativeEvents[id])
+			this.node.addEventListener (id,
+				callback.bind (instance, this));
+		else
+			this.parent (id, callback, instance);
+	}
+	
+	,createRoot: function (tagName)
+	{
+		this._node = this.createElement (tagName);
+
+		if (this.htmlId)
+			this._node.id = this.htmlId;
+	
+		return this._node;
+	}
+	
+	,renderBase: function ()
+	{
+		if (this._node)
+			return;
+
+		this.render ();
+		this._refreshClass ();
+	}
+
+	,_refreshClass: function ()
+	{
+		if (this._node && this._cssClass)
+			this._node.className = this._cssClass +' '+ this._node.className;
+	}
+	
+	,remove: function ()
+	{
+		Vn.Node.remove (this._node);
+	}
+	
+	,loadTemplateFromFile: function (path)
+	{
+		var builder = new Vn.Builder ();
+		builder.compileFile (path);
+		this.loadScope (builder);
+	}
+	
+	,loadTemplateFromString: function (xmlString)
+	{
+		var builder = new Vn.Builder ();
+		builder.compileString (xmlString);
+		this.loadScope (builder);
+	}
+	
+	,loadScope: function (builder, parentScope, extraObjects)
+	{
+		var scope = builder.load (this.doc, this, parentScope, extraObjects);
+		this.scope = scope;
+		this._node = this.$('main');
+		scope.link ();
+		return scope;
+	}
+	
+	/**
+	 * Gets an object from the scope associated to this component.
+	 *
+	 * @param {String} id The object identifier
+	 * @return {Object} The object, or %null if not found
+	 */
+	,$: function (id)
+	{
+		if (this.scope)
+			return this.scope.$(id);
+			
+		return null;
+	}
+
+	,_destroy: function ()
+	{
+		if (this.builder)
+			this.builder.unref ();
+
+		this.parent ();
+	}
+});
+
diff --git a/js/vn/iterator.js b/js/vn/iterator.js
index 9d8fb75f..ecd4f8ae 100644
--- a/js/vn/iterator.js
+++ b/js/vn/iterator.js
@@ -78,7 +78,10 @@ module.exports = new Class
 	,rowChanged: function ()
 	{
 		this._rowLock = true;
-		this.params = this._model.getObject (this._row); 
+
+		var row = this._model.getObject (this._row);
+		this.params = row != null ? row : {};
+
 		this._rowLock = false;
 	}
 });
diff --git a/js/htk/node-builder.js b/js/vn/node-builder.js
similarity index 85%
rename from js/htk/node-builder.js
rename to js/vn/node-builder.js
index fa28a1c0..2f7e0955 100644
--- a/js/htk/node-builder.js
+++ b/js/vn/node-builder.js
@@ -1,7 +1,9 @@
 
+var VnObject = require ('./object');
+
 module.exports = new Class
 ({
-	Extends: Vn.Object
+	Extends: VnObject
 
 	,doc: null
 	
@@ -23,4 +25,3 @@ module.exports = new Class
 	
 	,render: function () {}
 });
-
diff --git a/js/vn/object.js b/js/vn/object.js
index fcc0e910..f94ed69b 100644
--- a/js/vn/object.js
+++ b/js/vn/object.js
@@ -71,7 +71,7 @@ module.exports = new Class
 	 * Called from @Vn.Builder when it finds a custom tag as a child of the
 	 * element.
 	 * 
-	 * @param {Vn.Builder} builder The builder instance
+	 * @param {Vn.Scope} scope The scope instance
 	 * @param {Node} node The custom tag child nodes
 	 */
 	,loadXml: function () {}
diff --git a/js/vn/vn.js b/js/vn/vn.js
index fbeb9893..1d096c13 100644
--- a/js/vn/vn.js
+++ b/js/vn/vn.js
@@ -28,7 +28,9 @@ Vn = module.exports = {
 	,Iterator       : require ('./iterator')
 	,Form           : require ('./form')
 	,Node           : require ('./node')
+	,NodeBuilder    : require ('./node-builder')
 	,Builder        : require ('./builder')
+	,Component      : require ('./component')
 	,JsonException  : require ('./json-exception')
 	,JsonConnection : require ('./json-connection')
 
diff --git a/web/app.php b/web/app.php
index 7e34053f..626ce3c4 100644
--- a/web/app.php
+++ b/web/app.php
@@ -72,4 +72,3 @@ class App extends \Vn\Lib\App
 			return parent::getConfigFile ();
 	}
 }
-
diff --git a/web/db-session-handler.php b/web/db-session-handler.php
index 8e421e33..cc53d2ce 100755
--- a/web/db-session-handler.php
+++ b/web/db-session-handler.php
@@ -23,9 +23,8 @@ class DbSessionHandler implements \SessionHandlerInterface
 
 	function read ($sessionId)
 	{
-		$this->db->query ('DO GET_LOCK(#, 10)', [$sessionId]);
 		$sessionData = $this->db->getValue (
-			'SELECT data FROM userSession WHERE ssid = # FOR UPDATE', [$sessionId]);
+			'SELECT data FROM userSession WHERE ssid = #', [$sessionId]);
 		return isset ($sessionData) ? $sessionData : '';
 	}
 
@@ -37,7 +36,6 @@ class DbSessionHandler implements \SessionHandlerInterface
 				ON DUPLICATE KEY UPDATE
 					data = VALUES(data), lastUpdate = VALUES(lastUpdate)',
 			[$sessionId, $sessionData]);
-		$this->db->query ('DO RELEASE_LOCK(#)', [$sessionId]);
 		return TRUE;
 	}
 
diff --git a/web/service.php b/web/service.php
index 0ac7d8de..fb4f23f5 100755
--- a/web/service.php
+++ b/web/service.php
@@ -286,7 +286,7 @@ abstract class Service
 				$version = $package->version;
 			}
 			else
-				$version = "0.0.0";
+				$version = '0.0.0';
 
 			apc_store ("$appName.version", $version);
 		}