Click here to Skip to main content
15,885,546 members
Articles / Programming Languages / Javascript

Raiya in Humax v0.3: Extending your JavaScript Classes like Ruby's Mixin

Rate me:
Please Sign up or sign in to vote.
0.00/5 (No votes)
2 Dec 2008CC (ASA 2.5)3 min read 13K   27   3  
Another way to achieve class extensions without using inheritence
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Humax Raiya Programming</title>
		<script type="text/javascript" src="humax.js"></script>
		<script type="text/javascript">					
			$require("hxt.customer");
			$require("hxt.selfcontainedCityFilterRaiya");
			
			var fieldMapRaiya = new Humax.RaiyaFieldMapFacet("HxTest.SelfContainedCityFilterRaiya",
				{"_collection": "_customers"});
				
			HxTest.CustomerCollection.apply(fieldMapRaiya);			
			HxTest.CustomerCollection.include(HxTest.SelfContainedCityFilterRaiya);
			
			var customerCollection = new HxTest.CustomerCollection();
			
			function addButton_click()
			{
				var customer = new HxTest.Customer(document.getElementById("nameField").value, 
					document.getElementById("cityField").value);
				customerCollection.add(customer);
				alert("added");
			}
			
			function filterButton_click()
			{
				showCollection(customerCollection.filter(document.getElementById("filterCityField").value));
			}
			
			function listButton_click()
			{				
				showCollection(customerCollection);
			}
			
			function showCollection(customers)
			{
				var result = document.getElementById("resultPanel");
				var out = "<table border='0' cellspacing='4'>";
				var arrayCust = (!(customers instanceof Array)) ? customers.getCustomers() : customers;
				for(var i = 0; i < arrayCust.length; i++)
				{
					out += "<tr><td>" + arrayCust[i].getName() +
						"</td><td>" + arrayCust[i].getCity() + "</td></tr>";
				}
				out += "</table>"
				result.innerHTML = out;
			}
		</script>
	</head>
	<body>
		<div>
			<table border="0">
				<tr>
					<td>Name</td>
					<td><input id="nameField" type="text" /></td>
				</tr>
				<tr>
					<td>City</td>
					<td><input id="cityField" type="text" /></td>
				</tr>
				<tr>
					<td colspan="2"><input id="addButton" type="button" value="Add" onclick="addButton_click()" /></td>
				</tr>
				<tr>					
					<td><input id="filterCityField" type="text" /></td>
					<td colspan="2"><input id="filterButton" type="button" value="Filter This City" onclick="filterButton_click()" /></td>
				</tr>
				<tr>
					<td colspan="2"><input id="listButton" type="button" value="Show All" onclick="listButton_click()" /></td>
				</tr>
			</table>
		</div>
		<div id="resultPanel"></div>
	</body>
</html>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Creative Commons Attribution-ShareAlike 2.5 License


Written By
Architect Aditi
India India
Working as Architect for Aditi, Chennai, India.

My Website: www.udooz.net

My Blog: www.udooz.net/blog

Comments and Discussions