ugrás a tartalomhoz

YUI + BASE, oop

toxin · 2006. Nov. 10. (P), 12.41
Mivel nekem nem volt megfelelő, a protochain-en alapuló js-es OOP , YUI-pedig amennyire néztem, erre épül, jó pár órát töltöttem azzal, hogy megtaláljam a megfelelő OOP-s mechanizmust YUI alá. A keresés végeredménye Dean Edwards Base rendszere lett

http://dean.edwards.name/weblog/2006/03/base/

, amit az alább szemléltet ( ennél a Base rendszer jóval többre képes, lásd fenti link) be is mutat

<!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-2" />
<title>YUI + base</title>
<script type="text/javascript" src="lib/YahooUI/yahoo/yahoo-debug.js"></script>
<script type="text/javascript" src="lib/YahooUI/event/event-debug.js"></script>
<script type="text/javascript" src="lib/YahooUI/dom/dom-debug.js"></script>
<script type="text/javascript" src="lib/YahooUI/dragdrop/dragdrop-debug.js"></script>
<script type="text/javascript" src="lib/YahooUI/yui_ext/yui-ext-debug.js"></script>

<script type="text/javascript" src="lib/base.js"></script>
<script type="text/javascript" src="lib/array_methods.js"></script>

<script type="text/javascript">

// define shortcut handlers
var $E  = YAHOO.util.Event;
var $D  = YAHOO.util.Dom;
var $DH = YAHOO.ext.DomHelper;
var $C  = YAHOO.util.Connect;
var $X  = YAHOO.ext;
var  $  = $D.get;

var myLinker = Base.extend({
	// Base inic method
	constructor : function(wrapper){
		this.wrapper = wrapper;	
		// create links	
		for (var i=0;i<=10;i++){
			$DH.append(this.wrapper,{tag:'a',id:'foo_'+i,href:'#',html:'teszt link_'+i})		
		}
		// put click handler to them
		$D.batch($(this.wrapper).getElementsByTagName('a'),function(el){
			$E.on(el,'click',function(){
				alert (this.id);
			})
		})
					
	}
	
});
// window.onload
$E.on(window,'load',function(){
	// create an instance
	new myLinker('wrapper');	
});
			
</script>
<style type="text/css">
	a{
		display : block;
	}
</style>

</head>
<body>
<div id="wrapper"></div>
</body>
</html>
http://toxin.hu/yui/base.html ,

kapcsolódó linkek
YUI extension doksija http://www.jackslocum.com/docs/
YUI dom http://developer.yahoo.com/yui/docs/dom/YAHOO.util.Dom.html

amennyire én néztem tökéletes lesz (ez eddig 1.5 óra volt, este foly. köv), de ha valakinek lenne valamilyen tapasztalata, vagy alternativ megodlása, ill. gondolata megköszönném ha beírná, thx előre is

üdv t

lábjegyzet : lehetett volna hosszaban írni, meg blogként, de sietnem kell be dógozni :)
‹ IE-nek külön CSS tulajdonságok beállítása, hogyan értelmezzem? Tidy szerint valid, W3C Validator szerint nem ›
 ■
1

folyt

toxin · 2006. Nov. 11. (Szo), 19.11
akkor a tudományom jelenlegi állása, szerint a YUI leveshez a következő fűszerek kellenek

YUI extension : http://www.jackslocum.com/yui/index.php
OOP engine: http://dean.edwards.name/weblog/2006/03/base/
cssQuery : http://dean.edwards.name/my/cssQuery/
1.6 js array methods: http://weblabor.hu/blogmarkok/latogatas/15921

és már kész is a keretrendszer :))

<!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-2" />
<title>YUI + base</title>
<script type="text/javascript" src="lib/YahooUI/yahoo/yahoo-debug.js"></script>
<script type="text/javascript" src="lib/YahooUI/event/event-debug.js"></script>
<script type="text/javascript" src="lib/YahooUI/dom/dom-debug.js"></script>
<script type="text/javascript" src="lib/YahooUI/dragdrop/dragdrop-debug.js"></script>
<script type="text/javascript" src="lib/YahooUI/yui_ext/yui-ext-debug.js"></script>

 <script src="lib/cssQuery/cssQuery.js" type="text/javascript"></script>
 <script src="lib/cssQuery/cssQuery-level2.js" type="text/javascript"></script>
 <script src="lib/cssQuery/cssQuery-level3.js" type="text/javascript"></script>
 <script src="lib/cssQuery/cssQuery-standard.js" type="text/javascript"></script>

<script type="text/javascript" src="lib/base.js"></script>
<script type="text/javascript" src="lib/array_methods.js"></script>

<script type="text/javascript">

// define shortcut handlers
var $E  = YAHOO.util.Event;
var $D  = YAHOO.util.Dom;
var $DH = YAHOO.ext.DomHelper;
var $C  = YAHOO.util.Connect;
var $X  = YAHOO.ext;
var  $  = $D.get;
var $$ = cssQuery;

var myTable = Base.extend({		
		
	constructor : function(oAttribs){
		
		this.wrapper		= oAttribs.wrapper;
		this.tableId		= oAttribs.tableId;
		this.tableClass		= oAttribs.tableClass;
		this.tableRowNum	= oAttribs.tableRowNum;
		this.tableColumnNum	= oAttribs.tableColNum;
		
		// create table,tbody
		var table = $DH.append($(this.wrapper),{tag:'table',id:this.tableId,cls:this.tableClass,border:1,children: [{tag: 'tbody'}]}); 
		var tbody = table.firstChild;
				
		// add rows, cols
		for (var row=1;row<=this.tableRowNum;row++)
		{
			var tplRowHandler = new $DH.Template('<tr id="{currentRow}" ><\/tr>');
			var tplColumnHandler = new $DH.Template('<td id="{currentCol}">{columnContent}<\/td>');			
			var currentRow = tplRowHandler.append(tbody,{currentRow:this.tableId+'_'+row});		
			
			for (var col=1;col<=this.tableColumnNum;col++) 
			tplColumnHandler.append(currentRow,{currentCol:this.tableId+'_col_'+col,columnContent:row+'_'+col});			
		}
		
		this.putHandler();						
	},
	
	putHandler : function(){
		// colorize odd cols
		$D.addClass($$('#'+this.tableId+' td:nth-child(odd)'),'testTable_coll_odd');
		
		// put mouseover,mouseout event handler to rows
		$D.batch($$ ('#'+this.tableId+' tr'),function(row){ 
			
			$E.on(row,'mouseover',function(){
				$D.addClass(this,'row_hover');
			});
			
			$E.on(row,'mouseout',function(){
				$D.removeClass(this,'row_hover')				
			})
			
		});	
	}			
});


// window.onload
YAHOO.util.Event.on(window,'load',function(){
	
	// create a test table instance
	new myTable({
		wrapper 	: 'wrapper',
		tableId 	: 'testTable',
		tableClass	: 'testTableClass',
		tableRowNum : 5,
		tableColNum : 25
	});
	
	new myTable({
		wrapper 	: 'wrapper',
		tableId 	: 'testTable2',
		tableClass	: 'testTableClass',
		tableRowNum : 5,
		tableColNum : 25
	});
	
	new myTable({
		wrapper 	: 'wrapper',
		tableId 	: 'testTable3',
		tableClass	: 'testTableClass',
		tableRowNum : 5,
		tableColNum : 25
	})
	
});
			
</script>
<style type="text/css">
	body{
		margin : 0;
		padding : 0;
		background-color : black;
	}
	
		.testTableClass{
			border : 1px solid black;
			background-color : yellow;
			margin : 10px;
		}
		
		.testTable_coll_odd{
			background-color : red;
		}
		
			.row_hover{
				background-color : green !important;
			}

	
</style>

</head>
<body>
<div id="wrapper"></div>
</body>
</html>
http://toxin.hu/yui/base.html
ami már kb. mint a prototype :) (na jó szvsz és halkan, ígymár jobb )

fenti cucc egy táblageneráló komponens YUI alá, YUI ext html sablonozójáról itt lehet olvasni
http://www.jackslocum.com/yui/2006/10/06/domhelper-create-elements-using-dom-html-fragments-or-templates/

üdv t