ugrás a tartalomhoz

YUI hogy a tanuljuk meg

toxin · 2006. Okt. 7. (Szo), 12.53
most kezdenék nekiállni YUI-nak, letöltöttem szépen mindent a
a http://developer.yahoo.com/yui/#articles

ról, libary + cheatsheets , de innen hogyan tovább, aki ismeri/használja , hogyan tanulta meg, ill. milyen lépésekben (feltételezve a javascript ismeretét) ? (HELP)

üdv t
‹ Lehetséges-e más formátumú linkeket megadni különböző div-ekben CSS-vel? Probléma a HTML oldalak képeinek megjelenítésével Win XP alatt ›
 ■
1

folyt.

toxin · 2006. Okt. 7. (Szo), 12.53
magyarán nem egy widget-et akarok használni, hanem fejleszteni benne stb. (kéne egy kickstart hozzá :) , vagy csak olvassam kezdve a http://developer.yahoo.com/yui/yahoo/ -tól és hajrá :S )

üdv t
2

yiii

toxin · 2006. Okt. 7. (Szo), 13.26
megszültem első class-omat, legyetek rám büszkék :DD

YAHOO.namespace('helloworld');

YAHOO.helloworld = function(message){
	this.message = message;
}

YAHOO.helloworld.prototype.helloMethod = function(){
	alert(this.message);
}

var oMyHello = new YAHOO.helloworld('HELLOWORLD');
oMyHello.helloMethod();
HELLOWORLD

sajátos egy rendszer ez, eseménykezelője tényleg jónak nézki, Aptana, meg kezd használható lenni, utolsó frissítés óta (0.2.5.11578) + szépen támogatja YUI-t .

üdv t :))
3

yiii

Anonymous · 2006. Okt. 7. (Szo), 13.35
Jó dolgokat tud ez a YAHOO, de vigyázni kell, nehogy túlzásokba essünk. Tudom, hogy ez a class csak gyakorlatozás, de soha ne felejtsük el, hogy a fenti eredményt egy alert("HELLOWORLD") paranccsal is megkaphatjuk. :)

Jó kísérletezést!

Gyulus
4

köszi

toxin · 2006. Okt. 7. (Szo), 13.41
helloword-ről és az javascript tudászintről ez a mérvadó cikk

http://dean.edwards.name/weblog/2006/06/levels/

hátha valaki nem ismeri (ill. van a html, és a css-es is)
http://www.456bereastreet.com/archive/200605/levels_of_html_knowledge/
http://friendlybit.com/css/levels-of-css-knowledge/


üdv t :)

ui: (részemről 6 :)lásd fent -5-5 ön állok )
5

Kiindulópontok

kirunews · 2006. Okt. 7. (Szo), 16.23
Én doksit olvasgattam + a forrást + vannak cheatsheetek, amik sokszor segítettek, + a demók forrását stb. Van egyébként egy rakat tutorial, könyvfejezet stb. pl. Jack Slocum blogja a Using the Yahoo! UI library - Beyond the Examples, a Dustin Diaz on Yahoo blog, a YUI saját blogja. És van egy levelezőlista is, ahol ilyesféle kérdéseket minden héten megválaszolnak.
Egyébként szerintem jó a JavaDoc típusú dokumentáció is, de ha nem ismered a JavaDoc típusú dokumentációkat általában, akkor kell egy kis idő, mire rájösz, hogy mi mire vonatkozik.
A tanulás nálam iteratív módon történt: egy konkrét és sok részprobléma megoldásával járó megrendelést kellett teljesíteni és ahogy ez egyes részfeladatok következtek, úgy néztem meg, hogy erre mi is a YUI-válasz. A Sitepointon június elején volt egy cikk: JS World Cup, nekem az volt a kiindulópont.
6

riszpekt

toxin · 2006. Okt. 7. (Szo), 19.35
utóbbit olvastam, a többit köszönöm, kérdés tudsz vmi saját YUI épűlő cuccost mutatni (kódolvashatósága érdekel főleg, hogynézki prototype-al összehasonlítva (nem 'gyári' példát is szeretnék látni, miatt) ) ?

üdv t
7

rövid példa

kirunews · 2006. Okt. 8. (V), 23.02
ez csak egy egyszerű példa, ami használ egy YUI funkciót. A teljes alkalmazás egy workflow-szerkesztő, ez a funkció az egyes objektumok mozgathatóságát teszi lehetővé. Az addEditable egy input-form megjelenítését teszi lehetővé, a registerIntoDB egy objektum adatbázisba menti el a mozgatás utáni pozíciót, a move..-ok pedig az objektumhoz társított egyéb objektumokat viszik el a megfelő pozícióba. Itt a YUI-val kapcsolatos érdekesség, hogy a 'drag and drop' funkcióval felruházott objektumokat egy tömbben tárolom, hogy a tömböt végigjárva könnyen el tudjam venni tőlük ezt a viselkedést.

/**
 * add Drag and Drop event handler to a DIV object. 
 * {@link #addEditable}, onMouseUp event triggers: {@link #moveConnection}, {@link #moveLabel}, {@link #registerIntoDB} 
 * @param {Integer} id - the id of the DIV
 */
function addDragable(id) {
  addEditable(id);
  var oDiv = oCanvas.document.getElementById(id);
  regArray[id] = new oCanvas.YAHOO.util.DD(id);
  regArray[id].onMouseUp = function(e) {
    registerIntoDB(this.id);
    moveConnection(this.id);
    moveLabel(this.id);
  };
}
A következő példa, 'label' nevű objektumot rajzol meg, itt a YUI a class hozzáadását és a pozícionálást végzi (a paramétereket az oLabel nevű value objecttől kapja):

/**
  * @param oLabel object { id, label, x, y }
  */
function drawLabel(oLabel) {
  var oDiv = oCanvas.document.createElement("div");
  var oP = oCanvas.document.getElementById('body');
  oP.appendChild(oDiv);

  oDiv.id = oLabel.id;
  oDiv.style.position = 'absolute';
  oDiv.setAttribute('gType', 'label');
  oDiv.innerHTML = oLabel.label;
  YAHOO.util.Dom.addClass(oDiv, 'label');
  YAHOO.util.Dom.setX(oDiv, oLabel.x);
  YAHOO.util.Dom.setY(oDiv, oLabel.y);
  return oDiv.id;
}
8

thx

toxin · 2006. Okt. 9. (H), 07.53
engem a fentiből, egyenlőre csak a hosszú, namespace zavar (YAHOO.util.Dom), bár ezen amennyire néztem Aptana segít. De még csak most kezdek elmélyedni a témában, remélem köv. héten már értelmeseket is tudok kérdezni :)

üdv t
9

na akkor nekiálltam :)

toxin · 2006. Nov. 2. (Cs), 10.18
áldom magam, hogy megkérdeztem hol lehet művelődni, ugyanis http://www.dustindiaz.com/archives/yahoo/ vmelyik videótutorjában (lelkesen megnéztem mindet), benne volt a YUI OOP-zás (külön hasonlítgatva a proto-val), ami a YUI http://developer.yahoo.com/yui/yahoo/ -val leírtakkal ellentétben, hajaz a prototype-ra ( nagy piros pont YUI-nak :))) ), de azért megkérdezem, hogy akkor ez a standard class-ozás vagy ki mit használ ? :)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Yahoo UI Library Example - foo</title>
<link rel="stylesheet" type="text/css" href="yahooui_sample.css">

<script type="text/javascript" src="lib/YahooUI/yahoo/yahoo.js"></script>
<script type="text/javascript" src="lib/YahooUI/event/event.js"></script>
<script type="text/javascript" src="lib/YahooUI/dom/dom.js"></script>
<script type="text/javascript" src="lib/YahooUI/connection/connection.js"></script>
<script type="text/javascript" src="lib/YahooUI/animation/animation.js"></script>

<script type="text/javascript">

	YAHOO.namespace ('foo');
		
	YAHOO.foo.firstClass = function(){
		// define private vars, use shortcut handling
		var $E = YAHOO.util.Event;
		var $D = YAHOO.util.Dom;
		// I like the prototype shortcut, so :)
		var $ = $D.get;
		return{
			
			// inic our test class		
			init : function(){
				this.container = $('test');
				this.writeContainer(this.container);				
			},
			
			writeContainer : function(){
				// write out
				alert(this.container);
			}				
		};
	}();
	
	// create shortcut
	var $E = YAHOO.util.Event;
	// inic our test class :  YAHOO.foo.firstClass, set scope to YAHOO.foo.firstClass 
	// (default is <ul id='test'>...</ul> )
	$E.onAvailable('test', YAHOO.foo.firstClass.init, YAHOO.foo.firstClass, true);

</script>
</head>
<body id="foo">
	<h1>YUI-t tesztellek </h1>
	<ul id="test">
		<li><a href="#">teszt</a></li>
		<li>ketto</li>
		<li>harom</li>
	</ul>
</body>
</html>
http://toxin.hu/yui/yahooui_sample.htm
szó se róla érdekes a szintaxisa de müxik :)


üdv t

ui: ez is jó http://www.dustindiaz.com/basement/method-method.html
10

yui ajax, példa

toxin · 2006. Nov. 3. (P), 09.36
mai napi, blogbejegyzésem :) YUI ügyben, ajax yui-val, kiindulás volt a http://www.dustindiaz.com/screencast-episode-02/ videója, ebből püföltem át prototype-osban megszokott formára a class-t

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Yahoo UI Library Example - ajax</title>
<link rel="stylesheet" type="text/css" href="yahooui_sample.css">

<script type="text/javascript" src="lib/YahooUI/yahoo/yahoo.js"></script>
<script type="text/javascript" src="lib/YahooUI/event/event.js"></script>
<script type="text/javascript" src="lib/YahooUI/dom/dom.js"></script>
<script type="text/javascript" src="lib/YahooUI/connection/connection.js"></script>
<script type="text/javascript" src="lib/YahooUI/animation/animation.js"></script>

<script type="text/javascript">

	YAHOO.namespace ('ajax');
		
	YAHOO.ajax.test = function(){
		// define private vars, use shortcut handling
		var $E = YAHOO.util.Event;
		var $D = YAHOO.util.Dom;
		var $C = YAHOO.util.Connect;
		// I like the prototype shortcut, so :)
		var $ = $D.get;
		return{
			// inic our test class		
			init : function(){
				// onwhat,event,eventHandler,scope,
				$E.on($('menu'),'click',this.sendReq,this,true);				
			},
			
			sendReq : function(e){
				
				var element = $E.getTarget(e);
				
				var url = './yui_testAjax.php';
				var postData = 'ajax=true&menuItem='+element.innerHTML;
				
				var cObj = $C.asyncRequest('POST',url,
				{
					success : this.onSuccess,
					faliure : this.onFailure,
					scope :  this
				},postData);
			},
			
			onSuccess : function(o) {
				$('resp').innerHTML = o.responseText;
			},
			
			onFaliure : function(o) {
				if (window.console) console.error('connection error')				
			}
	
		};
	}();

	var $E = YAHOO.util.Event;
	$E.onAvailable('menu',YAHOO.ajax.test.init,YAHOO.ajax.test,true);
		
</script>
</head>
<body id="foo">
	<h1>Menü</h1>
	<ul id="menu">
		<li>Alma</li>
		<li>Körte</li>
		<li>Szilva</li>
	</ul>
	<div id="resp"></div>
</body>
</html>
egyenlőre a lib-ben lévő YUI Connection 0.11.pdf cheatseet-et nézve kicsit butább mint a prototype-os párja, de kb. ugyanaz, kérdés YUI-ban nincs bind, ill. bindAsEventListener metódus :S , lásd most is külön paramként kell megadni a scope-ot a Connect class hívásakor, viszont jól kommentezett és struktúrált stb. a YUI kódja (újabb pirospont) abból jöttem rá hogy kell használni :))

http://toxin.hu/yui/yui_testAjax.html (klatty egy menüponton)

érdekes még, az osztályinicializálás elindítása is

$E.onAvailable('menu',YAHOO.ajax.test.init,YAHOO.ajax.test,true);


magyarán adott, DOM elem rendelkezésre állasakor indul

üdv t