Underlog - the simple things

Правя първите си плахи стъпки в работата на релси. Темата за руби - как, защо и дали е много дълга, и тема на отделен постинг, но реших да драсна няколко бързи впечатления за prototype библиотеката.

По времето, когато напъплиха prototype, dojo и yui имах чисто изследователски интерес (с елементи на крадене) към тях, но нямах мегдан за употреба. Сега обаче имам няколко крайни апликации на тезгяха, и ща не ща, ми се наложи да добавя щипка аякс и малко rich ui елементи. Доджото ме накара да повърна, след като качих сайта на production и видях как един прост календар бави страницата с близо половин минута. Не мога да повярвам колко блоутната е станала цялата история - дори документацията (изградена с доджо контролите) кара компютъра ми да забива. Наложи се да преправям по среди нощите календара и да го подменям с Yahoo!вския. Който също е зле, но (както казва Боби) нормално зле.

Enter ruby

$ rails my_app

В даден момент ми се случи следния Уй сценарий - таблица (за асп.нет потребителите - грид) със записи, една (в последствие повече) от колонките се редактират на място (за по-бързо). Почесох се замислено, и драснах
rails ajax tutorial в гугъла. След по-малко от половин час бях обзаведен с аяксифицирана табличка, която вади разни съобщения, казва учтиво на потребителя да почака и тем подобни екстри. При това - с няколко реда джаваскрипт, никой от които не копаеше из дебрите на xmlhttprequest-а. Case closed.

Всъщност почти не разбрах, че това се дължи на “вграденото” prototype.js в генерирания скелет. В крайна сметка нямаше и голямо значение, тъй като нещата си работеха. Ей така се включва прототайп в лейаута си (лейаут е нещо като готин master page в asp.net 2.0).

<%= javascript_include_tag “prototype” %>

След няколко дни ми се наложи да пипна още малко красотата по табличката, и реших да си разнообразя живота, използвайки прототайп. Функционалността беше простичка - редовете да имат hover, и да можеш да си ги маркираш/размаркираш цъкайки. Останах доволен от делото си:

function initToggle()
{
	var tables = document.getElementsByClassName(\"listing\");
	var toggle = function (e)
	{
		if (Event.element(e).tagName.toLowerCase() != \"td\") return;
	
		(this.selected ? Element.removeClassName : Element.addClassName)(this, \"selected\");
		this.selected = !this.selected;
	}
	
	var highlight = function (e)
	{
		Element.addClassName(this, 'hover');
	}
	var dim = function (e)
	{
		Element.removeClassName(this, 'hover');
	}
	tables.each(function (table)
	{
		$A(table.getElementsByTagName('tr')).each (function (row)
		{
			row.selected = false;
			Event.observe(row, \"click\", toggle.bind(row));
			Event.observe(row, \"mouseover\", highlight.bind(row));
			Event.observe(row, \"mouseout\", dim.bind(row));
		});
	});
}
	
Event.observe(window, \"load\", initToggle);
	

Чистичко. Може би не най-доброто, но работи. Спести ми будаленската работа да детектвам браузъри и да се разправям с мултикаст евенти, да правя кловжури с прехвърляне на контекст и тн. Един от другите “хакове”, които цвъкнах беше следното парченце код:

$A($('Menu').getElementsByTagName('a')).each(function (link) {
  if (location.href.indexOf(link.href) == 0) link.className = 'selected';
});

Маркира текущата секция в менюто (ако ползвате чисти урлта, което е неизбежно с релсите).

Като цяло съм доволен от коньото - лекичко, не пречи, помага по малко, без да връзва ръцете, обогатява джаваскрипта с конструкции, към които се пристрастяваш след малко руби.

Този пост е публикуван на Сряда, Декември 20th, 2006 в 9:47 pm и е в категория Обща. Можеш да следиш коментарите по rss RSS 2.0. Коментирай, или пиши за това на твоя сайт.