TIPS OF WEB: продвинутый альбом с порнушкой

Iv (dembicki@narod.ru)

Спецвыпуск Xakep, номер #028, стр. 028-110-1

TIPSA 1

Обустраивая своего робо-хомяка, ты обязательно наткнешься на вопрос создания инструмента для показа твоих фоток. Можно нахреначить множество хытымыл страничек руками, можно прикрутить на серваке соответствующий скрипт, я же рекомендую флэшовый вариант. Потому что он лучший! Он делается раз и навсегда, не требует больших усилий при выкладке новых фоток. Флэш не вызовет конфликтов и легко контачит с серверным скриптом. И только во флэше можно сделать показ фоток с кучей эффектов, при этом уложившись в 20 кило. Мой знакомый за 15 минут подключил мою флэшку на уже готовый проект с кучей фоток.

TIPSA 2

Всегда юзай принципы ООП! Я вот попробовал обойтись без него - пришлось все сносить и начинать заново. ООП позволяет одну огромную задачу разбить на независимые простые куски, затем связать эти куски воедино и запустить. Это гораздо проще, чем пытаться сделать все одним кирпичом.

TIPSA 3

Сперва надо намутить план. Общая схема такова: 1. цепляем с сервака XML документ с описанием картинок; 2. на основе данных этого XML подгружаем и показываем превьюшки; 3. превьюшкам назначаем на клик подгрузку большой фотки; 4. делаем две кнопки для смены превьюшек.

TIPSA 4

Сразу сделай все необходимое для тестирования. Создай папку, сохрани в нее флэшку, в эту же папку скинь штук 20-30 фоток, сделай превьюшки - уменьшенные копии этих фоток (в нашем примере 50х50 пикселей). И садись за XML. Тебе нужно сделать XML файл "album.xml" по следующему шаблону:

<album>

<pic img="PIC001.JPG" preview="PIC001_1.JPG" comment="комментарий 1" />

...

<pic img="PIC0025.JPG" preview="PIC0025_1.JPG" comment="комментарий 25" />

</album>

Ты только не тормози. Вместо точечек должны быть такие же строки с именами других фоток и их превьюшек. Можешь также прописать любой относительный или абсолютный путь к фоткам, например, так:

<pic img="IMG/PIC001.JPG" preview="IMG/PIC001_1.JPG" comment="комментарий 1" />

Короче, свобода, и ничего не надо перелопачивать заново.

TIPSA 5

Используй готовые кирпичи и не парься! С помощью известной уже тебе функции nextNode обходим дерево. Но перед этим не забудем сказать использовать кодовую страницу системы и игнорировать пробелы в XML. И еще: весь скрипт пишется в руте в первом и единственном кадре.

System.useCodePage = true;

XML.prototype.ignoreWhite = true;

Эту функцию всегда можно найти на http://proto/layer51.com

// (c) Ivan Dembicki, dembicki@narod.ru

XMLNode.prototype.nextNode = function() {

if (this.firstChild != null) {

return this.firstChild;

}

var n = this;

while (n.nextSibling == null) {

if (n.parentNode) {

n = n.parentNode;

} else {

return null;

}

}

return n.nextSibling;

};

Эта часть уже дважды мною описывалась в предыдущих статьях, поэтому кратко: загружаем и проверяем успешную загрузку и валидность XML, потом обойдем все дерево и назначим каждому узлу свой ID для дальнейшего обращения к ним через этот ID. Синтаксис: any_xml[ID]. И запомним на всякий случай в переменной _root.preview_total общее количество фоток, которое юзер может у тебя посмотреть.