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
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />  
  5. <title>YUI + base</title>  
  6. <script type="text/javascript" src="lib/YahooUI/yahoo/yahoo-debug.js"></script>  
  7. <script type="text/javascript" src="lib/YahooUI/event/event-debug.js"></script>  
  8. <script type="text/javascript" src="lib/YahooUI/dom/dom-debug.js"></script>  
  9. <script type="text/javascript" src="lib/YahooUI/dragdrop/dragdrop-debug.js"></script>  
  10. <script type="text/javascript" src="lib/YahooUI/yui_ext/yui-ext-debug.js"></script>  
  11.   
  12. <script type="text/javascript" src="lib/base.js"></script>  
  13. <script type="text/javascript" src="lib/array_methods.js"></script>  
  14.   
  15. <script type="text/javascript">  
  16.   
  17. // define shortcut handlers  
  18. var $E  = YAHOO.util.Event;  
  19. var $D  = YAHOO.util.Dom;  
  20. var $DH = YAHOO.ext.DomHelper;  
  21. var $C  = YAHOO.util.Connect;  
  22. var $X  = YAHOO.ext;  
  23. var  $  = $D.get;  
  24.   
  25. var myLinker = Base.extend({  
  26.     // Base inic method  
  27.     constructor : function(wrapper){  
  28.         this.wrapper = wrapper;   
  29.         // create links   
  30.         for (var i=0;i<=10;i++){  
  31.             $DH.append(this.wrapper,{tag:'a',id:'foo_'+i,href:'#',html:'teszt link_'+i})          
  32.         }  
  33.         // put click handler to them  
  34.         $D.batch($(this.wrapper).getElementsByTagName('a'),function(el){  
  35.             $E.on(el,'click',function(){  
  36.                 alert (this.id);  
  37.             })  
  38.         })  
  39.                       
  40.     }  
  41.       
  42. });  
  43. // window.onload  
  44. $E.on(window,'load',function(){  
  45.     // create an instance  
  46.     new myLinker('wrapper');      
  47. });  
  48.               
  49. </script>  
  50. <style type="text/css">  
  51.     a{  
  52.         display : block;  
  53.     }  
  54. </style>  
  55.   
  56. </head>  
  57. <body>  
  58. <div id="wrapper"></div>  
  59. </body>  
  60. </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 :))
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />  
  5. <title>YUI + base</title>  
  6. <script type="text/javascript" src="lib/YahooUI/yahoo/yahoo-debug.js"></script>  
  7. <script type="text/javascript" src="lib/YahooUI/event/event-debug.js"></script>  
  8. <script type="text/javascript" src="lib/YahooUI/dom/dom-debug.js"></script>  
  9. <script type="text/javascript" src="lib/YahooUI/dragdrop/dragdrop-debug.js"></script>  
  10. <script type="text/javascript" src="lib/YahooUI/yui_ext/yui-ext-debug.js"></script>  
  11.   
  12.  <script src="lib/cssQuery/cssQuery.js" type="text/javascript"></script>  
  13.  <script src="lib/cssQuery/cssQuery-level2.js" type="text/javascript"></script>  
  14.  <script src="lib/cssQuery/cssQuery-level3.js" type="text/javascript"></script>  
  15.  <script src="lib/cssQuery/cssQuery-standard.js" type="text/javascript"></script>  
  16.   
  17. <script type="text/javascript" src="lib/base.js"></script>  
  18. <script type="text/javascript" src="lib/array_methods.js"></script>  
  19.   
  20. <script type="text/javascript">  
  21.   
  22. // define shortcut handlers  
  23. var $E  = YAHOO.util.Event;  
  24. var $D  = YAHOO.util.Dom;  
  25. var $DH = YAHOO.ext.DomHelper;  
  26. var $C  = YAHOO.util.Connect;  
  27. var $X  = YAHOO.ext;  
  28. var  $  = $D.get;  
  29. var $$ = cssQuery;  
  30.   
  31. var myTable = Base.extend({       
  32.           
  33.     constructor : function(oAttribs){  
  34.           
  35.         this.wrapper        = oAttribs.wrapper;  
  36.         this.tableId        = oAttribs.tableId;  
  37.         this.tableClass     = oAttribs.tableClass;  
  38.         this.tableRowNum    = oAttribs.tableRowNum;  
  39.         this.tableColumnNum = oAttribs.tableColNum;  
  40.           
  41.         // create table,tbody  
  42.         var table = $DH.append($(this.wrapper),{tag:'table',id:this.tableId,cls:this.tableClass,border:1,children: [{tag: 'tbody'}]});   
  43.         var tbody = table.firstChild;  
  44.                   
  45.         // add rows, cols  
  46.         for (var row=1;row<=this.tableRowNum;row++)  
  47.         {  
  48.             var tplRowHandler = new $DH.Template('<tr id="{currentRow}" ><\/tr>');  
  49.             var tplColumnHandler = new $DH.Template('<td id="{currentCol}">{columnContent}<\/td>');           
  50.             var currentRow = tplRowHandler.append(tbody,{currentRow:this.tableId+'_'+row});       
  51.               
  52.             for (var col=1;col<=this.tableColumnNum;col++)   
  53.             tplColumnHandler.append(currentRow,{currentCol:this.tableId+'_col_'+col,columnContent:row+'_'+col});              
  54.         }  
  55.           
  56.         this.putHandler();                        
  57.     },  
  58.       
  59.     putHandler : function(){  
  60.         // colorize odd cols  
  61.         $D.addClass($$('#'+this.tableId+' td:nth-child(odd)'),'testTable_coll_odd');  
  62.           
  63.         // put mouseover,mouseout event handler to rows  
  64.         $D.batch($$ ('#'+this.tableId+' tr'),function(row){   
  65.               
  66.             $E.on(row,'mouseover',function(){  
  67.                 $D.addClass(this,'row_hover');  
  68.             });  
  69.               
  70.             $E.on(row,'mouseout',function(){  
  71.                 $D.removeClass(this,'row_hover')                  
  72.             })  
  73.               
  74.         });   
  75.     }             
  76. });  
  77.   
  78.   
  79. // window.onload  
  80. YAHOO.util.Event.on(window,'load',function(){  
  81.       
  82.     // create a test table instance  
  83.     new myTable({  
  84.         wrapper     : 'wrapper',  
  85.         tableId     : 'testTable',  
  86.         tableClass  : 'testTableClass',  
  87.         tableRowNum : 5,  
  88.         tableColNum : 25  
  89.     });  
  90.       
  91.     new myTable({  
  92.         wrapper     : 'wrapper',  
  93.         tableId     : 'testTable2',  
  94.         tableClass  : 'testTableClass',  
  95.         tableRowNum : 5,  
  96.         tableColNum : 25  
  97.     });  
  98.       
  99.     new myTable({  
  100.         wrapper     : 'wrapper',  
  101.         tableId     : 'testTable3',  
  102.         tableClass  : 'testTableClass',  
  103.         tableRowNum : 5,  
  104.         tableColNum : 25  
  105.     })  
  106.       
  107. });  
  108.               
  109. </script>  
  110. <style type="text/css">  
  111.     body{  
  112.         margin : 0;  
  113.         padding : 0;  
  114.         background-color : black;  
  115.     }  
  116.       
  117.         .testTableClass{  
  118.             border : 1px solid black;  
  119.             background-color : yellow;  
  120.             margin : 10px;  
  121.         }  
  122.           
  123.         .testTable_coll_odd{  
  124.             background-color : red;  
  125.         }  
  126.           
  127.             .row_hover{  
  128.                 background-color : green !important;  
  129.             }  
  130.   
  131.       
  132. </style>  
  133.   
  134. </head>  
  135. <body>  
  136. <div id="wrapper"></div>  
  137. </body>  
  138. </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